@extends('template')

@section('conteudo')

    {{-- Breadcrumb --}}
    <nav class="mb-3" style="font-size:0.82rem;">
        <span class="text-muted">Início</span>
        <span class="text-muted mx-1">/</span>
        <span style="color:var(--primary); font-weight:600;">Pagamentos</span>
    </nav>

    {{-- Cabeçalho --}}
    <div class="d-flex align-items-start justify-content-between mb-4">
        <div class="d-flex align-items-center gap-3">
            <i class="bi bi-credit-card-2-front-fill" style="font-size:2rem; color:var(--primary);"></i>
            <div>
                <h4 class="fw-bold mb-0" style="color:var(--primary);">Pagamentos</h4>
                <span class="text-muted" style="font-size:0.82rem;">Controle de sinais e quitações</span>
            </div>
        </div>
        <button class="btn btn-sm rounded-3" style="border:1.5px solid var(--primary); color:var(--primary); font-size:0.83rem;">
            <i class="bi bi-plus-circle me-1"></i> Registrar Pagamento
        </button>
    </div>

    {{-- Card principal --}}
    <div class="card border-0 shadow-sm rounded-4">
        <div class="card-body px-4 pt-4 pb-2">

            {{-- Filtros --}}
            <div class="d-flex align-items-center gap-3 mb-4">
                <select class="form-select form-select-sm rounded-3" style="max-width:200px;">
                    <option>Todos os status</option>
                    <option>Pendente</option>
                    <option>Pago</option>
                    <option>Atrasado</option>
                    <option>Cancelado</option>
                </select>
                <select class="form-select form-select-sm rounded-3" style="max-width:160px;">
                    <option>Todos os tipos</option>
                    <option>Sinal</option>
                    <option>Quitação</option>
                </select>
                <div class="input-group input-group-sm flex-grow-1">
                    <span class="input-group-text bg-white border-end-0 rounded-start-3">
                        <i class="bi bi-search text-muted"></i>
                    </span>
                    <input type="text" class="form-control border-start-0 rounded-end-3" placeholder="Buscar pagamento ou cliente...">
                </div>
            </div>

            {{-- Tabela --}}
            <table class="table table-hover align-middle mb-0" style="font-size:0.875rem;">
                <thead>
                    <tr class="text-muted" style="font-size:0.8rem; border-bottom:2px solid #eef1fb;">
                        <th class="fw-semibold py-3">Código <i class="bi bi-arrow-down-up ms-1" style="font-size:0.65rem;"></i></th>
                        <th class="fw-semibold">Cliente <i class="bi bi-arrow-down-up ms-1" style="font-size:0.65rem;"></i></th>
                        <th class="fw-semibold">OS <i class="bi bi-arrow-down-up ms-1" style="font-size:0.65rem;"></i></th>
                        <th class="fw-semibold">Tipo <i class="bi bi-arrow-down-up ms-1" style="font-size:0.65rem;"></i></th>
                        <th class="fw-semibold text-end">Valor <i class="bi bi-arrow-down-up ms-1" style="font-size:0.65rem;"></i></th>
                        <th class="fw-semibold">Vencimento <i class="bi bi-arrow-down-up ms-1" style="font-size:0.65rem;"></i></th>
                        <th class="fw-semibold">Status <i class="bi bi-arrow-down-up ms-1" style="font-size:0.65rem;"></i></th>
                        <th class="fw-semibold text-end">Ações</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $pagamentos = [
                            ['PG20260000001', 'COLÉGIO SANTO AGOSTINHO', 'OS20260000001', 'Sinal',     'R$ 9.600,00',  '25/05/2026', 'pago'],
                            ['PG20260000002', 'COLÉGIO SANTO AGOSTINHO', 'OS20260000001', 'Quitação',  'R$ 9.600,00',  '10/06/2026', 'pendente'],
                            ['PG20260000003', 'CENTRO SAPIENS',          'OS20260000002', 'Sinal',     'R$ 5.400,00',  '20/06/2026', 'pendente'],
                            ['PG20260000004', 'CENTRO SAPIENS',          'OS20260000002', 'Quitação',  'R$ 5.400,00',  '05/07/2026', 'pendente'],
                            ['PG20260000005', 'E.M. DOM PEDRO II',       'OS20260000003', 'Sinal',     'R$ 7.200,00',  '01/06/2026', 'pago'],
                            ['PG20260000006', 'E.M. DOM PEDRO II',       'OS20260000003', 'Quitação',  'R$ 7.200,00',  '17/06/2026', 'pago'],
                            ['PG20260000007', 'E.E. BARÃO DE MAUÁ',      'OS20260000004', 'Sinal',     'R$ 10.800,00', '28/06/2026', 'atrasado'],
                            ['PG20260000008', 'IFET',                    'OS20260000005', 'Sinal',     'R$ 8.400,00',  '22/07/2026', 'pendente'],
                        ];
                        $badges = [
                            'pago'     => ['bg' => '#e8f5e9', 'color' => '#2e7d32', 'label' => 'Pago'],
                            'pendente' => ['bg' => '#fff8e1', 'color' => '#f57f17', 'label' => 'Pendente'],
                            'atrasado' => ['bg' => '#fce4ec', 'color' => '#c62828', 'label' => 'Atrasado'],
                            'cancelado'=> ['bg' => '#f3f4f6', 'color' => '#6b7280', 'label' => 'Cancelado'],
                        ];
                        $tipoBadge = [
                            'Sinal'    => ['bg' => '#e3f2fd', 'color' => '#1565c0'],
                            'Quitação' => ['bg' => '#f3e5f5', 'color' => '#6a1b9a'],
                        ];
                    @endphp

                    @foreach($pagamentos as [$codigo, $cliente, $os, $tipo, $valor, $vencimento, $status])
                    @php $badge = $badges[$status]; $tb = $tipoBadge[$tipo]; @endphp
                    <tr>
                        <td>
                            <span class="badge rounded-2 fw-semibold" style="background:var(--primary); font-size:0.72rem;">{{ $codigo }}</span>
                        </td>
                        <td class="fw-medium" style="color:#1a2e5e;">{{ $cliente }}</td>
                        <td class="text-muted" style="font-size:0.82rem;">{{ $os }}</td>
                        <td>
                            <span class="badge rounded-pill px-2 py-1 fw-semibold"
                                  style="background:{{ $tb['bg'] }}; color:{{ $tb['color'] }}; font-size:0.72rem;">
                                {{ $tipo }}
                            </span>
                        </td>
                        <td class="text-end fw-semibold" style="color:#1a2e5e;">{{ $valor }}</td>
                        <td class="text-muted">{{ $vencimento }}</td>
                        <td>
                            <span class="badge rounded-pill px-3 py-1 fw-semibold"
                                  style="background:{{ $badge['bg'] }}; color:{{ $badge['color'] }}; font-size:0.75rem;">
                                {{ $badge['label'] }}
                            </span>
                        </td>
                        <td class="text-end">
                            <button class="btn btn-sm border-0 p-1" title="Visualizar" style="color:#0d6efd;">
                                <i class="bi bi-eye-fill"></i>
                            </button>
                            <button class="btn btn-sm border-0 p-1" title="Editar" style="color:#2e7d32;">
                                <i class="bi bi-pencil-fill"></i>
                            </button>
                            <button class="btn btn-sm border-0 p-1" title="Excluir" style="color:#c62828;">
                                <i class="bi bi-trash-fill"></i>
                            </button>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- Paginação --}}
        <div class="card-footer bg-white border-top d-flex align-items-center justify-content-between rounded-bottom-4 px-4 py-3">
            <small class="text-muted fw-medium">Total de Registros: 8 &nbsp;&nbsp; Página: 1 de 1</small>
            <nav>
                <ul class="pagination pagination-sm mb-0 gap-1">
                    <li class="page-item disabled"><a class="page-link rounded-2 border-0" href="#">«</a></li>
                    <li class="page-item disabled"><a class="page-link rounded-2 border-0" href="#">‹</a></li>
                    <li class="page-item active">
                        <a class="page-link rounded-2 border-0" href="#" style="background:var(--primary);">1</a>
                    </li>
                    <li class="page-item disabled"><a class="page-link rounded-2 border-0" href="#">›</a></li>
                    <li class="page-item disabled"><a class="page-link rounded-2 border-0" href="#">»</a></li>
                </ul>
            </nav>
        </div>
    </div>

@endsection