<?= $this->extend('layouts/admin') ?>

<?= $this->section('title') ?>Programar Función<?= $this->endSection() ?>

<?= $this->section('content') ?>
<div style="display: flex; gap: 24px; flex-wrap: wrap;">
    <!-- Formulario de Creación -->
    <div class="form-container" style="flex: 1; min-width: 320px; max-width: 600px; margin-bottom: 0;">
        <div class="form-header">
            <h2>Programar Nueva Función</h2>
            <p>Ingresa los detalles del horario, sala y precio base para la proyección.</p>
        </div>

        <form action="<?= base_url('admin/funciones/guardar') ?>" method="POST" id="funcionForm">
            <?= csrf_field() ?>

            <!-- Alerta dinámica de conflictos y validación -->
            <div id="conflictAlert" class="alert alert-danger" style="display: none; margin-bottom: 20px; border-radius: 12px; padding: 12px; font-weight: 600; font-size: 0.9rem; color: #000;"></div>

            <!-- Película -->
            <div class="form-group">
                <label for="id_pelicula">Película</label>
                <select name="id_pelicula" id="id_pelicula" required>
                    <option value="" disabled selected>Selecciona una película</option>
                    <?php foreach ($peliculas as $pel): ?>
                        <option value="<?= $pel->id_pelicula ?>" <?= old('id_pelicula') == $pel->id_pelicula ? 'selected' : '' ?>>
                            <?= esc($pel->titulo) ?> (<?= esc($pel->duracion_min) ?> min)
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>

            <!-- Local -->
            <div class="form-group">
                <label for="id_local">Local / Sede</label>
                <select name="id_local" id="id_local" required>
                    <option value="" disabled selected>Selecciona una sede</option>
                    <?php foreach ($locales as $loc): ?>
                        <option value="<?= $loc->id_local ?>" <?= old('id_local') == $loc->id_local ? 'selected' : '' ?>>
                            <?= esc($loc->nombre) ?> - <?= esc($loc->ciudad) ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>

            <!-- Sala -->
            <div class="form-group">
                <label for="id_sala">Sala</label>
                <select name="id_sala" id="id_sala" required disabled>
                    <option value="" disabled selected>Selecciona una sede primero</option>
                </select>
                <span class="help-text" id="salaHelpText">Selecciona un local para cargar las salas disponibles.</span>
            </div>

            <!-- Fecha -->
            <div class="form-group">
                <label for="fecha">Fecha de Proyección</label>
                <input type="date" name="fecha" id="fecha" value="<?= old('fecha') ?? date('Y-m-d') ?>" required>
            </div>

            <!-- Hora de Inicio -->
            <div class="form-group">
                <label for="hora_inicio">Hora de Inicio</label>
                <input type="time" name="hora_inicio" id="hora_inicio" value="<?= old('hora_inicio') ?>" required>
                <span class="help-text">La hora de fin se calculará sumando la duración y 15 min de limpieza.</span>
            </div>

            <!-- Precio Base -->
            <div class="form-group">
                <label for="precio_base">Precio Base (S/.)</label>
                <input type="number" step="0.10" name="precio_base" id="precio_base" placeholder="20.00" value="<?= old('precio_base') ?>" required>
            </div>

            <!-- Estado -->
            <div class="form-group">
                <label for="estado">Estado Inicial</label>
                <select name="estado" id="estado" required>
                    <option value="programada" selected>Programada</option>
                    <option value="en_curso">En Curso</option>
                    <option value="finalizada">Finalizada</option>
                    <option value="cancelada">Cancelada</option>
                </select>
            </div>

            <div style="display: flex; gap: 12px; margin-top: 24px;">
                <button type="submit" id="btnSubmit" class="btn btn-primary" style="flex: 1;">Guardar Función</button>
                <a href="<?= base_url('admin/funciones') ?>" class="btn" style="background: var(--admin-border); color: var(--admin-text);">Cancelar</a>
            </div>
        </form>
    </div>

    <!-- Previsualización del Mapa de Asientos -->
    <div style="flex: 1.2; min-width: 320px; background: var(--admin-surface); border: 1px solid var(--admin-border); border-radius: 24px; padding: 28px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); display: flex; flex-direction: column;">
        <h3 style="margin-top: 0; color: var(--admin-text); font-size: 1.2rem;">Distribución de la Sala</h3>
        <p style="color: var(--admin-muted); font-size: 0.9rem; margin-bottom: 20px;">Previsualiza la disposición física de las butacas para la sala seleccionada.</p>

        <!-- Contenedor del Mapa -->
        <div id="seatMapContainer" style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; background: var(--admin-surface-alt); border-radius: 16px; border: 1px dashed var(--admin-border); padding: 20px; position: relative;">
            <div id="mapPlaceholder" style="text-align: center; color: var(--admin-muted);">
                <span style="font-size: 3rem; display: block; margin-bottom: 12px;">🎞️</span>
                <p>Selecciona una sala para visualizar su distribución de asientos.</p>
            </div>
            
            <div id="mapLoader" style="display: none; text-align: center; color: var(--admin-muted);">
                <div class="loader" style="width: 40px; height: 40px; border: 4px solid var(--admin-border); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 16px;"></div>
                <p>Cargando distribución de asientos...</p>
            </div>

            <!-- Botón Generación de Asientos (Oculto por defecto) -->
            <div id="noSeatsWarning" style="display: none; text-align: center; max-width: 320px; padding: 20px;">
                <span style="font-size: 3rem; display: block; margin-bottom: 12px;">⚠️</span>
                <h4 style="margin: 0 0 8px; color: var(--admin-text);">Sala sin Asientos</h4>
                <p style="font-size: 0.85rem; color: var(--admin-muted); margin-bottom: 16px;">Esta sala no tiene asientos configurados en la base de datos. Se requiere inicializarlos para que los clientes puedan reservar.</p>
                <button type="button" id="btnGenerarAsientos" class="btn btn-secondary" style="width: 100%;">Autogenerar Asientos</button>
            </div>

            <!-- Mapa SVG de Asientos -->
            <svg id="svgSeatMap" style="width: 100%; height: 100%; display: none; min-height: 280px;" viewBox="0 0 500 300"></svg>
        </div>

        <!-- Leyenda -->
        <div id="mapLegend" style="display: none; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; font-size: 0.8rem;">
            <div style="display: flex; align-items: center; gap: 8px;">
                <span style="width: 16px; height: 16px; background: #1a73e8; border-radius: 4px; display: inline-block;"></span>
                <span style="color: var(--admin-text);">Estándar</span>
            </div>
            <div style="display: flex; align-items: center; gap: 8px;">
                <span style="width: 16px; height: 16px; background: #f4b400; border-radius: 4px; display: inline-block;"></span>
                <span style="color: var(--admin-text);">Preferencial</span>
            </div>
            <div style="display: flex; align-items: center; gap: 8px;">
                <span style="width: 16px; height: 16px; background: #9c27b0; border-radius: 4px; display: inline-block;"></span>
                <span style="color: var(--admin-text);">Accesible (Silla)</span>
            </div>
        </div>
    </div>
