@extends('index')

@section('titulo', 'Equilibria | Bienvenido')

@section('style')
    <link href="{{ asset('css/custom.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
@endsection



@section('menu')
    @include('MenuLayout.menu_clinica')
@endsection

@section('contenido')
    <div id="kt_app_content_container" class="app-container container-fluid">
        <!--begin::Row-->
        <div class="row g-5 g-xl-10 mb-5 mb-xl-10">

            <!--begin::Col-->
            <div class="col-md-6 col-lg-6 col-xl-6 col-xxl-3 mb-md-5 mb-xl-10">
                <!--begin::Card widget — Estadísticas de citas-->
                <div class="card card-flush h-md-50 mb-5 mb-xl-10">
                    <div class="card-header pt-5">
                        <div class="card-title d-flex flex-column">
                            <div class="d-flex align-items-center">
                                <span id="total-citas-numero" class="fs-2hx fw-bold text-gray-900 me-2 lh-1 ls-n2">—</span>
                            </div>
                            <span id="subtitulo-mes-citas" class="text-gray-500 pt-1 fw-semibold fs-6">Total de consultas registradas</span>
                        </div>
                    </div>
                    <div class="card-body pt-2 pb-4 d-flex flex-wrap align-items-center">
                        <!--begin::Chart dona-->
                        <div class="d-flex flex-center me-5 pt-2">
                            <canvas id="graficaEstatusCitas" width="90" height="90"></canvas>
                        </div>
                        <!--end::Chart dona-->
                        <!--begin::Leyenda dinámica-->
                        <div id="leyenda-estatus" class="d-flex flex-column content-justify-center flex-row-fluid">
                            <div class="text-gray-400 fs-7">Cargando...</div>
                        </div>
                        <!--end::Leyenda dinámica-->
                    </div>
                </div>
                <!--end::Card widget-->

                <!--begin::Card — No Presentados-->
                <div class="card card-flush h-lg-50">
                    <div class="card-header pt-5">
                        <h3 class="card-title text-gray-800">
                            <i class="ki-duotone ki-cross-circle fs-3 text-danger me-2">
                                <span class="path1"></span><span class="path2"></span>
                            </i>
                            No Presentados
                        </h3>
                    </div>
                    <div class="card-body pt-3 pb-3" id="lista-no-presentados">
                        <div class="text-gray-400 fs-7">Cargando...</div>
                    </div>
                </div>
                <!--end::Card No Presentados-->
            </div>
            <!--end::Col-->
            <!--begin::Col-->
            <div class="col-xxl-9">
                <!--begin::Tables widget 16-->
                <div class="card card-flush h-md-100">
                    <!--begin::Header-->
                    <div class="card-header pt-5">
                        <!--begin::Title-->
                        <h3 class="card-title align-items-start flex-column">
                            <span class="card-label fw-bold text-gray-800">Citas pendientes</span>
                            <span class="text-gray-500 mt-1 fw-semibold fs-6">Avg. 69.34% Conv. Rate</span>
                        </h3>
                        <!--end::Title-->
                        <!--begin::Toolbar-->
                        <div class="card-toolbar">
                            <!--begin::Menu-->
                            <button class="btn btn-icon btn-color-gray-500 btn-active-color-primary justify-content-end"
                                    data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end"
                                    data-kt-menu-overflow="true">
                                <i class="ki-duotone ki-dots-square fs-1 text-gray-500 me-n1">
                                    <span class="path1"></span>
                                    <span class="path2"></span>
                                    <span class="path3"></span>
                                    <span class="path4"></span>
                                </i>
                            </button>
                            <!--begin::Menu 2-->
                            <div
                                class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px"
                                data-kt-menu="true">
                                <!--begin::Menu item-->
                                <div class="menu-item px-3">
                                    <div class="menu-content fs-6 text-gray-900 fw-bold px-3 py-4">Quick Actions</div>
                                </div>
                                <!--end::Menu item-->
                                <!--begin::Menu separator-->
                                <div class="separator mb-3 opacity-75"></div>
                                <!--end::Menu separator-->
                                <!--begin::Menu item-->
                                <div class="menu-item px-3">
                                    <a href="#" class="menu-link px-3">New Ticket</a>
                                </div>
                                <!--end::Menu item-->
                                <!--begin::Menu item-->
                                <div class="menu-item px-3">
                                    <a href="#" class="menu-link px-3">New Customer</a>
                                </div>
                                <!--end::Menu item-->
                                <!--begin::Menu item-->
                                <div class="menu-item px-3" data-kt-menu-trigger="hover"
                                     data-kt-menu-placement="right-start">
                                    <!--begin::Menu item-->
                                    <a href="#" class="menu-link px-3">
                                        <span class="menu-title">New Group</span>
                                        <span class="menu-arrow"></span>
                                    </a>
                                    <!--end::Menu item-->
                                    <!--begin::Menu sub-->
                                    <div class="menu-sub menu-sub-dropdown w-175px py-4">
                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <a href="#" class="menu-link px-3">Admin Group</a>
                                        </div>
                                        <!--end::Menu item-->
                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <a href="#" class="menu-link px-3">Staff Group</a>
                                        </div>
                                        <!--end::Menu item-->
                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <a href="#" class="menu-link px-3">Member Group</a>
                                        </div>
                                        <!--end::Menu item-->
                                    </div>
                                    <!--end::Menu sub-->
                                </div>
                                <!--end::Menu item-->
                                <!--begin::Menu item-->
                                <div class="menu-item px-3">
                                    <a href="#" class="menu-link px-3">New Contact</a>
                                </div>
                                <!--end::Menu item-->
                                <!--begin::Menu separator-->
                                <div class="separator mt-3 opacity-75"></div>
                                <!--end::Menu separator-->
                                <!--begin::Menu item-->
                                <div class="menu-item px-3">
                                    <div class="menu-content px-3 py-3">
                                        <a class="btn btn-primary btn-sm px-4" href="#">Generate Reports</a>
                                    </div>
                                </div>
                                <!--end::Menu item-->
                            </div>
                            <!--end::Menu 2-->
                            <!--end::Menu-->
                        </div>
                        <!--end::Toolbar-->
                    </div>
                    <!--end::Header-->
                    <!--begin::Body-->
                    <div class="card-body pt-6">
                        <div id="kt_calendar"></div>

                    </div>
                    <!--end: Card Body-->
                </div>
                <!--end::Tables widget 16-->
            </div>
            <!--end::Col-->
        </div>
        <!--end::Row-->
    </div>


    <!--EMPIEZA LA SECCION DE MODALES-->
    <div class="modal fade" id="kt_modal_add_event" tabindex="-1" data-bs-focus="false"
         aria-modal="true" role="dialog">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <!--begin::Modal content-->
            <div class="modal-content">
                <!--begin::Form-->
                <form class="form fv-plugins-bootstrap5 fv-plugins-framework" action="#" id="kt_modal_add_event_form">
                    <!--begin::Modal header-->
                    <div class="modal-header">
                        <!--begin::Modal title-->
                        <h2 class="fw-bold" data-kt-calendar="title">Add a New Event</h2>
                        <!--end::Modal title-->
                        <!--begin::Close-->
                        <div class="btn btn-icon btn-sm btn-active-icon-primary" id="kt_modal_add_event_close">
                            <i class="ki-duotone ki-cross fs-1">
                                <span class="path1"></span>
                                <span class="path2"></span>
                            </i>
                        </div>
                        <!--end::Close-->
                    </div>
                    <!--end::Modal header-->
                    <!--begin::Modal body-->
                    <div class="modal-body py-10 px-lg-17">
                        <!--begin::Input group-->
                        <div class="fv-row mb-9 fv-plugins-icon-container">
                            <!--begin::Label-->
                            <label class="fs-6 fw-semibold required mb-2">Event Name</label>
                            <!--end::Label-->
                            <!--begin::Input-->
                            <input type="text" class="form-control form-control-solid" placeholder=""
                                   name="calendar_event_name" value="">
                            <!--end::Input-->
                            <div
                                class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div>
                        </div>
                        <!--end::Input group-->
                        <!--begin::Input group-->
                        <div class="fv-row mb-9">
                            <!--begin::Label-->
                            <label class="fs-6 fw-semibold mb-2">Event Description</label>
                            <!--end::Label-->
                            <!--begin::Input-->
                            <input type="text" class="form-control form-control-solid" placeholder=""
                                   name="calendar_event_description">
                            <!--end::Input-->
                        </div>
                        <!--end::Input group-->
                        <!--begin::Input group-->
                        <div class="fv-row mb-9">
                            <!--begin::Label-->
                            <label class="fs-6 fw-semibold mb-2">Event Location</label>
                            <!--end::Label-->
                            <!--begin::Input-->
                            <input type="text" class="form-control form-control-solid" placeholder=""
                                   name="calendar_event_location">
                            <!--end::Input-->
                        </div>
                        <!--end::Input group-->
                        <!--begin::Input group-->
                        <div class="fv-row mb-9">
                            <!--begin::Checkbox-->
                            <label class="form-check form-check-custom form-check-solid">
                                <input class="form-check-input" type="checkbox" value=""
                                       id="kt_calendar_datepicker_allday">
                                <span class="form-check-label fw-semibold"
                                      for="kt_calendar_datepicker_allday">All Day</span>
                            </label>
                            <!--end::Checkbox-->
                        </div>
                        <!--end::Input group-->
                        <!--begin::Input group-->
                        <div class="row row-cols-lg-2 g-10">
                            <div class="col">
                                <div class="fv-row mb-9 fv-plugins-icon-container fv-plugins-bootstrap5-row-valid">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-semibold mb-2 required">Event Start Date</label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <input class="form-control form-control-solid flatpickr-input"
                                           name="calendar_event_start_date" placeholder="Pick a start date"
                                           id="kt_calendar_datepicker_start_date" type="text" readonly="readonly"
                                           value="">
                                    <!--end::Input-->
                                    <div
                                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div>
                                </div>
                            </div>
                            <div class="col d-none" data-kt-calendar="datepicker">
                                <div class="fv-row mb-9">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-semibold mb-2">Event Start Time</label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <input class="form-control form-control-solid flatpickr-input"
                                           name="calendar_event_start_time" placeholder="Pick a start time"
                                           id="kt_calendar_datepicker_start_time" type="text" readonly="readonly">
                                    <!--end::Input-->
                                </div>
                            </div>
                        </div>
                        <!--end::Input group-->
                        <!--begin::Input group-->
                        <div class="row row-cols-lg-2 g-10">
                            <div class="col">
                                <div class="fv-row mb-9 fv-plugins-icon-container fv-plugins-bootstrap5-row-valid">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-semibold mb-2 required">Event End Date</label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <input class="form-control form-control-solid flatpickr-input"
                                           name="calendar_event_end_date" placeholder="Pick a end date"
                                           id="kt_calendar_datepicker_end_date" type="text" readonly="readonly"
                                           value="">
                                    <!--end::Input-->
                                    <div
                                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div>
                                </div>
                            </div>
                            <div class="col d-none" data-kt-calendar="datepicker">
                                <div class="fv-row mb-9">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-semibold mb-2">Event End Time</label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <input class="form-control form-control-solid flatpickr-input"
                                           name="calendar_event_end_time" placeholder="Pick a end time"
                                           id="kt_calendar_datepicker_end_time" type="text" readonly="readonly">
                                    <!--end::Input-->
                                </div>
                            </div>
                        </div>
                        <!--end::Input group-->
                    </div>
                    <!--end::Modal body-->
                    <!--begin::Modal footer-->
                    <div class="modal-footer flex-center">
                        <!--begin::Button-->
                        <button type="reset" id="kt_modal_add_event_cancel" class="btn btn-light me-3">Cancel</button>
                        <!--end::Button-->
                        <!--begin::Button-->
                        <button type="button" id="kt_modal_add_event_submit" class="btn btn-primary">
                            <span class="indicator-label">Submit</span>
                            <span class="indicator-progress">Please wait...
															<span
                                                                class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                        </button>
                        <!--end::Button-->
                    </div>
                    <!--end::Modal footer-->
                </form>
                <!--end::Form-->
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {

            /* =====================================================
               GRÁFICA DE DONA — Estadísticas de citas por estatus
            ===================================================== */
            var graficaInstance = null;

            function cargarEstadisticasCitas() {
                fetch('{{ route("home.estadisticas") }}')
                    .then(function (r) { return r.json(); })
                    .then(function (data) {
                        var total   = data.total || 0;
                        var series  = data.series || [];

                        // Actualizar número total y mes
                        document.getElementById('total-citas-numero').textContent = total;
                        var subtituloEl = document.getElementById('subtitulo-mes-citas');
                        if (subtituloEl && data.mes) subtituloEl.textContent = 'Consultas de ' + data.mes;

                        // Destruir gráfica anterior si existe
                        if (graficaInstance) {
                            graficaInstance.destroy();
                        }

                        var ctx = document.getElementById('graficaEstatusCitas').getContext('2d');

                        var etiquetas = series.map(function (s) { return s.estatus; });
                        var valores   = series.map(function (s) { return s.total; });
                        var colores   = series.map(function (s) { return s.color; });

                        graficaInstance = new Chart(ctx, {
                            type: 'doughnut',
                            data: {
                                labels: etiquetas,
                                datasets: [{
                                    data: valores,
                                    backgroundColor: colores,
                                    borderWidth: 2,
                                    borderColor: '#ffffff',
                                }]
                            },
                            options: {
                                cutout: '72%',
                                plugins: {
                                    legend: { display: false },
                                    tooltip: {
                                        callbacks: {
                                            label: function (ctx) {
                                                var pct = total > 0 ? Math.round((ctx.parsed / total) * 100) : 0;
                                                return ' ' + ctx.parsed + ' (' + pct + '%)';
                                            }
                                        }
                                    }
                                },
                                animation: { duration: 600 }
                            }
                        });

                        // Construir leyenda dinámica
                        var leyendaEl = document.getElementById('leyenda-estatus');
                        leyendaEl.innerHTML = '';

                        series.forEach(function (s, idx) {
                            var pct = total > 0 ? Math.round((s.total / total) * 100) : 0;
                            var fila = document.createElement('div');
                            fila.className = 'd-flex fw-semibold align-items-center' + (idx > 0 ? ' mt-2' : '');
                            fila.innerHTML =
                                '<div class="rounded-2 me-3 flex-shrink-0" style="width:10px;height:10px;background:' + s.color + '"></div>' +
                                '<div class="text-gray-500 flex-grow-1 me-2" style="font-size:0.78rem">' + s.estatus + '</div>' +
                                '<div class="fw-bolder text-gray-700" style="font-size:0.8rem">' + s.total + ' <span class="text-gray-400 fw-normal">(' + pct + '%)</span></div>';
                            leyendaEl.appendChild(fila);
                        });

                        if (series.length === 0) {
                            leyendaEl.innerHTML = '<div class="text-gray-400 fs-7">Sin consultas registradas.</div>';
                        }
                    })
                    .catch(function () {
                        document.getElementById('leyenda-estatus').innerHTML =
                            '<div class="text-danger fs-7">Error al cargar estadísticas.</div>';
                    });
            }

            /* =====================================================
               LISTA — Últimas consultas "No Presentado"
            ===================================================== */
            function cargarNoPresentados() {
                fetch('{{ route("home.noPresentados") }}')
                    .then(function (r) { return r.json(); })
                    .then(function (lista) {
                        var contenedor = document.getElementById('lista-no-presentados');
                        contenedor.innerHTML = '';

                        if (lista.length === 0) {
                            contenedor.innerHTML = '<div class="text-gray-400 fs-7 py-2">Sin registros recientes.</div>';
                            return;
                        }

                        lista.forEach(function (item, idx) {
                            var separador = idx > 0
                                ? '<div class="separator separator-dashed my-2"></div>'
                                : '';
                            var fila = document.createElement('div');
                            fila.innerHTML = separador +
                                '<div class="d-flex align-items-start">' +
                                    '<div class="d-flex flex-column flex-grow-1">' +
                                        '<span class="text-gray-800 fw-semibold fs-7">' + item.paciente + '</span>' +
                                        '<span class="text-gray-500 fs-8">Dr. ' + item.doctor + '</span>' +
                                    '</div>' +
                                    '<div class="text-end">' +
                                        '<span class="text-gray-700 fw-bold fs-8">' + item.fecha + '</span><br>' +
                                        '<span class="text-gray-400 fs-8">' + item.hora + '</span>' +
                                    '</div>' +
                                '</div>';
                            contenedor.appendChild(fila);
                        });
                    })
                    .catch(function () {
                        document.getElementById('lista-no-presentados').innerHTML =
                            '<div class="text-danger fs-7">Error al cargar la lista.</div>';
                    });
            }

            /* =====================================================
               CALENDARIO FullCalendar
            ===================================================== */
            var calendarEl = document.getElementById('kt_calendar');
            var rutaCambiarEstatus = '{{ url("/consultas") }}';
            var rutaReprogramar    = '{{ url("/consultas") }}';
            var rutaHorarios       = '{{ route("cita.horarios") }}';
            var csrfToken          = '{{ csrf_token() }}';

            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                height: 600,
                selectable: true,
                editable: false,
                locale: 'es',

                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },

                events: '{{ route("calendario.eventos") }}',

                eventClick: function (info) {
                    var props    = info.event.extendedProps;
                    var slug     = props.slug_estatus || '';
                    var eventId  = info.event.id;

                    /* Verificar si el evento está dentro del rango editable:
                       mes actual o mes inmediatamente anterior                */
                    var fechaEvento = new Date(info.event.start);
                    var ahora       = new Date();
                    var inicioMesAnterior = new Date(ahora.getFullYear(), ahora.getMonth() - 1, 1);
                    var esEditable  = fechaEvento >= inicioMesAnterior;

                    /* Definir acciones solo si el evento es editable */
                    var acciones = [];
                    if (esEditable) {
                        if (slug === 'activo') {
                            acciones = [
                                { label: 'Iniciar Consulta',     slug: 'en_proceso',    color: '#f59e0b' },
                                { label: 'Dar de Baja',          slug: 'baja',          color: '#dc2626' },
                                { label: 'Marcar Reprogramable', slug: 'reprogramable', color: '#8b5cf6' },
                            ];
                        } else if (slug === 'en_proceso') {
                            acciones = [
                                { label: 'Completar Consulta', slug: 'completado', color: '#22c55e' },
                                { label: 'Dar de Baja',        slug: 'baja',       color: '#dc2626' },
                            ];
                        } else if (slug === 'reprogramable') {
                            /* Reprogramar desde calendario: fecha/hora vía PATCH /reprogramar (no solo estatus). */
                            acciones = [];
                        } else if (slug === 'reprogramado') {
                            acciones = [
                                { label: 'Iniciar Consulta',     slug: 'en_proceso',    color: '#f59e0b' },
                                { label: 'Dar de Baja',          slug: 'baja',          color: '#dc2626' },
                                { label: 'Marcar Reprogramable', slug: 'reprogramable', color: '#8b5cf6' },
                            ];
                        } else if (slug === 'no_presentado') {
                            var horaIni = new Date(info.event.start).getTime();
                            var dh = parseInt(props.duracion_h, 10) || 1;
                            var msFin = info.event.end
                                ? new Date(info.event.end).getTime()
                                : horaIni + dh * 3600000;
                            var dentroGracia = Date.now() <= (msFin + 15 * 60000);

                            acciones = [
                                { label: 'Dar de Baja',          slug: 'baja',          color: '#dc2626' },
                                { label: 'Marcar Reprogramable', slug: 'reprogramable', color: '#8b5cf6' },
                            ];
                            if (dentroGracia) {
                                acciones.unshift({
                                    label: 'Iniciar Consulta',
                                    slug: 'en_proceso',
                                    color: '#f59e0b',
                                });
                            }
                        }
                    }

                    /* Construir botones HTML para SweetAlert2 */
                    var botonesHtml = '';
                    var hayBtns = esEditable && (slug === 'reprogramable' || acciones.length > 0);
                    if (hayBtns) {
                        botonesHtml = '<div class="mt-3 d-flex flex-wrap gap-2 justify-content-center">';
                        if (esEditable && slug === 'reprogramable') {
                            botonesHtml +=
                                '<button type="button" class="btn-reprogramar-cal btn btn-sm fw-semibold" ' +
                                'style="background-color:#14b8a6;color:#fff;border:none;">Reprogramar</button>';
                        }
                        acciones.forEach(function (acc) {
                            botonesHtml +=
                                '<button type="button" class="btn-accion-estatus btn btn-sm fw-semibold" ' +
                                'data-slug="' + acc.slug + '" ' +
                                'data-label="' + acc.label + '" ' +
                                'style="background-color:' + acc.color + ';color:#fff;border:none;">' +
                                acc.label + '</button>';
                        });
                        botonesHtml += '</div>';
                    }

                    Swal.fire({
                        title: info.event.title,
                        html:
                            '<div class="text-start">' +
                            '<p class="mb-1"><strong>Fecha:</strong> ' + info.event.startStr.replace('T', ' ').slice(0, 16) + '</p>' +
                            '<p class="mb-1"><strong>Doctor:</strong> ' + (props.doctor || '—') + '</p>' +
                            '<p class="mb-1"><strong>Tipo:</strong> ' + (props.tipo_consulta || '—') + '</p>' +
                            '<p class="mb-1"><strong>Motivo:</strong> ' + (props.motivo || '—') + '</p>' +
                            '<p class="mb-1"><strong>Estatus:</strong> <span style="font-weight:600">' + (props.estatus || '—') + '</span></p>' +
                            '</div>' +
                            botonesHtml,
                        icon: 'info',
                        showConfirmButton: true,
                        confirmButtonText: 'Cerrar',
                        confirmButtonColor: '#6b7280',
                        didOpen: function () {
                            document.querySelectorAll('.btn-reprogramar-cal').forEach(function (btnRep) {
                                if (btnRep.dataset.bound) return;
                                btnRep.dataset.bound = '1';
                                btnRep.addEventListener('click', function () {
                                    Swal.close();
                                    var tipoIdRaw = props.fk_tipo_consulta;
                                    var tipoId    = tipoIdRaw != null ? String(tipoIdRaw) : '2';
                                    var docRaw    = props.fk_doctor;
                                    var doctorId  = (docRaw != null && docRaw !== '') ? String(docRaw) : '';
                                    var paciente  = (props.paciente || '').trim();
                                    var hoy       = new Date().toISOString().split('T')[0];

                                    Swal.fire({
                                        title: 'Reprogramar Consulta',
                                        html:
                                            '<p class="mb-3 text-start">Paciente: <strong>' + paciente + '</strong></p>' +
                                            '<div class="mb-4">' +
                                                '<label class="form-label fw-semibold text-start d-block mb-1">Nueva fecha</label>' +
                                                '<input type="date" id="swal-cal-nueva-fecha" class="form-control form-control-sm" min="' + hoy + '">' +
                                            '</div>' +
                                            '<div id="swal-cal-hora-wrapper" class="mb-2" style="display:none">' +
                                                '<label class="form-label fw-semibold text-start d-block mb-1">Nueva hora</label>' +
                                                '<select id="swal-cal-nueva-hora" class="form-select form-select-sm">' +
                                                    '<option value="">-- Selecciona hora --</option>' +
                                                '</select>' +
                                                '<div id="swal-cal-cargando-horas" class="text-gray-500 fs-8 mt-1" style="display:none">Cargando horarios...</div>' +
                                                '<div id="swal-cal-sin-horas" class="text-danger fs-8 mt-1" style="display:none">Sin horarios disponibles para esa fecha.</div>' +
                                            '</div>',
                                        showCancelButton: true,
                                        confirmButtonText: 'Guardar',
                                        cancelButtonText: 'Cancelar',
                                        confirmButtonColor: '#14b8a6',
                                        cancelButtonColor: '#6b7280',
                                        didOpen: function () {
                                            var inputFecha  = document.getElementById('swal-cal-nueva-fecha');
                                            var selectHora  = document.getElementById('swal-cal-nueva-hora');
                                            var wrapperHora = document.getElementById('swal-cal-hora-wrapper');
                                            var cargandoEl  = document.getElementById('swal-cal-cargando-horas');
                                            var sinHorasEl  = document.getElementById('swal-cal-sin-horas');

                                            inputFecha.addEventListener('change', function () {
                                                var fecha = inputFecha.value;
                                                if (!fecha) return;

                                                wrapperHora.style.display = 'block';
                                                cargandoEl.style.display = 'block';
                                                sinHorasEl.style.display = 'none';
                                                selectHora.innerHTML = '<option value="">-- Selecciona hora --</option>';

                                                var params = new URLSearchParams({
                                                    fecha: fecha,
                                                    tipo_consulta_id: tipoId,
                                                });
                                                if (doctorId) params.append('doctor_id', doctorId);

                                                fetch(rutaHorarios + '?' + params.toString())
                                                    .then(function (r) { return r.json(); })
                                                    .then(function (data) {
                                                        cargandoEl.style.display = 'none';
                                                        var slots = data.horarios || [];
                                                        if (slots.length === 0) {
                                                            sinHorasEl.style.display = 'block';
                                                            return;
                                                        }
                                                        slots.forEach(function (slot) {
                                                            var opt = document.createElement('option');
                                                            opt.value = slot.valor;
                                                            opt.textContent = slot.etiqueta;
                                                            selectHora.appendChild(opt);
                                                        });
                                                    })
                                                    .catch(function () {
                                                        cargandoEl.style.display = 'none';
                                                        sinHorasEl.style.display = 'block';
                                                    });
                                            });
                                        },
                                        preConfirm: function () {
                                            var fecha = document.getElementById('swal-cal-nueva-fecha').value;
                                            var hora  = document.getElementById('swal-cal-nueva-hora').value;
                                            if (!fecha) {
                                                Swal.showValidationMessage('Debes seleccionar una fecha.');
                                                return false;
                                            }
                                            if (!hora) {
                                                Swal.showValidationMessage('Debes seleccionar una hora.');
                                                return false;
                                            }
                                            return { fecha: fecha, hora: hora };
                                        },
                                    }).then(function (resRep) {
                                        if (! resRep.isConfirmed) return;
                                        var datos = resRep.value;
                                        fetch(rutaReprogramar + '/' + eventId + '/reprogramar', {
                                            method: 'PATCH',
                                            headers: {
                                                'Content-Type': 'application/json',
                                                'X-CSRF-TOKEN': csrfToken,
                                            },
                                            body: JSON.stringify({
                                                nueva_fecha: datos.fecha,
                                                nueva_hora:  datos.hora,
                                            }),
                                        })
                                        .then(function (r) { return r.json(); })
                                        .then(function (data) {
                                            if (data.error) {
                                                Swal.fire('Error', data.error, 'error');
                                                return;
                                            }
                                            Swal.fire({
                                                title: 'Reprogramada',
                                                text: data.mensaje,
                                                icon: 'success',
                                                timer: 1800,
                                                showConfirmButton: false,
                                            });
                                            calendar.refetchEvents();
                                            cargarEstadisticasCitas();
                                            cargarNoPresentados();
                                        })
                                        .catch(function () {
                                            Swal.fire('Error', 'No se pudo conectar con el servidor.', 'error');
                                        });
                                    });
                                });
                            });

                            /* Adjuntar eventos a los botones de acción dentro del modal */
                            document.querySelectorAll('.btn-accion-estatus').forEach(function (btn) {
                                btn.addEventListener('click', function () {
                                    var nuevoSlug  = btn.getAttribute('data-slug');
                                    var etiqueta   = btn.getAttribute('data-label');

                                    Swal.fire({
                                        title: '¿Confirmar acción?',
                                        html: '<p>¿Deseas marcar esta consulta como <strong>' + etiqueta + '</strong>?</p>',
                                        icon: 'question',
                                        showCancelButton: true,
                                        confirmButtonText: 'Sí, confirmar',
                                        cancelButtonText: 'Cancelar',
                                        confirmButtonColor: '#3b82f6',
                                        cancelButtonColor: '#6b7280',
                                    }).then(function (result) {
                                        if (! result.isConfirmed) return;

                                        fetch(rutaCambiarEstatus + '/' + eventId + '/estatus', {
                                            method: 'PATCH',
                                            headers: {
                                                'Content-Type': 'application/json',
                                                'X-CSRF-TOKEN': csrfToken,
                                            },
                                            body: JSON.stringify({ slug: nuevoSlug }),
                                        })
                                        .then(function (r) { return r.json(); })
                                        .then(function (data) {
                                            if (data.error) {
                                                Swal.fire('Error', data.error, 'error');
                                                return;
                                            }
                                            Swal.fire({
                                                title: 'Actualizado',
                                                text: data.mensaje,
                                                icon: 'success',
                                                timer: 1800,
                                                showConfirmButton: false,
                                            });
                                            calendar.refetchEvents();
                                            cargarEstadisticasCitas();
                                            cargarNoPresentados();
                                        })
                                        .catch(function () {
                                            Swal.fire('Error', 'No se pudo conectar con el servidor.', 'error');
                                        });
                                    });
                                });
                            });
                        },
                    });
                },
            });

            calendar.render();

            /* Refrescar calendario, gráfica y lista cada 30 segundos */
            var INTERVALO_MS = 30000;
            setInterval(function () {
                calendar.refetchEvents();
                cargarEstadisticasCitas();
                cargarNoPresentados();
            }, INTERVALO_MS);

            /* Carga inicial */
            cargarEstadisticasCitas();
            cargarNoPresentados();
        });
    </script>
@endsection