@extends('layout.template')
@section('title','Cusella Home Furnishing | Curtains, Sofas, Wallpapers & Interior Solutions')

@section('content')
<style>
    .video-btn {
        position: absolute;
        bottom: 20px;
        left: 20px;

        padding: 8px 14px;
        border-radius: 6px;

        background: rgba(0, 0, 0, 0.5);
        /* 🔥 transparent black */
        color: #fff;
        border: none;

        backdrop-filter: blur(5px);
        /* glass effect */
        -webkit-backdrop-filter: blur(5px);

        cursor: pointer;
        font-size: 14px;
        transition: 0.3s ease;
    }

    /* Hover effect */
    .video-btn:hover {
        background: rgba(0, 0, 0, 0.7);
    }
</style>
<!-- ======================== slider area start ============================ -->
<div class="slider-area">
    <div class="slider-active swiper-container">
        <div class="swiper-wrapper">
            @foreach($banners as $banner)
            <div class="swiper-slide">
                <div class="intro-section slider-height-1 slider-content-center bg-img single-animation-wrap slider-bg-color-3" style="background-image: url('{{ $banner['image_url'] }}'); background-size: cover; background-position: center; background-repeat: no-repeat;">

                </div>
            </div>
            @endforeach

            <div class="home-slider-prev2 main-slider-nav2"><i class="fa fa-angle-left"></i></div>
            <div class="home-slider-next2 main-slider-nav2"><i class="fa fa-angle-right"></i></div>
        </div>
    </div>
</div>
<!-- ======================== slider area end ============================ -->

<!-- ======================== category area start ============================ -->
<div class="category-area bg-gray-4 pt-95 pb-100">
    <div class="container">
        <div class="section-title-2 st-border-center text-center mb-75" data-aos="fade-up">
            <h2>Products Category</h2>
        </div>
        <div class="category-slider-active-2 swiper-container">
            <div class="swiper-wrapper">
               
                @foreach($categories as $cat)
                
                <div class="swiper-slide category-slider">
                    <div class="single-category-wrap-2 text-center" data-aos="fade-up">
                        <div class="category-img-2">
                            <a href="{{ url($cat['slug']) }}">
                                <img class="category-normal-img" src="{{ $cat['icon_full'] }}" alt="">
                                <img class="category-hover-img" src="{{ $cat['icon_full'] }}" alt="icon">
                            </a>
                        </div>
                        <div class="category-content-2 category-content-2-black">
                            <h4><a href="{{ url($cat['slug']) }}">{{ $cat['name'] }}</a></h4>
                        </div>
                    </div>
                </div>
                @endforeach

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

<!-- ======================== category area end ============================ -->

