@extends("frontend.includes.layout")

@section('useLegacyJquery', '0')

@section('links')
    @if (!empty($galleries) && isset($galleries[0]) && !empty($galleries[0]->image))
        <link rel="preload" as="image" href="/storage/{{ $galleries[0]->image }}" fetchpriority="high">
    @endif
@endsection

@section('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const wrapper = document.getElementById("videoWrapper");
            const modalEl = document.getElementById("videoModalLocal");
            const modalVideo = document.getElementById("institutionalVideoPlayer");

            if (!wrapper || !modalEl || !modalVideo) return;

            const playModalVideo = function () {
                const playPromise = modalVideo.play();
                if (playPromise && typeof playPromise.catch === "function") {
                    playPromise.catch(function () {
                        // Some browsers block autoplay; keep controls available for manual play.
                    });
                }
            };

            const resetModalVideo = function () {
                modalVideo.pause();
                modalVideo.currentTime = 0;
            };

            wrapper.addEventListener("click", function () {
                if (window.bootstrap && window.bootstrap.Modal) {
                    window.bootstrap.Modal.getOrCreateInstance(modalEl).show();
                    return;
                }

                modalEl.classList.add("show");
                modalEl.style.display = "block";
                modalEl.setAttribute("aria-modal", "true");
                modalEl.removeAttribute("aria-hidden");
                document.body.classList.add("modal-open");
                playModalVideo();
            });

            wrapper.addEventListener("keydown", function (event) {
                if (event.key === "Enter" || event.key === " ") {
                    event.preventDefault();
                    wrapper.click();
                }
            });

            modalEl.addEventListener("shown.bs.modal", playModalVideo);
            modalEl.addEventListener("hidden.bs.modal", resetModalVideo);

            const closeBtn = modalEl.querySelector(".close");
            if (closeBtn) {
                closeBtn.addEventListener("click", function () {
                    if (window.bootstrap && window.bootstrap.Modal) return;
                    resetModalVideo();
                    modalEl.classList.remove("show");
                    modalEl.style.display = "none";
                    modalEl.setAttribute("aria-hidden", "true");
                    modalEl.removeAttribute("aria-modal");
                    document.body.classList.remove("modal-open");
                });
            }
        });
    </script>
@endsection


