@extends('website.layouts.app')

@section('body')

    @include('website.layouts.pages.home.slider')

    <!------------ Main Content Start ----------->
    <style>
        /* Categories Slider */
        .categories-swiper .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
            height: auto;
            background: transparent !important;
        }
        .categories-swiper  .swiper-wrapper{
            height: auto !important;
        }
        /* Category Card */
        .category-card {
            text-align: center;
            transition: transform .2s ease, box-shadow .2s ease;
            width: 100%;
            max-width: 200px;        /* slimmer card */
            padding: 4px;            /* reduce padding */
        }

        /* Circle Image */
        .category-img {
            width: 200px;            /* smaller circle */
            height: 160px;
            border-radius: 15%;
            object-fit: cover;
            border: 2px solid #007D47;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: transform .25s ease, box-shadow .25s ease;
            background: #fff;
            margin: 0 auto;
        }

        /* Hover effect */
        .category-card:hover .category-img {
            transform: scale(1.05);
            box-shadow: 0 5px 14px rgba(0,0,0,0.15);
        }

        /* Title */
        .category-title {
            font-size: 1.0rem;
            font-weight: 500;
            margin-top: 8px;        /* tighter spacing */
            line-height: 1.3;
            color: #333;
            text-align: center;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .category-title a {
            text-decoration: none;
            color: inherit;
        }
        .category-title a:hover {
            color: #DD0C06; /* theme color */
        }

        /* Navigation arrows */
        .categories-prev,
        .categories-next {
            color: #000;
            background: #fff;
            border-radius: 50%;
            width: 36px;  /* smaller arrow button */
            height: 36px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            top: 50%;
            transform: translateY(-50%);
        }
        .categories-prev::after,
        .categories-next::after {
            font-size: 16px;
        }

        /* Pagination dots */
        .categories-pagination .swiper-pagination-bullet {
            width: 8px;
            height: 8px;
            background: #333;
            opacity: .4;
        }
        .categories-pagination .swiper-pagination-bullet-active {
            opacity: 1;
        }

        /* Responsive sizing */
        @media (max-width: 768px) {
            .category-img {
                width: 150px;
                height: 150px;
            }
            .category-title {
                font-size: 0.85rem;
            }
        }
        @media (max-width: 576px) {
            .category-img {
                width: 120px;
                height: 120px;
            }
            .category-title {
                font-size: 0.8rem;
            }
        }


    </style>
    <main>

        <!-- Categories Slider -->
        <section class="categories-section" style="padding-bottom: 60px">
            <div class="container">
                <div class="section-title">
                    <h2>
                        <i class="fa fa-leaf"></i>
                        Product <span class="section-span-text text-secondary" style="color: #62B946 !important;">Categories</span>
                        <i class="fa fa-leaf"></i>
                    </h2>
                </div>

                <div class="swiper categories-swiper"> <!-- unique container -->
                    <div class="swiper-wrapper">
                        @foreach($categories as $category)
                            <div class="swiper-slide">
                                <div class="category-card text-center">
                                    <a href="{{ url('/shop?category=' . $category->id) }}">
                                        <img src="{{ asset($category->image) }}" alt="{{ $category->category_name }}" loading="lazy" class="category-img img-fluid" />
                                    </a>
                                    <h4 class="category-title mt-2">
                                        <a href="{{ url('/shop?category=' . $category->id) }}">{{ $category->category_name }}</a>
                                    </h4>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <!-- controls (unique classes) -->
                    <div class="categories-controls d-flex align-items-center justify-content-between mt-3">
                        <div class="categories-pagination swiper-pagination"></div>
                    </div>
                </div>
            </div>
        </section>

        <!------Quality Product Section Start ------>
        <section class="quality-product-section">
            <div class="container">
                <div class="section-title">
                    <h2>
                        <i class="fa fa-leaf"></i>
                        Quality <span class="section-span-text text-secondary" style="color: #62B946 !important;">Products</span>
                        <i class="fa fa-leaf"></i>
                    </h2>
                </div>
                <div class="row g-4">

                    @foreach($products->take(8) as $product)
                        <!-- Shoe Card 1 -->
                            <div class="col-12 col-sm-6 col-md-4 col-lg-3 filter-item"
                                 data-name="{{ strtolower($product->product_name . ' ' . $product->category->category_name . ' ' . $product->sizes) }}">
                                <div class="card product-card h-100">
                                    <img src="{{ $product->thumbnail }}" class="card-img-top product-img"
                                         alt="Men's Running Shoes" />
                                    <div class="card-body d-flex flex-column">
                                        <h5 class="product-name">
                                            <a href="{{ route('product-detail', $product->id) }}">
                                                {{ $product->product_name }}
                                            </a>
                                        </h5>
                                        <p class="text-muted">{{ $product->category->category_name }}</p>
                                        @php
                                            $firstVariant = $product->variants->first();
                                        @endphp

                                        <div class="product-price">
                                            @if($firstVariant)
                                                {{-- Variant-based price --}}
                                                @if($firstVariant->discount_price == 0 || $firstVariant->discount_price == $firstVariant->regular_price)
                                                    <span class="current-price">৳{{ number_format($firstVariant->regular_price) }}/-</span>
                                                    <span style="font-size: 14px; color: gainsboro">  ({{ $firstVariant->size }})</span>
                                                @else
                                                    <span class="current-price">৳{{ number_format($firstVariant->discount_price) }}/-</span>
                                                    <span class="original-price">৳{{ number_format($firstVariant->regular_price) }}/-</span>
                                                    <span class="discount-percent">{{ round((($firstVariant->price-$firstVariant->discount_price)*100/$firstVariant->regular_price)) }}% OFF</span>
                                                @endif
                                            @elseif($product->regular_price > 0)
                                                {{-- Old single-price product --}}
                                                @if($product->discount_price == 0 || $product->discount_price == $product->regular_price)
                                                    <span class="current-price">৳{{ number_format($product->regular_price) }}/-</span>
                                                @else
                                                    <span class="current-price">৳{{ number_format($product->discount_price) }}/-</span>
                                                    <span class="original-price">৳{{ number_format($product->regular_price) }}/-</span>
                                                    <span class="discount-percent">{{ round((($product->regular_price-$product->discount_price)*100/$product->regular_price)) }}% OFF</span>
                                                @endif
                                            @else
                                                <span class="current-price">৳0/-</span>
                                            @endif
                                        </div>

                                        <form action="{{ route('cart.add') }}" method="POST" class="add-to-cart-form">
                                            @csrf

                                            <input type="hidden" name="product_id" value="{{ $product->id }}">

                                            @if($product->variants && count($product->variants) > 0)
                                                <input type="hidden" name="variant_id" value="{{ $product->variants[0]->id }}">
                                            @endif

                                            <!-- Quantity Section (Initially Hidden) -->
                                            <div class="quantity-section d-none my-3 d-flex align-items-center">
                                                <input type="number" name="order_qty" min="1" value="1" class="form-control quantity-input w-50 me-2" />
                                                <button type="submit" class="btn btn-success confirm-add-btn">
                                                    Confirm
{{--                                                    <i class="fas fa-check"></i> Confirm--}}
                                                </button>
                                            </div>

                                            <!-- Trigger Button -->
                                            <button type="button" class="marco-btn btn-buy mt-auto add-to-cart-btn w-100">
                                                <i class="fas fa-shopping-cart me-2"></i> Add to Cart
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                    @endforeach

                    <div class="text-center mb-5">
                        <a href="{{ route('shop') }}">
                            <p class="marco-btn">View more...</p>
                        </a>
                    </div>

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

        <!---------- Delivery Partners logo Section Start ------------>
        <section id="featured-logo-section" style="padding-bottom: 60px">
            <div class="container">
                <div class="row align-items-center featured-section">
                    <div class="col-md-2 d-flex align-items-center">
                        <h2 class="featured-title">Our Delivery Partners</h2>
                    </div>
                    <div class="col-md-10">
                        <div class="featured-logo-wrapper overflow-hidden">
                            <div class="featured-logo-track d-flex" id="logoTrack">
                                @foreach($brands as $brand)
                                    <img src="{{ $brand->image }}" class="img-fluid logo-item" alt="" height="100" width="200" />
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <!------------- Main Content End --------------->
@endsection

<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.add-to-cart-form').forEach(form => {
            const addButton = form.querySelector('.add-to-cart-btn');
            const qtySection = form.querySelector('.quantity-section');

            addButton.addEventListener('click', function () {
                if (qtySection.classList.contains('d-none')) {
                    qtySection.classList.remove('d-none');
                    form.querySelector('input[name="order_qty"]').focus();
                    addButton.innerHTML = '<i class="fas fa-shopping-cart me-2"></i> Confirm Quantity';
                } else {
                    form.submit();
                }
            });

            form.addEventListener('submit', () => {
                addButton.disabled = true;
                addButton.innerHTML = 'Adding...';
            });
        });
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const searchInput = document.getElementById('searchInput');

        if (!searchInput) return;

        searchInput.addEventListener('input', function () {
            const query = this.value.toLowerCase().trim();
            const items = document.querySelectorAll('.filter-item');

            items.forEach(item => {
                const name = item.dataset.name;
                if (name.includes(query)) {
                    item.style.display = '';
                } else {
                    item.style.display = 'none';
                }
            });
        });
    });
