@extends('frontend.layouts.app', ['title' => 'TSG Breeze offers elegant and trendy ladies fashion, featuring stylish outfits, accessories, and timeless essentials for the modern woman'])

@section('content')
    <!-- Hero Section -->
    <section class="hero owl-carousel">
        @foreach ($banners as $banner)
            <div class="item">
                <img src="{{ asset('storage/' . $banner->image) }}">
            </div>
        @endforeach
        {{-- <div class="container">
            <div class="hero-content">
                <h1 class="hero-title">Sort out Your Spring Look</h1>
                <p class="hero-description">We've nailed it down to every smallest detail and a big one for your
                    company.</p>
                <div class="shop_now_button">
                    <a href="{{ route('shop.page.index') }}" class="hero-button">
                        Shop Now
                        <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
            </div>
        </div> --}}
    </section>

    <!-- Category Section -->
    <section class="category">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">CATEGORY</h2>
                <a href="{{ route('allCategories') }}" class="see-all">See All</a>
            </div>
        </div>
        <div class="category-grid owl-carousel featured-slider owl-theme">
            @foreach ($categories as $category)
                <a href="{{ route('shop_grid', $category->slug) }}">
                    <div class="category-item item">
                        <img src="{{ asset($category->image) }}" alt="Bottom Wear" class="category-image">
                        <div class="category-name">{{ $category->title }}</div>
                    </div>
                </a>
            @endforeach
        </div>
        </div>
    </section>

    <!-- New Arrival Section -->
    <section class="new-arrival">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">NEW ARRIVAL</h2>
                <a href="{{ route('newProducts') }}" class="see-all">See All</a>
            </div>

            <div class="product-grid">
                <div class="row">
                    @foreach ($products as $k => $product)
                        @php
                            $isInWishlist = $wishlist->contains('product_id', $product->product_id);
                        @endphp
                        @if ($k == 0)
                            <div class="col-md-4 new_arrival">
                                <a class="product-item" href="{{ route('single.product.view', $product->slug) }}" data-product-id="{{ $product->product_id }}">
                                    <div class="product-large">
                                        <img src="{{ asset('storage/' . $product->product_image) }}" alt="New Dress"
                                            class="product-image">
                                        <div class="wishlist">
                                            <span class="like-icon {{ $isInWishlist ? 'liked' : 'add-to-wishlist' }}"
                                                title="wishlist" onclick="addTowishListClass(this)"></span>
                                            {{-- <i class="far fa-heart"></i> --}}
                                        </div>
                                        <div class="product-info">
                                            <h3 class="product-title">{{ $product->product_name }}</h3>
                                            <p class="product-description">{{ $product->description }}</p>
                                            <button class="product-button">
                                                <i class="fas fa-arrow-right"></i>
                                            </button>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @elseif($k == 1)
                            <div class="col-md-8">
                                <a class="product-item" href="{{ route('single.product.view', $product->slug) }}" data-product-id="{{ $product->product_id }}">
                                    <div class="product-small first-row-small-product">
                                        <img src="{{ asset('storage/' . $product->product_image) }}" alt="Dress Style"
                                            class="product-image">
                                        <div class="wishlist">
                                            <span class="like-icon {{ $isInWishlist ? 'liked' : 'add-to-wishlist' }}"
                                                title="wishlist" onclick="addTowishListClass(this)"></span>
                                            {{-- <i class="far fa-heart"></i> --}}
                                        </div>
                                        <div class="product-info">
                                            <h3 class="product-title">{{ $product->product_name }}</h3>
                                            <p class="product-description">{{ $product->description }}</p>
                                            <button class="product-button">
                                                <i class="fas fa-arrow-right"></i>
                                            </button>
                                        </div>
                                    </div>
                                </a>
                            @elseif($k == 2)
                                <div class="row mt-4">
                                    <div class="col-md-6 new_arrival">
                                        <a class="product-item" href="{{ route('single.product.view', $product->slug) }}" data-product-id="{{ $product->product_id }}">
                                            <div class="product-small">
                                                <img src="{{ asset('storage/' . $product->product_image) }}"
                                                    alt="Dress Style" class="product-image">
                                                <div class="wishlist">
                                                    <span
                                                        class="like-icon {{ $isInWishlist ? 'liked' : 'add-to-wishlist' }}"
                                                        title="wishlist" onclick="addTowishListClass(this)"></span>
                                                    {{-- <i class="far fa-heart"></i> --}}
                                                </div>
                                                <div class="product-info">
                                                    <h3 class="product-title">{{ $product->product_name }}</h3>
                                                    <p class="product-description">{{ $product->description }}</p>
                                                    <button class="product-button">
                                                        <i class="fas fa-arrow-right"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @elseif($k == 3)
                                    <div class="col-md-6">
                                        <a class="product-item" href="{{ route('single.product.view', $product->slug) }}" data-product-id="{{ $product->product_id }}">
                                            <div class="product-small">
                                                <img src="{{ asset('storage/' . $product->product_image) }}"
                                                    alt="Dress Style" class="product-image">
                                                <div class="wishlist">
                                                    <span
                                                        class="like-icon {{ $isInWishlist ? 'liked' : 'add-to-wishlist' }}"
                                                        title="wishlist" onclick="addTowishListClass(this)"></span>
                                                    {{-- <i class="far fa-heart"></i> --}}
                                                </div>
                                                <div class="product-info">
                                                    <h3 class="product-title">{{ $product->product_name }}</h3>
                                                    <p class="product-description">{{ $product->description }}</p>
                                                    <button class="product-button">
                                                        <i class="fas fa-arrow-right"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    <!-- Discount Banner -->
    <section class="discount">
        <a href="{{ route('shop.page.index') }}">
            {{-- <div class="container"> --}}
            <div class="discount-banner">
                <img src="{{ asset('assets/frontend/images/Discount banner.png') }}" alt="Discount Model 1"
                    class="discount-image">
            </div>
        </a>
        {{-- </div> --}}
    </section>

    <!-- Best Seller Section -->
    <section class="best-seller">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">BEST SELLER</h2>
                <a href="{{ route('bestSellerProducts') }}" class="see-all">See All</a>
            </div>
            <div class="product-card-grid row">
                @foreach ($best_seller_products as $product)
                    @php
                        $isInWishlist = $wishlist->contains('product_id', $product->product_id);
                    @endphp
                    <div class="col-md-3 product-item new_arrival" data-product-id="{{ $product->product_id }}">
                        <a href="{{ route('single.product.view', $product->slug) }}">
                            <div class="product-card">
                                <img src="{{ asset('storage/' . $product->product_image) }}" alt="Summer Collection"
                                    class="product-card-image">
                                <div class="wishlist">
                                    <span class="like-icon {{ $isInWishlist ? 'liked' : 'add-to-wishlist' }}"
                                        title="wishlist" onclick="addTowishListClass(this)"></span>
                                    {{-- <i class="far fa-heart"></i> --}}
                                </div>
                                <div class="product-card-info">
                                    <h3 class="product-card-title">{{ $product->product_name }}</h3>
                                    <p class="product-card-subtitle">{{ $product->description }}</p>
                                    <div class="product-card-price">
                                        <span class="current-price">₹{{ number_format($product->base_price, 0) }}</span>
                                        <span class="original-price">₹{{ number_format($product->base_mrp, 0) }}</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    <div class="INFLUENCER_sec">
        <div class="container">
            <div class="rowv">
                <div class="section-header">
                    <h2 class="section-title">INFLUENCER CLOSET</h2>
                </div>

                <div class="slider-container">
                    <div class="slider-arrow prev-arrow">
                        <i class="arrow-icon arrow_icon_two"></i>

                    </div>

                    <div class="wht-hide-scrollbar" id="videoSlider">
                        <!-- Video items will be dynamically inserted here -->
                    </div>

                    <div class="slider-arrow next-arrow">
                        <i class="arrow-icon arrow_icon_two"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="video-modal">
            <span class="close-modal video_slider_close_button">&times;</span>
            <div class="modal-content">
                <!-- Swiper for 3D coverflow effect -->
                <div class="swiper swiper-coverflow">
                    <div class="swiper-wrapper">
                        <!-- Slides will be dynamically added here -->
                    </div>

                    <!-- Add navigation arrows -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>

                <!-- Action buttons -->
                <div class="modal-actions">

                    <div class="action-button mute-button">
                        <img src="https://ela.yugasa.org/images/banner/music.png" alt="" class="mute_image">
                    </div>
                </div>

                <!-- Product info -->
                <!-- <div class="modal-product-info"> -->
                <!-- <div class="modal-product-title"></div> -->
                <!-- <div class="modal-product-price"></div> -->
                <!-- <button class="add-to-cart-button">ADD TO CART</button> -->
                <!-- </div> -->
            </div>
        </div>

    </div>
    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Video data from the actual website
                const videoData = @json($videos);

                // DOM elements
                const slider = document.getElementById('videoSlider');
                const prevArrow = document.querySelector('.prev-arrow');
                const nextArrow = document.querySelector('.next-arrow');
                const videoModal = document.querySelector('.video-modal');
                const closeModal = document.querySelector('.close-modal');
                const modalProductTitle = document.querySelector('.modal-product-title');
                const modalProductPrice = document.querySelector('.modal-product-price');
                const swiperWrapper = document.querySelector('.swiper-wrapper');

                let swiper; // Will hold the Swiper instance

                // Get reference to the mute button
                const muteButton = document.querySelector('.mute-button');
                const muteImage = document.querySelector('.mute_image');

                // Set up a flag to track muted state
                let isMuted = false;

                // Add click event listener to the mute button
                muteButton.addEventListener('click', () => {
                    // Get all videos
                    const videos = document.querySelectorAll('.modal-video');

                    // Toggle mute state
                    isMuted = !isMuted;

                    // Apply to all videos
                    videos.forEach(video => {
                        video.muted = isMuted;
                    });

                    // Update the mute button image
                    if (isMuted) {
                        muteImage.src = "{{ url('/images/banner/music.png') }}";
                    } else {
                        muteImage.src = "{{ url('/images/banner/audio.png') }}";
                    }
                });

                // Populate slider with video items
                function populateSlider() {
                    // Clear existing items first
                    slider.innerHTML = '';

                    videoData.forEach((video, index) => {
                        const videoItem = document.createElement('div');
                        videoItem.classList.add('whatmore-event-tile-horizontal-swipe-animation-next');

                        const innerItem = document.createElement('div');
                        innerItem.classList.add('whatmore-event-tile-scale-in-animation');

                        innerItem.innerHTML = `
                <div class="video-container">
                    <div class="video-inner">
                        <video class="whatmore-video-player-muted" width="100%" height="100%" 
                            preload="metadata" loop playsinline muted autoplay
                            poster="storage/${video.video}"
                            style="background-color: white; object-fit: cover;">
                            <source src="storage/${video.video}" type="video/mp4">
                        </video>
                    </div>
                    <div class="play-button"></div>
                </div>
            `;

                        // Get video element reference
                        const videoElement = innerItem.querySelector('video');

                        // Make sure video is muted and try to autoplay immediately
                        // videoElement.muted = true;

                        // Try to autoplay as soon as possible
                        videoElement.addEventListener('loadedmetadata', function() {
                            videoElement.play().catch(error => {
                                console.error('Initial autoplay failed:', error);
                            });
                        });

                        // Keep the hover events for reliability
                        innerItem.addEventListener('mouseenter', function() {
                            if (videoElement.paused) {
                                videoElement.play().catch(e => console.error('Play on hover failed:',
                                    e));
                            }
                        });

                        innerItem.addEventListener('click', function() {
                            openVideoModal(index);
                        });

                        videoItem.appendChild(innerItem);
                        slider.appendChild(videoItem);
                    });
                }

                // Populate Swiper slides
                function populateSwiper() {
                    // Clear existing slides
                    swiperWrapper.innerHTML = '';

                    // Add slides for each video
                    videoData.forEach((video) => {
                        const slide = document.createElement('div');
                        slide.classList.add('swiper-slide');

                        slide.innerHTML = `
                <video class="modal-video" preload="auto" loop playsinline
                    poster="storage/${video.video}">
                    
                    <source src="storage/${video.video}" type="video/mp4">
                </video>
            `;

                        swiperWrapper.appendChild(slide);
                    });
                }

                // Initialize Swiper
                function initSwiper() {
                    if (swiper) {
                        // swiper.destroy(true, true);
                    }

                    swiper = new Swiper('.swiper-coverflow', {
                        effect: 'coverflow',
                        grabCursor: true,
                        centeredSlides: true,
                        slidesPerView: 'auto',
                        coverflowEffect: {
                            rotate: 30,
                            stretch: 0,
                            depth: 200,
                            modifier: 1,
                            slideShadows: true,
                        },
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                        on: {
                            slideChange: function() {
                                // Pause all videos
                                const videos = document.querySelectorAll('.modal-video');
                                videos.forEach(video => {
                                    video.pause();
                                });

                                // Play the active video
                                setTimeout(() => {
                                    const activeVideo = document.querySelector(
                                        '.swiper-slide-active .modal-video');
                                    if (activeVideo) {
                                        activeVideo.play();
                                    }
                                }, 100);
                            },
                        },
                    });
                }

                // Open video modal
                function openVideoModal(index) {
                    populateSwiper();

                    // Delay Swiper initialization slightly to ensure DOM is updated
                    setTimeout(() => {
                        initSwiper();

                        // Make modal visible
                        videoModal.style.display = 'flex';

                        // Now safely move to the correct slide
                        swiper.slideTo(index, 0);

                        // Play the video in the active slide
                        const activeVideo = document.querySelector('.swiper-slide-active .modal-video');
                        if (activeVideo) {
                            activeVideo.play();
                        }

                        muteImage.src = "{{ url('/images/banner/audio.png') }}";

                        document.body.style.overflow = 'hidden';
                    }, 100);
                }


                // Close video modal
                function closeVideoModal() {
                    // Pause all videos
                    const videos = document.querySelectorAll('.modal-video');
                    videos.forEach(video => {
                        video.pause();
                    });

                    videoModal.style.display = 'none';

                    // Re-enable scrolling
                    document.body.style.overflow = '';
                }

                // Scroll slider to the left
                function scrollLeft() {
                    slider.scrollBy({
                        left: -300,
                        behavior: 'smooth'
                    });
                }

                // Scroll slider to the right
                function scrollRight() {
                    slider.scrollBy({
                        left: 300,
                        behavior: 'smooth'
                    });
                }

                // Check if arrow elements exist
                if (prevArrow && nextArrow) {
                    // Event listeners for arrows
                    prevArrow.addEventListener('click', scrollLeft);
                    nextArrow.addEventListener('click', scrollRight);

                    // Make sure arrows are visible
                    prevArrow.style.display = 'block';
                    nextArrow.style.display = 'block';
                } else {
                    console.error('Navigation arrows not found in the DOM');
                }

                // Close modal when button is clicked
                if (closeModal) {
                    closeModal.addEventListener('click', closeVideoModal);
                } else {
                    console.error('Close modal button not found');
                }

                // Close modal when clicking outside the content
                videoModal.addEventListener('click', function(e) {
                    if (e.target === videoModal) {
                        closeVideoModal();
                    }
                });

                // Close modal with Escape key
                document.addEventListener('keydown', function(e) {
                    if (e.key === 'Escape' && videoModal.style.display === 'flex') {
                        closeVideoModal();
                    }
                });

                // Initialize slider
                populateSlider();

                // Log to confirm script is running
                console.log('Video slider initialized');
            });
        </script>
    @endpush
@endsection