@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;">Agendamentos</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-calendar3" style="font-size:2rem; color:var(--primary);"></i>
            <div>
                <h4 class="fw-bold mb-0" style="color:var(--primary);">Agendamentos</h4>
                <span class="text-muted" style="font-size:0.82rem;">Calendário de visitas confirmadas</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> Novo Agendamento
        </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>Confirmados</option>
                    <option>Cancelados</option>
                    <option>Todos</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 agendamento 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">Data Visita <i class="bi bi-arrow-down-up ms-1" style="font-size:0.65rem;"></i></th>
                        <th class="fw-semibold">Horário <i class="bi bi-arrow-down-up ms-1" style="font-size:0.65rem;"></i></th>
                        <th class="fw-semibold text-center">Alunos <i class="bi bi-arrow-down-up ms-1" style="font-size:0.65rem;"></i></th>
                        <th class="fw-semibold text-center">Exclusividade <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
                        $agendamentos = [
                            ['AG20260000001', 'COLÉGIO SANTO AGOSTINHO', '15/06/2026', '08h30', 80,  true,  'confirmado'],
                            ['AG20260000002', 'CENTRO SAPIENS',           '10/07/2026', '08h30', 45,  false, 'confirmado'],
                            ['AG20260000003', 'E.M. DOM PEDRO II',        '22/06/2026', '08h30', 60,  false, 'confirmado'],
                            ['AG20260000004', 'E.E. BARÃO DE MAUÁ',       '18/07/2026', '08h30', 90,  true,  'confirmado'],
                            ['AG20260000005', 'IFET',                     '12/08/2026', '08h30', 70,  false, 'confirmado'],
                            ['AG20260000006', 'UNIVALE TURISMO',          '25/07/2026', '08h30', 200, true,  'cancelado'],
                        ];
                    @endphp

                    @foreach($agendamentos as [$codigo, $cliente, $data, $horario, $alunos, $exclusivo, $status])
                    <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">{{ $data }}</td>
                        <td class="text-muted">{{ $horario }}</td>
                        <td class="text-center text-muted">{{ $alunos }}</td>
                        <td class="text-center">
                            @if($exclusivo)
                                <i class="bi bi-check-circle-fill" style="color:#2e7d32;"></i>
                            @else
                                <i class="bi bi-dash-circle" style="color:#bdbdbd;"></i>
                            @endif
                        </td>
                        <td>
                            @if($status === 'confirmado')
                                <span class="badge rounded-pill px-3 py-1 fw-semibold" style="background:#e8f5e9; color:#2e7d32; font-size:0.75rem;">Confirmado</span>
                            @else
                                <span class="badge rounded-pill px-3 py-1 fw-semibold" style="background:#fce4ec; color:#c62828; font-size:0.75rem;">Cancelado</span>
                            @endif
                        </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: 6 &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