@extends('layouts.app')

@section('content')
    <div class="container mx-auto px-4 py-6">
        <div class="flex justify-between items-center mb-4">
            <h1 class="text-2xl font-bold">Agenda Psicológica</h1>
        </div>
        <div class="bg-white shadow-md rounded-lg p-4 w-full max-w-md">
            <h3 class="font-semibold text-gray-800 mb-2">Leyenda de Estados</h3>
            <ul class="space-y-2 text-sm">
                <li class="flex items-center gap-2">
                    <span class="inline-block w-4 h-4 rounded bg-[#1d4ed8]"></span> Pendiente (Presencial)
                </li>
                <li class="flex items-center gap-2">
                    <span class="inline-block w-4 h-4 rounded bg-[#facc15]"></span> Confirmada (Presencial)
                </li>
                <li class="flex items-center gap-2">
                    <span class="inline-block w-4 h-4 rounded bg-[#16a34a]"></span> Atendida (Presencial)
                </li>
                <li class="flex items-center gap-2">
                    <span class="inline-block w-4 h-4 rounded bg-[#ef4444]"></span> Cancelada (Presencial)
                </li>
                <li class="flex items-center gap-2">
                    <span class="inline-block w-4 h-4 rounded bg-[#0ea5e9]"></span> Pendiente (Remota)
                </li>
                <li class="flex items-center gap-2">
                    <span class="inline-block w-4 h-4 rounded bg-[#06b6d4]"></span> Atendida (Remota)
                </li>
            </ul>
        </div>
        
        <div id='calendar'></div>

        <!-- Modal para crear cita -->
        @include('modales.modal_crear_cita_psicologo')
        @include('modales.modal_editar_cita_psicologo')
    </div>
@endsection