</div>

<style>
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
</style>

<!-- Importar Axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const localSelect = document.getElementById('id_local');
    const salaSelect = document.getElementById('id_sala');
    const salaHelpText = document.getElementById('salaHelpText');
    
    const mapPlaceholder = document.getElementById('mapPlaceholder');
    const mapLoader = document.getElementById('mapLoader');
    const noSeatsWarning = document.getElementById('noSeatsWarning');
    const svgSeatMap = document.getElementById('svgSeatMap');
    const mapLegend = document.getElementById('mapLegend');
    const btnGenerarAsientos = document.getElementById('btnGenerarAsientos');

    let currentSalaId = null;

    // Recargar las salas (con info de disponibilidad) cuando cambia local, fecha, hora o película
    async function cargarSalas() {
        const id_local = localSelect.value;
        if (!id_local) return;

        const id_pelicula = peliculaSelect.value;
        const fecha       = fechaInput.value;
        const hora_inicio = horaInicioInput.value;

        salaSelect.disabled = true;
        salaSelect.innerHTML = '<option value="" disabled selected>Cargando salas...</option>';
        resetSeatMap();

        try {
            // Pasar parámetros opcionales para que el servidor indique conflictos por sala
            const params = { id_pelicula, fecha, hora_inicio };
            const response = await axios.get(`<?= base_url('admin/funciones/salas-por-local') ?>/${id_local}`, { params });
            const salas = response.data;

            salaSelect.innerHTML = '<option value="" disabled selected>Selecciona una sala</option>';

            if (salas.length > 0) {
                let hayConflictos = false;

                salas.forEach(sala => {
                    const opt = document.createElement('option');
                    opt.value = sala.id_sala;
                    opt.dataset.capacidad = sala.capacidad;

                    if (sala.disponible === false) {
                        // Sala con conflicto: deshabilitar y etiquetar
                        opt.disabled = true;
                        opt.textContent = `⛔ ${sala.nombre} (${sala.tipo}) — ${sala.conflicto}`;
                        opt.style.color = '#ef4444';
                        hayConflictos = true;
                    } else {
                        opt.textContent = `✅ ${sala.nombre} (${sala.tipo} - Cap. ${sala.capacidad})`;
                    }

                    salaSelect.appendChild(opt);
                });

                salaSelect.disabled = false;

                if (hayConflictos && fecha && hora_inicio && id_pelicula) {
                    salaHelpText.textContent = '⚠️ Las salas marcadas con ⛔ están ocupadas en ese horario y no pueden seleccionarse.';
                    salaHelpText.style.color = '#f97316';
                } else {
                    salaHelpText.textContent = 'Selecciona una sala para la función.';
                    salaHelpText.style.color = '';
                }
            } else {
                salaHelpText.textContent = 'Este local no tiene salas disponibles.';
                salaHelpText.style.color = '';
                salaSelect.innerHTML = '<option value="" disabled selected>No hay salas en este local</option>';
            }
        } catch (error) {
            console.error('Error al cargar salas:', error);
            salaHelpText.textContent = 'Error al cargar las salas. Intenta nuevamente.';
        }
    }

    // Escuchar cambios en el selector de local
    localSelect.addEventListener('change', async function() {
        currentSalaId = null;
        await cargarSalas();
    });

    // Escuchar cambios en el selector de sala
    salaSelect.addEventListener('change', function() {
        currentSalaId = this.value;

        // Si la opción seleccionada tiene conflicto (aunque esté deshabilitada por JS puede seleccionarse en algunos browsers),
        // verificarDisponibilidad lo detectará y mostrará el mensaje específico.
        if (currentSalaId) {
            cargarMapaAsientos(currentSalaId);
            verificarDisponibilidad();
        }
    });

    // Escuchar clic en autogenerar asientos
    btnGenerarAsientos.addEventListener('click', async function() {
        if (!currentSalaId) return;
        
        btnGenerarAsientos.disabled = true;
        btnGenerarAsientos.textContent = 'Generando...';

        try {
            const response = await axios.post(`<?= base_url('admin/funciones/generar-asientos') ?>/${currentSalaId}`);
            alert(response.data.message);
            cargarMapaAsientos(currentSalaId);
        } catch (error) {
            console.error('Error al generar asientos:', error);
            alert(error.response?.data?.message || 'Error al generar asientos.');
        } finally {
            btnGenerarAsientos.disabled = false;
            btnGenerarAsientos.textContent = 'Autogenerar Asientos';
        }
    });

    function resetSeatMap() {
        mapPlaceholder.style.display = 'block';
        mapLoader.style.display = 'none';
        noSeatsWarning.style.display = 'none';
        svgSeatMap.style.display = 'none';
        mapLegend.style.display = 'none';
        svgSeatMap.innerHTML = '';
    }

    async function cargarMapaAsientos(id_sala) {
        mapPlaceholder.style.display = 'none';
        noSeatsWarning.style.display = 'none';
        svgSeatMap.style.display = 'none';
        mapLegend.style.display = 'none';
        mapLoader.style.display = 'block';
        svgSeatMap.innerHTML = '';

        try {
            const response = await axios.get(`<?= base_url('admin/funciones/asientos-sala') ?>/${id_sala}`);
            const asientos = response.data;

            mapLoader.style.display = 'none';

            if (asientos.length === 0) {
                noSeatsWarning.style.display = 'block';
                return;
            }

            renderSVGMap(asientos);
        } catch (error) {
            console.error('Error al cargar asientos:', error);
            mapLoader.style.display = 'none';
            mapPlaceholder.style.display = 'block';
            mapPlaceholder.querySelector('p').textContent = 'Error al previsualizar la sala.';
        }
    }

    function renderSVGMap(asientos) {
        // Encontrar filas y columnas únicas
        const rows = [...new Set(asientos.map(a => a.fila))].sort();
        const cols = [...new Set(asientos.map(a => parseInt(a.numero)))].sort((a, b) => a - b);

        const numRows = rows.length;
        const numCols = cols.length;

        // Configuración de renderizado
        const seatWidth = 24;
        const seatHeight = 24;
        const spacingX = 8;
        const spacingY = 10;
        
        const rowLabelWidth = 20;
        const screenMarginTop = 40;

        const totalWidth = rowLabelWidth + numCols * (seatWidth + spacingX);
        const totalHeight = screenMarginTop + numRows * (seatHeight + spacingY) + 20;

        // Ajustar viewBox del SVG
        svgSeatMap.setAttribute('viewBox', `0 0 ${totalWidth} ${totalHeight}`);
        svgSeatMap.style.display = 'block';
        mapLegend.style.display = 'grid';

        // 1. Dibujar la pantalla en el tope del SVG
        const screenWidth = totalWidth - 80;
        const screenX = 40;
        const screenY = 15;
        const screenCurve = 10;

        const pathScreen = document.createElementNS("http://www.w3.org/2000/svg", "path");
        pathScreen.setAttribute('d', `M ${screenX} ${screenY + screenCurve} Q ${screenX + screenWidth/2} ${screenY} ${screenX + screenWidth} ${screenY + screenCurve}`);
        pathScreen.setAttribute('stroke', '#e2e8f0');
        pathScreen.setAttribute('stroke-width', '4');
        pathScreen.setAttribute('fill', 'none');
        pathScreen.setAttribute('style', 'filter: drop-shadow(0px 2px 8px rgba(30,144,255,0.4));');
        svgSeatMap.appendChild(pathScreen);

        // Texto de Pantalla
        const textScreen = document.createElementNS("http://www.w3.org/2000/svg", "text");
        textScreen.setAttribute('x', (totalWidth / 2).toString());
        textScreen.setAttribute('y', (screenY + 24).toString());
        textScreen.setAttribute('text-anchor', 'middle');
        textScreen.setAttribute('fill', 'var(--admin-muted)');
        textScreen.setAttribute('font-size', '9');
        textScreen.setAttribute('font-weight', 'bold');
        textScreen.textContent = "PANTALLA";
        svgSeatMap.appendChild(textScreen);

        // 2. Renderizar filas y butacas
        rows.forEach((row, rIdx) => {
            const y = screenMarginTop + rIdx * (seatHeight + spacingY);

            // Etiqueta de la fila a la izquierda
            const labelLeft = document.createElementNS("http://www.w3.org/2000/svg", "text");
            labelLeft.setAttribute('x', '5');
            labelLeft.setAttribute('y', (y + seatHeight/2 + 4).toString());
            labelLeft.setAttribute('fill', 'var(--admin-muted)');
            labelLeft.setAttribute('font-size', '11');
            labelLeft.setAttribute('font-weight', 'bold');
            labelLeft.textContent = row;
            svgSeatMap.appendChild(labelLeft);

            // Butacas de esta fila
            cols.forEach((col, cIdx) => {
                const asiento = asientos.find(a => a.fila === row && parseInt(a.numero) === col);
                if (!asiento) return; // Espacio vacío

                const x = rowLabelWidth + cIdx * (seatWidth + spacingX);

                // Grupo para cada butaca
                const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
                group.style.cursor = 'pointer';

                // Rectángulo del asiento
                const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
                rect.setAttribute('x', x.toString());
                rect.setAttribute('y', y.toString());
                rect.setAttribute('width', seatWidth.toString());
                rect.setAttribute('height', seatHeight.toString());
                rect.setAttribute('rx', '6'); // bordes redondeados

                // Color según tipo de butaca
                let fill = '#1a73e8'; // estándar
                if (asiento.tipo === 'preferencial') {
                    fill = '#f4b400';
                } else if (asiento.tipo === 'discapacitado') {
                    fill = '#9c27b0';
                }
                rect.setAttribute('fill', fill);
                group.appendChild(rect);

                // Número de asiento
                const numText = document.createElementNS("http://www.w3.org/2000/svg", "text");
                numText.setAttribute('x', (x + seatWidth/2).toString());
                numText.setAttribute('y', (y + seatHeight/2 + 4).toString());
                numText.setAttribute('text-anchor', 'middle');
                numText.setAttribute('fill', '#ffffff');
                numText.setAttribute('font-size', '8');
                numText.setAttribute('font-weight', 'bold');
                numText.textContent = col.toString();
                group.appendChild(numText);

                // Tooltip amigable
                const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
                title.textContent = `Asiento: ${row}${col}\nTipo: ${asiento.tipo.toUpperCase()}`;
                group.appendChild(title);

                svgSeatMap.appendChild(group);
            });
        });
    }

    // --- Validaciones en Tiempo Real (Anticipación y Traslapes) ---
    const peliculaSelect = document.getElementById('id_pelicula');
    const fechaInput = document.getElementById('fecha');
    const horaInicioInput = document.getElementById('hora_inicio');
    const btnSubmit = document.getElementById('btnSubmit');
    const conflictAlert = document.getElementById('conflictAlert');

    async function verificarDisponibilidad() {
        const id_pelicula = peliculaSelect.value;
        const id_sala = salaSelect.value;
        const fecha = fechaInput.value;
        const hora_inicio = horaInicioInput.value;

        // Ocultar alerta de conflictos previa y reestablecer estados de inputs
        conflictAlert.style.display = 'none';
        conflictAlert.textContent = '';
        btnSubmit.disabled = false;
        fechaInput.style.borderColor = '';
        salaSelect.style.borderColor = '';
        horaInicioInput.style.borderColor = '';

        // 1. Validación de fecha local rápida (anticipación de 1 día)
        if (fecha) {
            const today = new Date();
            today.setHours(0,0,0,0);
            
            const tomorrow = new Date(today);
            tomorrow.setDate(tomorrow.getDate() + 1);

            const selectedDate = new Date(fecha + 'T00:00:00'); // Evita desfases de huso horario

            if (selectedDate < tomorrow) {
                conflictAlert.textContent = 'La función se debe programar con al menos 1 día de anticipación (a partir de mañana).';
                conflictAlert.style.display = 'block';
                btnSubmit.disabled = true;
                fechaInput.style.borderColor = 'var(--danger)';
                return;
            }
        }

        // Si faltan datos clave, no realizamos la comprobación de traslapes en el servidor
        if (!id_pelicula || !id_sala || !fecha || !hora_inicio) {
            return;
        }

        try {
            // 2. Validación AJAX mediante Axios (traslapes de horario de sala)
            const response = await axios.get('<?= base_url("admin/funciones/validar-disponibilidad") ?>', {
                params: {
                    id_pelicula,
                    id_sala,
                    fecha,
                    hora_inicio
                }
            });

            const data = response.data;

            if (!data.disponible) {
                conflictAlert.textContent = data.mensaje;
                conflictAlert.style.display = 'block';
                btnSubmit.disabled = true;

                if (data.motivo === 'anticipacion') {
                    fechaInput.style.borderColor = 'var(--danger)';
                } else if (data.motivo === 'traslape') {
                    salaSelect.style.borderColor = 'var(--danger)';
                    horaInicioInput.style.borderColor = 'var(--danger)';
                }
            }
        } catch (error) {
            console.error('Error al validar disponibilidad:', error);
        }
    }

    // Adjuntar escuchas de eventos para validación en tiempo real
    // Al cambiar película, fecha u hora → refrescar disponibilidad Y opciones de sala
    async function onParametroCambia() {
        // Si hay un local seleccionado, recargar salas con nueva info de disponibilidad
        if (localSelect.value) {
            await cargarSalas();
        }
        // Luego validar disponibilidad para la sala actualmente seleccionada
        await verificarDisponibilidad();
    }

    peliculaSelect.addEventListener('change', onParametroCambia);
    fechaInput.addEventListener('change', onParametroCambia);
    horaInicioInput.addEventListener('change', onParametroCambia);
});
</script>
<?= $this->endSection() ?>
