@extends('layouts.app', ['topbar' => true, 'navbar' => false])

@section('title', 'Agenda Médica')

@section('content')
    <div class="px-6 py-4">
        <h2 class="text-2xl font-bold mb-4">Agenda del día</h2>

        {{-- Filtros --}}
        <div class="flex flex-wrap gap-4 mb-6">

            <button onclick="abrirModalCrearCita()"
                class="absolute top-4 left-4 px-5 py-2 bg-sky-700 text-white rounded shadow hover:bg-sky-800 z-50">
                Dar Cita</button>

            <input type="date" id="filtroFecha" value="{{ $fecha }}" class="border px-3 py-2 rounded">
            <select id="filtroEquipo" class="border px-3 py-2 rounded">
                <option value="">Todos los equipos</option>
                @foreach ($equipos as $equipo)
                    <option value="{{ $equipo->id }}" {{ $equipo_id == $equipo->id ? 'selected' : '' }}>
                        {{ $equipo->nombre }}
                    </option>
                @endforeach
            </select>
        </div>

        {{-- FullCalendar --}}
        <div id='calendar'></div>

        {{-- Modal de cita --}}
        @include('modales.modal_crear_cita_clinica')
    </div>

@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const calendarEl = document.getElementById('calendar');
            const fechaInput = document.getElementById('filtroFecha');
            const equipoInput = document.getElementById('filtroEquipo');

            function construirUrl() {
                const baseUrl = `{{ route('agenda.eventos') }}`;
                const fecha = fechaInput.value;
                const equipo = equipoInput.value;
                const url = `${baseUrl}?fecha=${encodeURIComponent(fecha)}&equipo_id=${encodeURIComponent(equipo)}`;
                console.log('🛰️ URL construida:', url);
                return url;
            }

            let calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'listDay',
                initialDate: fechaInput.value,
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'listDay,timeGridDay,timeGridWeek'
                },
                events: function(fetchInfo, successCallback, failureCallback) {
                    const url = construirUrl();
                    fetch(url)
                        .then(res => res.json())
                        .then(data => {
                            console.log('📦 Eventos recibidos:', data);
                            successCallback(data);
                        })
                        .catch(error => {
                            console.error('❌ Error cargando eventos:', error);
                            failureCallback(error);
                        });
                },
                eventClick: function(arg) {
                    console.log('🖱️ Evento clickeado:', arg.event);
                }
            });

            calendar.render();

            fechaInput.addEventListener('change', () => {
                calendar.gotoDate(fechaInput.value);
                recargarEventos();
            });

            equipoInput.addEventListener('change', () => {
                recargarEventos();
            });

            function recargarEventos() {
                const nuevaUrl = construirUrl();
                console.log('🔁 Recargando eventos desde:', nuevaUrl);
                calendar.refetchEvents();
            }
        });
    </script>
    <script>
        function abrirModalCrearCita() {
            const modal = document.getElementById('modalCrearCita');
            document.getElementById('modalCrearCita').classList.remove('hidden');

            setTimeout(() => {
                // Destruir si ya está inicializado (evita duplicación)
                if ($.fn.select2 && $('#prestacion_id').hasClass('select2-hidden-accessible')) {
                    $('#prestacion_id').select2('destroy');
                }

                // Reiniciar select2 ya con el modal visible
                $('#prestacion_id').select2({
                    placeholder: "Seleccione una prestación",
                    allowClear: true,
                    width: '100%'
                });
            }, 100); // espera a que el dialog esté renderizado
        }
    </script>
@endpush