@extends('layout.base')
@section('title')
@section('style')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        .exp-card {
            border-radius: 12px;
            padding: 15px;
            background: #fff;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
            transition: 0.2s ease-in-out;
            width: 32%;
            /* Para que quepan 3 por fila */
            display: inline-block;
            vertical-align: top;
            margin-right: 1%;
        }

        .exp-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25);
        }

        .exp-thumb {
            width: 90px;
            height: 90px;
            object-fit: cover;
            border-radius: 50%;
            border: 2px solid #ddd;
        }

        .info-label {
            font-weight: bold;
            font-size: 16px;
        }

        .w-65 {
            width: 65%;
        }
    </style>
    @parent
@endsection

@section('container')


    <div class="card card-body py-3" style="border-radius: 30px;">
        <div class="row align-items-center">
            <div class="col-10">
                <div class="d-sm-flex align-items-center justify-space-between">
                    <h4 class="mb-4 mb-md-0 card-title">
                        Información de la cita:
                        @if ($detalle->estado == 1)
                            <span class="badge text-bg-secondary">Ingresada</span>
                        @elseif($detalle->estado == 2)
                            <span class="badge text-bg-info">Reagendada</span>
                        @elseif($detalle->estado == 3)
                            <span class="badge text-bg-danger">Cancelada</span>
                        @elseif($detalle->estado == 4)
                            <span class="badge text-bg-success">Completada</span>
                        @endif
                    </h4>
                </div>
            </div>

            <div class="col-2 text-end">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item d-flex align-items-center">
                            <a class="text-muted text-decoration-none d-flex" href="{{ route('dashboard') }}">
                                <iconify-icon icon="solar:home-2-line-duotone" class="fs-6"></iconify-icon>
                            </a>
                        </li>
                        <li class="breadcrumb-item" aria-current="page">
                            <span class="badge fw-medium fs-2 bg-primary-subtle text-primary">
                                Cita # {{ $detalle->id_cita }}
                            </span>
                        </li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <!-- Derecha: Panel con tabs personales (incluye domicilio) / expedientes + agregar expediente -->
        <div class="col-lg-12 @if (in_array($detalle->estado, [2, 3, 4])) d-none @endif">
            <div class="card shadow-none" style="border-radius: 40px;">
                <div class="card-body" style="padding: 18px;">
                    <h5 class="mb-3">Información del solicitante</h5>

                    <!-- Tabs -->
                    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                        <li class="nav-item me-1" role="presentation">
                            <button class="nav-link active" id="pills-datos-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-datos" type="button" role="tab">Datos del Cliente</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-expedientes-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-expedientes" type="button" role="tab">Expedientes</button>
                        </li>
                    </ul>

                    <div class="tab-content tab-right" id="pills-tabContent">
                        <!-- Mis datos (incluye domicilio) -->
                        <div class="tab-pane fade show active" id="pills-datos" role="tabpanel">
                            <div class="exp-card mb-3">
                                <div class="row g-2">
                                    <!-- Usuario -->
                                    <div class="col-12">
                                        <div><span class="info-label">Nombre</span></div>
                                        <div class="info-value mb-2">{{ $detalle->nombres ?? ($detalle->nombre ?? '—') }}
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div><span class="info-label">Teléfono</span></div>
                                        <div class="info-value mb-2">{{ $detalle->telefono ?? '—' }}</div>
                                    </div>

                                    <div class="col-md-6">
                                        <div><span class="info-label">Correo</span></div>
                                        <div class="info-value mb-2">{{ $detalle->correo ?? '—' }}</div>
                                    </div>

                                    <div class="col-12">
                                        <hr>
                                        <div><span class="info-label">Domicilio</span></div>

                                        @php
                                            // armar dirección compacta
                                            $calle = $detalle->calle ?? '';
                                            $num_ext = $detalle->numero_exterior ?? ($detalle->numero_externo ?? '');
                                            $num_int = $detalle->numero_interior ?? '';
                                            $colonia = $detalle->colonia ?? '';
                                            $municipio = $detalle->municipio ?? '';
                                            $cp = $detalle->cp ?? ($detalle->codigo_postal ?? '');
                                            $estado_nombre = $detalle->estado ?? '';
                                            $pais = $detalle->pais ?? '';
                                            $direccionParts = array_filter([
                                                $calle ? $calle . ($num_ext ? ' #' . $num_ext : '') : null,
                                                $num_int ? 'Int. ' . $num_int : null,
                                                $colonia ?: null,
                                                $municipio ?: null,
                                                $cp ? 'CP ' . $cp : null,
                                                $estado_nombre ?: null,
                                                $pais ?: null,
                                            ]);
                                            $direccionCompleta = $direccionParts
                                                ? implode(', ', $direccionParts)
                                                : null;
                                        @endphp

                                        <div class="info-value mb-2">{{ $direccionCompleta ?? 'Sin domicilio registrado' }}
                                        </div>
                                    </div>

                                    @if (!empty($detalle->colonia) || !empty($detalle->cp) || !empty($detalle->municipio))
                                        <div class="col-12">
                                            <div class="row g-2">
                                                @if (!empty($detalle->colonia))
                                                    <div class="col-md-4">
                                                        <div><span class="info-label">Colonia</span></div>
                                                        <div class="info-value">{{ $detalle->colonia }}</div>
                                                    </div>
                                                @endif

                                                @if (!empty($detalle->municipio))
                                                    <div class="col-md-4">
                                                        <div><span class="info-label">Municipio</span></div>
                                                        <div class="info-value">{{ $detalle->municipio }}</div>
                                                    </div>
                                                @endif

                                                @if (!empty($detalle->cp))
                                                    <div class="col-md-4">
                                                        <div><span class="info-label">Código postal</span></div>
                                                        <div class="info-value">{{ $detalle->cp }}</div>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    @endif

                                    <div class="col-12">
                                        <hr>
                                        <div class="row g-2">
                                            <div class="col-md-6">
                                                <div><span class="info-label">Tipo de servicio</span></div>
                                                <div class="info-value mb-2">
                                                    {{ $detalle->servicio ?? ($detalle->id_servicio ?? '—') }}</div>
                                            </div>

                                            <div class="col-md-6">
                                                <div><span class="info-label">Descripción</span></div>
                                                <div class="info-value mb-2">{{ $detalle->descripcion ?? '—' }}</div>
                                            </div>

                                            <div class="col-md-4">
                                                <div><span class="info-label">Fecha de cita</span></div>
                                                <div class="info-value mb-2">
                                                    {{ isset($detalle->fecha) ? \Carbon\Carbon::parse($detalle->fecha)->format('d/m/Y') : '—' }}
                                                </div>
                                            </div>

                                            <div class="col-md-4">
                                                <div><span class="info-label">Hora</span></div>
                                                <div class="info-value mb-2">
                                                    {{ isset($detalle->hora) ? \Carbon\Carbon::parse($detalle->hora)->format('h:i A') : '—' }}
                                                </div>
                                            </div>

                                            <div class="col-md-4">
                                                <div><span class="info-label">Folio cita</span></div>
                                                <div class="info-value mb-2">{{ $detalle->id_cita ?? '—' }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <!-- Expedientes -->
                        <div class="tab-pane fade" id="pills-expedientes" role="tabpanel">
                            <div class="d-flex justify-content-start align-items-center mb-2">
                                <h6 class="mb-0">Mascotas</h6> &nbsp;
                                <button class="btn btn-sm btn-outline-success" data-bs-toggle="modal"
                                    data-bs-target="#modalAgregarExpediente" id="btn-add-exp">
                                    <iconify-icon icon="mdi:plus" width="18" height="18"></iconify-icon> Agregar
                                </button>
                            </div>

                            <div style="max-height: 320px; overflow-y: auto;">
                                <div id="expedientes-list" class="expediente-list d-flex flex-wrap gap-2">

                                    @if (isset($expedientes) && $expedientes->count())
                                        @foreach ($expedientes as $exp)
                                            <div class="exp-card mb-3">

                                                {{-- IMAGEN (CIRCULAR) --}}
                                                @php
                                                    $imgUrl = null;
                                                    if (!empty($exp->imagen)) {
                                                        $imgUrl =
                                                            strpos($exp->imagen, 'http') === 0
                                                                ? $exp->imagen
                                                                : (Storage::exists($exp->imagen)
                                                                    ? Storage::url($exp->imagen)
                                                                    : asset($exp->imagen));
                                                    }
                                                @endphp

                                                <div class="text-center mb-2">
                                                    <img src="https://spotpetinsurance.ca/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fm5ehn3s5t7ec%2F5R0yZ3oHNpb3cD8acHJNcA%2F5a92191728af78c9f0161e6dbf833fe2%2FPomeranian_Price.webp&w=1200&q=75"
                                                        class="exp-thumb" alt="{{ $exp->nombre_mascota }}"
                                                        width="20%">
                                                </div>

                                                {{-- DATOS --}}
                                                <div class="text-center">
                                                    <div class="info-label">{{ $exp->nombre_mascota ?? 'Sin nombre' }}
                                                    </div>
                                                    <div class="info-value small">
                                                        {{ $exp->especie ?? '—' }} · {{ $exp->raza ?? '—' }}
                                                    </div>

                                                    <div class="mt-2">
                                                        <small class="text-muted">Estado: </small>
                                                        <span
                                                            class="info-value">{{ $exp->estado_expediente ?? '—' }}</span>
                                                    </div>
                                                </div>

                                                {{-- BOTÓN ABAJO DENTRO DE LA CARD --}}
                                                {{--<div class="mt-3 text-center">
                                                    <a href="" class="btn btn-sm btn-outline-success w-65">
                                                        Ver
                                                    </a>
                                                </div>--}}

                                            </div>
                                        @endforeach
                                    @else
                                        <div class="empty">No hay expedientes registrados.</div>
                                    @endif

                                </div>
                            </div>

                        </div>
                    </div>
                </div> <!-- card-body -->
            </div> <!-- card -->
        </div> <!-- col derecha -->
    </div>


    <!-- Modal: Agregar / Nuevo Expediente -->
    <div class="modal fade" id="modalAgregarExpediente" tabindex="-1" aria-labelledby="modalAgregarExpedienteLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <form id="formAgregarExpediente" action="{{ route('guardarExpediente') }}" method="POST"
                enctype="multipart/form-data" class="modal-content" novalidate>
                @csrf
                <input type="hidden" name="id_usuario" id="exp_id_usuario" value="{{ $detalle->id_usuario }}">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalAgregarExpedienteLabel">Agregar expediente de la mascota</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Nombre de la mascota</label>
                            <input type="text" name="nombre_mascota" class="form-control" placeholder="Ej. Pingu"
                                required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Especie</label>
                            <input type="text" name="especie" class="form-control" placeholder="Perro, Gato..."
                                required>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Raza</label>
                            <input type="text" name="raza" class="form-control" placeholder="Ej. Husky">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Edad</label>
                            <input type="text" name="edad" class="form-control" placeholder="Ej. 2 años">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Sexo</label>
                            <select name="sexo" class="form-select">
                                <option value="">Selecciona</option>
                                <option value="M">Macho</option>
                                <option value="H">Hembra</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Peso (kg)</label>
                            <input type="number" step="0.1" name="peso" class="form-control"
                                placeholder="Ej. 7.5">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Propietario</label>
                            <input type="text" name="propietario" id="exp_propietario" class="form-control"
                                value="{{ $detalle->nombres }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Teléfono</label>
                            <input type="text" name="telefono" id="exp_telefono" class="form-control"
                                value="{{ $detalle->telefono }}">
                        </div>

                        <div class="col-12">
                            <label class="form-label">Domicilio</label>
                            <input type="text" name="domicilio" id="exp_domicilio" class="form-control"
                                value="{{ $direccionCompleta }}">
                        </div>

                        <div class="col-12">
                            <label class="form-label">Notas / Observaciones</label>
                            <textarea name="notas" class="form-control" rows="3" placeholder="Observaciones clínicas, historial, etc."></textarea>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Subir imagen (opcional)</label>
                            <input type="file" name="imagen" class="form-control">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Estado inicial</label>
                            <select name="estado_expediente" class="form-select">
                                <option value="activo">Activo</option>
                                <option value="inactivo">Inactivo</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-outline-success">Guardar expediente</button>
                </div>
            </form>
        </div>
    </div>





@endsection


@section('scripts')
    @parent

    <script>
        $('#formAgregarExpediente').on('submit', function(e) {
            e.preventDefault();

            let form = $(this);
            let formData = new FormData(this);

            // Lista de campos obligatorios
            let obligatorios = [
                'nombre_mascota',
                'especie',
                'propietario'
            ];

            let valido = true;

            // Validación visual + iziToast
            obligatorios.forEach(campo => {
                let input = $('[name="' + campo + '"]');

                if (!input.val()) {
                    input.addClass('is-invalid'); // Agrega borde rojo
                    valido = false;
                } else {
                    input.removeClass('is-invalid'); // Quita borde rojo si corrige
                }
            });

            // Si algún campo está vacío
            if (!valido) {
                iziToast.error({
                    title: 'Campos obligatorios',
                    message: 'Por favor completa los campos marcados.',
                    position: 'topRight'
                });
                return;
            }

            $.ajax({
                url: form.attr('action'),
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(res) {

                    iziToast.success({
                        title: 'Guardado',
                        message: 'El expediente se registró correctamente',
                        position: 'topRight'
                    });

                    $('#modalAgregarExpediente').modal('hide');
                    form.trigger('reset');

                    // Quitar bordes rojos al limpiar
                    obligatorios.forEach(campo => {
                        $('[name="' + campo + '"]').removeClass('is-invalid');
                    });
                },
                error: function(xhr) {

                    iziToast.error({
                        title: 'Error',
                        message: 'No se pudo guardar el expediente',
                        position: 'topRight'
                    });

                    console.log(xhr.responseText);
                }
            });
        });
    </script>

    {{-- <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Cuando se abra el modal, rellenar con datos por defecto (si vienen del botón)
            var modal = document.getElementById('modalAgregarExpediente');
            modal.addEventListener('show.bs.modal', function(event) {
                var button = event.relatedTarget;
                // Si el modal se abrió desde un botón con data, lo usamos; si no, mantenemos los valores por defecto
                if (!button) return;
                var citaId = button.getAttribute('data-cita') || '{{ $detalle->id_cita }}';
                //var propietario = button.getAttribute('data-propietario') || '{{ $detalle->nombre }}';
                var telefono = button.getAttribute('data-telefono') || '{{ $detalle->telefono }}';
                var domicilio = button.getAttribute('data-domicilio') || '{{ $detalle->domicilio }}';

                document.getElementById('exp_id_cita').value = citaId;
                document.getElementById('exp_propietario').value = propietario;
                document.getElementById('exp_telefono').value = telefono;
                document.getElementById('exp_domicilio').value = domicilio;
            });

            // Si quieres manejo AJAX del formulario de expediente, descomenta y adapta
            // document.getElementById('formAgregarExpediente').addEventListener('submit', function(e){
            //     e.preventDefault();
            //     // enviar por fetch / axios y actualizar la lista de expedientes en la pestaña
            // });
        });
    </script> --}}
    {{-- <script>
        function cargarHorarios() {

            const tramiteSelect = document.getElementById('tramite-select');
            const fechaTramiteDiv = document.getElementById('fecha-tramite');
            const fechaSeleccionada = document.getElementById('calendario');
            const fechaSelect = document.getElementById('fecha-select-tramite');
            const tramiteId = tramiteSelect.value; // Obtiene el ID del trámite seleccionado
            // const url = tramiteSelect.dataset.url; // Obtiene la URL desde el atributo data-url
            const url = fechaSeleccionada.dataset.url;
            const folio = $('#folio_cita').val();

            if (tramiteId) {
                // Realizar petición AJAX
                fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            id_tramite: tramiteId,
                            fechaSeleccionada: fechaSeleccionada.value,
                            folio: folio
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        // Limpiar el select de horarios
                        fechaSelect.innerHTML = '<option value="">Selecciona el horario</option>';

                        // Agregar los nuevos horarios al select
                        data.forEach(horario => {
                            const option = document.createElement('option');
                            option.value = horario.id;

                            // Formatear la hora a formato 12 horas (AM/PM)
                            const horaFormateada = formatearHora(horario.hora);

                            // Concatenar fecha y hora formateada
                            option.textContent = `${horaFormateada}`;
                            fechaSelect.appendChild(option);
                        });
                        fechaTramiteDiv.style.display = 'block';

                    })
                    .catch(error => {
                        console.error('Error al cargar los horarios:', error);
                    });
            } else {
                // fechaTramiteDiv.style.display = 'none';
                fechaSelect.innerHTML = '<option value="">Selecciona el horario</option>';
            }
        }

        function formatearHora(hora) {
            const [hora24, minutos] = hora.split(':'); // Divide la hora por ":"
            let hora12 = parseInt(hora24, 10); // Convierte la hora a entero
            const periodo = hora12 >= 12 ? 'PM' : 'AM'; // Determina si es AM o PM

            // Convierte la hora a formato 12 horas
            hora12 = hora12 % 12 || 12;

            // Retorna la hora formateada
            return `${hora12}:${minutos} ${periodo}`;
        }


        function reservarHorario() {
            const fechaSelect = document.getElementById('fecha-select-tramite');
            const horarioId = fechaSelect.value; // ID del horario seleccionado
            const url = "{{ route('reservar_horario') }}"; // Ruta del backend

            if (horarioId) {
                fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            id_horario: horarioId
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            reservaExitosa = true;
                            iniciarContador(data.reservado_hasta);
                        } else {
                            reservaExitosa = false;
                            iziToast.error({
                                title: 'Error',
                                message: data.mensaje || 'El horario ya fue reservado por otro usuario',
                                position: 'topRight'
                            });
                            setTimeout(function() {
                                location.reload();
                            }, 4000);
                        }
                    })
                    .catch(error => console.error('Error:', error));
            }
        }

        function iniciarContador(reservadoHasta) {
            const tramiteSelect = document.getElementById('tramite-select');
            const fechaSelect = document.getElementById('fecha-select-tramite');
            const calendario = document.getElementById('calendario');

            // Deshabilitar los selects
            tramiteSelect.disabled = true;
            fechaSelect.disabled = true;
            calendario.disabled = true;

            // Configuración inicial del iziToast
            iziToast.info({
                id: 'contador-reserva',
                title: 'Tiempo restante',
                message: `<span id="contador-tiempo">5:00</span> minutos para completar tu cita.`,
                position: 'topRight', // Posición superior derecha
                timeout: false, // No se cierra automáticamente
                close: false, // No permitir cerrar manualmente
                pauseOnHover: false, // No pausar al pasar el mouse
                closeOnEscape: false, // No cerrar con la tecla ESC
                overlay: false, // No mostrar fondo oscuro
                drag: false, // No permitir arrastrar
                onOpening: function(instance, toast) {
                    // Iniciar el contador después de que iziToast esté completamente visible

                    iniciarTemporizador(reservadoHasta, tramiteSelect, fechaSelect);
                },
            });
        }

        function iniciarTemporizador(reservadoHasta, tramiteSelect, fechaSelect) {
            const tiempoRestante = () => {
                const ahora = new Date();
                const tiempoLimite = new Date(reservadoHasta);
                const diferencia = tiempoLimite - ahora;

                if (diferencia <= 0) {
                    // Si el tiempo se acaba, elimina el contador y cierra iziToast
                    clearInterval(intervalo);
                    iziToast.destroy();
                    habilitarHorario();
                    tramiteSelect.disabled = false; // Habilitar los selects nuevamente
                    fechaSelect.disabled = false;
                    return;
                }

                const minutos = Math.floor(diferencia / (1000 * 60));
                const segundos = Math.floor((diferencia % (1000 * 60)) / 1000);

                // Actualiza el texto dinámicamente
                const contadorElement = document.getElementById('contador-tiempo');
                if (contadorElement) {
                    contadorElement.textContent =
                        `${minutos}:${segundos < 10 ? '0' : ''}${segundos}`;
                }
            };

            tiempoRestante(); // Ejecuta inmediatamente
            const intervalo = setInterval(tiempoRestante, 1000); // Actualiza cada segundo
        }

        // Función para habilitar el horario después de los 3 minutos        
        function habilitarHorario() {
            const fechaSelect = document.getElementById('fecha-select-tramite');
            const tramiteSelect = document.getElementById('tramite-select');

            const horarioId = fechaSelect.value; // ID del horario seleccionado
            const url = '{{ route('habilitar_horario') }}'; // Ruta del backend para habilitar el horario
            tramiteSelect.disabled = true;
            fechaSelect.disabled = true;

            if (horarioId) {
                fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            id_horario: horarioId
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // Mostrar iziToast de tipo question
                            iziToast.question({
                                id: 'horario-disponible',
                                title: 'Horario disponible',
                                message: 'El tiempo ha expirado y el horario vuelve a estar disponible.',
                                position: 'topRight',
                                timeout: false, // No cerrar automáticamente
                                close: false, // No permitir cerrar manualmente sin interactuar
                                overlay: true, // Mostrar fondo oscuro
                                drag: false, // No permitir mover el Toast
                                buttons: [
                                    [
                                        '<button>Aceptar</button>',
                                        function(instance, toast) {
                                            // Acción al hacer clic en el botón "Aceptar"
                                            instance.hide({
                                                transitionOut: 'fadeOut'
                                            }, toast, 'button');
                                            tramiteSelect.disabled =
                                                false; // Habilitar los selects nuevamente
                                            fechaSelect.disabled = false;
                                            fechaSelect.value = ''; // Limpia el campo de fecha seleccionado
                                        },
                                    ],
                                ],
                            });
                        } else {
                            // En caso de error, mostrar iziToast de error
                            iziToast.error({
                                title: 'Error',
                                message: `Error al habilitar el horario: ${data.mensaje}`,
                                position: 'topRight',
                            });
                        }
                    })
                    .catch(error => {
                        console.error('Error en la petición:', error);
                        iziToast.error({
                            title: 'Error de red',
                            message: 'No se pudo comunicar con el servidor. Inténtalo nuevamente.',
                            position: 'topRight',
                        });
                    });
            }
        }

        // document.addEventListener('DOMContentLoaded', function() {
        //     const mostrarReagendaBtn = document.getElementById('mostrar-reagenda-btn');
        //     const mostrarRevisorBtn = document.getElementById('mostrar-revisor-btn');
        //     const cardReagenda = document.getElementById('card_reagenda');
        //     const cardRevisor = document.getElementById('card_revisor');
        //     // const ingresoForm = document.getElementById('ingreso-form');

        //     // Mostrar el formulario de reagendar cita al hacer clic en el botón
        //     mostrarReagendaBtn.addEventListener('click', function(e) {
        //         e.preventDefault(); // Evitar el comportamiento predeterminado del enlace
        //         cardReagenda.style.display = 'block'; // Mostrar el formulario
        //         cardRevisor.style.display = 'none';
        //         // ingresoForm.style.display = 'none';
        //     });

        //     mostrarRevisorBtn.addEventListener('click', function(e) {
        //         e.preventDefault(); // Evitar el comportamiento predeterminado del enlace
        //         cardRevisor.style.display = 'block'; // Mostrar el formulario
        //         cardReagenda.style.display = 'none';
        //         // ingresoForm.style.display = 'none';
        //     });
        // });

        //Advertencia antes de recargar la página
        window.addEventListener('beforeunload', function(e) {
            if (reservaExitosa) {
                habilitarHorario();
            }
        });

        //Reagendar cita
        $(document).ready(function() {
            $('#form-reagendar').submit(function(e) {
                e.preventDefault();

                const tramiteActual = $('#form-reagendar').data('tramite-actual');
                // Obtener los valores del formulario
                const id_cita = $('#folio_cita').val();
                const fecha_actual = $('#fecha_cita').val();
                const tramiteId = $('#tramite-select').val();
                const calendario = $('#calendario').val();
                const fechaHorario = $('#fecha-select-tramite').val();

                // Referencia al botón
                const $boton = $('#form-reagendar button[type="submit"]');

                if (tramiteActual != tramiteId) {
                    iziToast.error({
                        title: 'Error',
                        message: 'El trámite seleccionado no coincide con la cita actual.',
                        position: 'topRight'
                    });
                    $('#tramite-select').addClass('is-invalid');
                    return; // Detener el envío si la validación falla
                }
                // Validar los campos antes de enviar
                if (!tramiteId || !fechaHorario || !calendario) {
                    iziToast.error({
                        title: 'Error',
                        message: 'Por favor, selecciona un trámite y un horario.',
                        position: 'topRight'
                    });
                    $('#fecha-select-tramite').addClass('is-invalid');
                    $('#calendario').addClass('is-invalid');

                    return;
                }

                const formData = {
                    folio_cita: id_cita,
                    tipo_tramite: tramiteId,
                    fecha_actual: fecha_actual,
                    fecha_horario: fechaHorario,
                    _token: '{{ csrf_token() }}'
                };

                $.ajax({
                    url: '{{ route('reagendar_cita') }}',
                    method: 'POST',
                    data: formData,
                    beforeSend: function() {
                        // Desactivar botón y cambiar texto
                        $boton.prop('disabled', true);
                        $boton.html(
                            '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Espere un momento...'
                        );

                        iziToast.info({
                            title: 'Enviando',
                            message: 'Procesando la solicitud, por favor espera...',
                            position: 'topRight'
                        });
                    },
                    success: function(response) {
                        if (response.success) {

                            if ($('#contador-reserva').length) {
                                $('#contador-reserva').remove();
                            }
                            Swal.fire({
                                title: '¡Éxito!',
                                text: response.message,
                                icon: 'success',
                                confirmButtonText: 'OK'
                            }).then(() => {
                                location
                                    .reload();
                            });
                            // Opcional: limpiar el formulario
                            $('#form-reagendar')[0].reset();
                        } else {
                            iziToast.error({
                                title: 'Error',
                                message: response.message ||
                                    'No se pudo reagendar la cita.',
                                position: 'topRight'
                            });
                        }
                    },
                    error: function() {
                        iziToast.error({
                            title: 'Error',
                            message: 'Ocurrió un problema al procesar la solicitud. Intenta nuevamente.',
                            position: 'topRight'
                        });
                        $boton.prop('disabled', false).html(
                            '<i class="ti ti-send fs-4"></i> Reagendar');
                    }
                });
            });
        });


        //Cambiar Revisor
        $(document).ready(function() {
            $('#form-cambio').submit(function(e) {
                e.preventDefault();

                const id_cita = $('#folio_cita').val();
                const revisor_id = $('#revisor_select').val();
                const ventanilla_id = $('#ventanilla').val();
                const $boton = $('#form-cambio button[type="submit"]');
                if (!ventanilla_id) {
                    iziToast.error({
                        title: 'Error',
                        message: 'Por favor, selecciona una ventanilla.',
                        position: 'topRight'
                    });
                    $('#ventanilla').addClass('is-invalid');
                    return;
                }

                const formData = {
                    folio_cita: id_cita,
                    revisor_select: revisor_id,
                    ventanilla: ventanilla_id,
                    _token: '{{ csrf_token() }}'
                };

                $.ajax({
                    url: '{{ route('CambiarRevisor') }}',
                    method: 'POST',
                    data: formData,
                    beforeSend: function() {
                        $boton.prop('disabled', true);
                        $boton.html(
                            '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Espere un momento...'
                        );
                        iziToast.info({
                            title: 'Enviando',
                            message: 'Procesando la solicitud, por favor espera...',
                            position: 'topRight'
                        });
                    },
                    success: function(response) {
                        if (response.success) {

                            Swal.fire({
                                title: '¡Éxito!',
                                text: response.message,
                                icon: 'success',
                                confirmButtonText: 'OK'
                            }).then(() => {
                                location
                                    .reload();
                            });
                            // Opcional: limpiar el formulario
                            $('#form-cambio')[0].reset();
                        } else {
                            iziToast.error({
                                title: 'Error',
                                message: response.message ||
                                    'No se pudo cambiar el revisor.',
                                position: 'topRight'
                            });
                            $boton.prop('disabled', false).html(
                                '<i class="ti ti-send fs-4"></i> Cambiar revisor');

                        }
                    },
                    error: function() {
                        iziToast.error({
                            title: 'Error',
                            message: 'Ocurrió un problema al procesar la solicitud. Intenta nuevamente.',
                            position: 'topRight'
                        });
                        $boton.prop('disabled', false).html(
                            '<i class="ti ti-send fs-4"></i> Cambiar revisor');

                    }
                });
            });
        });
        //Completar cita
        function completar_cita() {
            iziToast.question({
                timeout: 20000,
                close: false,
                overlay: true,
                displayMode: 'once',
                id: 'question',
                zindex: 999,
                title: '¿Estás seguro?',
                message: '¿Deseas marcar esta cita como completada?',
                position: 'center',
                buttons: [
                    ['<button><b>Sí, completar</b></button>', function(instance, toast) {
                        instance.hide({
                            transitionOut: 'fadeOut'
                        }, toast, 'button');

                        // Continuar con el AJAX solo si confirma
                        const id_cita = $('#completar-cita').data('cita-id');
                        const url = '{{ route('completar_cita') }}';

                        $.ajax({
                            url: url,
                            method: 'POST',
                            data: {
                                id_cita: id_cita,
                                _token: '{{ csrf_token() }}'
                            },
                            beforeSend: function() {
                                Swal.fire({
                                    title: 'Completando...',
                                    text: 'Por favor espera.',
                                    icon: 'info',
                                    showConfirmButton: false,
                                    allowOutsideClick: false,
                                });
                            },
                            success: function(response) {
                                if (response.success) {
                                    Swal.fire({
                                        title: 'Cita completada',
                                        text: response.message ||
                                            'La cita ha sido completada correctamente.',
                                        icon: 'success',
                                    }).then(() => {
                                        location.reload();
                                    });
                                } else {
                                    Swal.fire({
                                        title: 'Error',
                                        text: response.message ||
                                            'No se pudo completar la cita.',
                                        icon: 'error',
                                    });
                                }
                            },
                            error: function() {
                                Swal.fire({
                                    title: 'Error',
                                    text: 'Ocurrió un problema al completar la cita. Intenta nuevamente.',
                                    icon: 'error',
                                });
                            },
                        });

                    }, true],
                    ['<button>Cancelar</button>', function(instance, toast) {
                        instance.hide({
                            transitionOut: 'fadeOut'
                        }, toast, 'button');
                    }]
                ]
            });
        }

        //Cacelar cita        
        // document.addEventListener('DOMContentLoaded', function() {
        //     const cancelarCitaBtn = document.getElementById('cancelar-cita-btn');
        //     const modalCancelarCita = new bootstrap.Modal(document.getElementById('modalCancelarCita'));
        //     const confirmarCancelarCita = document.getElementById('confirmar-cancelar-cita');

        //     // Al hacer clic en el botón de cancelar cita
        //     cancelarCitaBtn.addEventListener('click', function(e) {
        //         e.preventDefault();

        //         // Obtener los datos del botón
        //         const citaId = cancelarCitaBtn.getAttribute('data-cita-id');

        //         // Mostrar el modal y rellenar el campo de ID de la cita
        //         document.getElementById('cita-id').value = citaId
        //         modalCancelarCita.show();
        //     });

        //     // Al confirmar la cancelación de la cita
        //     confirmarCancelarCita.addEventListener('click', function() {
        //         const form = document.getElementById('cancelar-cita-form');
        //         const citaId = form.querySelector('#cita-id').value;
        //         const nota = form.querySelector('#nota').value;

        //         // Validar que la nota no esté vacía
        //         if (!nota.trim()) {
        //             Swal.fire({
        //                 title: 'Error',
        //                 text: 'Por favor, escribe una nota antes de cancelar la cita.',
        //                 icon: 'error',
        //             });
        //             return;
        //         }

        //         // Enviar solicitud AJAX
        //         $.ajax({
        //             url: '{{ route('cancelar_cita') }}',
        //             method: 'POST',
        //             data: {
        //                 id_cita: citaId,
        //                 nota: nota,
        //                 _token: '{{ csrf_token() }}', // Token CSRF para Laravel
        //             },
        //             beforeSend: function() {
        //                 Swal.fire({
        //                     title: 'Cancelando...',
        //                     text: 'Por favor espera.',
        //                     icon: 'info',
        //                     showConfirmButton: false,
        //                     allowOutsideClick: false,
        //                 });
        //             },
        //             success: function(response) {
        //                 if (response.success) {
        //                     Swal.fire({
        //                         title: 'Cita cancelada',
        //                         text: response.message ||
        //                             'La cita ha sido cancelada correctamente.',
        //                         icon: 'success',
        //                     }).then(() => {
        //                         location.reload(); // Recargar la página si es necesario
        //                     });
        //                 } else {
        //                     Swal.fire({
        //                         title: 'Error',
        //                         text: response.message ||
        //                             'No se pudo cancelar la cita.',
        //                         icon: 'error',
        //                     });
        //                 }
        //             },
        //             error: function() {
        //                 Swal.fire({
        //                     title: 'Error',
        //                     text: 'Ocurrió un problema al cancelar la cita. Intenta nuevamente.',
        //                     icon: 'error',
        //                 });
        //             },
        //         });

        //         // Ocultar el modal
        //         modalCancelarCita.hide();
        //     });
        // });


        document.addEventListener('DOMContentLoaded', function() {
            const mostrarReagendaBtn = document.getElementById('mostrar-reagenda-btn');
            const mostrarRevisorBtn = document.getElementById('mostrar-revisor-btn');
            const cardReagenda = document.getElementById('card_reagenda');
            const cardRevisor = document.getElementById('card_revisor');
            const cancelarCitaBtn = document.getElementById('cancelar-cita-btn');
            const confirmarCancelarCita = document.getElementById('confirmar-cancelar-cita');
            const modalCancelarCitaEl = document.getElementById('modalCancelarCita');

            if (mostrarReagendaBtn && cardReagenda && cardRevisor) {
                mostrarReagendaBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    cardReagenda.style.display = 'block';
                    cardRevisor.style.display = 'none';
                });
            }

            if (mostrarRevisorBtn && cardReagenda && cardRevisor) {
                mostrarRevisorBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    cardRevisor.style.display = 'block';
                    cardReagenda.style.display = 'none';
                });
            }

            if (cancelarCitaBtn && modalCancelarCitaEl) {
                const modalCancelarCita = new bootstrap.Modal(modalCancelarCitaEl);

                cancelarCitaBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    const citaId = cancelarCitaBtn.getAttribute('data-cita-id');
                    const input = document.getElementById('cita-id');
                    if (input) input.value = citaId;
                    modalCancelarCita.show();
                });
            }

            if (confirmarCancelarCita) {
                confirmarCancelarCita.addEventListener('click', function() {
                    const form = document.getElementById('cancelar-cita-form');
                    const citaId = form?.querySelector('#cita-id')?.value;
                    const nota = form?.querySelector('#nota')?.value;

                    if (!nota?.trim()) {
                        Swal.fire({
                            title: 'Error',
                            text: 'Por favor, escribe una nota antes de cancelar la cita.',
                            icon: 'error',
                        });
                        return;
                    }

                    $.ajax({
                        url: '{{ route('cancelar_cita') }}',
                        method: 'POST',
                        data: {
                            id_cita: citaId,
                            nota: nota,
                            _token: '{{ csrf_token() }}',
                        },
                        beforeSend: function() {
                            Swal.fire({
                                title: 'Cancelando...',
                                text: 'Por favor espera.',
                                icon: 'info',
                                showConfirmButton: false,
                                allowOutsideClick: false,
                            });
                        },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire({
                                    title: 'Cita cancelada',
                                    text: response.message ||
                                        'La cita ha sido cancelada correctamente.',
                                    icon: 'success',
                                }).then(() => {
                                    location.reload();
                                });
                            } else {
                                Swal.fire({
                                    title: 'Error',
                                    text: response.message ||
                                        'No se pudo cancelar la cita.',
                                    icon: 'error',
                                });
                            }
                        },
                        error: function() {
                            Swal.fire({
                                title: 'Error',
                                text: 'Ocurrió un problema al cancelar la cita. Intenta nuevamente.',
                                icon: 'error',
                            });
                        },
                    });

                    const modalCancelarCita = bootstrap.Modal.getInstance(modalCancelarCitaEl);
                    modalCancelarCita?.hide();
                });
            }
        });


        $('#btn_agregar_observacion').on('click', function() {
            const $boton = $(this);
            const texto = $('#observacion_input').val().trim();
            const idCita = $('#folio_cita').val(); // Asegúrate de tener este input hidden

            if (texto === '') {
                iziToast.warning({
                    title: 'Campo vacío',
                    message: 'Escribe una observación antes de agregar.',
                    position: 'topRight',
                });
                return;
            }
            $boton.prop('disabled', true).text('Agregando... Por favor espera');


            $.ajax({
                url: '{{ route('observacionCita') }}',
                method: 'POST',
                data: {
                    observacion: texto,
                    folio_cita: idCita,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    iziToast.success({
                        title: 'Exito',
                        message: response.message,
                        position: 'topRight',
                    });
                    const hora = new Date().toLocaleTimeString([], {
                        hour: '2-digit',
                        minute: '2-digit'
                    });
                    $('#observacion_input').val('');
                    const modal = bootstrap.Modal.getInstance(document.getElementById(
                        'modalObservacion'));
                    modal.hide(); // cerrar modal
                    setTimeout(function() {
                        location.reload();
                    }, 500)
                    $('#observacion_input').val('');
                },
                error: function() {
                    iziToast.error({
                        title: 'Error',
                        message: response.message,
                        position: 'topRight',
                    });
                },
                complete: function() {
                    // Habilitar botón y restaurar texto
                    $boton.prop('disabled', false).text('Agregar');
                }

            });
        });

        //ingreso
        // document.addEventListener('DOMContentLoaded', function() {
        //     const mostrarFormBtn = document.getElementById('mostrar-form-btn');
        //     const ingresoForm = document.getElementById('ingreso-form');
        //     const cardReagenda = document.getElementById('card_reagenda');
        //     // Mostrar el formulario al presionar el botón
        //     mostrarFormBtn.addEventListener('click', function(e) {
        //         e.preventDefault(); // Evitar el comportamiento predeterminado del enlace
        //         ingresoForm.style.display = 'block';
        //         cardReagenda.style.display = 'none';
        //     });

        //     // Manejar el envío del formulario
        //     const formIngresoTramite = document.getElementById('form-ingreso-tramite');
        //     formIngresoTramite.addEventListener('submit', function(e) {
        //         e.preventDefault(); // Evitar el comportamiento predeterminado del formulario

        //         // Obtener los datos del formulario
        //         const formData = new FormData(formIngresoTramite);
        //         const data = Object.fromEntries(formData.entries());

        //         // Validación simple
        //         if (!data.nombre || !data.tramite) {
        //             alert('Por favor, completa todos los campos obligatorios.');
        //             return;
        //         }

        //         // Aquí puedes realizar una solicitud AJAX o manejar los datos
        //         console.log('Datos enviados:', data);

        //         // Limpiar el formulario después de enviarlo
        //         formIngresoTramite.reset();
        //         ingresoForm.style.display = 'none'; // Ocultar el formulario si es necesario
        //     });
        // });        
    </script>
    @if ($mostrar_modal_asistencia)
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const modalEl = document.getElementById('validarAsistenciaModal');
                const modal = new bootstrap.Modal(modalEl);
                modal.show();

                modalEl.addEventListener('hidden.bs.modal', function() {
                    // Solo redirige si no se validó la asistencia
                    if (typeof asistenciaValidada === 'undefined' || asistenciaValidada === false) {
                        window.location.href = "{{ route('asistieron') }}";
                    }
                });
            });
        </script>
    @endif --}}

@endsection