@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">
                @php
                    $legendaEstados = [
                        ['label' => 'Disponível', 'cor' => '#28a745'],
                        ['label' => 'Exclusiva', 'cor' => '#6f42c1'],
                        ['label' => 'Consolidada', 'cor' => '#047857'],
                        ['label' => 'Reserva em análise', 'cor' => '#6c757d'],
                        ['label' => 'Reserva confirmada', 'cor' => '#FF6700'],
                        ['label' => 'Agenda confirmada', 'cor' => '#0B3390'],
                        ['label' => 'Agenda contratada', 'cor' => '#1D4ED8'],
                        ['label' => 'Em negociação', 'cor' => '#A16207'],
                        ['label' => 'Atividade realizada', 'cor' => '#0F766E'],
                        ['label' => 'Financeiramente encerrada', 'cor' => '#047857'],
                        ['label' => 'Recusada', 'cor' => '#dc3545'],
                        ['label' => 'Expirada', 'cor' => '#dc3545'],
                        ['label' => 'Cancelada', 'cor' => '#dc3545'],
                    ];
                @endphp
                @foreach($legendaEstados as $estadoLegenda)
                      <span class="d-none align-items-center gap-2 px-3 py-1 rounded-3 fw-semibold"
                          data-legenda-status="{{ $estadoLegenda['label'] }}"
                          style="background:{{ $estadoLegenda['cor'] }}1A; color:{{ $estadoLegenda['cor'] }}; font-size:0.78rem;">
                        <span style="width:8px;height:8px;border-radius:50%;background:{{ $estadoLegenda['cor'] }};display:inline-block;"></span>
                        {{ $estadoLegenda['label'] }}
                    </span>
                @endforeach
            </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 agendamento</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-capacidade-operacional" 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" style="color:var(--primary);">Capacidade da data</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                </div>
                <div class="modal-body pt-2">
                    <p class="text-muted small mb-3" id="modal-capacidade-data"></p>
                    <p class="text-muted small mb-3">Defina quantos alunos esta data comporta para calcular as vagas disponíveis.</p>
                    <label class="form-label fw-semibold" for="modal-capacidade-valor">Capacidade máxima</label>
                    <input type="number" class="form-control" id="modal-capacidade-valor" min="1" step="1" required>
                    <div class="d-flex gap-3 mt-3 small text-muted">
                        <span>Ocupação: <strong id="modal-capacidade-ocupacao">0</strong></span>
                        <span>Vagas após alteração: <strong id="modal-capacidade-vagas">0</strong></span>
                    </div>
                </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">Cancelar</button>
                    <button type="button" class="btn btn-sm rounded-3 text-white" id="btn-modal-capacidade-salvar" style="background:var(--primary);">
                        <i class="bi bi-floppy me-1"></i>Salvar capacidade
                    </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