<?php $__env->startSection('title', __('Eventos').' | '.config('app.name')); ?>
<?php $__env->startSection('meta_description', __('Explora eventos publicados, filtra por categoría, sede o fecha y compra tus entradas con Regiticket.')); ?>

<?php $__env->startPush('head'); ?>
    <style>
        .rt-events-hero {
            position: relative;
            min-height: 45vh;
            display: flex;
            align-items: center;
            background-color: #0a0a0b;
            overflow: hidden;
            padding-top: 80px;
        }
        .rt-events-hero-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('<?php echo e(\App\Http\Controllers\LandingController::authHeroBackdropUrl()); ?>');
            background-size: cover;
            background-position: center;
            opacity: 0.45;
            filter: blur(2px) saturate(1.2);
            z-index: 0;
        }
        .rt-events-hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 10% 50%, rgba(185, 24, 48, 0.25) 0%, transparent 60%),
                        linear-gradient(180deg, rgba(10,10,11,0.1) 0%, #0a0a0b 100%);
            z-index: 1;
        }
        .rt-events-hero-content {
            position: relative;
            z-index: 2;
            width: 100%;
        }
        
        .rt-filter-card-hero {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 1.25rem 1.5rem;
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
            margin-top: 1.5rem;
        }

        .rt-ios-input-dark {
            border-radius: 12px !important;
            border: 1px solid rgba(255,255,255,0.1) !important;
            padding: 0.5rem 0.85rem !important;
            font-size: 0.9rem !important;
            background-color: rgba(255,255,255,0.06) !important;
            color: #ffffff !important;
            transition: all 0.2s;
            height: 42px !important;
            font-weight: 500;
        }
        .rt-ios-input-dark:focus {
            background-color: rgba(255,255,255,0.1) !important;
            border-color: #ff4d6d !important;
            box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.1) !important;
            outline: none;
        }
        
        /* Ocultar icono de calendario nativo */
        input[type="date"]::-webkit-calendar-picker-indicator {
            display: none !important;
            -webkit-appearance: none !important;
        }
        input[type="date"] {
            position: relative;
        }

        .rt-ios-input-dark option {
            background-color: #121214;
            color: #ffffff;
            padding: 10px;
        }
        .rt-label-dark {
            font-weight: 800;
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: rgba(255,255,255,0.6);
            margin-bottom: 0.6rem;
            display: block;
        }
        
        .rt-events-main {
            background-color: #ffffff;
            min-height: 60vh;
        }

        .display-4 { letter-spacing: -0.04em; line-height: 1.1; }
        .fw-black { font-weight: 900; }

        @media (max-width: 991px) {
            .rt-events-hero { min-height: auto; padding-bottom: 4rem; }
            .rt-filter-card-hero { padding: 1.5rem; border-radius: 24px; margin-top: 2rem; }
        }
    </style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
    <div class="rt-page-under-fixed-nav">
        
        <section class="rt-events-hero">
            <div class="rt-events-hero-bg"></div>
            <div class="rt-events-hero-overlay"></div>
            <div class="container rt-events-hero-content py-5">
                <div class="row justify-content-center">
                    <div class="col-xl-11">
                        <div class="text-center text-lg-start mb-2">
                            <span class="badge rounded-pill bg-danger-subtle text-danger border-0 px-3 py-2 mb-3 fw-bold" style="font-size: 0.7rem; letter-spacing: 0.15em; background: rgba(185, 24, 48, 0.25) !important;">
                                <?php echo e(__('DISCOVER EXPERIENCES')); ?>

                            </span>
                            <h1 class="display-4 fw-black text-white mb-2">
                                <?php echo e(__('Explora tu próximo')); ?><br>
                                <span style="color: #ff4d6d;"><?php echo e(__('gran desafío.')); ?></span>
                            </h1>
                            <p class="lead text-white opacity-75 mb-0" style="max-width: 500px;">
                                <?php echo e(__('La vitrina de eventos deportivos más completa. Encuentra, filtra y reserva en segundos.')); ?>

                            </p>
                        </div>

                        
                        <div class="rt-filter-card-hero">
                            <form method="get" action="<?php echo e(route('landing.events')); ?>" id="events-filter-form" class="row g-3 align-items-end">
                                <div class="col-lg-3 col-md-6">
                                    <label class="rt-label-dark" for="filter-q"><?php echo e(__('¿Qué buscas?')); ?></label>
                                    <div class="rt-ios-input-dark-wrap position-relative">
                                        <input type="search" name="q" id="filter-q" value="<?php echo e($filters['q'] ?? ''); ?>" 
                                               class="form-control rt-ios-input-dark js-auto-submit" placeholder="<?php echo e(__('Evento, palabra clave...')); ?>">
                                    </div>
                                </div>
                                
                                <div class="col-lg-2 col-md-6">
                                    <label class="rt-label-dark" for="filter-category"><?php echo e(__('Categoría')); ?></label>
                                    <select name="category_id" id="filter-category" class="form-select rt-ios-input-dark js-auto-submit">
                                        <option value=""><?php echo e(__('Todas')); ?></option>
                                        <?php $__currentLoopData = $filterCategories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <option value="<?php echo e($cat->id); ?>" <?php if((string) ($filters['category_id'] ?? '') === (string) $cat->id): echo 'selected'; endif; ?>><?php echo e($cat->name); ?></option>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </select>
                                </div>

                                <div class="col-lg-2 col-md-6">
                                    <label class="rt-label-dark" for="filter-venue"><?php echo e(__('Sede / Lugar')); ?></label>
                                    <select name="venue_id" id="filter-venue" class="form-select rt-ios-input-dark js-auto-submit">
                                        <option value=""><?php echo e(__('Todas')); ?></option>
                                        <?php $__currentLoopData = $filterVenues; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $venue): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <option value="<?php echo e($venue->id); ?>" <?php if((string) ($filters['venue_id'] ?? '') === (string) $venue->id): echo 'selected'; endif; ?>><?php echo e($venue->name); ?></option>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </select>
                                </div>

                                <div class="col-lg-2 col-md-6">
                                    <label class="rt-label-dark" for="filter-from"><?php echo e(__('Fecha')); ?></label>
                                    <input type="date" name="date_from" id="filter-from" value="<?php echo e($filters['date_from'] ?? ''); ?>" 
                                           class="form-control rt-ios-input-dark js-auto-submit">
                                </div>

                                <div class="col-lg-3 col-md-12 d-flex gap-2">
                                    <button type="submit" class="btn rt-btn-cherry w-100 fw-bold shadow-sm" style="border-radius: 12px; height: 42px; font-size: 0.9rem;">
                                        <i class="bi bi-search me-1"></i> <?php echo e(__('Buscar')); ?>

                                    </button>
                                    <button type="button" class="btn btn-dark border-0 w-auto px-3 js-reset-filters" style="border-radius: 12px; height: 42px; background: rgba(255,255,255,0.1);" title="<?php echo e(__('Limpiar filtros')); ?>">
                                        <i class="bi bi-arrow-counterclockwise text-white"></i>
                                    </button>
                                </div>
                                
                                <div class="col-12 mt-3 pt-2 border-top border-white border-opacity-10">
                                    <div class="d-flex flex-wrap gap-4 justify-content-center justify-content-lg-start">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input js-auto-submit" type="checkbox" name="destacados" id="filter-destacados" value="1" <?php if(request()->boolean('destacados')): echo 'checked'; endif; ?>>
                                            <label class="form-check-label small fw-bold text-white-50" for="filter-destacados"><?php echo e(__('Solo Destacados')); ?></label>
                                        </div>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input js-auto-submit" type="checkbox" name="pasados" id="filter-pasados" value="1" <?php if(request()->boolean('pasados')): echo 'checked'; endif; ?>>
                                            <label class="form-check-label small fw-bold text-white-50" for="filter-pasados"><?php echo e(__('Incluir Eventos Pasados')); ?></label>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        
        <section class="rt-events-main py-5">
            <div class="container">
                <div id="events-grid-container" class="row g-4">
                    <?php echo $__env->make('landing.partials.events-grid', ['events' => $events], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                </div>
            </div>
        </section>
    </div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
    (function() {
        const form = document.getElementById('events-filter-form');
        const container = document.getElementById('events-grid-container');
        const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
        let debounceTimer;

        function fetchEvents(pageUrl = null) {
            const targetUrl = (typeof pageUrl === 'string') ? pageUrl : form.action;
            const formData = new FormData(form);

            container.style.opacity = '0.5';

            fetch(targetUrl, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrf || '',
                    'Accept': 'text/html'
                },
                body: formData
            })
            .then(response => response.text())
            .then(html => {
                container.innerHTML = html;
                container.style.opacity = '1';
                rebindPagination();
            })
            .catch(err => {
                console.error('Error fetching events:', err);
                container.style.opacity = '1';
            });
        }

        function rebindPagination() {
            container.querySelectorAll('.pagination a').forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    fetchEvents(this.href);
                    window.scrollTo({ top: form.offsetTop - 150, behavior: 'smooth' });
                });
            });
            
            const resetBtn = container.querySelector('.js-reset-filters');
            if (resetBtn) {
                resetBtn.addEventListener('click', resetFilters);
            }
        }

        function resetFilters() {
            form.reset();
            form.querySelectorAll('input[type="checkbox"]').forEach(i => i.checked = false);
            fetchEvents();
        }

        form.querySelectorAll('.js-auto-submit').forEach(input => {
            input.addEventListener('change', fetchEvents);
            if (input.type === 'search' || input.type === 'text') {
                input.addEventListener('input', () => {
                    clearTimeout(debounceTimer);
                    debounceTimer = setTimeout(fetchEvents, 500);
                });
            }
        });

        form.addEventListener('submit', function(e) {
            e.preventDefault();
            fetchEvents();
        });

        document.querySelectorAll('.js-reset-filters').forEach(btn => {
            btn.addEventListener('click', resetFilters);
        });

        rebindPagination();
    })();
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.landing', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /var/www/html/resources/views/landing/events.blade.php ENDPATH**/ ?>