@extends('layouts.app')

@section('content')
    @if(count($banners))
    {{-- Hero Section: Banner Slider + Promo Box --}}
    <div class="flex flex-col md:flex-row gap-3 max-w-7xl mx-auto px-4 mt-4">
        {{-- Left: Banner Slider --}}
        <div id="hero-slider" class="relative flex-[3] overflow-hidden h-[220px] md:h-[400px] rounded-lg">
            @foreach($banners as $index => $banner)
            <div class="hero-slide absolute inset-0 {{ $index === 0 ? 'opacity-100' : 'opacity-0' }}" data-index="{{ $index }}">
                <img src="{{ asset('uploads/' . $banner->image_path) }}"
                     class="w-full h-full object-cover brightness-[0.5]" alt="{{ $banner->title ?? 'Banner' }}">
                <div class="absolute inset-0 bg-gradient-to-t from-[#004225]/80 via-transparent to-transparent"></div>
            </div>
            @endforeach


            @if(count($banners) > 1)
            <div id="slider-dots" class="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5 z-20">
                @foreach($banners as $index => $banner)
                <button class="slider-dot w-2 h-2 md:w-2.5 md:h-2.5 rounded-full border border-white {{ $index === 0 ? 'bg-white' : 'bg-transparent' }}" data-index="{{ $index }}"></button>
                @endforeach
            </div>
            @endif
        </div>

        {{-- Right: Promo Box --}}
        @php
            $box = $promoBox ?? null;
            $bgStyle = $box && $box->image_path ? 'background-image: url(' . asset('uploads/' . $box->image_path) . '); background-size: cover; background-position: center;' : 'background: linear-gradient(135deg, #f97316, #ea580c);';
        @endphp
        <div class="hidden md:flex flex-1 h-[400px] rounded-lg p-6 flex-col items-center justify-center text-white text-center relative overflow-hidden" style="{{ $bgStyle }}">
            @if($box && $box->image_path)
                <div class="absolute inset-0 bg-black/30"></div>
            @endif
            <div class="relative z-10 flex flex-col items-center">
                <div class="w-14 h-14 bg-white/20 rounded-full flex items-center justify-center mb-4">
                    <i class="fa fa-truck text-2xl"></i>
                </div>
                <h3 class="text-lg font-black mb-2">{{ $box->title ?? 'ফ্রী ডেলিভারি' }}</h3>
                <p class="text-sm opacity-90 leading-relaxed">{!! nl2br(e($box->subtitle ?? "সারা দেশে ফ্রী শিপিং\nনূন্যতম অর্ডার ৫০০ টাকা")) !!}</p>
                <a href="{{ $box->button_url ?? route('shop') }}" class="mt-5 bg-white text-orange-600 px-6 py-2.5 rounded-xl font-black text-sm hover:bg-orange-50 transition-all active:scale-95">
                    {{ $box->button_text ?? 'এখনই অর্ডার করুন' }}
                </a>
            </div>
        </div>
    </div>

    <script>
    (function() {
        var slides = document.querySelectorAll('#hero-slider .hero-slide');
        var dots = document.querySelectorAll('#hero-slider .slider-dot');
        var total = slides.length;
        if (total < 2) return;

        var current = 0;
        var interval;
        var isPaused = false;

        function goTo(index) {
            slides.forEach(function(s, i) {
                s.classList.toggle('opacity-0', i !== index);
                s.classList.toggle('opacity-100', i === index);
            });
            dots.forEach(function(d, i) {
                d.classList.toggle('bg-white', i === index);
                d.classList.toggle('bg-transparent', i !== index);
            });
            current = index;
        }

        function next() {
            goTo((current + 1) % total);
        }

        function startAuto() {
            if (interval) clearInterval(interval);
            interval = setInterval(next, 4000);
        }

        function stopAuto() {
            if (interval) {
                clearInterval(interval);
                interval = null;
            }
        }

        var slider = document.getElementById('hero-slider');
        slider.addEventListener('mouseenter', function() { isPaused = true; stopAuto(); });
        slider.addEventListener('mouseleave', function() { isPaused = false; startAuto(); });

        dots.forEach(function(dot) {
            dot.addEventListener('click', function() {
                goTo(parseInt(this.dataset.index));
                stopAuto();
                setTimeout(startAuto, 8000);
            });
        });

        startAuto();
    })();
    </script>
    @endif

    <main class="max-w-7xl mx-auto px-4 mt-8" id="products">
        {{-- Category Icon Slider (Rokomari-style) --}}
        <div class="relative category-slider-wrapper bg-white border border-gray-200 rounded-xl shadow-sm p-4 md:p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="font-black text-lg md:text-2xl text-gray-900">বিষয় অনুসারে বাছাই</h3>
            </div>
            <div class="relative">
                <button type="button" id="cat-prev" class="absolute left-0 top-1/2 -translate-y-1/2 z-10 w-9 h-9 md:w-11 md:h-11 rounded-full bg-white shadow-lg border border-gray-200 flex items-center justify-center text-gray-600 hover:text-[#004225] hover:border-[#004225] transition-all -ml-4 hidden">
                    <i class="fa fa-chevron-left text-sm"></i>
                </button>
                <button type="button" id="cat-next" class="absolute right-0 top-1/2 -translate-y-1/2 z-10 w-9 h-9 md:w-11 md:h-11 rounded-full bg-white shadow-lg border border-gray-200 flex items-center justify-center text-gray-600 hover:text-[#004225] hover:border-[#004225] transition-all -mr-4 hidden">
                    <i class="fa fa-chevron-right text-sm"></i>
                </button>
                <div id="cat-slider" class="flex gap-5 overflow-x-auto pb-1 no-scrollbar scroll-smooth">
                    @foreach($categories as $category)
                        <a href="{{ route('category.products', $category->slug) }}" 
                           class="flex-shrink-0 w-[90px] md:w-[110px] group flex flex-col items-center">
                            <div class="aspect-square w-full flex items-center justify-center p-2">
                                @if($category->image)
                                <img src="{{ asset('uploads/' . $category->image) }}" 
                                     class="max-w-full max-h-full object-contain group-hover:scale-105 transition-transform" 
                                     alt="{{ $category->name }}">
                                @else
                                <div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-[#004225] to-green-700 text-white font-black text-2xl md:text-3xl rounded-md">
                                    {{ mb_substr($category->name, 0, 1) }}
                                </div>
                                @endif
                            </div>
                            <p class="text-[11px] md:text-xs font-bold text-gray-700 text-center mt-1 leading-tight group-hover:text-[#004225] transition-colors">{{ $category->name }}</p>
                        </a>
                    @endforeach
                </div>
            </div>
        </div>

        <script>
        (function() {
            var container = document.getElementById('cat-slider');
            var prevBtn = document.getElementById('cat-prev');
            var nextBtn = document.getElementById('cat-next');
            if (!container) return;

            function toggleButtons() {
                var atStart = container.scrollLeft <= 2;
                var atEnd = container.scrollLeft + container.clientWidth >= container.scrollWidth - 2;
                prevBtn.classList.toggle('hidden', atStart);
                nextBtn.classList.toggle('hidden', atEnd);
            }

            prevBtn.addEventListener('click', function() {
                container.scrollBy({ left: -300, behavior: 'smooth' });
            });
            nextBtn.addEventListener('click', function() {
                container.scrollBy({ left: 300, behavior: 'smooth' });
            });
            container.addEventListener('scroll', toggleButtons);
            toggleButtons();
        })();
        </script>

        {{-- Products Grid --}}
        <div class="flex items-center justify-between my-8">
            <h3 class="font-black text-lg md:text-3xl text-gray-900">আমাদের পণ্যসমূহ</h3>
            <a href="{{ route('shop') }}" class="text-orange-600 font-bold text-sm">সব দেখুন →</a>
        </div>

        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-5">
            @foreach($products as $product)
                @php
                    $_origPrice = $product->price;
                    $_salePrice = $product->sale_price ?? null;
                    $_hasDiscount = $_salePrice && $_salePrice < $_origPrice;
                    $_discountPct = $_hasDiscount ? round(($_origPrice - $_salePrice) / $_origPrice * 100) : 0;
                    $_inStock = !isset($product->stock_quantity) || $product->stock_quantity > 0;
                @endphp
                <div class="bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden group transform hover:scale-[1.02] flex flex-col">

                    {{-- Image --}}
                    <div class="relative aspect-square bg-gray-50 overflow-hidden">
                        <a href="{{ route('product.details', $product->slug) }}">
                            <img src="{{ asset('uploads/' . $product->image) }}"
                                 class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" alt="{{ $product->name }}">
                        </a>

                        {{-- Wishlist Button (UI only, no backend logic added) --}}
                        <button type="button" onclick="event.preventDefault(); this.querySelector('i').classList.toggle('fa-solid'); this.querySelector('i').classList.toggle('fa-regular'); this.classList.toggle('text-red-500');"
                                class="absolute top-3 right-3 p-2.5 rounded-full bg-white/90 hover:bg-white shadow-md backdrop-blur-sm transition-all hover:scale-110 text-gray-400">
                            <i class="fa-regular fa-heart text-sm"></i>
                        </button>

                        {{-- Sale Badge --}}
                        @if($_hasDiscount)
                            <div class="absolute top-3 left-3 bg-red-500 text-white px-2.5 py-1 rounded-full text-xs font-black shadow-lg">
                                -{{ $_discountPct }}%
                            </div>
                        @endif

                        {{-- Out of Stock Overlay --}}
                        @unless($_inStock)
                            <div class="absolute inset-0 bg-black/50 flex items-center justify-center">
                                <span class="bg-red-500 text-white px-4 py-2 rounded-full font-bold text-xs md:text-sm">Out of Stock</span>
                            </div>
                        @endunless
                    </div>

                    {{-- Content --}}
                    <div class="p-4 flex flex-col flex-1">
                        @if(!empty($product->category?->name))
                            <p class="text-[10px] uppercase tracking-wider font-bold text-gray-400 mb-1.5">{{ $product->category->name }}</p>
                        @endif

                        <a href="{{ route('product.details', $product->slug) }}" class="hover:text-orange-500 transition-colors">
                            <h4 class="font-bold text-sm md:text-base text-gray-800 line-clamp-2 leading-snug mb-2">{{ $product->name }}</h4>
                        </a>

                        {{-- Rating --}}
                        @if(!empty($product->average_rating))
                            <div class="flex items-center gap-1.5 mb-2">
                                <div class="flex items-center gap-0.5">
                                    @for($i = 1; $i <= 5; $i++)
                                        <i class="fa-solid fa-star text-[10px] {{ $i <= round($product->average_rating) ? 'text-yellow-400' : 'text-gray-200' }}"></i>
                                    @endfor
                                </div>
                                <span class="text-[10px] text-gray-400 font-medium">({{ $product->reviews_count ?? 0 }})</span>
                            </div>
                        @endif

                        {{-- Price --}}
                        <div class="flex items-center gap-2 flex-wrap mb-3">
                            @if($_hasDiscount)
                                <span class="text-red-500 font-black text-base md:text-lg">৳{{ number_format($_salePrice) }}</span>
                                <span class="text-gray-400 line-through text-xs">৳{{ number_format($_origPrice) }}</span>
                            @else
                                <span class="text-gray-900 font-black text-base md:text-lg">৳{{ number_format($_origPrice) }}</span>
                            @endif
                        </div>

                        {{-- Add to Cart --}}
                        <button onclick="addToCart({{ $product->id }}, 1)"
                                {{ $_inStock ? '' : 'disabled' }}
                                class="mt-auto w-full py-2.5 px-4 rounded-lg font-bold text-xs md:text-sm transition-all duration-200 flex items-center justify-center gap-2
                                {{ $_inStock ? 'bg-[#1a73e8] hover:bg-[#1558b8] text-white active:scale-95' : 'bg-gray-100 text-gray-400 cursor-not-allowed' }}">
                            <i class="fa-solid fa-cart-shopping text-xs"></i>
                            <span>{{ $_inStock ? 'Add to Cart' : 'Out of Stock' }}</span>
                        </button>
                    </div>
                </div>
            @endforeach
        </div>
    </main>

    <style>
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
    </style>
@endsection