@section('content')
    <!-- MAIN-->
    <main id="main">


        <!-- SLIDER-->
        <section>
            @include('frontend.main.main-gallery')
        </section>
        <!-- END SLIDER-->

        <!-- SERVICE-->
        <section class="service">
            <div class="">
                <div class="section-title">
                    <p class="title-sub">Tu futuro inicia hoy</p>
                    <h1 class="title-1">Oferta Educativa</h1>
                </div>

                <div class="modern-cards-grid">
                    @if (!empty($homeServices) && count($homeServices))
                        @foreach ($homeServices as $service)
                            @php
                                $slug = strtolower(str_replace(' ', '', trim($service->title)));
                            @endphp
                            <div class="modern-card card-{{ $slug }}">
                                @if(!empty($service->image_uri))
                                    <img class="card-background lazyload" data-src="{{ $service->image_uri }}"
                                        alt="{{ $service->title }}"
                                        style="object-fit: {{ $service->image_fit ?? 'cover' }}; object-position: {{ $service->image_position_x ?? 50 }}% {{ $service->image_position_y ?? 50 }}%;">
                                @endif
                                <div class="card-content">
                                    <div class="glass-panel">
                                        <h1 class="card-title">{{ $service->title }}</h1>
                                        <p class="card-description">{{ $service->description }}</p>
                                        @if($service->offer_link)
                                            <a href="{{ $service->offer_link }}" class="card-btn">
                                                Ver oferta
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                    stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M17 8l4 4m0 0l-4 4m4-4H3" />
                                                </svg>
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @else
                        @php
                            $cardConfig = [
                                'Bachillerato' => [
                                    'image' => '',
                                    'description' =>
                                        'Prepa en plan semestral con dos opciones: Bachillerato General o Bachillerato Bicultural, diseñadas para impulsar tu futuro universitario.',
                                ],
                                'Licenciaturas' => [
                                    'image' => '',
                                    'description' =>
                                        'Encuentra la carrera ideal para tu futuro en áreas como Humanidades, Salud, Construcción, Diseño y Negocios, con una formación universitaria enfocada en el mundo profesional.',
                                ],
                                'Lic. Ejecutivas' => [
                                    'image' => '',
                                    'description' =>
                                        'Encuentra la carrera ideal para tu futuro en áreas como Humanidades, Salud, Construcción, Diseño y Negocios, con una formación universitaria enfocada en el mundo profesional.',
                                ],
                                'Posgrados' => [
                                    'image' => '',
                                    'description' => 'Maestrías y doctorados en áreas de alta demanda laboral.',
                                ],
                            ];

                            $preferredOrder = [
                                'Bachillerato',
                                'Licenciaturas',
                                'Lic. Ejecutivas',
                                'Posgrados',
                            ];

                            $normalizeType = fn($value) => strtolower(preg_replace('/[^a-z0-9]/', '', \Illuminate\Support\Str::ascii((string) $value)));

                            $orderMap = collect($preferredOrder)->mapWithKeys(function ($type, $index) use ($normalizeType) {
                                return [$normalizeType($type) => $index];
                            });

                            $typesToRender = collect($types_categories ?? [])
                                ->filter()
                                ->unique()
                                ->sortBy(function ($type) use ($orderMap, $normalizeType) {
                                    return $orderMap[$normalizeType($type)] ?? 999;
                                })
                                ->values();
                        @endphp
                        @foreach ($typesToRender as $index => $type)
                            @php
                                $config = $cardConfig[$type] ?? [
                                    'image' => asset('images/advantages/Background.jpg'),
                                    'description' => 'Conoce todos los programas disponibles y elige el mejor para ti.',
                                ];
                                $slug = strtolower(str_replace(' ', '', trim($type)));
                            @endphp
                            <div class="modern-card card-{{ $slug }}">
                                @if(!empty($config['image']))
                                    <img class="card-background lazyload" data-src="{{ $config['image'] }}" alt="{{ $type }}">
                                @endif
                                <div class="card-content">
                                    <div class="glass-panel">
                                        <h1 class="card-title">{{ $type }}</h1>
                                        <p class="card-description">{{ $config['description'] }}</p>
                                        <a href="{{ route('academic_offer.group', [$slug]) }}" class="card-btn">
                                            Ver oferta
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M17 8l4 4m0 0l-4 4m4-4H3" />
                                            </svg>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>

                <!-- Fila adicional con cards alternativas -->
                {{-- <div class="row offer-alt-row">
                    <div class="col-md-6">
                        <div class="modern-card-alt">
                            <img class="card-background lazyload"
                                data-src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"
                                alt="Campus en Línea">
                            <div class="card-content">
                                <div class="glass-panel">
                                    <span class="card-number">01</span>
                                    <h3 class="card-title">Bachillerato</h3>
                                    <p class="card-description">
                                        Prepa en plan semestral con modalidad general o bachilleratos tecnológicos
                                        especializados.
                                    </p>
                                    <a href="/oferta/lista/bachillerato" class="card-btn">
                                        Ver oferta
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                            stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M17 8l4 4m0 0l-4 4m4-4H3" />
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="modern-card-alt">
                            <img class="card-background lazyload"
                                data-src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"
                                alt="Intercambios">
                            <div class="card-content">
                                <div class="glass-panel">
                                    <span class="card-number">02</span>
                                    <h3 class="card-title">Licenciaturas</h3>
                                    <p class="card-description">
                                        +20 carreras profesionales en Humanidades, Salud, Construcción, Diseño y Negocios.
                                    </p>
                                    <a href="/oferta/lista/licenciaturas" class="card-btn">
                                        Ver oferta
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                            stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M17 8l4 4m0 0l-4 4m4-4H3" />
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> --}}
            </div>
        </section>
        <!-- END SERVICE-->

        @include('frontend.main.offers_gallery')

        {{-- <section class="video-section">
            <div class="">
                <div class="section-title">
                    <h5 class="title-sub">Descúbrete UC</h5>
                    <h2 class="title-1">De vuelta a la presencialidad</h2>
                </div>


                <div class="">
                    <video id="video-main" poster="/images/bg-video.png">
                        <source src="/video/index.mp4" type="video/mp4" />
                        <p class="">
                            Para ver este video, habilite JavaScript y considere actualizar a un navegador web.
                        </p>
                    </video>
                </div>
            </div>
        </section> --}}

        @php
            $homeVideoTitle = $homeVideo->title ?? 'Conoce nuestro campus';
            $homeVideoSubtitle = $homeVideo->subtitle ?? 'Descúbre UC';
            $homeVideoSource = $homeVideo && $homeVideo->video_uri ? $homeVideo->video_uri : asset('video/index.mp4');
            $homeVideoPoster = $homeVideo && $homeVideo->poster_uri ? $homeVideo->poster_uri : asset('images/bg-video.png');
        @endphp

        <section class="video-section">
            <div class="container">
                <!-- Título mejorado -->
                <div class="video-title">
                    <p class="title-sub">{{ $homeVideoSubtitle }}</p>
                    <h1 class="title-1">
                        {{ $homeVideoTitle }}
                    </h1>
                </div>

                <!-- Wrapper del video con efectos -->
                <div class="video-wrapper" id="videoWrapper" role="button" tabindex="0"
                    aria-label="Reproducir video institucional en modal">
                    <img class="video-poster" src="{{ $homeVideoPoster }}" alt="Poster del video institucional">

                    <div class="play-button">
                        <i class="fas fa-play"></i>
                    </div>
                </div>

                <!-- Estadísticas opcionales -->
                {{-- <div class="video-stats">
                    <div class="stat-item">
                        <div class="stat-number">+3</div>
                        <div class="stat-label">Campus</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">+8k</div>
                        <div class="stat-label">Estudiantes</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">+40</div>
                        <div class="stat-label">Programas</div>
                    </div>
                </div> --}}
            </div>
        </section>

        <!-- Modal para video institucional -->
        <div class="modal fade video-modal" id="videoModalLocal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <div class="embed-responsive embed-responsive-16by9">
                        <video id="institutionalVideoPlayer" controls>
                            <source src="{{ $homeVideoSource }}">
                        </video>
                    </div>
                </div>
            </div>
        </div>

        <!-- BLOG-->
        @include('frontend.main.blogs-gallery')
        <!-- END BLOG-->
    </main>
    <!-- END MAIN-->
@endsection