</script>

{{--category slider script--}}
<script>
    (function(){
        function initCategoriesSwiper() {
            // eslint-disable-next-line no-undef
            const categoriesSwiper = new Swiper('.categories-swiper', {
                slidesPerView: 6,
                slidesPerGroup: 1,         // change to 6 if you want "page" behavior per click
                spaceBetween: 20,
                watchOverflow: true,       // hides nav if not enough slides
                loop: true,
                autoplay: {
                    delay: 3000,           // 3 seconds
                    disableOnInteraction: false
                },
                keyboard: { enabled: true },
                navigation: {
                    nextEl: '.categories-next',
                    prevEl: '.categories-prev',
                },
                pagination: {
                    el: '.categories-pagination',
                    clickable: true,
                    dynamicBullets: true
                },
                breakpoints: {
                    0:    { slidesPerView: 2 },
                    576:  { slidesPerView: 3 },
                    768:  { slidesPerView: 4 },
                    992:  { slidesPerView: 5 },
                    1200: { slidesPerView: 6 }
                }
            });

            // optional: expose instance for debugging
            window.categoriesSwiper = categoriesSwiper;
        }

        function ensureSwiperThenInit() {
            if (typeof Swiper === 'undefined') {
                // Load CSS
                if (!document.querySelector('link[href*="swiper-bundle.min.css"]')) {
                    const link = document.createElement('link');
                    link.rel = 'stylesheet';
                    link.href = 'https://unpkg.com/swiper@9/swiper-bundle.min.css';
                    document.head.appendChild(link);
                }
                // Load JS
                const script = document.createElement('script');
                script.src = 'https://unpkg.com/swiper@9/swiper-bundle.min.js';
                script.onload = initCategoriesSwiper;
                document.body.appendChild(script);
            } else {
                initCategoriesSwiper();
            }
        }

        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', ensureSwiperThenInit);
        } else {
            ensureSwiperThenInit();
        }
    })();
</script>