@extends('layouts.app')

@section('content')
<main class="max-w-7xl mx-auto px-4 py-6 md:py-10">
    <div class="flex flex-col md:flex-row gap-8">

        {{-- Sidebar Categories --}}
        <div class="md:w-1/4 space-y-4">
            {{-- Categories --}}
            <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 sticky top-24" style="position:sticky;top:1.5rem;">
                <h3 class="font-bold text-lg mb-4 text-gray-800 border-b pb-2">ক্যাটাগরি</h3>
                <ul class="space-y-3">
                    <li>
                        <a href="{{ route('shop') }}" class="text-orange-600 font-bold block">সব পণ্য</a>
                    </li>
                    @foreach($categories as $category)
                        <li>
                            <a href="{{ route('category.products', $category->slug) }}" class="text-gray-600 hover:text-orange-500 transition-colors block">
                                {{ $category->name }}
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>

            {{-- Price Slider --}}
            <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
                <h3 class="font-bold text-lg mb-4 text-gray-800 border-b pb-2">দাম অনুসারে</h3>
                <div class="space-y-4">
                    {{-- Histogram --}}
                    <div class="flex h-12 w-full items-end gap-px" id="price-histogram">
                        @foreach($histogram as $count)
                            <div class="flex-1 flex justify-center">
                                <span class="w-full bg-orange-400/20" style="height: {{ $maxCount > 0 ? ($count / $maxCount) * 100 : 0 }}%"></span>
                            </div>
                        @endforeach
                    </div>

                    {{-- Dual Range Slider --}}
                    <div class="relative h-8 select-none" id="slider-wrapper"
                         data-min="{{ $minPrice }}" data-max="{{ $maxPrice }}">
                        {{-- Track --}}
                        <div class="absolute left-0 right-0 top-3 h-2 rounded-full bg-gray-200 pointer-events-none"></div>
                        {{-- Active range --}}
                        <div class="absolute top-3 h-2 rounded-full bg-orange-500 pointer-events-none" id="slider-range"></div>
                        {{-- Range inputs --}}
                        <style>
                            .sr-thumb {
                                position: absolute;
                                top: 0;
                                width: 100%;
                                height: 32px;
                                -webkit-appearance: none;
                                appearance: none;
                                background: transparent;
                                margin: 0;
                                padding: 0;
                                pointer-events: none;
                                cursor: pointer;
                            }
                            .sr-thumb::-webkit-slider-runnable-track {
                                height: 8px;
                                -webkit-appearance: none;
                                background: transparent;
                            }
                            .sr-thumb::-moz-range-track {
                                height: 8px;
                                background: transparent;
                                border: none;
                            }
                            .sr-thumb::-webkit-slider-thumb {
                                -webkit-appearance: none;
                                height: 20px;
                                width: 20px;
                                border-radius: 9999px;
                                border: 2px solid #f97316;
                                background: #fff;
                                cursor: pointer;
                                pointer-events: all;
                                margin-top: -6px;
                            }
                            .sr-thumb::-moz-range-thumb {
                                height: 20px;
                                width: 20px;
                                border-radius: 9999px;
                                border: 2px solid #f97316;
                                background: #fff;
                                cursor: pointer;
                                pointer-events: all;
                            }
                        </style>
                        <input type="range" id="price-min" class="sr-thumb" style="z-index:4"
                            min="{{ $minPrice }}" max="{{ $maxPrice }}" step="1"
                            value="{{ request('min_price', $minPrice) }}">
                        <input type="range" id="price-max" class="sr-thumb" style="z-index:3"
                            min="{{ $minPrice }}" max="{{ $maxPrice }}" step="1"
                            value="{{ request('max_price', $maxPrice) }}">
                    </div>

                    {{-- Input fields --}}
                    <div class="flex items-center justify-between gap-4">
                        <div class="space-y-1 flex-1">
                            <label class="text-xs font-medium text-gray-500">ন্যূনতম</label>
                            <div class="relative">
                                <input id="input-min" type="text" inputmode="decimal"
                                    class="w-full ps-5 pe-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:border-orange-500 focus:ring-2 focus:ring-orange-500/20 outline-none transition-shadow"
                                    value="{{ request('min_price', $minPrice) }}">
                                <span class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-1.5 text-xs text-gray-400">৳</span>
                            </div>
                        </div>
                        <span class="text-gray-400 mt-5">—</span>
                        <div class="space-y-1 flex-1">
                            <label class="text-xs font-medium text-gray-500">সর্বোচ্চ</label>
                            <div class="relative">
                                <input id="input-max" type="text" inputmode="decimal"
                                    class="w-full ps-5 pe-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:border-orange-500 focus:ring-2 focus:ring-orange-500/20 outline-none transition-shadow"
                                    value="{{ request('max_price', $maxPrice) }}">
                                <span class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-1.5 text-xs text-gray-400">৳</span>
                            </div>
                        </div>
                    </div>

                    {{-- Action buttons --}}
                    <div class="flex gap-2">
                        <button id="apply-price-filter"
                            class="flex-1 bg-orange-500 text-white py-2 rounded-lg text-sm font-medium hover:bg-orange-600 transition-colors">
                            ফিল্টার
                        </button>
                        <a href="{{ route('shop') }}"
                            class="flex-1 border border-gray-300 bg-white py-2 rounded-lg text-sm font-medium text-center text-gray-700 hover:bg-gray-50 transition-colors">
                            রিসেট
                        </a>
                    </div>

                    <p class="text-xs text-gray-400 text-center">
                        @php
                            $filteredCount = $products->total();
                        @endphp
                        <span id="filter-count">{{ $filteredCount }}</span>টি পণ্য পাওয়া গেছে
                    </p>
                </div>
            </div>
        </div>

        {{-- Product Grid --}}
        <div class="md:w-3/4">
            <div class="flex flex-wrap items-center justify-between gap-3 mb-6">
                <h2 class="text-xl md:text-2xl font-black text-gray-800 italic">আমাদের কালেকশন</h2>
                <div class="flex items-center gap-3">
                    {{-- Sort By Dropdown --}}
                    <form method="GET" action="{{ route('shop') }}" id="sort-form" class="flex items-center gap-2">
                        @foreach(request()->except('sort', 'page') as $key => $value)
                            <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                        @endforeach
                        <label for="sort-select" class="text-sm font-medium text-gray-500 whitespace-nowrap">Sort by:</label>
                        <div class="relative">
                            <select id="sort-select" name="sort" onchange="document.getElementById('sort-form').submit()"
                                class="appearance-none w-full rounded-lg border border-gray-300 bg-white py-1.5 pe-8 ps-3 text-sm text-gray-700 shadow-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-500/20 outline-none transition-shadow cursor-pointer">
                                <option value="latest" {{ request('sort') == 'latest' || !request('sort') ? 'selected' : '' }}>Latest</option>
                                <option value="price_low" {{ request('sort') == 'price_low' ? 'selected' : '' }}>Price: Low to High</option>
                                <option value="price_high" {{ request('sort') == 'price_high' ? 'selected' : '' }}>Price: High to Low</option>
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 end-0 flex items-center pe-2 text-gray-400">
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="m4 6 4 4 4-4"/>
                                </svg>
                            </div>
                        </div>
                    </form>
                    <p class="text-sm text-gray-500 whitespace-nowrap">মোট {{ $products->total() }}টি পণ্য</p>
                </div>
            </div>

            <div class="grid grid-cols-2 lg:grid-cols-3 gap-4 md:gap-5">
                @forelse($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 --}}
                            <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>
                @empty
                    <div class="col-span-full py-20 text-center text-gray-400">
                        <i class="fa fa-box-open text-5xl mb-4"></i>
                        <p>দুঃখিত, কোনো পণ্য পাওয়া যায়নি!</p>
                    </div>
                @endforelse
            </div>

            <div class="mt-12">
                {{ $products->links() }}
            </div>
        </div>
    </div>
