@extends('front.layout')
@section('header')
    <link rel="stylesheet" href="/front/assets/css/pages/index.css" />
    <title>{{ $setting->where('name','home_seo_title_' . app()->getLocale())->first()->value }}</title>
    <meta name="description" content="{{ $setting->where('name','home_meta_description_' . app()->getLocale())->first()->value }}">
    <meta name="keyword" content="{{ $setting->where('name','home_meta_keyword_' . app()->getLocale())->first()->value }}">
    <link rel="canonical" href="{{ str_replace('http://', 'https://', Request::url()) }}">
    @if(app()->getLocale() != 'fa')
        <style>
            #heroCarousel > div.owl-stage-outer > div > div > div > div > div{
                direction: ltr !important;
            }
            .main-slider .owl-nav{
                right: 10% !important;
                left: unset;
            }

        </style>
    @endif
    @foreach($sliders as $item)
        @php
            $desktopSrc = $item->src ?? $item->mobile_src;
            $mobileSrc = $item->mobile_src ?? $item->src;
        @endphp
    @endforeach
    <link rel="preload" as="image" href="/{{ $desktopSrc }}">
    <link rel="preload" as="image" href="/{{ $mobileSrc }}">

    <style>
        /* Loading overlay styles */
        .page-loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #232077 0%, #3a2f9e 50%, #232077 100%);
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            opacity: 1;
            transition: opacity 0.8s ease-in-out;
        }

        .page-loading-overlay.fade-out {
            opacity: 0;
            pointer-events: none;
        }

        .loading-container {
            text-align: center;
            animation: fadeInUp 0.8s ease-out;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .loading-spinner {
            width: 60px;
            height: 60px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-top: 3px solid #ffffff;
            border-radius: 50%;
            animation: spin 1.2s linear infinite;
            margin: 0 auto 25px;
            position: relative;
        }

        .loading-spinner::after {
            content: '';
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            animation: pulse 2s ease-in-out infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 0.3; }
            50% { transform: scale(1.1); opacity: 0.6; }
        }

        .loading-text {
            font-size: 20px;
            color: #ffffff;
            font-weight: 400;
            letter-spacing: 1px;
            margin-bottom: 15px;
            animation: textGlow 2s ease-in-out infinite alternate;
        }

        @keyframes textGlow {
            from { text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); }
            to { text-shadow: 0 0 20px rgba(255, 255, 255, 0.8); }
        }

        .loading-subtitle {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
            font-weight: 300;
            letter-spacing: 0.5px;
        }

        .loading-dots {
            display: inline-block;
            margin-left: 5px;
        }

        .loading-dots span {
            display: inline-block;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background-color: #ffffff;
            margin: 0 2px;
            animation: dots 1.4s infinite ease-in-out;
        }

        .loading-dots span:nth-child(1) { animation-delay: 0s; }
        .loading-dots span:nth-child(2) { animation-delay: 0.2s; }
        .loading-dots span:nth-child(3) { animation-delay: 0.4s; }

        @keyframes dots {
            0%, 80%, 100% {
                transform: scale(0.8);
                opacity: 0.5;
            }
            40% {
                transform: scale(1);
                opacity: 1;
            }
        }

        /* Progress bar */
        .loading-progress {
            width: 200px;
            height: 3px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 2px;
            margin-top: 20px;
            overflow: hidden;
        }

        .loading-progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #ffffff, #e0e0e0);
            border-radius: 2px;
            width: 0%;
            transition: width 0.3s ease;
            animation: progressShimmer 2s infinite;
        }

        @keyframes progressShimmer {
            0% { background-position: -200px 0; }
            100% { background-position: 200px 0; }
        }


        p{
            text-align: justify;
        }
        .gal-desc{
            background: black;
            position: absolute;
            bottom: 0;
            z-index: 100;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            opacity: 0.7;
            color: white;
        }
        .hero-img{
            height: 100vh;
        }
        @media screen and (max-width: 767px) {
            .hero-img{
                height: 80vh;
            }
        }

        .owl-nav svg{
            border-radius: 8px;
        }
        @media only screen and (max-width: 768px) {
            .section-title__link {
                display: none !important;
            }
        }

        .request-form-section__inner{
            display: grid !important;
        }

        /* Neon Button Styles */
        .site-btn.neon-btn {
            position: relative;
            background: transparent !important;
            border: 2px solid #00ffff !important;
            color: #00ffff !important;
            text-decoration: none;
            padding: 12px 24px !important;
            border-radius: 5px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            transition: all 0.3s ease;
            overflow: hidden;
            z-index: 1;
            box-shadow:
                0 0 5px #00ffff,
                0 0 10px #00ffff,
                0 0 15px #00ffff,
                inset 0 0 5px rgba(0, 255, 255, 0.1);
        }

        .site-btn.neon-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
            z-index: -1;
        }

        .site-btn.neon-btn:hover {
            background: rgba(0, 255, 255, 0.1) !important;
            color: #ffffff !important;
            text-shadow: 0 0 10px #00ffff;
            box-shadow:
                0 0 10px #00ffff,
                0 0 20px #00ffff,
                0 0 30px #00ffff,
                0 0 40px #00ffff,
                inset 0 0 10px rgba(0, 255, 255, 0.2);
            transform: translateY(-2px);
        }

        .site-btn.neon-btn:hover::before {
            left: 100%;
        }

        .site-btn.neon-btn:active {
            transform: translateY(0);
            box-shadow:
                0 0 5px #00ffff,
                0 0 10px #00ffff,
                inset 0 0 5px rgba(0, 255, 255, 0.3);
        }

        /* Animation for continuous glow effect */
        @keyframes neonPulse {
            0%, 100% {
                box-shadow:
                    0 0 5px #00ffff,
                    0 0 10px #00ffff,
                    0 0 15px #00ffff,
                    inset 0 0 5px rgba(0, 255, 255, 0.1);
            }
            50% {
                box-shadow:
                    0 0 10px #00ffff,
                    0 0 20px #00ffff,
                    0 0 30px #00ffff,
                    inset 0 0 10px rgba(0, 255, 255, 0.2);
            }
        }

        .site-btn.neon-btn {
            animation: neonPulse 2s ease-in-out infinite;
        }

        .site-btn.neon-btn:hover {
            animation: none;
        }

        /* Related Links Image Hover Effects */
        .home-links__content img {
            filter: brightness(0) saturate(100%);
            transition: filter 0.3s ease;
        }
        .video-poster-container{
            margin-top: 7.5rem;
        }

    </style>
