@extends('layouts.admin')

@section('title', 'Me Desmayo de la Risa - 2 de Octubre 2026 - Cali')

@section('content')

    <link rel="stylesheet" href="{{ asset('css/site-index.css') }}">


    <section class="show-principal" id="show-principal">
        <div class="show-container container">
            {{-- <h1 class="titulo-show">SHOW PRINCIPAL</h1> --}}
            <div class="clear">&nbsp;</div>
            <div class="show-imagen text-center mb-3">
                <img src="{{ asset('img/4.png') }}" alt="Show principal Ríete sin Filtro" class="img-fluid">
            </div>

            <!-- === CONTADOR REGRESIVO === -->
            <div class="countdown-container text-center mb-4" style="display: none">
                <h3 class="countdown-title">El Show Comienza En:</h3>
                <div class="countdown-display">
                    <div class="countdown-item">
                        <span class="countdown-value" id="days">00</span>
                        <span class="countdown-label">Días</span>
                    </div>
                    <div class="countdown-separator">:</div>
                    <div class="countdown-item">
                        <span class="countdown-value" id="hours">00</span>
                        <span class="countdown-label">Horas</span>
                    </div>
                    <div class="countdown-separator">:</div>
                    <div class="countdown-item">
                        <span class="countdown-value" id="minutes">00</span>
                        <span class="countdown-label">Minutos</span>
                    </div>
                    <div class="countdown-separator">:</div>
                    <div class="countdown-item">
                        <span class="countdown-value" id="seconds">00</span>
                        <span class="countdown-label">Segundos</span>
                    </div>
                </div>
            </div>

            <!-- Botón de compra oculto - página solo informacional -->
            <div class="text-center mb-3" style="display: none;">
                <a href="#" class="btn btn-comprar btn-primary" id="btnShowPrincipal">Comprar Entradas</a>
            </div>

            <div class="show-info" id="showInfo">

                <!-- Grid de tarjetas de información -->
                <div class="info-cards-grid">
                    <div class="info-card-item scroll-reveal">
                        <div class="info-card-content">
                            <div class="info-card-label">Fecha</div>
                            <div class="info-card-value">2 de octubre del 2026</div>
                        </div>
                    </div>

                    <div class="info-card-item scroll-reveal scroll-reveal-delay-1">
                        <div class="info-card-content">
                            <div class="info-card-label">Lugar</div>
                            <div class="info-card-value">Cra 3 #12-28, Cali</div>
                        </div>
                    </div>

                    <div class="info-card-item scroll-reveal scroll-reveal-delay-2">
                        <div class="info-card-content">
                            <div class="info-card-label">Hora</div>
                            <div class="info-card-value">8:00 PM</div>
                        </div>
                    </div>
                </div>

                <!-- Artistas destacados -->
                <div class="artistas-section scroll-reveal">
                    <h3 class="artistas-title">¡Con los mejores comediantes!</h3>
                    <div class="artistas-grid">
                        <div class="artista-tag">Chukymanuel</div>
                        <div class="artista-tag">Piroberta</div>
                        <div class="artista-tag">Triky Trake</div>
                    </div>
                </div>

                <!-- Banner de preventa -->
                <div class="preventa-banner scroll-reveal">
                    <div class="preventa-badge">PREVENTA ESPECIAL</div>
                    <div class="preventa-discount">20% OFF</div>
                    <div class="preventa-text">Válido hasta el 8 de agosto</div>
                </div>

            </div>

            <!-- === FORMULARIO DE COMPRA INTEGRADO CON FOTO === -->
            <div class="form-compra-container" id="formCompraContainer" style="display:none; margin-top:20px;">
                <div class="row">
                    <!-- Columna formulario -->
                    <div class="col-12 col-md-6 mb-3 mb-md-0">
                        <h2>Compra tus entradas 🎟️</h2>

                        <form id="formCompra">
                            <!-- 🔹 Datos personales -->
                            <div class="form-group mb-3">
                                <label for="full_name">Nombre completo</label>
                                <input type="text" id="full_name" name="full_name" class="form-control" required>
                            </div>

                            <div class="form-group mb-3">
                                <label for="email">Correo electrónico</label>
                                <input type="email" id="email" name="email" class="form-control" required>
                            </div>

                            <div class="form-group mb-3">
                                <label for="phone">Teléfono</label>
                                <input type="text" id="phone" name="phone" class="form-control" required>
                            </div>
                            <hr />
                            <h3 class="text-white mb-2">Reserva tu asiento y prepárate para el show</h3>

                            <!-- 🔹 Sección -->
                            <div class="form-group mb-3">
                                <label for="seccion">Tipo de Entrada</label>
                                <select id="seccion" name="seccion" class="form-select" required>
                                    <option value="">Selecciona el tipo de entrada</option>
                                    <option value="Entrada General Bogotá">🎟️ Entrada General (130 cupos) - $50,000</option>
                                </select>
                                <small id="precioDisplay" class="text-warning fw-bold d-block mt-1">&nbsp;&nbsp;Precio: -</small>
                            </div>

                            <!-- 🔹 Columna (solo para asientos numerados) -->
                            <div class="form-group mb-3" id="filaContainer" style="display: none;">
                                <label for="fila" id="filaLabel">Columna</label>
                                <select id="fila" name="fila" class="form-select">
                                    <option value="">Selecciona una columna</option>
                                </select>
                            </div>

                            <!-- 🔹 Cantidad -->
                            <div class="form-group mb-3" id="cantidadContainer" style="display: none;">
                                <label for="cantidad">Cantidad de entradas</label>
                                <input type="number" id="cantidad" name="cantidad" min="1" max="10" value="1"
                                    placeholder="Cantidad" class="form-control" required>
                            </div>

                            <!-- 🔹 Silla -->
                            <div class="form-group mb-3" id="sillaContainer" style="display: none;">
                                <label for="silla">Sillas disponibles</label>
                                <table id="sillaContainerTable" class="table table-bordered text-center">
                                    <tbody>
                                        <!-- Las filas y columnas se generan con JS -->
                                    </tbody>
                                </table>
                                <small id="limitInfo" style="color: #fff" class="d-block mt-1 "></small>
                            </div>


                            <button type="submit" class="btn btn-pago btn-primary">
                                <img src="https://santafedeantioquia-antioquia.gov.co/Ciudadanos/PublishingImages/Paginas/Pagos-en-Linea/pse-logo.png"
                                    alt="PSE" class="pse-logo me-2" style="height: 50px;">
                                Continuar con PSE
                            </button>
                            <hr>

                        </form>
                    </div>

                    <div class="col-12 col-md-6">
                        <h2 class="text-center mb-3">Haz clic en la imagen para ampliarla y verla en detalle</h2>

                        <!-- Primera imagen -->
                        <div class="d-flex justify-content-center mb-4" style="position: relative;">
                            <img src="{{ url('img/sillaB.jpg') }}" alt="Teatro Materon"
                                class="img-fluid rounded mx-auto img-clickable shadow"
                                style="max-width: 100%; width: 100%; height: auto;">
                            <div
                                style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none;">
                                <button
                                    style="
                                    background-color: rgba(250, 204, 21, 0.85);
                                    color: #000;
                                    border: none;
                                    padding: 8px 16px;
                                    font-size: 12px;
                                    font-weight: bold;
                                    border-radius: 6px;
                                    cursor: pointer;
                                    text-transform: uppercase;
                                    letter-spacing: 0.5px;
                                    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
                                    pointer-events: none;
                                ">
                                    Ampliar Imagen
                                </button>
                            </div>
                        </div>


                    </div>

                </div>
            </div>

        </div>
    </section>

    <div id="imgModal" class="img-modal">
        <span id="imgModalClose" class="img-modal-close">&times;</span>
        <img class="img-modal-content" id="imgModalSrc">
    </div>

    <div id="imgModal2" class="img-modal">
        <span id="imgModalClose2" class="img-modal-close">&times;</span>
        <img class="img-modal-content" id="imgModalSrc2">
    </div>

    <div id="loaderModal" class="loader-modal">
        <div class="loader-content">
            <div class="loader-spinner"></div>
            <p class="loader-text">Cargando...</p>
        </div>
    </div>

    <script>
        // Variables globales para las URLs del sistema
        const checkoutUrl = "{{ url('checkout') }}";
        const apiBaseUrl = "{{ url('/') }}";
        const sillaFilasUrl = "{{ url('sillas/filas') }}";
        const sillaNumerosUrl = "{{ url('sillas/numeros') }}";
    </script>
    <script src="{{ asset('js/site-index.js') }}"></script>

    <!-- === SECCIÓN DE CARRUSEL DE LOGOS === -->
    <section class="logos-clientes py-5" style="display: none">
        <div class="container">
            <h2 class="text-center mb-5"
                style="color: #FF8C00; font-size: 2.2rem; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 20px rgba(255, 140, 0, 0.6);">
                Nuestros Patrocinadores
            </h2>

            <div class="carousel-wrapper">
                <div class="carousel-track" id="carouselTrack">
                    <div class="logo-item">
                        <img src="{{ asset('img/patrocinadores/1.jpeg') }}" alt="Patrocinador 1">
                    </div>
                    <div class="logo-item">
                        <img src="{{ asset('img/patrocinadores/2.png') }}" alt="Patrocinador 2">
                    </div>
                    <div class="logo-item">
                        <img src="{{ asset('img/patrocinadores/3.jpeg') }}" alt="Patrocinador 3">
                    </div>
                    <div class="logo-item">
                        <img src="{{ asset('img/patrocinadores/4.png') }}" alt="Patrocinador 4">
                    </div>
                    <div class="logo-item">
                        <img src="{{ asset('img/patrocinadores/5.jpg') }}" alt="Patrocinador 4">
                    </div>
                    <div class="logo-item">
                        <img src="{{ asset('img/patrocinadores/6.jpg') }}" alt="Patrocinador 4">
                    </div>
                    <div class="logo-item">
                        <img src="{{ asset('img/patrocinadores/7.jpeg') }}" alt="Patrocinador 4">
                    </div>
                    <div class="logo-item">
                        <img src="{{ asset('img/patrocinadores/8.jpeg') }}" alt="Patrocinador 4">
                    </div>
                    <div class="logo-item">
                        <img src="{{ asset('img/patrocinadores/9.jpeg') }}" alt="Patrocinador 4">
                    </div>
                    <div class="logo-item">
                        <img src="{{ asset('img/patrocinadores/10.jpeg') }}" alt="Patrocinador 4">
                    </div>
                    <div class="logo-item">
                        <img src="{{ asset('img/patrocinadores/11.jpeg') }}" alt="Patrocinador 4">
                    </div>
                    <div class="logo-item">
                        <img src="{{ asset('img/patrocinadores/12.jpeg') }}" alt="Patrocinador 4">
                    </div>
                    <div class="logo-item">
                        <img src="{{ asset('img/patrocinadores/13.jpeg') }}" alt="Patrocinador 4">
                    </div>
                    <div class="logo-item">
                        <img src="{{ asset('img/patrocinadores/14.jpeg') }}" alt="Patrocinador 4">
                    </div>
                    <div class="logo-item">
                        <img src="{{ asset('img/patrocinadores/15.jpeg') }}" alt="Patrocinador 4">
                    </div>
                </div>
            </div>

            <!-- Botón en sección de patrocinadores - Oculto -->
            <div class="text-center mt-5" style="display: none;">
                <p style="color: #ddd; font-size: 1.1rem; margin-bottom: 20px;">
                    ¿Listo para disfrutar del show? ¡No te quedes sin tu entrada!
                </p>
                <a href="#" class="btn btn-comprar btn-primary btn-comprar-secundario">¡Comprar Ahora!</a>
            </div>
        </div>
    </section>

    <!-- === SECCIÓN DE MAPA Y UBICACIÓN === -->
    <section class="mapa-ubicacion scroll-reveal">
        <div class="container">
            <h2 class="text-center mb-5 mapa-titulo">
                Ubicación del Evento
            </h2>

            <div class="mapa-container">
                <!-- Mapa -->
                <div class="mapa-iframe-wrapper" id="mapaWrapper">
                    <div class="mapa-overlay" id="mapaOverlay">
                        <div class="mapa-click-instruction">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                                <circle cx="12" cy="10" r="3"></circle>
                            </svg>
                            <p>Haz clic para interactuar con el mapa</p>
                        </div>
                    </div>
                    <iframe
                        src="https://www.google.com/maps?q=Carrera+3+12-28+Cali+Colombia&output=embed"
                        allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
                    </iframe>
                </div>

                <!-- Información de ubicación -->
                <div class="mapa-info">
                    <div class="info-card scroll-reveal">
                        <h3>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round">
                                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                                <circle cx="12" cy="10" r="3"></circle>
                            </svg>
                            Dirección
                        </h3>
                        <p>Cra 3 #12-28<br>
                            Cali, Colombia</p>
                    </div>

                    <div class="info-card scroll-reveal scroll-reveal-delay-1">
                        <h3>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round">
                                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                                <line x1="16" y1="2" x2="16" y2="6"></line>
                                <line x1="8" y1="2" x2="8" y2="6"></line>
                                <line x1="3" y1="10" x2="21" y2="10"></line>
                            </svg>
                            Fecha y Hora
                        </h3>
                        <p>2 de octubre, 2026<br>
                            8:00 PM</p>
                    </div>

                </div>
            </div>

            <!-- Botón en sección de mapa - Oculto -->
            <div class="text-center mt-5" style="display: none;">
                <a href="#" class="btn btn-comprar btn-primary btn-comprar-secundario">Comprar Entradas Ahora</a>
            </div>
        </div>
    </section>

    <!-- === SECCIÓN DE REDES SOCIALES === -->
    <section class="redes-sociales scroll-reveal">
        <div class="container">
            <h2>Síguenos en Redes Sociales</h2>
            <p>Mantente al día con todo nuestro contenido y eventos</p>

            <div class="social-icons">
                <!-- Facebook -->
                <div class="social-item scroll-reveal">
                    <a href="#" class="social-icon" target="_blank" rel="noopener noreferrer">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path
                                d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
                        </svg>
                    </a>
                    <span class="social-label">Facebook</span>
                </div>

                <!-- Instagram -->
                <div class="social-item scroll-reveal scroll-reveal-delay-1">
                    <a href="#" class="social-icon" target="_blank" rel="noopener noreferrer">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path
                                d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
                        </svg>
                    </a>
                    <span class="social-label">Instagram</span>
                </div>

                <!-- TikTok -->
                <div class="social-item scroll-reveal scroll-reveal-delay-2">
                    <a href="#" class="social-icon" target="_blank" rel="noopener noreferrer">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path
                                d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z" />
                        </svg>
                    </a>
                    <span class="social-label">TikTok</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Botón flotante sticky - Oculto -->
    <div class="sticky-comprar-btn" style="display: none;">
        <a href="#" class="btn btn-comprar btn-primary btn-comprar-sticky">
            🎟️ Comprar Entradas
        </a>
    </div>

    <!-- Botón flotante de WhatsApp -->
    <a href="https://wa.me/573137217540" target="_blank" rel="noopener noreferrer" class="whatsapp-float" title="Contáctanos por WhatsApp">
        <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
            <path d="M16 0c-8.837 0-16 7.163-16 16 0 2.825 0.737 5.607 2.137 8.048l-2.137 7.952 7.933-2.127c2.42 1.37 5.173 2.127 8.067 2.127 8.837 0 16-7.163 16-16s-7.163-16-16-16zM16 29.467c-2.482 0-4.908-0.646-7.07-1.87l-0.507-0.292-5.155 1.382 1.389-5.169-0.323-0.53c-1.327-2.181-2.001-4.668-2.001-7.221 0-7.515 6.118-13.633 13.633-13.633s13.633 6.118 13.633 13.633-6.118 13.7-13.599 13.7zM21.873 18.303c-0.274-0.137-1.621-0.801-1.872-0.89-0.251-0.089-0.434-0.137-0.617 0.137s-0.709 0.89-0.869 1.073c-0.16 0.183-0.32 0.206-0.594 0.069-0.274-0.137-1.156-0.426-2.201-1.359-0.814-0.726-1.363-1.622-1.523-1.896s-0.017-0.423 0.12-0.56c0.123-0.12 0.274-0.32 0.411-0.48s0.183-0.274 0.274-0.457c0.091-0.183 0.046-0.343-0.023-0.48s-0.617-1.487-0.846-2.037c-0.223-0.537-0.451-0.463-0.617-0.471-0.16-0.007-0.343-0.009-0.526-0.009s-0.48 0.069-0.731 0.343c-0.251 0.274-0.96 0.937-0.96 2.286s0.983 2.654 1.12 2.837c0.137 0.183 1.931 2.947 4.678 4.133 0.654 0.283 1.164 0.451 1.561 0.577 0.657 0.206 1.254 0.177 1.726 0.109 0.526-0.080 1.621-0.663 1.851-1.303 0.229-0.64 0.229-1.189 0.16-1.303-0.069-0.114-0.251-0.183-0.526-0.32z" fill="currentColor"/>
        </svg>
        <span class="whatsapp-text">Contáctanos</span>
    </a>

    <!-- JavaScript para animaciones de scroll -->
    <script>
        // Intersection Observer para las animaciones de scroll
        document.addEventListener('DOMContentLoaded', function() {
            const scrollElements = document.querySelectorAll('.scroll-reveal');

            const elementInView = (el, percentageScroll = 100) => {
                const elementTop = el.getBoundingClientRect().top;
                return (
                    elementTop <=
                    (window.innerHeight || document.documentElement.clientHeight) * (percentageScroll/100)
                );
            };

            const displayScrollElement = (element) => {
                element.classList.add('active');
            };

            const hideScrollElement = (element) => {
                element.classList.remove('active');
            };

            const handleScrollAnimation = () => {
                scrollElements.forEach((el) => {
                    if (elementInView(el, 85)) {
                        displayScrollElement(el);
                    }
                })
            }

            // Ejecutar al cargar la página
            handleScrollAnimation();

            // Ejecutar al hacer scroll
            window.addEventListener('scroll', () => {
                handleScrollAnimation();
            });

            // Manejo del overlay del mapa
            const mapaOverlay = document.getElementById('mapaOverlay');
            if (mapaOverlay) {
                mapaOverlay.addEventListener('click', function() {
                    this.classList.add('hidden');
                });
            }
        });
    </script>

@endsection