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")

            const statusMap = {
                pending: 'Pendiente',
                confirmed: 'Confirmado',
                in_progress: 'En progreso',
                ready: 'Listo',
                delivered: 'Entregado'
            }

            const estado = statusMap[evento.extendedProps.status] ?? 'desconocido'

            document.getElementById("modalTitle").innerText =
                evento.extendedProps.description + " - " + estado

            const fecha = evento.start

            const hora = fecha.toLocaleTimeString("es-AR", {
                hour: "2-digit",
                minute: "2-digit",
                hour12: false
            })

            document.getElementById("modalDate").innerText =
                "Hora: " + hora

            const url = window.appointmentShowTemplate.replace(':id', evento.id)

            document.getElementById("viewEventBtn").href = url
        },

        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()

    const closeBtn = document.getElementById("closeModal")

    if (closeBtn) {
        closeBtn.addEventListener("click", function () {
            document.getElementById("eventModal").classList.add("hidden")
            document.body.style.overflow = "auto"
        })
    }

})