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

<?= $this->section('title') ?><?= esc($localName ?? '') ?><?= $this->endSection() ?>

<?= $this->section('content') ?>
<section class="section-block cd-cartelera">
    <?php if (!empty($promoTipoSalaFiltro)): ?>
        <div class="cd-promo-banner">
            <span class="cd-promo-banner-icon">🎟</span>
            <span class="cd-promo-banner-text">
                Estás aplicando la promoción <strong><?= esc($promoNombreFiltro) ?></strong>:
                solo se muestran funciones <strong><?= esc($promoTipoSalaFiltro) ?></strong>.
            </span>
            <a href="<?= base_url('promociones/cancelar') ?>" class="cd-promo-banner-cancel">Quitar promoción</a>
        </div>
    <?php endif; ?>

    <div class="section-heading">
        <div>
            <span class="eyebrow">Cartelera en</span>
            <h2><?= esc($localName ?? '') ?></h2>
            <?php if (!empty($formatosDisponibles)): ?>
                <div class="cd-formats-line">
                    <?php foreach ($formatosDisponibles as $i => $f): ?>
                        <?= $i > 0 ? '<span class="cd-sep">|</span>' : '' ?><span class="cd-format-tag"><?= esc($f) ?></span>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
            <?php if (!empty($local->direccion)): ?>
                <p class="cd-address">📍 <?= esc($local->direccion) ?><?= !empty($local->distrito) ? ', ' . esc($local->distrito) : '' ?></p>
            <?php endif; ?>
        </div>
        <button type="button" class="nav-pick-cine" id="btn-cambiar-cine" onclick="document.getElementById('btn-elegir-cine').click();">
            📍 Cambiar de cine <span class="chev">▾</span>
        </button>
    </div>

    <?php if (!empty($fechasDisponibles)): ?>
        <div class="cd-date-chip-row-wrap">
            <div class="cd-date-chip-row" id="cd-date-chip-row">
                <button type="button" class="cd-date-chip is-active" data-fecha="">
                    <span class="cd-date-chip-day">TODAS</span>
                    <span class="cd-date-chip-date">las fechas</span>
                </button>
                <?php foreach ($fechasDisponibles as $fecha): ?>
                    <?php
                        $ts = strtotime($fecha);
                        $dias = ['DOM', 'LUN', 'MAR', 'MIÉ', 'JUE', 'VIE', 'SÁB'];
                        $meses = ['ENE', 'FEB', 'MAR', 'ABR', 'MAY', 'JUN', 'JUL', 'AGO', 'SEP', 'OCT', 'NOV', 'DIC'];
                        $diaAbrev = $dias[(int) date('w', $ts)];
                        $mesAbrev = $meses[(int) date('n', $ts) - 1];
                    ?>
                    <button type="button" class="cd-date-chip" data-fecha="<?= esc($fecha) ?>">
                        <span class="cd-date-chip-day"><?= $diaAbrev ?></span>
                        <span class="cd-date-chip-date"><?= esc(date('d', $ts)) . '/' . $mesAbrev ?></span>
                    </button>
                <?php endforeach; ?>
            </div>
        </div>
    <?php endif; ?>

    <div class="cp-filterbar" id="cp-filterbar">
        <div class="cp-filter" data-filter-key="formato">
            <button type="button" class="cp-filter-btn">Formatos <span class="cp-filter-count" style="display:none;">0</span> <span class="chev">▾</span></button>
            <div class="cp-filter-panel">
                <?php foreach ($formatosDisponibles as $formato): ?>
                    <label class="cp-filter-option">
                        <input type="checkbox" value="<?= esc($formato) ?>" data-filter="formato">
                        <?= esc($formato) ?>
                    </label>
                <?php endforeach; ?>
                <?php if (empty($formatosDisponibles)): ?>
                    <p class="cine-empty-msg" style="padding:6px 0;">Sin formatos disponibles.</p>
                <?php endif; ?>
                <button type="button" class="cp-filter-clear" data-clear="formato">Limpiar</button>
            </div>
        </div>

        <div class="cp-filter" data-filter-key="idioma">
            <button type="button" class="cp-filter-btn">Idioma <span class="cp-filter-count" style="display:none;">0</span> <span class="chev">▾</span></button>
            <div class="cp-filter-panel">
                <?php foreach ($idiomasDisponibles as $idioma): ?>
                    <label class="cp-filter-option">
                        <input type="checkbox" value="<?= esc($idioma) ?>" data-filter="idioma">
                        <?= esc($idioma) ?>
                    </label>
                <?php endforeach; ?>
                <?php if (empty($idiomasDisponibles)): ?>
                    <p class="cine-empty-msg" style="padding:6px 0;">Sin idiomas disponibles.</p>
                <?php endif; ?>
                <button type="button" class="cp-filter-clear" data-clear="idioma">Limpiar</button>
            </div>
        </div>

        <div class="cp-filter" data-filter-key="otras">
            <button type="button" class="cp-filter-btn">Otras opciones <span class="cp-filter-count" style="display:none;">0</span> <span class="chev">▾</span></button>
            <div class="cp-filter-panel">
                <?php foreach ($generosDisponibles as $genero): ?>
                    <label class="cp-filter-option">
                        <input type="checkbox" value="<?= esc($genero) ?>" data-filter="genero">
                        <?= esc($genero) ?>
                    </label>
                <?php endforeach; ?>
                <?php if (empty($generosDisponibles)): ?>
                    <p class="cine-empty-msg" style="padding:6px 0;">Sin géneros disponibles.</p>
                <?php endif; ?>
                <button type="button" class="cp-filter-clear" data-clear="otras">Limpiar</button>
            </div>
        </div>

        <button type="button" class="cp-filterbar-clearall" id="cp-filterbar-clearall">Limpiar todos los filtros</button>
    </div>

    <?php if (empty($peliculas)): ?>
        <div class="empty-state">
            <?php if (!empty($promoTipoSalaFiltro)): ?>
                No hay funciones <?= esc($promoTipoSalaFiltro) ?> disponibles en este local para aplicar "<?= esc($promoNombreFiltro) ?>".
                <a href="<?= base_url('promociones/cancelar') ?>">Quitar la promoción</a> o prueba con otro cine.
            <?php else: ?>
                No hay funciones programadas para este local en este momento.
            <?php endif; ?>
        </div>
    <?php else: ?>
        <div class="cd-movie-list" id="cd-movie-list">
            <?php foreach ($peliculas as $pelicula): ?>
                <?php
                    $posterUrl = $pelicula['poster_url'] ?? '';
                    if (empty($posterUrl)) {
                        $posterSrc = base_url('img/placeholder-poster.jpg');
                    } elseif (preg_match('#^(https?://|/|uploads/)#i', $posterUrl)) {
                        $posterSrc = $posterUrl;
                    } else {
                        $posterSrc = base_url('uploads/posters/' . $posterUrl);
                    }
                    $dur = (int) $pelicula['duracion_min'];
                    $duracionTexto = $dur > 0 ? floor($dur / 60) . 'h ' . ($dur % 60) . 'm' : '';
                ?>
                <article class="cd-card"
                    data-fechas="<?= esc(implode(',', $pelicula['fechas'])) ?>"
                    data-formatos="<?= esc(implode(',', $pelicula['formatos'])) ?>"
                    data-idioma="<?= esc($pelicula['idioma'] ?? '') ?>"
                    data-genero="<?= esc($pelicula['genero_nombre'] ?? '') ?>">
                    <div class="cd-card-poster">
                        <?php if (!empty($pelicula['clasificacion'])): ?>
                            <span class="cd-badge cd-badge-class"><?= esc($pelicula['clasificacion']) ?></span>
                        <?php endif; ?>
                        <span class="cd-badge cd-badge-duration"><?= esc($duracionTexto) ?></span>
                        <img src="<?= esc($posterSrc) ?>" alt="<?= esc($pelicula['titulo']) ?>">
                    </div>
                    <div class="cd-card-content">
                        <div class="cd-card-header">
                            <div>
                                <h3><?= esc($pelicula['titulo']) ?></h3>
                                <p><?= esc($pelicula['genero_nombre']) ?> • <?= esc($duracionTexto) ?> <?= !empty($pelicula['idioma']) ? '• ' . esc($pelicula['idioma']) : '' ?></p>
                            </div>
                        </div>
                        <?php
                            // Agrupar horarios por formato para mostrar filas ordenadas
                            $grupos = [];
                            foreach ($pelicula['horarios'] as $horario) {
                                $tipo = $horario['sala_tipo'] ?? 'General';
                                $grupos[$tipo][] = $horario;
                            }
                        ?>
                        <div class="cd-formats">
                            <?php foreach ($grupos as $tipo => $funcionesFormato): ?>
                                <?php $precios = array_map(fn($f) => (float) $f['precio_base'], $funcionesFormato); $precioMin = number_format(min($precios), 2); ?>
                                <div class="cd-format-row">
                                    <div class="cd-format-row-header">
                                        <span class="cd-format-row-name"><?= esc($tipo) ?></span>
                                        <span class="cd-format-row-price">Desde S/ <?= $precioMin ?></span>
                                    </div>
                                    <div class="cd-showtime-pills">
                                        <?php foreach ($funcionesFormato as $fn): ?>
                                            <?php
                                                $pct = $fn['capacidad'] > 0 ? ($fn['vendidos'] / $fn['capacidad']) : 0;
                                                if ($pct >= 1) { $disp = 'lleno'; }
                                                elseif ($pct >= 0.7) { $disp = 'disp-baja'; }
                                                elseif ($pct >= 0.3) { $disp = 'disp-media'; }
                                                else { $disp = 'disp-alta'; }
                                            ?>
                                            <a href="<?= base_url('reserva/asientos/' . $fn['id_funcion']) ?>"
                                                class="cd-showtime-pill <?= $disp ?> <?= $disp === 'lleno' ? 'lleno' : '' ?>"
                                                data-fecha="<?= esc($fn['fecha']) ?>"
                                                title="<?= esc($fn['sala_nombre']) ?> · S/ <?= number_format($fn['precio_base'], 2) ?><?= $disp === 'lleno' ? ' · Sin cupo' : '' ?>">
                                                <span class="cd-ticket-icon">🎟</span><?= date('H:i', strtotime($fn['hora_inicio'])) ?>hs
                                            </a>
                                        <?php endforeach; ?>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </article>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