<!-- ======================== flash sale start ============================ -->
<div class="product-area pb-60 mt-60">
    <div class="container">

        <!-- TITLE + TABS -->
        <div class="section-title-tab-wrap mb-75">
            <div class="section-title-2" data-aos="fade-up">
                <h2>Flash sale</h2>
            </div>

            <div class="tab-style-1 nav" data-aos="fade-up">

                <!-- ALL TAB -->
                <a class="active" data-bs-toggle="tab" href="#tag-all">All</a>

                <!-- DYNAMIC TAG TABS -->
                @foreach($tags as $tag)
                <a data-bs-toggle="tab" href="#tag-{{ $tag['id'] }}">
                    {{ $tag['name'] }}
                </a>
                @endforeach

            </div>
        </div>

        <!-- TAB CONTENT -->
        <div class="tab-content jump" data-aos="fade-up">

            <!-- ================= ALL PRODUCTS ================= -->
            <div id="tag-all" class="tab-pane active">
                <div class="row">

                    @foreach($flashProducts as $tagId => $productsData)
                    @foreach($productsData['data'] ?? [] as $product)

                    <div class="col-lg-3 col-md-4 col-sm-6 col-12">
                        <div class="product-wrap mb-35">

                            <div class="product-img img-zoom mb-25">
                                <a href="{{ route('product', Str::slug($product['name']).'-'.$product['product_id']) }}">
                                    <img src="{{ $product['image'] }}" alt="">
                                </a>
                                <div class="product-badge badge-top badge-right badge-pink">
                                    <span>{{ $product['offer_percent'] }}% </span>
                                </div>
                                <div class="product-action-wrap">
                                    <button class="product-action-btn-1">
                                        <i class="pe-7s-like"></i>
                                    </button>
                                </div>

                                <div class="product-action-2-wrap">
                                    <button class="product-action-btn-2">
                                        <i class="pe-7s-cart"></i> Add to cart
                                    </button>
                                </div>
                            </div>

                            <div class="product-content">
                                <h3>{{ $product['name'] }}</h3>

                                <div class="product-price">
                                    <span class="old-price">₹{{ $product['price'] }} </span> <span>₹{{ $product['offer_price'] }}</span>
                                </div>

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

                    @endforeach
                    @endforeach

                </div>
            </div>


            <!-- ================= TAG WISE ================= -->
            @foreach($tags as $tag)
            <div id="tag-{{ $tag['id'] }}" class="tab-pane">
                <div class="row">

                    @foreach($flashProducts[$tag['id']]['data'] ?? [] as $product)

                    <div class="col-lg-3 col-md-4 col-sm-6 col-12">
                        <div class="product-wrap mb-35">

                            <div class="product-img img-zoom mb-25">
                                <a href="{{ route('product', Str::slug($product['name']).'-'.$product['product_id']) }}">
                                    <img src="{{ $product['image'] }}" alt="">
                                </a>

                                <div class="product-action-wrap">
                                    <button class="product-action-btn-1">
                                        <i class="pe-7s-like"></i>
                                    </button>
                                </div>

                                <div class="product-action-2-wrap">
                                    <button class="product-action-btn-2">
                                        <i class="pe-7s-cart"></i> Add to cart
                                    </button>
                                </div>
                            </div>

                            <div class="product-content">
                                <h3>{{ $product['name'] }}</h3>

                                <div class="product-price">
                                    <span class="old-price">₹{{ $product['price'] }} </span> <span>₹{{ $product['offer_price'] }}</span>
                                </div>
                            </div>

                        </div>
                    </div>

                    @endforeach

                </div>
            </div>
            @endforeach

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


<!-- ========================  flash sale end ============================ -->

<!-- ======================== video  start ============================ -->
@if($video)
<div class="about-us-area pt-100 pb-100">
    <div class="container">
        <div class="row align-items-center flex-row-reverse">
            <div class="col-lg-6">
                <div class="about-content text-center">
                    <h2 data-aos="fade-up">{{$video['title']}}</h2>
                    <h1 data-aos="fade-up">{{$video['subtitle']}}</h1>
                    <p data-aos="fade-up">
                        Cusella Soft Furnishing LLP specializes in premium curtains, fabrics,
                        wallpapers, sofas, mattresses, and luxury accessories designed to elevate
                        modern living spaces.
                        <br><br>
                        With a commitment to quality, craftsmanship, and elegant aesthetics,
                        Cusella delivers tailored solutions that blend comfort with sophistication.
                        Our mission is simple — <strong>Tailored To Shine</strong>.
                    </p>

                    <div class="btn-style-3 btn-hover" data-aos="fade-up">
                        <a class="btn border-radius-none" href="product-details.html">{{$video['button_text']}}</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="about-img" data-aos="fade-up">
                    <div class="video-wrapper" style="position:relative;">

                        <video id="heroVideo" autoplay muted loop playsinline
                            style="width:100%; height:auto; border-radius:10px;">
                            <source src="{{$video['video']}}" type="video/mp4">
                        </video>

                        <!-- 🔊 Unmute Button -->
                        <button id="unmuteBtn" class="video-btn">
                            🔊 Unmute
                        </button>

                    </div>
                    <script>
                        const video = document.getElementById('heroVideo');
                        const btn = document.getElementById('unmuteBtn');

                        // 🔊 Toggle sound
                        btn.addEventListener('click', function() {
                            if (video.muted) {
                                video.muted = false;
                                video.volume = 1;
                                btn.innerText = '🔇 Mute';
                            } else {
                                video.muted = true;
                                btn.innerText = '🔊 Unmute';
                            }
                        });
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
@endif
<!-- ======================== video  end ============================ -->

