@extends('user.layouts.app')

@section('body_class', 'home')
<style>
    .open-ticker-modal {
        cursor: pointer;
        color: #007bff;
    }

    .open-ticker-modal:hover {
        text-decoration: underline;
    }

    #WelcomePopup {
        /* match the actual modal ID */
        display: none;
        /* hide initially */
    }

    /* .auto-animate li::after {
        content: "";
        background-color: #FCC201;
        border-radius: 100%;
        width: 12px;
        height: 12px;
        display: inline-block;
        vertical-align: middle;
        margin-left: 12px;
    } */

    .auto-animate li.yellowDot::after {
        content: "";
        background-color: #FCC201;
        border-radius: 100%;
        width: 8px;
        height: 8px;
        display: inline-block;
        vertical-align: middle;
        margin-left: 12px;
    }
    .auto-animate li.noDot::after{
        content:none !important;
    }

    .auto-animate li.dotHide::after{
        content:none !important;
    }

    /* Remove bullet for last li */
    .auto-animate li:last-child::after {
        content: "";
        background-color: #004225;
        border-radius: 100%;
        width: 12px;
        height: 12px;
        display: inline-block;
        vertical-align: middle;
        margin-left: 12px;
    }

    /* ----22/10/25----- */
    .welcome-modal-inner img{
        width: 100%;
        height: 300px;
        object-fit: cover;
    }
    .welcome-content{
        padding: 20px !important;
    }
    .welcome-content h4{
        font-size: 24px !important;
    }
    .welcome-modal .button-sec{
        margin-bottom: 0 !important; 
    }
    .welcome-modal .btn{
        padding: 5px 20px !important;
    }
    .welcome-modal{max-height:inherit;}
    .welcome-modal .btn{position: absolute;left: 20px;bottom: 20px;}