</section>
<script>
document.addEventListener('DOMContentLoaded', function () {
    var filterbar = document.getElementById('cp-filterbar');
    var list = document.getElementById('cd-movie-list');
    var dateChipRow = document.getElementById('cd-date-chip-row');
    if (!filterbar) return;

    var filters = document.querySelectorAll('.cp-filter');
    var fechaSel = '';

    filters.forEach(function (filterEl) {
        var btn = filterEl.querySelector('.cp-filter-btn');
        btn.addEventListener('click', function (e) {
            e.stopPropagation();
            var wasOpen = filterEl.classList.contains('is-active');
            filters.forEach(function (f) { f.classList.remove('is-active'); });
            if (!wasOpen) filterEl.classList.add('is-active');
        });
    });

    document.addEventListener('click', function () {
        filters.forEach(function (f) { f.classList.remove('is-active'); });
    });

    filterbar.addEventListener('click', function (e) { e.stopPropagation(); });

    function currentSelections(key) {
        return Array.from(document.querySelectorAll('[data-filter="' + key + '"]:checked')).map(function (i) { return i.value; }).filter(Boolean);
    }

    function updateCounts() {
        filters.forEach(function (filterEl) {
            var key = filterEl.dataset.filterKey;
            var inputs = filterEl.querySelectorAll('input:checked');
            var count = 0;
            inputs.forEach(function (i) { if (i.value) count++; });
            var countEl = filterEl.querySelector('.cp-filter-count');
            if (count > 0) {
                countEl.style.display = '';
                countEl.textContent = count;
                filterEl.querySelector('.cp-filter-btn').classList.add('has-selection');
            } else {
                countEl.style.display = 'none';
                filterEl.querySelector('.cp-filter-btn').classList.remove('has-selection');
            }
        });
    }

    function aplicarFiltros() {
        if (!list) return;
        var formatos = currentSelections('formato');
        var idiomas = currentSelections('idioma');
        var generos = currentSelections('genero');

        var tarjetas = list.querySelectorAll('.cd-card');
        tarjetas.forEach(function (tarjeta) {
            var tFormatos = tarjeta.dataset.formatos ? tarjeta.dataset.formatos.split(',') : [];
            var tIdioma = tarjeta.dataset.idioma || '';
            var tGenero = tarjeta.dataset.genero || '';
            var tFechas = tarjeta.dataset.fechas ? tarjeta.dataset.fechas.split(',') : [];

            var okFormato = !formatos.length || formatos.some(function (f) { return tFormatos.indexOf(f) !== -1; });
            var okIdioma = !idiomas.length || idiomas.indexOf(tIdioma) !== -1;
            var okGenero = !generos.length || generos.indexOf(tGenero) !== -1;
            var okFecha = !fechaSel || tFechas.indexOf(fechaSel) !== -1;

            var visible = okFormato && okIdioma && okGenero && okFecha;
            tarjeta.style.display = visible ? '' : 'none';

            if (visible && fechaSel) {
                tarjeta.querySelectorAll('.cd-showtime-pill').forEach(function (item) {
                    item.style.display = item.dataset.fecha === fechaSel ? '' : 'none';
                });
                tarjeta.querySelectorAll('.cd-format-row').forEach(function (fila) {
                    var anyVisible = Array.from(fila.querySelectorAll('.cd-showtime-pill')).some(function (it) { return it.style.display !== 'none'; });
                    fila.style.display = anyVisible ? '' : 'none';
                });
                var anyRowVisible = Array.from(tarjeta.querySelectorAll('.cd-format-row')).some(function (r) { return r.style.display !== 'none'; });
                if (!anyRowVisible) tarjeta.style.display = 'none';
            } else {
                tarjeta.querySelectorAll('.cd-showtime-pill').forEach(function (item) { item.style.display = ''; });
                tarjeta.querySelectorAll('.cd-format-row').forEach(function (fila) { fila.style.display = ''; });
            }
        });

        updateCounts();
    }

    document.querySelectorAll('[data-filter]').forEach(function (input) {
        input.addEventListener('change', aplicarFiltros);
    });

    document.querySelectorAll('[data-clear]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var key = btn.dataset.clear;
            document.querySelectorAll('[data-filter="' + key + '"]').forEach(function (i) { i.checked = false; });
            aplicarFiltros();
        });
    });

    document.getElementById('cp-filterbar-clearall').addEventListener('click', function () {
        document.querySelectorAll('[data-filter]').forEach(function (i) { i.checked = false; });
        if (dateChipRow) {
            dateChipRow.querySelectorAll('.cd-date-chip').forEach(function (c) { c.classList.remove('is-active'); });
            dateChipRow.querySelector('.cd-date-chip').classList.add('is-active');
        }
        fechaSel = '';
        aplicarFiltros();
    });

    if (dateChipRow) {
        dateChipRow.querySelectorAll('.cd-date-chip').forEach(function (chip) {
            chip.addEventListener('click', function () {
                dateChipRow.querySelectorAll('.cd-date-chip').forEach(function (c) { c.classList.remove('is-active'); });
                chip.classList.add('is-active');
                fechaSel = chip.dataset.fecha || '';
                aplicarFiltros();
            });
        });
    }
});
</script>
<?= $this->endSection() ?>
