@extends('template')

@section('conteudo')

    <div id="calendario-wrapper" style="opacity: 0; transition: opacity 0.3s ease;">

    {{-- 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;">Calendário</span>
    </nav>

    {{-- Cabeçalho --}}
    <div class="d-flex align-items-start justify-content-between mb-4 flex-wrap gap-3">
        <div class="d-flex align-items-center gap-3">
            <i class="bi bi-calendar-week-fill" style="font-size:2rem; color:var(--primary);"></i>
            <div>
                <h4 class="fw-bold mb-0" style="color:var(--primary);">Calendário</h4>
                <span class="text-muted" style="font-size:0.82rem;">Visualização dos agendamentos</span>
            </div>
        </div>
        <div class="d-flex flex-column align-items-end gap-2">
            {{-- Legenda --}}
            <div class="d-flex gap-2 align-items-center flex-wrap justify-content-end">
                <span class="d-flex align-items-center gap-2 px-3 py-1 rounded-3 fw-semibold"
                      style="background:rgba(40,167,69,.12); color:#1f7a33; font-size:0.78rem;">
                    <span style="width:8px;height:8px;border-radius:50%;background:#28a745;display:inline-block;"></span>
                    Disponível
                </span>
                <span class="d-flex align-items-center gap-2 px-3 py-1 rounded-3 fw-semibold"
                      style="background:rgba(11,51,144,.1); color:var(--primary); font-size:0.78rem;">
                    <span style="width:8px;height:8px;border-radius:50%;background:var(--primary);display:inline-block;"></span>
                    Aprovada
                </span>
                <span class="d-flex align-items-center gap-2 px-3 py-1 rounded-3 fw-semibold"
                      style="background:rgba(255,103,0,.1); color:#cc5200; font-size:0.78rem;">
                    <span style="width:8px;height:8px;border-radius:50%;background:#FF6700;display:inline-block;"></span>
                    Agendada
                </span>
                <span class="d-flex align-items-center gap-2 px-3 py-1 rounded-3 fw-semibold"
                      style="background:rgba(220,53,69,.1); color:#b02a37; font-size:0.78rem;">
                    <span style="width:8px;height:8px;border-radius:50%;background:#dc3545;display:inline-block;"></span>
                    Cancelada
                </span>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm rounded-4">
        <div class="card-body px-4 pt-4 pb-3">
            <div id="calendario-disponibilidade-toolbar" class="d-none cal-toolbar-extra-acoes">
                <button type="button" class="btn btn-sm rounded-3 btn-outline-primary"
                        id="btn-calendario-editar-disponibilidade">
                    <i class="bi bi-check2-square me-1"></i>Marcar disponibilidade
                </button>
                <button type="button" class="btn btn-sm rounded-3 btn-success d-none"
                        id="btn-calendario-salvar-disponibilidade">
                    <i class="bi bi-floppy me-1"></i>Salvar
                </button>
                <button type="button" class="btn btn-sm rounded-3 btn-outline-secondary d-none"
                        id="btn-calendario-cancelar-disponibilidade">
                    Cancelar
                </button>
            </div>
            <div id="calendario-fc"></div>
            <div class="calendario-loading-overlay" aria-hidden="true">
                <div class="calendario-loading-spinner spinner-border" role="status">
                    <span class="visually-hidden">Carregando Agendamentos</span>
                </div>
                <div class="calendario-loading-text">Carregando Agendamentos</div>
            </div>
        </div>
    </div>{{-- #calendario-wrapper --}}

    </div>

    {{-- Modal de detalhe do agendamento --}}
    <div class="modal fade" id="modal-agendamento" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold" id="modal-agendamento-titulo" style="color:var(--primary);">Agendamento</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body pt-2" id="modal-agendamento-corpo"></div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-sm btn-outline-secondary rounded-3" data-bs-dismiss="modal">Fechar</button>
                    <button type="button" class="btn btn-sm rounded-3" id="modal-agendamento-btn-ver"
                            style="background:var(--primary); color:#fff;">Ver inscrição</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Dados SSR para inicialização do calendário --}}
    <script>
        window._calendarioEventosIniciais = @json($eventosIniciais ?? []);
        window._calendarioDisponibilidadesIniciais = @json($disponibilidadesIniciais ?? []);
    </script>

    <script src="{{ asset('js/calendario.js') }}?v={{ filemtime(public_path('js/calendario.js')) }}"></script>

@endsection