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

<?= $this->section('title') ?>Gestión de Funciones<?= $this->endSection() ?>

<?= $this->section('content') ?>
<section class="panel-card">
    <div class="panel-header">
        <div>
            <span class="panel-eyebrow">Programación</span>
            <h2>Funciones de Películas</h2>
            <p>Define salas, horarios, películas y precios base para la cartelera.</p>
        </div>
        <a href="<?= base_url('admin/funciones/crear') ?>" class="btn btn-primary">+ Nueva Función</a>
    </div>

    <!-- Filtros de Búsqueda -->
    <form method="GET" action="<?= base_url('admin/funciones') ?>" class="search-panel" id="filterForm">
        <div class="search-box" style="display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 20px;">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; width: 100%;">
                
                <!-- Búsqueda General -->
                <div>
                    <label style="font-size: 0.8rem; font-weight: 700; color: var(--admin-muted); display: block; margin-bottom: 4px;">Buscar</label>
                    <input type="text" name="q" placeholder="Película, sala, local..." value="<?= esc($terminoBusqueda) ?>" style="width: 100%; border: 1px solid var(--admin-border); padding: 8px 12px; border-radius: 10px; background: var(--admin-surface-alt);">
                </div>

                <!-- Película -->
                <div>
                    <label style="font-size: 0.8rem; font-weight: 700; color: var(--admin-muted); display: block; margin-bottom: 4px;">Película</label>
                    <select name="id_pelicula" style="width: 100%; border: 1px solid var(--admin-border); padding: 8px 12px; border-radius: 10px; background: var(--admin-surface-alt);">
                        <option value="">Todas las películas</option>
                        <?php foreach ($peliculas as $pelicula): ?>
                            <option value="<?= $pelicula->id_pelicula ?>" <?= $filtros['id_pelicula'] == $pelicula->id_pelicula ? 'selected' : '' ?>>
                                <?= esc($pelicula->titulo) ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>

                <!-- Local -->
                <div>
                    <label style="font-size: 0.8rem; font-weight: 700; color: var(--admin-muted); display: block; margin-bottom: 4px;">Local / Cine</label>
                    <select name="id_local" id="localFilter" style="width: 100%; border: 1px solid var(--admin-border); padding: 8px 12px; border-radius: 10px; background: var(--admin-surface-alt);">
                        <option value="">Todos los locales</option>
                        <?php foreach ($locales as $local): ?>
                            <option value="<?= $local->id_local ?>" <?= $filtros['id_local'] == $local->id_local ? 'selected' : '' ?>>
                                <?= esc($local->nombre) ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>

                <!-- Fecha -->
                <div>
                    <label style="font-size: 0.8rem; font-weight: 700; color: var(--admin-muted); display: block; margin-bottom: 4px;">Fecha</label>
                    <input type="date" name="fecha" value="<?= esc($filtros['fecha']) ?>" style="width: 100%; border: 1px solid var(--admin-border); padding: 8px 12px; border-radius: 10px; background: var(--admin-surface-alt);">
                </div>

            </div>
            
            <div style="display: flex; gap: 8px; align-self: flex-end;">
                <a href="<?= base_url('admin/funciones') ?>" class="btn" style="background: var(--admin-border); color: var(--admin-text);">Limpiar</a>
                <button type="submit" class="btn btn-secondary">Filtrar Cartelera</button>
            </div>
        </div>
    </form>

    <?php if (empty($funciones)): ?>
        <div class="empty-state" style="padding: 60px 20px; text-align: center; color: var(--admin-muted);">
            No se encontraron funciones programadas en este momento.
        </div>
    <?php else: ?>
        <div class="table-wrapper">
            <table>
                <thead>
                    <tr>
                        <th>Película</th>
                        <th>Cine / Sala</th>
                        <th>Fecha</th>
                        <th>Horario</th>
                        <th>Precio Base</th>
                        <th>Estado</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($funciones as $funcion): ?>
                        <tr>
                            <td>
                                <div style="display: flex; align-items: center; gap: 12px;">
                                    <?php if ($funcion->pelicula_poster): ?>
                                        <img src="<?= base_url('uploads/posters/' . $funcion->pelicula_poster) ?>" 
                                             onerror="this.src='https://placehold.co/45x65?text=Poster'" 
                                             alt="Poster" style="width: 36px; height: 50px; border-radius: 6px; object-fit: cover; box-shadow: 0 4px 10px rgba(0,0,0,0.15);">
                                    <?php else: ?>
                                        <div style="width: 36px; height: 50px; background: var(--admin-border); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: var(--admin-muted);">No Poster</div>
                                    <?php endif; ?>
                                    <div>
                                        <strong><?= esc($funcion->pelicula_titulo) ?></strong>
                                        <p style="margin: 0; font-size: 0.8rem; color: var(--admin-muted);"><?= esc($funcion->pelicula_duracion) ?> min</p>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div>
                                    <strong><?= esc($funcion->local_nombre) ?></strong>
                                    <p style="margin: 0; font-size: 0.8rem; color: var(--admin-muted);"><?= esc($funcion->sala_nombre) ?> (<?= esc($funcion->sala_tipo) ?>)</p>
                                </div>
                            </td>
                            <td><?= date('d/m/Y', strtotime($funcion->fecha)) ?></td>
                            <td>
                                <div>
                                    <span style="font-weight: 600; color: var(--admin-text);"><?= esc($funcion->getHoraInicio12h()) ?></span>
                                    <p style="margin: 0; font-size: 0.75rem; color: var(--admin-muted);">Fin: <?= esc($funcion->getHoraFin12h()) ?></p>
                                </div>
                            </td>
                            <td>S/. <?= number_format($funcion->precio_base, 2) ?></td>
                            <td>
                                <?= $funcion->getEstadoBadge() ?>
                            </td>
                            <td>
                                <div class="table-actions">
                                    <a href="<?= base_url('admin/funciones/ver/' . $funcion->id_funcion) ?>" class="action-link edit" style="background: rgba(26,115,232,0.1); color: var(--secondary); margin-right: 6px;">🎟️ Ver Asientos</a>
                                    <a href="<?= base_url('admin/funciones/editar/' . $funcion->id_funcion) ?>" class="action-link edit">Editar</a>
                                    <a href="<?= base_url('admin/funciones/eliminar/' . $funcion->id_funcion) ?>" class="action-link delete" onclick="return confirm('¿Seguro que deseas eliminar esta función?');">Eliminar</a>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>

        <div class="pager-wrap">
            <?= $pager->links() ?>
        </div>
    <?php endif; ?>
</section>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    // Se puede agregar lógica de Axios para filtrar salas al cambiar local si se desea.
</script>
<?= $this->endSection() ?>
