import './bootstrap';
// 1. Importar jQuery
import jQuery, { ready } from 'jquery';

// 2. Hacerlo global (IMPORTANTE para que funcione $(document).ready en Blade)
window.$ = window.jQuery = jQuery;

// 3. Importar Select2
import select2 from 'select2';
select2(); // Inicializar el plugin

// 4. Importar los estilos de Select2 (Opcional aquí, o en CSS)
import 'select2/dist/css/select2.css';

import { Calendar } from '@fullcalendar/core'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'

document.addEventListener('DOMContentLoaded', function () {

    const calendarEl = document.getElementById('calendar')

    if (!calendarEl) return

    const calendar = new Calendar(calendarEl, {
        plugins: [dayGridPlugin, interactionPlugin],

        initialView: 'dayGridMonth',
        locale: 'es',

        buttonText: {
            today: 'Volver a Hoy'
        },

        displayEventTime: false,
        contentHeight: 'auto',
        eventDisplay: 'block',
        fixedWeekCount: false,

        selectable: true,

        /*
        dateClick: function(info) {
            let fecha = info.dateStr
            window.location.href = `/agenda/dia/${fecha}`
        },
        */
        eventClick: function (info) {
            const evento = info.event;
            const modal = document.getElementById("eventModal");
            if (!modal) return;

            modal.classList.remove("hidden");
            document.body.style.overflow = "hidden";

            // Llenar campos dinámicos
            document.getElementById("modalClientName").innerText = evento.extendedProps.client_name ?? 'Sin asignar';
            document.getElementById("modalBikeModel").innerText = evento.extendedProps.bike_model ?? 'Sin modelo';

            // Formatear Fecha y Hora
            const fecha = evento.start;
            const dateStr = fecha.toLocaleDateString("es-AR", {
                weekday: 'long',
                day: 'numeric',
                month: 'long',
                year: 'numeric'
            });
            const timeStr = fecha.toLocaleTimeString("es-AR", {
                hour: '2-digit',
                minute: '2-digit',
                hour12: false
            });
            const formattedDateTime = dateStr.charAt(0).toUpperCase() + dateStr.slice(1) + " a las " + timeStr;
            document.getElementById("modalDateTime").innerText = formattedDateTime;

            const url = window.appointmentShowTemplate.replace(':id', evento.id);
            document.getElementById("viewEventBtn").href = url;

            // Mapear Badge de Estado y clases correspondientes (estilo pastel idéntico a pendiente)
            const statusMap = {
                pending: { label: 'Pendiente', classes: ['bg-red-100', 'text-red-800', 'border-red-200', 'dark:bg-red-900/30', 'dark:text-red-400', 'dark:border-red-800'] },
                confirmed: { label: 'Confirmado', classes: ['bg-blue-100', 'text-blue-800', 'border-blue-200', 'dark:bg-blue-900/30', 'dark:text-blue-400', 'dark:border-blue-800'] },
                in_progress: { label: 'En progreso', classes: ['bg-orange-100', 'text-orange-800', 'border-orange-200', 'dark:bg-orange-950/30', 'dark:text-orange-400', 'dark:border-orange-800'] },
                ready: { label: 'Listo', classes: ['bg-green-100', 'text-green-800', 'border-green-200', 'dark:bg-green-900/30', 'dark:text-green-450', 'dark:border-green-800'] },
                delivered: { label: 'Entregado', classes: ['bg-neutral-100', 'text-neutral-800', 'border-neutral-200', 'dark:bg-neutral-800', 'dark:text-neutral-400', 'dark:border-neutral-700'] }
            };
            const statusObj = statusMap[evento.extendedProps.status] || { label: 'Desconocido', classes: ['bg-neutral-100', 'text-neutral-800', 'border-neutral-200'] };
            
            const badge = document.getElementById("modalStatusBadge");
            if (badge) {
                badge.innerText = statusObj.label;
                badge.className = "px-2.5 py-0.5 text-xs font-black rounded-full uppercase tracking-wider border";
                statusObj.classes.forEach(c => badge.classList.add(c));
            }
        },

        events: window.appointments ?? [],

        eventDidMount: function (info) {

            const status = info.event.extendedProps.status

            const colors = {
                pending: '#ef4444',
                in_progress: '#f59e0b',
                completed: '#22c55e',
                ready: '#22c55e',
                delivered: '#22c55e'
            }

            const color = colors[status] ?? '#3b82f6'

            info.event.setProp('backgroundColor', color)
            info.event.setProp('borderColor', color)
            info.event.setProp('textColor', '#ffffff')
        }

    })

    calendar.render()

    // Manejo del cierre del modal con múltiples triggers (Cerrar, Botón X y Click afuera)
    const closeModalElements = [
        document.getElementById("closeModal"),
        document.getElementById("closeModalCross"),
        document.getElementById("eventModal")
    ]

    closeModalElements.forEach(el => {
        if (el) {
            el.addEventListener("click", function (e) {
                if (el.id === "eventModal" && e.target !== el) return;
                document.getElementById("eventModal").classList.add("hidden")
                document.body.style.overflow = "auto"
            })
        }
    })

})

// Ver contraseña, con JQuery
$(document).on('click', '#togglePassword', function () {
    const input = $('#passwordInput');
    const isPassword = input.attr('type') === 'password';

    input.attr('type', isPassword ? 'text' : 'password');
    $('#iconShow').toggleClass('hidden', isPassword);
    $('#iconHide').toggleClass('hidden', !isPassword);
});

$(document).on('click', '#togglePasswordConfirm', function () {
    const input = $('#passwordConfirmInput');
    const isPassword = input.attr('type') === 'password';

    input.attr('type', isPassword ? 'text' : 'password');
    $('#iconShowConfirm').toggleClass('hidden', isPassword);
    $('#iconHideConfirm').toggleClass('hidden', !isPassword);
});