</style>
@section('content')
    <!-- Slider main container -->
    <div class="swiper-container">
      <!-- Additional required wrapper -->
      <div class="swiper-wrapper">
        <!-- Slides -->
        <!-- @if($banner && $banner->video) -->
        <div class="swiper-slide video">
          <!-- <video src="{{ asset('storage/distribution/videos/banners/'.$banner->video) }}" muted preload="metadata" playsinline></video> -->
          <!-- <video src="https://tollyclubdev.nodejsdapldevelopments.com/storage/distribution/videos/banners/69b2adaf829fe_banner.mp4" muted preload="metadata" playsinline></video> -->
          <!-- <video src="https://tollyclubdev.nodejsdapldevelopments.com/storage/distribution/videos/banners/homepage.mp4" muted preload="metadata" playsinline></video> -->
           
          @if($banner && $banner->video)
            <video src="{{ asset('storage/distribution/videos/banners/'.$banner->video) }}" muted preload="metadata" playsinline></video>
          @endif
        </div>
        <!-- @endif -->

        @if($banner && $banner->images->count())
            @foreach($banner->images as $image)
                <div class="swiper-slide">
                    <img src="{{ asset('/storage/distribution/images/banner_image/' . $image->image) }}" alt="Slide {{ $loop->iteration }}" alt="Slide 1">
                </div>
            @endforeach
        @endif

      </div>
      <!-- If we need pagination -->
      <div class="swiper-pagination"></div>

      <!-- If we need navigation buttons -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

      <!-- If we need scrollbar -->
      <div class="swiper-scrollbar"></div>
    </div>

    @php
        use Carbon\Carbon;
        $now = Carbon::now('Asia/Kolkata');
        $isLoggedIn = Auth::check();

        $visibleTickers = collect($tickers)->filter(function ($ticker) use ($now, $isLoggedIn) {
            $title = trim((string) ($ticker->title ?? ''));
            if ($title === '') {
                return false;
            }

            $start = Carbon::parse($ticker->start_date_time, 'Asia/Kolkata');
            $end = Carbon::parse($ticker->end_date_time, 'Asia/Kolkata');
            $isInWindow = $now->between($start, $end);

            if (!$isInWindow) {
                return false;
            }

            if ($isLoggedIn) {
                return in_array($ticker->visibility, ['public', 'private'], true);
            }

            return $ticker->visibility === 'public';
        })->values();
    @endphp

    @if($visibleTickers->isNotEmpty())
        <section class="banner-bottom">
            <marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();" scrollamount="">
                <ul class="auto-animate">
                    @foreach($visibleTickers as $ticker)
                        <li class="yellowDot">
                            <span class="open-ticker-modal" data-id="{{ $ticker->id }}">
                                {{ $ticker->title }}
                            </span>
                        </li>
                    @endforeach

                    {{-- Gap before loop restarts --}}
                    <li class="dotHide"></li>
                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                </ul>
            </marquee>
        </section>
    @endif
    <section>
        <div class="page-title">
            <h1>Club Tour</h1>
        </div>
    </section>

    <!-- Club Tour Section -->
    <section class="club-tour-section">
        <ul class="club-tour-list">
            @if(!empty($ourClubTour))
            @foreach($ourClubTour as $tour)
                <li>
                    <div class="tour-content" data-aos="fade-up">
                        <h4>{{ $tour->title }}</h4>
                        <p>{{ $tour->description }}</p>
                        <div class="tour-btn-outer">
                            <a href="{{ $tour->link }}" class="btn btn-primary">Read More</a>
                        </div>
                    </div>
                    <div class="tour-image" data-aos="fade-up">
                        <img src="{{ asset('storage/'.$tour->image) }}" alt="{{ $tour->title }}">
                    </div>
                </li>
            @endforeach
            @endif
        </ul>
    </section>

    @auth
        <section class="our-facility" id="our_facility">
            <div class="container">
                <div class="main-title">
                    <h2>Facilities</h2>
                </div>
                <ul class="facility-list">
                    @if(!empty($our_facilities))
                    @foreach($our_facilities as $facility)
                    <li>
                        <div class="facility-inner" data-aos="fade-up">
                            <div class="facility-image">
                                <img src="{{ asset('/storage/distribution/images/our_facilities_image/' . $facility->image) }}" alt="" />
                            </div>
                            <div class="facility-content">
                                <h3>{{ $facility->title }}</h3>
                                <p>{!! $facility->description !!}</p>
                            </div>
                        </div>
                    </li>
                    @endforeach
                    @endif

                </ul>
            </div>
        </section>

        <!-- recent event -->
        <!-- <section class="event-slider-outer" data-aos="fade-up" id="upcoming_events">
            <div class="main-title">
                <h2>Upcoming & Recent Events</h2>
            </div>
            @if(!empty($upcoming_events[0]->galleries))
            <div class="event-slider">
                @foreach($upcoming_events as $event)
                    @php
                        $primaryPhoto = null;

                        if ($event->galleries->isNotEmpty()) {
                            $firstGallery = $event->galleries->first();
                            if ($firstGallery->photos->isNotEmpty()) {
                                $primaryPhoto = $firstGallery->photos->first()->name;
                            }
                        }
                    @endphp
                    @if($primaryPhoto)
                        <div class="slider-item">
                            <img src="{{ asset('/storage/distribution/images/events/' . $primaryPhoto) }}" alt="Slide 1">
                        </div>
                    @endif
                @endforeach
            </div>
            @else
                <div style="text-align:center; color:white;"><strong>No Upcoming Events Found!</strong></div>
            @endif
        </section> -->

        <section class="event-slider-outer" data-aos="fade-up" id="upcoming_events">
            <div class="main-title">
                <h2>Upcoming & Recent Events</h2>
            </div>
            @if(!empty($upcoming_events[0]))
            <div class="event-slider">
                @foreach($upcoming_events as $event)
                    
                    @if($event->file_name)
                        <div class="slider-item">
                            <a href="{{ asset('/storage/distribution/images/events/files/' . $event->file_name) }}" 
                            target="_blank" rel="noopener noreferrer">
                                <img src="{{ asset('/storage/distribution/images/events/files/' . $event->file_name) }}" alt="Slide 1">
                            </a>
                        </div>
                    @endif
                @endforeach
            </div>
            @else
                <div style="text-align:center; color:white;">No Upcoming and Recent Events Found!</div>
            @endif
        </section>

        <!-- event calender -->
      
        
        {{-- <section class="event-calender-outer" id="event_calendar">
           <div class="container">
            <div class="main-title">
                <h2 id="events">Events Calendar</h2>
            </div>
            @if($events->isNotEmpty())
            <ul class="event-calender">
              
               
                @foreach($events as $event)
                @php
                    $currentYear = \Carbon\Carbon::now()->year;

                    $eventStartDate = \Carbon\Carbon::parse($event->start_date);
                    $start_day   = $eventStartDate->format('d');
                    $start_month = strtoupper($eventStartDate->format('M'));
                    $start_year  = $eventStartDate->year;

                    $eventEndDate = \Carbon\Carbon::parse($event->end_date);
                    $end_day   = $eventEndDate->format('d');
                    $end_month = strtoupper($eventEndDate->format('M'));
                    $end_year  = $eventEndDate->year;

                    $start_month_year = $start_month . ($start_year != $currentYear ? ' ' . $start_year : '');
                    $end_month_year   = $end_month . ($end_year != $currentYear ? ' ' . $end_year : '');

                    $startTime = \Carbon\Carbon::parse($event->start_time)->format('h:i a');
                    $endTime   = \Carbon\Carbon::parse($event->end_time)->format('h:i a');
                @endphp
                <li>
                    <div class="calender-inner">
                        <div class="calender-left">
                            @if($event->label_date)
                            <div class="date-wrapper">
                                <div class="calender-month">{{ $event->label_date }}</div>
                            </div>
                            @else  
                                <div class="date-wrapper">
                                    <h2 class="calender-day">{{ $start_day }}</h2>
                                    <div class="calender-month">{{ $start_month_year }}</div>
                                </div>
                                @if($event->start_date != $event->end_date)
                                <div class="date-wrapper-to"> to </div>
                                <div class="date-wrapper">
                                    <h2 class="calender-day">{{ $end_day }}</h2>
                                    <div class="calender-month">{{ $end_month_year }}</div>
                                </div>
                                @endif
                            @endif
                        </div>
                        <div class="calender-right">
                            <h6 class="green">{{ $event->event_name }}</h6>
                            <div class="calender-time">
                               <span><img src="{{ asset('images/clock.png') }}" alt="Clock icon" /></span>  
                                @if($event->label_time)
                                <span>{{ $event->label_time }}</span>
                                @else
                                <span>{{ $startTime }} to {{ $endTime }}</span>
                                @endif
                            </div>
                            <div class="calender-info">
                               <span><img src="{{ asset('images/location-icon.png') }}" alt="img" /></span>
                                <span>{{ $event->address }}</span>
                            </div>
                        </div>
                    </div>
                </li>
                @endforeach
                
            </ul>
            @else
            <div class="green" style="text-align:center; margin-bottom: 45px;">No Data Found!</div>
            @endif
            <div class="calender-btn-outer">
                <!-- <a href="{{ route('user.events.index') }}" class="btn btn-primary">Read More</a> -->
                 <a href="{{ route('user.events.index') }}" class="btn btn-primary">View Calendar</a>
            </div>
            </div>  
        </section> --}}
        
    @endauth

    <!-- Map & Services Enquiry -->
    <section class="map-enquiry-section">

        <div class="map-section">
              @if(!empty($contactInfo))

            <!-- <img src="./images/map.jpg" alt="Map" /> -->
             <!-- Embed Google Map using iframe -->  
             <iframe
                src="{{ $contactInfo->google_map_url }}"
                width="100%" height="500" frameborder="0" style="border:0; vertical-align: top;"
                allowfullscreen>
            </iframe>
            <div class="pointer"></div>
            <div class="pointer-content">
                <div class="pointer-content-inner">
                    <h6>The Tollygunge Club Pvt. Ltd.</h6>
                    <p>{{ $contactInfo->address }}</p>
                </div>
            </div>
            @endif

        </div>

    </section>

    <!-- --- Modal for ticker --- -->
    <div id="WelcomePopup" class="welcome-modal-outer" style="display: none;">
        <div class="welcome-modal">
        <div class="welcome-modal-inner">
            <button class="closeWelcome-popup" id="closeWelcomePopup">
            <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 0H56V56H16C7.16344 56 0 48.8366 0 40V0Z" fill="white"/>
                <path d="M35.5 20.5L20.5 35.5" stroke="#111111" stroke-width="1.995" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M20.5 20.5L35.5 35.5" stroke="#111111" stroke-width="1.995" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            </button>
            <div class="welcome-banner">
            <img src="{{ asset('images/new-image/welcome-banner.webp') }}" alt="" />
            </div>
            <div class="welcome-content">
            <h4>Create magic.</h4>
            <p>Immerse yourself in a learning experience guided by industry-leading experts, where you’ll gain valuable insights, master practical techniques, and develop the skills needed to excel in your field. Stay ahead of the curve by exploring the latest trends, cutting-edge tools, and emerging innovations that are transforming the industry. Whether you’re looking to refine your expertise, adapt to evolving technologies, or gain a competitive edge, this is your opportunity to grow, connect, and stay informed.</p>
            <div class="button-sec">
                <a href="#" class="btn btn-primary" target="_blank">
                Visit 
                <span class="icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M17 7.00009L6 18.0001" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
                    <path d="M11 5.99997H17C17.4714 5.99997 17.7071 5.99997 17.8536 6.14642C18 6.29286 18 6.52856 18 6.99997V13" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </span>
                </a>
            </div>
            </div>
        </div>
        </div>
        <div class="welcome-modal-overlay"></div>
    </div>
    
    <!-- Welcome Popup Modal -->
    @if($welcomeNotices->count())
    <div id="WelcomeNoticePopup" class="welcome-modal-outer" style="display:none;">
        <div class="welcome-modal">
        <div class="welcome-modal-inner">
            <button class="closeWelcome-popup" id="closeWelcomePopup">
            <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 0H56V56H16C7.16344 56 0 48.8366 0 40V0Z" fill="white"/>
                <path d="M35.5 20.5L20.5 35.5" stroke="#111111" stroke-width="1.995" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M20.5 20.5L35.5 35.5" stroke="#111111" stroke-width="1.995" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            </button>
            <div class="welcome-banner">
            @if($welcomeNotices[0]->image)
                <img src="{{ asset('storage/distribution/images/welcome_notice_image/' . $welcomeNotices[0]->image) }}" alt="">
            @endif
            </div>
            <div class="welcome-content">
            {!! $welcomeNotices[0]->description !!}
            <!-- <p class="small">Advertisement</p>
            <h4>Create magic.</h4>
            <h5>Adobe.inc</h5>
            <p>Immerse yourself in a learning experience guided by industry-leading experts, where you’ll gain valuable insights, master practical techniques, and develop the skills needed to excel in your field. Stay ahead of the curve by exploring the latest trends, cutting-edge tools, and emerging innovations that are transforming the industry. Whether you’re looking to refine your expertise, adapt to evolving technologies, or gain a competitive edge, this is your opportunity to grow, connect, and stay informed.</p> -->
            
            @if($welcomeNotices[0]->link)
            <div class="button-sec">
                <a href="#" class="btn btn-primary">
                Visit 
                <span class="icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M17 7.00009L6 18.0001" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
                    <path d="M11 5.99997H17C17.4714 5.99997 17.7071 5.99997 17.8536 6.14642C18 6.29286 18 6.52856 18 6.99997V13" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </span>
                </a>
            </div>
            @endif
            </div>
        </div>
        </div>
        <div class="welcome-modal-overlay"></div>
    </div> 
    @endif  

    <!-- Welcome Popup Modal with slider-->
    {{--@if($welcomeNotices->count())
    <div id="WelcomeNoticePopup" class="welcome-modal-outer">
        <div class="welcome-modal">
            <div class="welcome-modal-inner">
                <button class="closeWelcome-popup" id="closeWelcomePopup">
                    <svg width="28" height="28" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M0 0H56V56H16C7.16344 56 0 48.8366 0 40V0Z" fill="white"/>
                        <path d="M35.5 20.5L20.5 35.5" stroke="#111111" stroke-width="1.995" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M20.5 20.5L35.5 35.5" stroke="#111111" stroke-width="1.995" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
                
                <div class="welcome-swiper swiper">
                    <div class="swiper-wrapper">
                        @foreach($welcomeNotices as $notice)
                            <div class="swiper-slide">
                                <div class="welcome-slide">
                                    <div class="welcome-banner">
                                        @if($notice->image)
                                            <img src="{{ asset('storage/distribution/images/welcome_notice_image/' . $notice->image) }}" alt="">
                                        @endif
                                    </div>
                                    <div class="welcome-content">
                                        {!! $notice->description !!}
                                        @if($notice->link)
                                            <div class="button-sec">
                                                <a href="{{ $notice->link }}" target="_blank" class="btn btn-primary">
                                                    Visit 
                                                    <span class="icon">
                                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                            xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M17 7.00009L6 18.0001" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
                                                            <path d="M11 5.99997H17C17.4714 5.99997 17.7071 5.99997 17.8536 6.14642C18 6.29286 18 6.52856 18 6.99997V13"
                                                                stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                                        </svg>
                                                    </span>
                                                </a>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="swiper-pagination"></div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>
        </div>
        <div class="welcome-modal-overlay"></div>
    </div>
    @endif  --}}