</main>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var sliderMin = document.getElementById('price-min');
    var sliderMax = document.getElementById('price-max');
    var inputMin = document.getElementById('input-min');
    var inputMax = document.getElementById('input-max');
    var rangeTrack = document.getElementById('slider-range');
    var histogramBars = document.querySelectorAll('#price-histogram > div');
    var applyBtn = document.getElementById('apply-price-filter');
    var wrapper = sliderMin.parentElement;
    var minVal = parseFloat(wrapper.dataset.min) || 0;
    var maxVal = parseFloat(wrapper.dataset.max) || 1000;
    var step = Math.round((maxVal - minVal) / 200) || 1;

    function clamp(v, low, high) { return Math.min(Math.max(v, low), high); }

    function updateVisuals() {
        var vmin = parseFloat(sliderMin.value);
        var vmax = parseFloat(sliderMax.value);
        var range = maxVal - minVal || 1;
        var pctMin = ((vmin - minVal) / range) * 100;
        var pctMax = ((vmax - minVal) / range) * 100;
        rangeTrack.style.left = pctMin + '%';
        rangeTrack.style.width = (pctMax - pctMin) + '%';
        inputMin.value = Math.round(vmin);
        inputMax.value = Math.round(vmax);

        histogramBars.forEach(function (bar, i) {
            var span = bar.querySelector('span');
            if (span) {
                var barPct = (i / histogramBars.length) * 100;
                var barPctEnd = ((i + 1) / histogramBars.length) * 100;
                var inRange = barPctEnd >= pctMin && barPct <= pctMax;
                span.classList.toggle('bg-orange-400/40', inRange);
                span.classList.toggle('bg-orange-400/20', !inRange);
            }
        });
    }

    // Clamp ranges
    sliderMin.addEventListener('input', function () {
        if (parseFloat(sliderMin.value) > parseFloat(sliderMax.value)) {
            sliderMin.value = sliderMax.value;
        }
        updateVisuals();
    });

    sliderMax.addEventListener('input', function () {
        if (parseFloat(sliderMax.value) < parseFloat(sliderMin.value)) {
            sliderMax.value = sliderMin.value;
        }
        updateVisuals();
    });

    // Z-index swap on interaction so the dragged thumb is on top
    sliderMin.addEventListener('mousedown', function () {
        sliderMin.style.zIndex = '4';
        sliderMax.style.zIndex = '3';
    });
    sliderMax.addEventListener('mousedown', function () {
        sliderMax.style.zIndex = '4';
        sliderMin.style.zIndex = '3';
    });

    // Wheel scroll on either slider
    function onWheel(e, which) {
        e.preventDefault();
        var delta = e.deltaY > 0 ? step : -step;
        var vmin = parseFloat(sliderMin.value);
        var vmax = parseFloat(sliderMax.value);
        if (which === 'min') {
            vmin = clamp(vmin + delta, minVal, vmax);
            sliderMin.value = vmin;
        } else {
            vmax = clamp(vmax + delta, vmin, maxVal);
            sliderMax.value = vmax;
        }
        updateVisuals();
    }

    sliderMin.addEventListener('wheel', function (e) { onWheel(e, 'min'); }, { passive: false });
    sliderMax.addEventListener('wheel', function (e) { onWheel(e, 'max'); }, { passive: false });

    // Text inputs → sliders
    function syncFromInputs() {
        var vmin = parseFloat(inputMin.value);
        var vmax = parseFloat(inputMax.value);
        if (isNaN(vmin) || vmin < minVal) vmin = minVal;
        if (isNaN(vmax) || vmax > maxVal) vmax = maxVal;
        if (vmin > vmax) vmin = vmax;
        sliderMin.value = vmin;
        sliderMax.value = vmax;
        updateVisuals();
    }

    inputMin.addEventListener('change', syncFromInputs);
    inputMax.addEventListener('change', syncFromInputs);
    inputMin.addEventListener('input', syncFromInputs);
    inputMax.addEventListener('input', syncFromInputs);

    applyBtn.addEventListener('click', function () {
        var url = new URL(window.location.href);
        url.searchParams.set('min_price', Math.round(parseFloat(sliderMin.value)));
        url.searchParams.set('max_price', Math.round(parseFloat(sliderMax.value)));
        url.searchParams.delete('page');
        window.location.href = url.toString();
    });

    inputMin.addEventListener('keydown', function (e) { if (e.key === 'Enter') applyBtn.click(); });
    inputMax.addEventListener('keydown', function (e) { if (e.key === 'Enter') applyBtn.click(); });

    updateVisuals();
});
</script>
@endpush