@endsection
@section('content')
    <!-- Loading Overlay -->
    <div id="pageLoadingOverlay" class="page-loading-overlay">
        <div class="loading-container">
            <img src="/logo-white.png" alt="Logo" style="max-width: 200px; margin-bottom: 30px;">
            <div class="loading-spinner"></div>
            <div class="loading-text">
                {{ trans('translate.loading') ?? 'Loading' }}
                <div class="loading-dots">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            <div class="loading-progress">
                <div class="loading-progress-bar" id="loadingProgressBar"></div>
            </div>
        </div>
    </div>

    <!-- Page Content (initially hidden but present in DOM) -->
    <div id="pageContent" class="page-content">
        <main>
            <div class="main-slider">
                <div id="heroCarousel" class="main-slider-owl-carousel owl-carousel owl-theme">
                    @foreach($sliders as $item)
                        @php
                            $desktopSrc = $item->src ?? $item->mobile_src;
                            $mobileSrc = $item->mobile_src ?? $item->src;
                        @endphp

                        <div class="item">
                            <picture style="height: 100vh !important;">
                                <source srcset="/{{ $mobileSrc }}" media="(max-width: 600px)">
                                <source srcset="/{{ $desktopSrc }}">
                                <img style="" src="/{{ $desktopSrc }}" class="d-block w-100 hero-img slider-image" alt="{{$item->title_up }}" data-desktop="/{{ $desktopSrc }}" data-mobile="/{{ $mobileSrc }}">
                            </picture>


                            <div class="main-slider__item__inner">
                                <div class="container">
                                    <div class="main-slider__texts">
                                        <h1>
                                            {{ $item->title_up }}
                                            <br>
                                            {{ $item->title_down }}
                                        </h1>
                                        <p>{{ $item->description }}</p>

                                        <a class="btn main-slider__btn" href="{{ $item->btn_src }}">
                                            {{ $item->btn_title }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="container">
                <section class="our-sections">
                    <div class="row counter-section">


                        <div class="col-6 col-md-3">
                            <div class="our-sections__inner d-flex align-items-center flex-column justify-content-center">
                                <img src="/front/assets/images/our-sections2.svg" class="d-block mb-4" alt="section" />
                                <h2>+ <span class="count-number" data-count="{{ trans('translate.home_number_two') }}">0</span></h2>
                                <span>{{ trans('translate.home_number_two_text') }}</span>
                            </div>
                        </div>

                        <div class="col-6 col-md-3">
                            <div class="our-sections__inner d-flex align-items-center flex-column justify-content-center">
                                <img src="/front/assets/images/our-sections4.svg" class="d-block mb-4" alt="section" />
                                <h2>+ <span class="count-number" data-count="{{ trans('translate.home_number_one') }}">0</span></h2>
                                <span>{{ trans('translate.home_number_one_text') }}</span>
                            </div>
                        </div>



                        <div class="col-6 col-md-3">
                            <div class="our-sections__inner d-flex align-items-center flex-column justify-content-center">
                                <img src="/front/assets/images/our-sections1.svg" class="d-block mb-4" alt="section" />
                                <h2>+ <span class="count-number" data-count="{{ trans('translate.home_number_four') }}">0</span></h2>
                                <span>{{ trans('translate.home_number_four_text') }}</span>
                            </div>
                        </div>

                        <div class="col-6 col-md-3">
                            <div class="our-sections__inner d-flex align-items-center flex-column justify-content-center">
                                <img src="/front/assets/images/our-sections3.svg" class="d-block mb-4" alt="section" />
                                <h2>+ <span class="count-number" data-count="{{ trans('translate.home_number_three') }}">0</span></h2>
                                <span>{{ trans('translate.home_number_three_text') }}</span>
                            </div>
                        </div>
                    </div>
                </section>

                <div class="request-form-section mb-5">
                    <img src="/front/assets/images/should-delete/banner4.jpg" class="d-block w-100" alt="title" />
                    <div class="request-form-section__inner">
                        <div class="row align-items-end justify-content-between">
                            <div class="col-12 col-md-7">
                                <h3>
                                    {{ trans('translate.request_form_title') }}
                                </h3>
                                <p>
                                    {!!  trans('translate.request_form_desc') !!}
                                </p>
                            </div>

                            <div class="col-12 col-md-5 d-flex justify-content-end">
                                <a class="site-btn neon-btn d-flex justify-content-center" href="{{ getFirstSegment() }}{{ trans('translate.request_form_btn_link_int') }}">
                                    {{ trans('translate.request_form_btn_title_int') }}
                                </a>
                                <a class="site-btn neon-btn d-flex justify-content-center mx-4" href="{{ getFirstSegment() }}{{ trans('translate.request_form_btn_link_ext') }}">
                                    {{ trans('translate.request_form_btn_title_ext') }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>


                <section class="section-3rd">
                    <header class="section-title">
                        <div>
                            <h2>
                                {{ trans('translate.services_title_home') }}
                            </h2>
                        </div>

                        <span>
                            {{ $setting->where('name','home_services_text_' . app()->getLocale())->first()->value }}
                        </span>
                    </header>

                    <div class="section-3rd__contents">
                        <div class="row">
                            <div class="col-12 col-md-6">
                                <div class="section-3rd__content">
                                    <img src="/{{ $servicesOne->src }}" class="d-block w-100" alt="title" />
                                    <div class="section-3rd__content__inner">
                                        <div>
                                            <h3>
                                                {{ $servicesOne->title }}
                                            </h3>
                                            <p>
                                                {{ $servicesOne->description }}
                                            </p>

                                            <a class="btn site-btn" href="{{ $servicesOne->btn_src }}">
                                                {{ $servicesOne->btn_title }}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="section-3rd__content">
                                    <img src="/{{ $servicesTwo->src }}" class="d-block w-100" alt="title" />
                                    <div class="section-3rd__content__inner">
                                        <div>
                                            <h3>
                                                {{ $servicesTwo->title }}
                                            </h3>
                                            <p>
                                                {{ $servicesTwo->description }}
                                            </p>

                                            <a class="btn site-btn" href="{{ $servicesTwo->btn_src }}">
                                                {{ $servicesTwo->btn_title }}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="section-3rd__content mt-4">
                                    <img src="/{{ $servicesThree->src }}" class="d-block w-100" alt="title" />
                                    <div class="section-3rd__content__inner">
                                        <div>
                                            <h3>
                                                {{ $servicesThree->title }}
                                            </h3>
                                            <p>
                                                {{ $servicesThree->description }}
                                            </p>
                                            <a class="btn site-btn" href="{{ $servicesThree->btn_src }}">
                                                {{ $servicesThree->btn_title }}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>


                <section class="home-news">
                    <header class="section-title">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <h2>
                                    {{ trans('translate.news_and_articles') }}
                                </h2>
                            </div>

                            <div>
                                <a href="{{ getFirstSegment() . 'news' }}" class="d-flex align-items-center btn btn-primary section-title__link" style="background-color: #232077 !important;border-color: #232077">
                                    <span style="color: white !important;">{{ trans('translate.news_and_articles_more')  }}</span>
                                    <i class="fas fa-chevron-left mx-1" style="color: white"></i>
                                </a>
                            </div>
                        </div>
                    </header>

                    <div class="row justify-content-between">
                        <div class="col-12 col-md-6">
                            @foreach($news as $item)
                                <a href="{{ getFirstSegment() }}{{ $item->slug }}" class="home-news__minimal-section d-flex align-items-center justify-content-between">
                                    <img src="/{{ $item->image }}" width="118" height="133" class="d-block" alt="title" />

                                    <div class="home-news__minimal-section__content flex-grow-1">
                                        <h3>
                                            {{ $item->title }}
                                        </h3>

                                        <p>
                                            {{ $item->meta_description }}
                                        </p>

                                        <div class="d-flex align-items-center justify-content-between">

                                            @if(@$item->category->title)
                                                <button class="site-btn btn-no-hover" href="/index.html">
                                                    {{ $item->category->title }}
                                                </button>
                                            @endif

                                        </div>
                                    </div>
                                </a>
                            @endforeach
                        </div>

                        <div class="col-12 col-md-6">
                            <div class="text-center">
                                <div style="position: relative">
                                    @if(str_contains(@$setting->where('name','home_banner_banner_' .app()->getLocale())->first()->value,'iframe'))
                                        {!! @$setting->where('name','home_banner_banner_' .app()->getLocale())->first()->value !!}
                                        <div class="gal-desc" style="position:relative;"><p>{{ @$setting->where('name','home_banner_banner_text_' .app()->getLocale())->first()->value }}</p></div>
                                    @else
                                        <img src="/{{ @$setting->where('name','home_banner_banner_' .app()->getLocale())->first()->value }}"
                                             class="img-fluid"
                                             style="cursor: pointer; width: 100%;"
                                             data-bs-toggle="modal"
                                             data-bs-target="#bannerModal" alt="{{ @$setting->where('name','home_banner_banner_text_' .app()->getLocale())->first()->value }}" />
                                        <div class="gal-desc"><p>{{ @$setting->where('name','home_banner_banner_text_' .app()->getLocale())->first()->value }}</p></div>
                                    @endif

                                </div>


                            </div>
                        </div>
                    </div>

                    <div class="xs-show w-100 justify-content-center align-items-center">
                        <a href="{{ getFirstSegment() . 'news' }}" class="d-flex align-items-center btn btn-primary section-title__link" style="background-color: #232077 !important;border-color: #232077">
                            <span style="color: white !important;">{{ trans('translate.news_and_articles_more')  }}</span>
                            <i class="fas fa-chevron-left mx-1" style="color: white"></i>
                        </a>
                    </div>
                </section>

                <section class="home-hero">
                    <header class="section-title">
                        <div class="d-flex align-items-center justify-content-center">
                            <h2>
                                {{ trans('translate.railway_history') }}
                            </h2>
                        </div>
                    </header>
                    <div class="home-hero__contents">
                        <p>
                            {{ $setting->where('name','home_video_text_' .app()->getLocale())->first()->value }}
                        </p>
                        @if(@$setting->where('name','home_video_' .app()->getLocale())->first()->value)
                            <div class="video-poster-container text-center">
                                <img
                                    src="/{{ @$setting->where('name','home_video_banner_' .app()->getLocale())->first()->value }}"
                                    alt="Video Poster"
                                    class="img-fluid"
                                    style="cursor: pointer; max-width: 100%;"
                                    data-bs-toggle="modal"
                                    data-bs-target="#videoModal"
                                />
                            </div>
                        @endif
                    </div>

                </section>

                <section class="home-gallery">
                    <header class="section-title">
                        <div class="d-flex align-items-center justify-content-between">
                            <h2>
                                {{ trans('translate.gallery_title') }}
                            </h2>
                            <div>
                                <a href="{{ getFirstSegment() . 'galleries' }}" class="d-flex align-items-center btn btn-primary section-title__link" style="background-color: #232077 !important;border-color: #232077">
                                    <span style="color: white !important;">{{ trans('translate.gallery_archive') }}</span>
                                    <svg class="svg-inline--fa fa-chevron-left mx-1" style="color: white;" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 278.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"></path></svg>
                                </a>
                            </div>
                        </div>
                    </header>

                    <div class="home-gallery__contents">
                        <div class="row">
                            @foreach($galleries->whereNotNull('src') as $item)
                                <div class="col-12 col-md-3 home-gallery__content">
                                    <!-- Cover part -->
                                    <div class="gallery-trigger" style="position: relative" data-gallery-id="gallery{{ $item->id }}">
                                        <img src="/{{ json_decode($item->src,true)[0] }}" class="d-block w-100" alt="gallery" />
                                        <div class="gal-desc"><p>{{ $item->description }}</p></div>
                                    </div>

                                    <!-- Slider Part -->
                                    <div class="gallery-images d-none" id="gallery{{ $item->id }}">
                                        @foreach(json_decode($item->src,true) as $photo)
                                            <img src="{{ $photo }}" />
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div id="fullscreen-slider" class="full-gallery-overlay">
                        <div class="owl-carousel full-gallery-slider"></div>
                        <div id="slider-close"><i class="fas fa-times"></i></div>
                    </div>


                </section>

                <section class="home-links">
                    <header class="section-title">
                        <div class="d-flex align-items-center justify-content-center">
                            <h2>
                                {{ trans('translate.related_links') }}
                            </h2>
                        </div>
                    </header>

                    <div class="home-links__contents">
                        <div class="owl-carousel link-owl-carousel owl-theme">
                            @foreach($related as $item)
                                <div class="item">
                                    <div class="d-flex align-items-center flex-column justify-content-center">
                                        <a href="{{ $item->link }}" class="home-links__content">
                                            <img src="/{{ $item->src }}" width="72" class="d-block"/>
                                            <span>{{ $item->title }}</span>
                                        </a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </section>

{{--            <div class="membership">--}}
{{--                <div class="d-flex flex-column align-items-center justify-content-center">--}}
{{--                    <header>{{ trans('translate.user_registration') }}</header>--}}
{{--                    <p>{{ trans('translate.user_registration_text') }}</p>--}}
{{--                    <a href="{{ trans('translate.user_registration_btn_link') }}" class="btn site-btn btn-no-hover">{{ trans('translate.user_registration_btn_text') }}</a>--}}
{{--                </div>--}}
{{--            </div>--}}
            </div>
            <div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-centered">
                    <div class="modal-content bg-dark">
                        <div class="modal-body p-0 position-relative">
                            <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-2" data-bs-dismiss="modal" aria-label="Close"></button>
                            {!! $setting->where('name','home_video_' .app()->getLocale())->first()->value !!}

                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="bannerModal" tabindex="-1" aria-labelledby="bannerModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-centered">
                    <div class="modal-content bg-dark">
                        <div class="modal-body p-0 position-relative">
                            <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-2" data-bs-dismiss="modal" aria-label="Close"></button>
                            <img src="/{{ @$setting->where('name','home_banner_banner_' .app()->getLocale())->first()->value }}" alt="" width="100%">

                        </div>
                    </div>
                </div>
            </div>

        </main>
    </div>
@endsection
@section('footer')
    <script src="/front/assets/js/index.js">
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const loadingOverlay = document.getElementById('pageLoadingOverlay');
            const pageContent = document.getElementById('pageContent');
            const progressBar = document.getElementById('loadingProgressBar');

            let loadedImages = 0;
            let totalImages = 0;
            let progressInterval;
            let allImagesLoaded = false;

            // Start progress animation
            function startProgressAnimation() {
                let progress = 0;
                progressInterval = setInterval(() => {
                    progress += Math.random() * 15;
                    if (progress > 90) progress = 90;
                    progressBar.style.width = progress + '%';
                }, 200);
            }

                                    // Function to show page content and hide loading overlay
            function showPageContent() {
                if (allImagesLoaded) return;
                allImagesLoaded = true;

                clearInterval(progressInterval);
                progressBar.style.width = '100%';

                loadingOverlay.classList.add('fade-out');

                setTimeout(() => {
                    loadingOverlay.style.display = 'none';
                    loadingOverlay.style.pointerEvents = 'none';
                    loadingOverlay.remove(); // Completely remove from DOM
                    pageContent.classList.add('show');

                    // Scroll to top of the page
                    window.scrollTo({
                        top: 0,
                        left: 0,
                        behavior: 'smooth'
                    });
                }, 800);
            }

                        // Function to load ALL images on the page
            function loadAllPageImages() {
                // Get all images on the page
                const allImages = document.querySelectorAll('img');
                totalImages = allImages.length;


                if (totalImages === 0) {
                    setTimeout(() => {
                        showPageContent();
                    }, 1500);
                    return;
                }

                // Load each image
                allImages.forEach(function(img) {
                    const imgElement = new Image();

                    imgElement.onload = function() {
                        loadedImages++;

                        if (loadedImages === totalImages) {
                            // Double-check that all images are truly loaded
                            setTimeout(() => {
                                const allImagesReady = Array.from(allImages).every(img =>
                                    img.complete && img.naturalWidth > 0
                                );

                                if (allImagesReady) {
                                    showPageContent();
                                } else {
                                    setTimeout(() => {
                                        showPageContent();
                                    }, 1000);
                                }
                            }, 200);
                        }
                    };

                    imgElement.onerror = function() {
                        loadedImages++;

                        if (loadedImages === totalImages) {
                            setTimeout(() => {
                                showPageContent();
                            }, 500);
                        }
                    };

                    // Start loading the image
                    imgElement.src = img.src;
                });
            }

            // Start the loading process
            startProgressAnimation();
            loadAllPageImages();

            // Fallback timeout
            setTimeout(function() {
                if (!allImagesLoaded) {
                    showPageContent();
                }
            }, 15000);

            // Additional fallback to ensure loading overlay is removed
            setTimeout(function() {
                const loadingOverlay = document.getElementById('pageLoadingOverlay');
                if (loadingOverlay && loadingOverlay.style.display !== 'none') {
                    console.log('Force removing loading overlay');
                    loadingOverlay.style.display = 'none';
                    loadingOverlay.style.pointerEvents = 'none';
                    loadingOverlay.remove();
                }
            }, 2000);

            // Check for any remaining loading overlays and remove them
            setInterval(function() {
                const overlays = document.querySelectorAll('.page-loading-overlay');
                overlays.forEach(function(overlay) {
                    if (overlay.style.display !== 'none') {
                        console.log('Removing remaining loading overlay');
                        overlay.style.display = 'none';
                        overlay.style.pointerEvents = 'none';
                        overlay.remove();
                    }
                });
            }, 1000);
        });
    </script>
@endsection