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

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

<?= $this->section('content') ?>
<div class="form-container" style="max-width: 600px; margin: 0 auto;">
    <div class="form-header">
        <h2>Editar Función #<?= esc($funcion->id_funcion) ?></h2>
        <p>Modifica la programación de horarios, salas o el precio base de la función.</p>
    </div>

    <form action="<?= base_url('admin/funciones/actualizar/' . $funcion->id_funcion) ?>" method="POST" id="editFuncionForm">
        <?= csrf_field() ?>

        <!-- Alerta de Conflictos dinámica -->
        <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>
                <?php foreach ($peliculas as $pel): ?>
                    <option value="<?= $pel->id_pelicula ?>" <?= (old('id_pelicula') ?? $funcion->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>
                <?php foreach ($locales as $loc): ?>
                    <option value="<?= $loc->id_local ?>" <?= (old('id_local') ?? $id_local_actual) == $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>
                <?php foreach ($salas as $sala): ?>
                    <option value="<?= $sala->id_sala ?>" <?= (old('id_sala') ?? $funcion->id_sala) == $sala->id_sala ? 'selected' : '' ?>>
                        <?= esc($sala->nombre) ?> (<?= esc($sala->tipo) ?>)
                    </option>
                <?php endforeach; ?>
            </select>
        </div>

        <!-- Fecha -->
        <div class="form-group">
            <label for="fecha">Fecha de Proyección</label>
            <input type="date" name="fecha" id="fecha" value="<?= old('fecha') ?? esc($funcion->fecha) ?>" 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') ?? esc($funcion->hora_inicio) ?>" required>
            <span class="help-text">La hora de fin se recalculará automáticamente.</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') ?? esc($funcion->precio_base) ?>" required>
        </div>

        <!-- Estado -->
        <div class="form-group">
            <label for="estado">Estado de la Función</label>
            <select name="estado" id="estado" required>
                <option value="programada" <?= (old('estado') ?? $funcion->estado) === 'programada' ? 'selected' : '' ?>>Programada</option>
                <option value="en_curso" <?= (old('estado') ?? $funcion->estado) === 'en_curso' ? 'selected' : '' ?>>En Curso</option>
                <option value="finalizada" <?= (old('estado') ?? $funcion->estado) === 'finalizada' ? 'selected' : '' ?>>Finalizada</option>
                <option value="cancelada" <?= (old('estado') ?? $funcion->estado) === 'cancelada' ? 'selected' : '' ?>>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;">Actualizar 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>

<!-- 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 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');

    // ID de la función actual para excluirla en la verificación de traslapes
    const id_funcion_actual = '<?= $funcion->id_funcion ?>';

    // --- Carga dinámica de salas con info de disponibilidad ---
    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>';

        try {
            const params = { id_pelicula, fecha, hora_inicio, id_funcion: id_funcion_actual };
            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;
                const idSalaActual = '<?= $funcion->id_sala ?>';

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

                    if (sala.disponible === false) {
                        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})`;
                        if (sala.id_sala == idSalaActual) opt.selected = true;
                    }

                    salaSelect.appendChild(opt);
                });

                salaSelect.disabled = false;

                if (hayConflictos && fecha && hora_inicio && id_pelicula) {
                    const helpEl = document.querySelector('#id_sala ~ .help-text') || document.createElement('span');
                    helpEl.textContent = '⚠️ Las salas con ⛔ están ocupadas en ese horario.';
                    helpEl.style.color = '#f97316';
                }
            } else {
                salaSelect.innerHTML = '<option value="" disabled selected>No hay salas en este local</option>';
            }
        } catch (error) {
            console.error('Error al cargar salas:', error);
            salaSelect.innerHTML = '<option value="" disabled selected>Error al cargar salas</option>';
        }
    }

    localSelect.addEventListener('change', async function() {
        await cargarSalas();
    });

    // --- Validación en Tiempo Real (Anticipación y Traslapes) ---
    async function verificarDisponibilidad() {
        const id_pelicula = peliculaSelect.value;
        const id_sala = salaSelect.value;
        const fecha = fechaInput.value;
        const hora_inicio = horaInicioInput.value;

        // Limpiar alertas previas y restaurar estados
        conflictAlert.style.display = 'none';
        conflictAlert.textContent = '';
        btnSubmit.disabled = false;
        fechaInput.style.borderColor = '';
        salaSelect.style.borderColor = '';
        horaInicioInput.style.borderColor = '';

        // 1. Validación local de 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');

            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;
            }
        }

        // Sin datos suficientes, no se hace la llamada al servidor
        if (!id_pelicula || !id_sala || !fecha || !hora_inicio) {
            return;
        }

        try {
            // 2. Verificación AJAX de traslapes en el servidor (excluyendo esta misma función)
            const response = await axios.get('<?= base_url("admin/funciones/validar-disponibilidad") ?>', {
                params: {
                    id_pelicula,
                    id_sala,
                    fecha,
                    hora_inicio,
                    id_funcion: id_funcion_actual
                }
            });

            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);
        }
    }

    // Al cambiar película, fecha u hora → refrescar disponibilidad Y opciones de sala
    async function onParametroCambia() {
        if (localSelect.value) {
            await cargarSalas();
        }
        await verificarDisponibilidad();
    }

    // Escuchas de eventos para validación en tiempo real
    peliculaSelect.addEventListener('change', onParametroCambia);
    salaSelect.addEventListener('change', verificarDisponibilidad);
    fechaInput.addEventListener('change', onParametroCambia);
    horaInicioInput.addEventListener('change', onParametroCambia);
});

</script>
<?= $this->endSection() ?>