<!-- ======================== explore luxry   start ============================ -->
<div class="blog-area pb-70">
    <div class="container">

        <!-- TITLE -->
        <div class="section-title-2 st-border-center text-center mb-75" data-aos="fade-up">
            <h2>{{ $explore['title'] ?? '' }}</h2>
        </div>

        <div class="row">

            <!-- SUBTITLE -->
            <p class="aos-init aos-animate text-center" data-aos="fade-up">
                {{ $explore['subtitle'] ?? '' }}
            </p>

            <!-- SUBCATEGORIES -->
            @if(!empty($explore['subcategories']))
            @foreach($explore['subcategories'] as $item)

            <div class="col-lg-4 col-md-6">
                <div class="blog-wrap mb-30" data-aos="fade-up">

                    <div class="blog-img-date-wrap mb-25">
                        <div class="blog-img">
                            <a href="{{ url($item['slug']) }}">
                                <img src="{{ $item['image'] ?? '' }}" alt="">
                            </a>
                        </div>
                    </div>

                    <div class="blog-content text-center">
                        <h3>
                            <a href="{{ url($item['slug']) }}">
                                {{ $item['name'] ?? '' }}
                            </a>
                        </h3>
                    </div>

                </div>
            </div>

            @endforeach
           
            @endif

        </div>
    </div>
</div>
<!-- ======================== explore luxury end ============================ -->

<!-- ======================== best seller start ============================ -->
<div class="product-area pb-95">
    <div class="container">
        <div class="section-title-2 st-border-center text-center mb-75" data-aos="fade-up">
            <h2>Best seller</h2>
        </div>
        <div class="tab-style-1 tab-style-1-modify tab-center nav" data-aos="fade-up">
            @foreach($bestCategories as $index => $cat)
            <a
                class="{{ $index == 0 ? 'active' : '' }}"
                href="#pro-{{ $cat['id'] }}"
                data-bs-toggle="tab">
                {{ $cat['name'] }}
            </a>
            @endforeach
        </div>


        <div class="tab-content jump">
            @foreach($bestCategories as $index => $cat)

            @php
            $products = $bestProducts[$cat['id']]['data'] ?? [];
            @endphp

            <div id="pro-{{ $cat['id'] }}" class="tab-pane {{ $index == 0 ? 'active show' : '' }}">
                <div class="product-slider-active-2 swiper-container">
                    <div class="swiper-wrapper">

                        @forelse($products as $product)
                        <div class="swiper-slide best-seller">
                            <div class="product-wrap" data-aos="fade-up">

                                <div class="product-img img-zoom mb-25">
                                    <a href="{{ route('product', Str::slug($product['name']).'-'.$product['product_id']) }}">
                                        <img src="{{ $product['image'] ?? 'assets/images/no-image.png' }}" alt="">
                                    </a>
                                    <div class="product-badge badge-top badge-right badge-pink">
                                        <span>{{ $product['offer_percent'] }}% </span>
                                    </div>
                                    <div class="product-action-wrap">
                                        <button class="product-action-btn-1">
                                            <i class="pe-7s-like"></i>
                                        </button>
                                        <button class="product-action-btn-1">
                                            <i class="pe-7s-look"></i>
                                        </button>
                                    </div>

                                    <div class="product-action-2-wrap">
                                        <button class="product-action-btn-2">
                                            <i class="pe-7s-cart"></i> Add to cart
                                        </button>
                                    </div>
                                </div>

                                <div class="product-content">
                                    <h3>{{ $product['name'] }}</h3>
                                    <div class="product-price">
                                        <span class="old-price">₹{{ $product['price'] }} </span> <span>₹{{ $product['offer_price'] }}</span>
                                    </div>
                                </div>

                            </div>
                        </div>
                        @empty
                        <p class="text-center">No products found</p>
                        @endforelse

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

            @endforeach
        </div>
    </div>
</div>
<!-- ======================== best seller  end ============================ -->

<!-- ======================== brands start ============================ -->
<div class="brand-logo-area pb-95" style="background: #f6e9cc; padding-top: 27px;">
    <div class="container">
        <div class="section-title-2 st-border-center text-center mb-75" data-aos="fade-up">
            <h2>Featured In</h2>
        </div>

        <div class="brand-logo-active swiper-container">
            <div class="swiper-wrapper">

                @foreach($brands as $brand)
                <div class="swiper-slide category-slider">
                    <div class="single-brand-logo" data-aos="fade-up">
                        <a href="javascrpt:void(0);">
                            <img src="{{ $brand['image_full'] ?? asset('assets/images/no-image.png') }}"
                                alt="{{ $brand['name'] }}">
                        </a>
                    </div>
                </div>
                @endforeach

            </div>
        </div>
    </div>
</div>
<!-- ========================  brands end ============================ -->
@endsection