@push('scripts')
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js'></script>
    <script>
        function abrirModal() {
            const modal = document.getElementById('modalCrearCita');
            modal.classList.remove('hidden');
            modal.classList.add('flex');
        }

        function cerrarModal() {
            const modal = document.getElementById('modalCrearCita');
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }
    </script>
    <script>
        function obtenerBloqueos(horarios) {
            const bloqueos = [];

            const diasMap = {
                'domingo': 0,
                'lunes': 1,
                'martes': 2,
                'miércoles': 3,
                'miercoles': 3,
                'jueves': 4,
                'viernes': 5,
                'sábado': 6,
                'sabado': 6,
            };

            horarios.forEach(h => {
                const diaNum = diasMap[h.dia_semana.toLowerCase()];

                if (h.bloqueos && Array.isArray(h.bloqueos)) {
                    h.bloqueos.forEach(b => {
                        bloqueos.push({
                            daysOfWeek: [diaNum],
                            startTime: b.inicio,
                            endTime: sumarMinutos(b.inicio, b.duracion),
                            rendering: 'background',
                            display: 'background',
                            color: '#d1d5db', //color desccanso
                            groupId: 'bloqueo',
                            title: 'Descanso', // <-- 👈 Añade esto
                            groupId: 'bloqueo',
                        });
                    });
                }
            });

            return bloqueos;
        }

        function sumarMinutos(hora, minutos) {
            const [h, m] = hora.split(':').map(Number);
            const fecha = new Date(0, 0, 0, h, m + parseInt(minutos));
            const hh = fecha.getHours().toString().padStart(2, '0');
            const mm = fecha.getMinutes().toString().padStart(2, '0');
            return `${hh}:${mm}`;
        }
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const calendarEl = document.getElementById('calendar');
            const modal = document.getElementById('modalCrearCita');

            let calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'timeGridWeek',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                selectable: true,
                editable: true,
                slotDuration: '00:10:00',

                eventSources: [{
                        events: @json($eventos),
                    },
                    {
                        events: obtenerBloqueos(
                            @json($horarios)), // bloqueos internos del profesional
                        rendering: 'background',
                        color: '#d1d5db', //color desccanso
                    },
                    {
                        events: obtenerBloqueosFueraHorario(
                            @json($horarios)), // fuera del horario laboral
                        rendering: 'background',
                        color: '#d1d5db',
                    }
                ],
                select: function(info) {
                    const hoy = new Date().setHours(0, 0, 0, 0);
                    const inicio = new Date(info.startStr);

                    if (inicio < hoy) {
                        alert("No puedes crear citas en fechas anteriores a hoy.");
                        return;
                    }

                    document.getElementById('fechaCita').value = info.startStr.split('T')[0];
                    document.getElementById('horaIni').value = info.startStr.split('T')[1].slice(0, 5);
                    document.getElementById('horaFin').value = info.endStr.split('T')[1].slice(0, 5);
                    abrirModal();
                },
                eventDrop: function(info) {
                    const hoy = new Date().setHours(0, 0, 0, 0);
                    const nuevaFecha = new Date(info.event.start);

                    if (nuevaFecha < hoy) {
                        Swal.fire("Error", "No puedes mover citas a fechas anteriores a hoy.", "error");
                        info.revert();
                        return;
                    }

                    const eventoId = info.event.id;
                    const fecha = info.event.startStr.split('T')[0];
                    const hora_inicio = info.event.startStr.split('T')[1].substring(0, 5);
                    const hora_fin = info.event.end.toTimeString().substring(0, 5);

                    Swal.fire({
                        title: '¿Confirmar cambio?',
                        text: `¿Deseas mover la cita a ${fecha} ${hora_inicio} - ${hora_fin}?`,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Sí, mover',
                        cancelButtonText: 'Cancelar',
                    }).then((result) => {
                        if (result.isConfirmed) {
                            // Verificar disponibilidad con AJAX
                            fetch(`{{ route('agenda.psicologia.verificar') }}`, {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                    },
                                    body: JSON.stringify({
                                        id: eventoId,
                                        fecha: fecha,
                                        hora_inicio: hora_inicio,
                                        hora_fin: hora_fin
                                    })
                                })
                                .then(res => res.json())
                                .then(data => {
                                    if (data.disponible) {
                                        // Guardar el cambio
                                        fetch(`{{ route('agenda.psicologia.mover', ['id' => '__ID__']) }}`
                                                .replace('__ID__', eventoId), {
                                                    method: 'POST',
                                                    headers: {
                                                        'Content-Type': 'application/json',
                                                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                                    },
                                                    body: JSON.stringify({
                                                        fecha,
                                                        hora_inicio,
                                                        hora_fin
                                                    })
                                                })
                                            .then(res => res.json())
                                            .then(data => {
                                                if (!data.success) {
                                                    Swal.fire('Error', data.message,
                                                        'error');
                                                    info.revert();
                                                } else {
                                                    Swal.fire('Éxito', data.message,
                                                        'success');
                                                }
                                            })
                                            .catch(() => {
                                                Swal.fire('Error',
                                                    'No se pudo guardar el cambio.',
                                                    'error');
                                                info.revert();
                                            });

                                    } else {
                                        Swal.fire("No disponible",
                                            "Ya hay una cita en ese horario.", "error");
                                        info.revert();
                                    }
                                })
                                .catch(err => {
                                    console.error(err);
                                    Swal.fire("Error", "Error al verificar disponibilidad.",
                                        "error");
                                    info.revert();
                                });
                        } else {
                            info.revert();
                        }
                    });
                },
                eventClick: function(info) {
                    const evento = info.event;

                    // Obtener fecha y horas
                    const fecha = evento.startStr.split('T')[0];
                    const horaIni = evento.startStr.split('T')[1].substring(0, 5);
                    let horaFin = '';

                    if (evento.end instanceof Date) {
                        horaFin = evento.end.toTimeString().substring(0, 5);
                    } else if (typeof evento.endStr === 'string') {
                        const endSplit = evento.endStr.split('T');
                        if (endSplit.length === 2) {
                            horaFin = endSplit[1].substring(0, 5);
                        }
                    }

                    // Llenar campos de cita
                    document.getElementById('modalEditarId').value = evento.id;
                    document.getElementById('modalEliminarId').value = evento.id;
                    document.getElementById('modalEditarFecha').value = fecha;
                    document.getElementById('modalEditarHoraInicio').value = horaIni;
                    document.getElementById('modalEditarHoraFin').value = horaFin;
                    document.getElementById('modalEditarMotivo').value = evento.extendedProps.motivo ??
                        '';
                        const tipoAtencion = evento.extendedProps.tipo_atencion ?? 'presencial';

document.getElementById('tipoPresencial').checked = (tipoAtencion === 'presencial');
document.getElementById('tipoRemota').checked = (tipoAtencion === 'remota');

// Sincronizar el valor inicial
document.getElementById('inputTipoAtencionFinal').value = tipoAtencion;
                    document.getElementById('btnPresencial').classList.remove('bg-blue-100', 'text-blue-700');
document.getElementById('btnRemota').classList.remove('bg-blue-100', 'text-blue-700');

if (tipoAtencion === 'presencial') {
    document.getElementById('btnPresencial').classList.add('bg-blue-100', 'text-blue-700');
} else {
    document.getElementById('btnRemota').classList.add('bg-blue-100', 'text-blue-700');
}
document.getElementById('modalEditarEstado').value = evento.extendedProps.estado ?? 'pendiente';

                    // Llenar datos del paciente (asegúrate de pasarlos desde el backend)
                    document.getElementById('modalPacienteNombre').value = evento.extendedProps
                        .nombre ?? '';
                    document.getElementById('modalPacienteApellido').value = evento.extendedProps
                        .apellido ?? '';
                    document.getElementById('modalPacienteNac').value = evento.extendedProps.fechanac ??
                        '';
                    document.getElementById('modalPacienteTel').value = evento.extendedProps.telefono ??
                        '';
                    document.getElementById('modalPacienteEmail').value = evento.extendedProps.email ??
                        '';
                    document.getElementById('modalPacienteDir').value = evento.extendedProps
                        .direccion ?? '';

                    // Mostrar modal
                    document.getElementById('modalEditarCita').classList.remove('hidden');
                    document.getElementById('modalEditarCita').classList.add('flex');
                },
                eventDidMount: function(info) {
                    const tooltip = document.createElement('div');

                    let contenido = '';

                    if (info.event.title === 'Descanso') {
                        // Si el evento es un descanso (bloque rojo)
                        contenido = `<strong>Descanso</strong>`;
                    } else if (!info.event.title) {
                        // Si no hay título (bloque gris sin agenda)
                        contenido = `<strong>El profesional no trabaja en este horario</strong>`;
                    } else {
                        // Si es una cita normal
                        contenido = `
            <strong>${info.event.title}</strong><br>
            ${info.event.extendedProps.motivo ?? ''}<br>
            ${info.event.start.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'})} - 
            ${info.event.end?.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'})}
        `;
                    }

                    tooltip.innerHTML =
                        `<div class="bg-gray-900 text-white text-sm p-2 rounded shadow-lg z-50">${contenido}</div>`;
                    tooltip.style.position = 'absolute';
                    tooltip.style.zIndex = 1000;
                    tooltip.style.display = 'none';
                    document.body.appendChild(tooltip);

                    info.el.addEventListener('mouseenter', e => {
                        tooltip.style.display = 'block';
                    });

                    info.el.addEventListener('mousemove', e => {
                        tooltip.style.top = e.pageY + 10 + 'px';
                        tooltip.style.left = e.pageX + 10 + 'px';
                    });

                    info.el.addEventListener('mouseleave', () => {
                        tooltip.style.display = 'none';
                    });
                },

                eventResize: function(info) {
                    const hoy = new Date().setHours(0, 0, 0, 0);
                    const nuevaFecha = new Date(info.event.start);

                    if (nuevaFecha < hoy) {
                        alert("No puedes redimensionar citas a fechas anteriores a hoy.");
                        info.revert();
                    }
                }
            });

            calendar.render();
        });

        function cerrarModal() {
            document.getElementById('modalCrearCita').classList.add('hidden');
        }
    </script>
    <script>
        // Verificar disponibilidad antes de enviar el formulario de actualización
        document.querySelector('#modalEditarCita form').addEventListener('submit', function(e) {
            e.preventDefault();

            const citaId = document.getElementById('modalEditarId').value;
            const fecha = document.getElementById('modalEditarFecha').value;
            const hora_inicio = document.getElementById('modalEditarHoraInicio').value;
            const hora_fin = document.getElementById('modalEditarHoraFin').value;

            fetch('{{ route('agenda.psicologia.verificar') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    body: JSON.stringify({
                        id: citaId,
                        fecha: fecha,
                        hora_inicio: hora_inicio,
                        hora_fin: hora_fin
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.disponible) {
                        e.target.submit(); // Todo bien, enviar el form real
                    } else {
                        Swal.fire('Horario ocupado', 'Ya existe una cita en ese horario.', 'warning');
                    }
                })
                .catch(error => {
                    console.error('Error al verificar disponibilidad', error);
                    Swal.fire('Error', 'Ocurrió un error al verificar disponibilidad.', 'error');
                });
        });
    </script>
    <script>
        function obtenerBloqueosFueraHorario(horarios) {
            const diasSemana = ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'];
            const diasMap = {
                'domingo': 0,
                'lunes': 1,
                'martes': 2,
                'miércoles': 3,
                'miercoles': 3,
                'jueves': 4,
                'viernes': 5,
                'sábado': 6,
                'sabado': 6
            };

            const bloqueos = [];
            const horariosMap = {};

            // Organiza horarios por día
            horarios.forEach(h => {
                const dia = h.dia_semana.toLowerCase();
                horariosMap[dia] = {
                    start: h.hora_inicio,
                    end: h.hora_fin
                };
            });

            diasSemana.forEach(dia => {
                const diaLower = dia.toLowerCase();
                const diaNum = diasMap[diaLower];

                if (!horariosMap[diaLower]) {
                    // No hay horario => bloquear todo el día
                    bloqueos.push({
                        daysOfWeek: [diaNum],
                        startTime: '00:00',
                        endTime: '24:00',
                        display: 'background',
                        color: '#d1d5db', // gris claro
                        groupId: 'fuera-horario',
                    });
                } else {
                    const {
                        start,
                        end
                    } = horariosMap[diaLower];
                    if (start !== '00:00') {
                        bloqueos.push({
                            daysOfWeek: [diaNum],
                            startTime: '00:00',
                            endTime: start,
                            display: 'background',
                            color: '#d1d5db',
                            groupId: 'fuera-horario',
                        });
                    }
                    if (end !== '24:00') {
                        bloqueos.push({
                            daysOfWeek: [diaNum],
                            startTime: end,
                            endTime: '24:00',
                            display: 'background',
                            color: '#d1d5db',
                            groupId: 'fuera-horario',
                        });
                    }
                }
            });

            return bloqueos;
        }
    </script>
@endpush