@php
$title = 'Pagamentos';
@endphp

<div>
    <nav aria-label="breadcrumb" class="mb-2" style="margin-top: 10px;">
        <ol class="breadcrumb bg-transparent px-0 py-1 mb-1" style="font-size: 0.98rem;">
            <li class="breadcrumb-item"><a href="/" class="text-decoration-none text-secondary">Início</a></li>
            <li class="breadcrumb-item active text-dark" aria-current="page">Pagamentos</li>
        </ol>
    </nav>
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="fw-bold mb-0" style="font-size:2.1rem; letter-spacing:1px;">
                <i class="bi bi-credit-card me-2 text-primary"></i>Pagamentos
            </h1>
            <span class="text-muted small">Gerencie os pagamentos</span>
        </div>
        <div>
            <button type="button" class="btn btn-sm btn-outline-primary" onclick="carregarConteudo(`{{ route('pagamentos.create') }}`)">
                <i class="bi bi-plus-circle me-2"></i>Novo Pagamento
            </button>
        </div>
    </div>
    <div class="card shadow border-0">
        <div class="card-body">
            <div class="filter-section mb-4">
                <div class="row">
                    <div class="col-md-4 mb-2">
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-search"></i></span>
                            <input type="text" class="form-control" id="buscarPagamento" placeholder="Buscar pagamento...">
                        </div>
                    </div>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-hover table-fixed-column" id="tabelaPagamentos">
                    <thead>
                        <tr>
                            <th class="sticky-col">ID</th>
                            <th>Cliente</th>
                            <th>Valor</th>
                            <th>Forma de Pagamento</th>
                            <th>Status</th>
                            <th>Data Vencimento</th>
                            <th>Data Pagamento</th>
                            <th>Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($pagamentos ?? [] as $pagamento)
                            <tr>
                                <td class="fw-semibold">#{{ $pagamento->id ?? '001' }}</td>
                                <td>{{ $pagamento->cliente_nome ?? 'Cliente Exemplo' }}</td>
                                <td>R$ {{ number_format($pagamento->valor ?? 1500.00, 2, ',', '.') }}</td>
                                <td>
                                    <span class="badge bg-info">{{ $pagamento->forma_pagamento ?? 'Cartão de Crédito' }}</span>
                                </td>
                                <td>
                                    @php
                                        $status = $pagamento->status ?? 'PENDENTE';
                                        $badgeClass = match($status) {
                                            'PAGO' => 'success',
                                            'PENDENTE' => 'warning',
                                            'VENCIDO' => 'danger',
                                            'CANCELADO' => 'secondary',
                                            default => 'secondary'
                                        };
                                    @endphp
                                    <span class="badge bg-{{ $badgeClass }}">{{ $status }}</span>
                                </td>
                                <td>{{ isset($pagamento->data_vencimento) ? \Carbon\Carbon::parse($pagamento->data_vencimento)->format('d/m/Y') : '15/07/2025' }}</td>
                                <td>{{ isset($pagamento->data_pagamento) ? \Carbon\Carbon::parse($pagamento->data_pagamento)->format('d/m/Y') : '-' }}</td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-sm btn-outline-primary" onclick="carregarConteudo(`{{ route('pagamentos.show', $pagamento->id ?? 1) }}`)" title="Visualizar">
                                            <i class="bi bi-eye"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-warning" onclick="carregarConteudo(`{{ route('pagamentos.edit', $pagamento->id ?? 1) }}`)" title="Editar">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-danger" onclick="confirmarExclusao(`{{ $pagamento->id ?? 1 }}`)" title="Excluir">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center py-4 text-muted">
                                    <i class="bi bi-inbox fs-1 d-block mb-2"></i>
                                    Nenhum pagamento cadastrado ainda.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Paginação Profissional --}}
            <x-pagination :items="$pagamentos" :baseUrl="route('pagamentos.list')" />
        </div>
    </div>
</div>