@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;">Visitas e solicitações da jornada</span>
            </div>
        </div>
        <button class="btn btn-sm rounded-3" onclick="carregarConteudo('/agendamentos/criar')" 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">Organização <i class="bi bi-arrow-down-up ms-1" style="font-size:0.65rem;"></i></th>
                        <th class="fw-semibold">Data agendada <i class="bi bi-arrow-down-up ms-1" style="font-size:0.65rem;"></i></th>
                        <th class="fw-semibold">Modalidade <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">Unidade <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>
                    @forelse($agendamentos as $agendamento)
                    @php
                        $nomeOrganizacao = $agendamento->organizacao?->nome_publico ?: $agendamento->organizacao?->nome_razao_social ?: '-';
                        $status = $agendamento->estado_individual->value;
                        $statusLabel = $agendamento->estado_individual->label();
                    @endphp
                    <tr>
                        <td>
                            <span class="badge rounded-2 fw-semibold" style="background:var(--primary); font-size:0.72rem;">{{ $agendamento->protocolo }}</span>
                        </td>
                        <td class="fw-medium" style="color:#1a2e5e;">{{ $nomeOrganizacao }}</td>
                        <td class="text-muted">{{ $agendamento->data_agendada?->format('d/m/Y') ?? '-' }}</td>
                        <td class="text-muted">{{ $agendamento->modalidade->value }}</td>
                        <td class="text-center text-muted">{{ $agendamento->qtd_estimada }}</td>
                        <td class="text-center">
                            {{ $agendamento->unidade?->nome ?? '-' }}
                        </td>
                        <td>
                            @if(in_array($status, ['agenda_confirmada', 'agenda_contratada']))
                                <span class="badge rounded-pill px-3 py-1 fw-semibold" style="background:#e8f5e9; color:#2e7d32; font-size:0.75rem;">Confirmado</span>
                            @elseif(in_array($status, ['cancelada', 'recusada', 'expirada']))
                                <span class="badge rounded-pill px-3 py-1 fw-semibold" style="background:#fce4ec; color:#c62828; font-size:0.75rem;">{{ $statusLabel }}</span>
                            @else
                                <span class="badge rounded-pill px-3 py-1 fw-semibold" style="background:#fff3cd; color:#856404; font-size:0.75rem;">{{ $statusLabel }}</span>
                            @endif
                        </td>
                        <td class="text-end">
                            <button class="btn btn-sm border-0 p-1" title="Visualizar" onclick="carregarConteudo('/agendamentos/{{ $agendamento->id }}')" style="color:#0d6efd;">
                                <i class="bi bi-eye-fill"></i>
                            </button>
                            <button class="btn btn-sm border-0 p-1" title="Editar" onclick="carregarConteudo('/agendamentos/{{ $agendamento->id }}/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>
                    @empty
                        <tr><td colspan="8" class="text-center text-muted py-5"><i class="bi bi-calendar-x" style="font-size:2rem; opacity:.3;"></i><p class="mt-2 mb-0" style="font-size:0.85rem;">Nenhum agendamento encontrado.</p></td></tr>
                    @endforelse
                </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: {{ $agendamentos->count() }}</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