@endsection

@section('footer')
    <!-- footer bottom appears here -->
@endsection

@push('scripts')
    <script>
        $(window).on('load',function() {
            const swiper = new Swiper('.swiper-container', {
                loop: true,
                slidesPerView: 1,
                spaceBetween: 0,
                effect: 'fade', // Enable fade (dissolve) effect
                // keep autoplay ON globally...
                autoplay: { delay: 3000, disableOnInteraction: false },
                pagination: { el: '.swiper-pagination', clickable: true },
                navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
        
                // ...but stop it whenever a video slide becomes active
                on: {
                init() {
                    handleSlide(this);
                },
                // trigger early, before the new slide fully settles
                slideChangeTransitionStart() {
                    handleSlide(this);
                }
                }
            });
        
            function handleSlide(sw) {
                // pause & reset all videos (originals + duplicates)
                document.querySelectorAll('.swiper-container video').forEach(v => {
                try { v.pause(); v.currentTime = 0; } catch (e) {}
                v.removeEventListener('ended', v._onceEnded);
                delete v._onceEnded;
                });
        
                const active = sw.slides[sw.activeIndex];
                const vid = active && active.querySelector('video');
                if (!vid) {
                // image slide => make sure autoplay is running
                if (sw.autoplay && !sw.autoplay.running) sw.autoplay.start();
                return;
                }
        
                // video slide => stop autoplay, then play once
                if (sw.autoplay && sw.autoplay.running) sw.autoplay.stop();
        
                vid.muted = true;          // mobile autoplay policy
                vid.playsInline = true;    // iOS inline
                // IMPORTANT for loop duplicates: force a fresh load so autoplay works reliably
                try { vid.load(); } catch (e) {}
        
                const tryPlay = () => {
                const p = vid.play();
                if (p && p.catch) {
                    p.catch(() => {
                    // if autoplay is blocked, don't get stuck—resume slider
                    if (sw.autoplay && !sw.autoplay.running) sw.autoplay.start();
                    });
                }
                };
        
                if (vid.readyState >= 2) {
                tryPlay();
                } else {
                // wait for usable data; 'loadeddata' is more reliable for duplicates
                vid.addEventListener('loadeddata', tryPlay, { once: true });
                // safety fallback
                setTimeout(() => { if (vid.readyState < 2) tryPlay(); }, 500);
                }
        
                vid._onceEnded = () => {
                vid.removeEventListener('ended', vid._onceEnded);
                if (sw.autoplay && !sw.autoplay.running) sw.autoplay.start();
                sw.slideNext();
                };
                vid.addEventListener('ended', vid._onceEnded);
            }
        
            // If the very first active slide is a video, stop autoplay immediately
            if (document.querySelector('.swiper-slide-active video') && swiper.autoplay?.running) {
                swiper.autoplay.stop();
            }
        });
    
    </script>

    <script>
        
        // ---- Ticker   ---- //
        document.addEventListener("DOMContentLoaded", function () {
            const modal = document.getElementById("WelcomePopup");
            const closeBtn = document.getElementById("closeWelcomePopup");
            const overlay = modal.querySelector(".welcome-modal-overlay");

            // Event delegation: listen for clicks on the document
            document.addEventListener("click", function (e) {
                // Check if clicked element (or its parent) has the class
                const target = e.target.closest(".open-ticker-modal");
                if (!target) return; // not a ticker click

                let tickerId = target.dataset.id;

                fetch(`/ticker/${tickerId}`)
                    .then(res => res.json())
                    .then(data => {
                        // Image
                        const imgEl = modal.querySelector(".welcome-banner img");
                        if (data.image) {
                            imgEl.src = data.image;
                        } else {
                            // alert("No Image");
                            imgEl.src = ""; // leave empty
                        }

                        // Title
                        modal.querySelector(".welcome-content h4").innerText = data.title ?? "No title";

                        // Description (remove HTML tags)
                        modal.querySelector(".welcome-content p").innerText = data.description
                            ? data.description.replace(/<\/?[^>]+(>|$)/g, "")
                            : "";

                        // Link
                        modal.querySelector(".welcome-content a").href = data.link ?? data.image;

                        // Show modal
                        modal.style.display = "flex";
                    })
                    .catch(err => console.error("Error fetching ticker:", err));
            });

            // Close modal on X click
            closeBtn.addEventListener("click", () => modal.style.display = "none");

            // Close modal on overlay click
            overlay.addEventListener("click", () => modal.style.display = "none");
        });

    </script>

    <script>
        $(document).ready(function () {
            if ($('#WelcomeNoticePopup').length) {
                $('#WelcomeNoticePopup').addClass('active'); // show on load
            }

            $('#closeWelcomePopup, #WelcomeNoticePopup .welcome-modal-overlay').on('click', function () {
                $('#WelcomeNoticePopup').removeClass('active');
            });

            if ($('.welcome-swiper .swiper-slide').length > 1) {
                new Swiper('.welcome-swiper', {
                    loop: true,
                    slidesPerView: 1,
                    autoplay: { delay: 10000, disableOnInteraction: false },
                    pagination: { el: '.swiper-pagination', clickable: true },
                    navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }
                });
            }
        });

       

    </script>  
    <script>
         // for marquree yellow dots
        $(document).ready(function () {
        $('.dotHide').prev().addClass('noDot'); 
        $('.dotHide').next().addClass('noDot'); 
       });
    </script>
@endpush