@extends('layouts.app')
@section('title', $store->name)
@section('content')

{{-- Store Header --}}
<div class="relative bg-gray-50 pb-4">
    {{-- Banner --}}
    <div class="relative h-48 sm:h-60 md:h-72 w-full overflow-hidden bg-gray-950">
        @if($store->banner)
            <img src="{{ Storage::url($store->banner) }}" class="w-full h-full object-cover">
        @else
            <div class="w-full h-full bg-gradient-to-r from-teal-600 to-teal-800"></div>
        @endif
    </div>

    {{-- Store Info Card (Solid White, No Blur, No Transparency) --}}
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="relative bg-white rounded-3xl border border-gray-100 p-6 sm:p-8 shadow-xl -mt-16 sm:-mt-20 z-10 flex flex-col md:flex-row items-start md:items-center gap-6">
            {{-- Logo --}}
            <div class="w-24 h-24 sm:w-28 sm:h-28 rounded-2xl overflow-hidden bg-gray-50 shrink-0 border border-gray-100">
                @if($store->logo)
                    <img src="{{ Storage::url($store->logo) }}" class="w-full h-full object-cover">
                @else
                    <div class="w-full h-full bg-teal-50 flex items-center justify-center">
                        <svg class="w-10 h-10 text-teal-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
                        </svg>
                    </div>
                @endif
            </div>

            {{-- Text details --}}
            <div class="flex-1 min-w-0 w-full">
                <h1 class="text-2xl sm:text-3xl font-extrabold text-gray-900 tracking-tight">{{ $store->name }}</h1>
                
                <div class="flex flex-wrap items-center gap-y-2 gap-x-4 mt-2 text-sm text-gray-600">
                    @if($store->city)
                        <span class="flex items-center gap-1.5 font-medium text-gray-800">
                            <svg class="w-4 h-4 text-teal-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                            </svg>
                            {{ $store->city }}
                        </span>
                    @endif
                    
                    <span class="w-1 h-1 bg-gray-300 rounded-full hidden sm:inline"></span>

                    <span class="flex items-center gap-1.5">
                        <svg class="w-4 h-4 text-amber-400 fill-current" viewBox="0 0 20 20">
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                        </svg>
                        <strong class="text-gray-900">{{ number_format($store->rating, 1) }}</strong> 
                        <span class="text-gray-500">({{ number_format($store->total_reviews) }} ulasan)</span>
                    </span>

                    <span class="w-1 h-1 bg-gray-300 rounded-full hidden sm:inline"></span>

                    <span class="flex items-center gap-1 text-gray-500">
                        <strong class="text-gray-900">{{ number_format($store->total_sales) }}</strong> produk terjual
                    </span>
                </div>

                @if($store->description)
                    <p class="text-sm text-gray-600 mt-3 max-w-3xl leading-relaxed">{{ $store->description }}</p>
                @endif
            </div>
        </div>
    </div>
</div>

<div
    x-data="{ filterOpen: false }"
    class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8"
>
    {{-- Header / filter button for mobile --}}
    <div class="flex items-center justify-between mb-4 sm:mb-6">
        <h2 class="text-lg font-bold text-gray-900">Produk Toko</h2>
        <button
            @click="filterOpen = true"
            class="lg:hidden flex items-center gap-2 px-4 py-2 bg-white border border-gray-200 rounded-xl text-sm font-medium text-gray-700 shadow-sm hover:border-teal-300 hover:text-teal-600 transition"
        >
            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-.293.707L13 13.414V19a1 1 0 01-.553.894l-4 2A1 1 0 017 21v-7.586L3.293 6.707A1 1 0 013 6V4z"/></svg>
            Filter
            @if(request()->hasAny(['type', 'min_price', 'max_price', 'category']))
                <span class="w-2 h-2 bg-teal-500 rounded-full"></span>
            @endif
        </button>
    </div>

    {{-- Kategori horizontal scroll — hanya mobile --}}
    <div class="lg:hidden mb-4 -mx-4 px-4">
        <div class="flex gap-2 overflow-x-auto pb-2 cat-scroll-container" style="scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent;">
            <style>
                .cat-scroll-container::-webkit-scrollbar {
                    height: 4px;
                }
                .cat-scroll-container::-webkit-scrollbar-track {
                    background: transparent;
                }
                .cat-scroll-container::-webkit-scrollbar-thumb {
                    background-color: #cbd5e1;
                    border-radius: 10px;
                }
            </style>
            <div class="flex gap-2">
                <a href="{{ route('stores.show', $store) }}{{ request('q') ? '?q='.request('q') : '' }}"
                   class="shrink-0 px-3 py-1.5 rounded-full text-sm font-medium border transition whitespace-nowrap
                       {{ !request('category') ? 'bg-teal-600 text-white border-teal-600' : 'bg-white text-gray-600 border-gray-200 hover:border-teal-300' }}">
                    Semua
                </a>
                @foreach($categories as $cat)
                    <a href="{{ route('stores.show', array_merge(['store' => $store->slug], request()->except(['page']), ['category' => $cat->slug])) }}"
                       class="shrink-0 px-3 py-1.5 rounded-full text-sm font-medium border transition whitespace-nowrap
                           {{ request('category') === $cat->slug ? 'bg-teal-600 text-white border-teal-600' : 'bg-white text-gray-600 border-gray-200 hover:border-teal-300' }}">
                        {{ $cat->name }}
                    </a>
                @endforeach
            </div>
        </div>
    </div>

    <div class="flex gap-6">
        {{-- SIDEBAR — desktop only --}}
        <aside class="hidden lg:block w-60 shrink-0">
            <div class="bg-white rounded-2xl border border-gray-100 p-5 sticky top-24">
                <h3 class="font-semibold text-gray-900 mb-4">Filter</h3>
                <form method="GET" action="{{ route('stores.show', $store) }}" id="filterForm">
                    @if(request('q'))<input type="hidden" name="q" value="{{ request('q') }}">@endif
                    <input type="hidden" name="sort" value="{{ request('sort', 'terbaru') }}">

                    <div class="mb-5">
                        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Tipe</p>
                        <div class="space-y-1.5">
                            @foreach(['' => 'Semua', 'digital' => 'Digital', 'physical' => 'Fisik'] as $val => $label)
                                <label class="flex items-center gap-2 cursor-pointer">
                                    <input type="radio" name="type" value="{{ $val }}" {{ request('type', '') === $val ? 'checked' : '' }} onchange="document.getElementById('filterForm').submit()" class="text-teal-600">
                                    <span class="text-sm text-gray-700">{{ $label }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>

                    <div class="mb-5">
                        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Kategori</p>
                        <div class="space-y-1 max-h-52 overflow-y-auto pr-1">
                            <a href="{{ route('stores.show', array_merge(['store' => $store->slug], request()->except(['category', 'page']))) }}" class="block text-sm py-0.5 transition {{ !request('category') ? 'text-teal-600 font-semibold' : 'text-gray-600 hover:text-teal-600' }}">
                                Semua Kategori
                            </a>
                            @foreach($categories as $cat)
                                <a href="{{ route('stores.show', array_merge(['store' => $store->slug], request()->except(['page']), ['category' => $cat->slug])) }}" class="block text-sm py-0.5 transition {{ request('category') === $cat->slug ? 'text-teal-600 font-semibold' : 'text-gray-600 hover:text-teal-600' }}">
                                    {{ $cat->name }}
                                </a>
                                @foreach($cat->children as $child)
                                    <a href="{{ route('stores.show', array_merge(['store' => $store->slug], request()->except(['page']), ['category' => $child->slug])) }}" class="block text-sm py-0.5 pl-3 transition {{ request('category') === $child->slug ? 'text-teal-600 font-semibold' : 'text-gray-500 hover:text-teal-600' }}">
                                        {{ $child->name }}
                                    </a>
                                @endforeach
                            @endforeach
                        </div>
                    </div>

                    <div class="mb-5">
                        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Harga</p>
                        <div class="space-y-2">
                            <input type="number" name="min_price" value="{{ request('min_price') }}" placeholder="Min (Rp)" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500">
                            <input type="number" name="max_price" value="{{ request('max_price') }}" placeholder="Max (Rp)" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500">
                            <button type="submit" class="w-full py-2 text-sm font-medium bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition">Terapkan</button>
                        </div>
                    </div>

                    @if(request()->hasAny(['category', 'type', 'min_price', 'max_price']))
                        <a href="{{ route('stores.show', $store) }}{{ request('q') ? '?q='.request('q') : '' }}" class="block text-center text-sm text-gray-500 hover:text-red-500 transition mt-2">Reset filter</a>
                    @endif
                </form>
            </div>
        </aside>

        {{-- PRODUCT GRID --}}
        <div class="flex-1 min-w-0">
            {{-- Sort bar --}}
            <div class="mb-4 -mx-0">
                <div class="flex gap-1.5 overflow-x-auto pb-1" style="scrollbar-width:none; -ms-overflow-style:none;">
                    @foreach(['terbaru' => 'Terbaru', 'terlaris' => 'Terlaris', 'termurah' => 'Termurah', 'termahal' => 'Termahal', 'rating' => 'Rating'] as $val => $label)
                        <a href="{{ request()->fullUrlWithQuery(['sort' => $val]) }}"
                           class="shrink-0 px-3 py-1.5 rounded-lg border text-xs font-medium transition whitespace-nowrap
                               {{ request('sort', 'terbaru') === $val ? 'bg-teal-600 text-white border-teal-600' : 'border-gray-200 text-gray-600 hover:border-teal-300 hover:text-teal-600' }}">
                            {{ $label }}
                        </a>
                    @endforeach
                </div>
            </div>

            @if($products->isEmpty())
                <div class="flex flex-col items-center justify-center py-20 text-center">
                    <svg class="w-16 h-16 text-gray-200 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    <h3 class="text-lg font-semibold text-gray-700 mb-2">Produk tidak ditemukan</h3>
                    <p class="text-gray-400 text-sm mb-4">Coba ubah filter atau kata kunci pencarian</p>
                    <a href="{{ route('stores.show', $store) }}" class="text-sm text-teal-600 hover:text-teal-800 font-medium">Lihat semua produk toko</a>
                </div>
            @else
                <div class="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4">
                    @foreach($products as $product)
                        <x-product-card :product="$product"/>
                    @endforeach
                </div>
                @if($products->hasPages())
                    <div class="mt-8 flex justify-center">{{ $products->links() }}</div>
                @endif
            @endif
        </div>
    </div>

    {{-- FILTER DRAWER — mobile only --}}
    <div
        x-show="filterOpen"
        x-cloak
        class="fixed inset-0 z-50 lg:hidden"
        @keydown.escape.window="filterOpen = false"
    >
        {{-- Backdrop --}}
        <div
            class="absolute inset-0 bg-black/40"
            @click="filterOpen = false"
            x-transition:enter="transition duration-200"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            x-transition:leave="transition duration-150"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
        ></div>

        {{-- Drawer --}}
        <div
            class="absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl shadow-xl max-h-[85dvh] flex flex-col"
            x-transition:enter="transition duration-300 ease-out"
            x-transition:enter-start="translate-y-full"
            x-transition:enter-end="translate-y-0"
            x-transition:leave="transition duration-200 ease-in"
            x-transition:leave-start="translate-y-0"
            x-transition:leave-end="translate-y-full"
        >
            {{-- Handle & header --}}
            <div class="flex items-center justify-between px-5 pt-4 pb-3 border-b border-gray-100 shrink-0">
                <span class="text-base font-semibold text-gray-900">Filter Produk Toko</span>
                <button @click="filterOpen = false" class="p-1 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100">
                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
            </div>

            {{-- Scrollable content --}}
            <div class="overflow-y-auto flex-1 px-5 py-4">
                <form method="GET" action="{{ route('stores.show', $store) }}" id="mobileFilterForm">
                    @if(request('q'))<input type="hidden" name="q" value="{{ request('q') }}">@endif
                    <input type="hidden" name="sort" value="{{ request('sort', 'terbaru') }}">

                    {{-- Tipe --}}
                    <div class="mb-6">
                        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3">Tipe Produk</p>
                        <div class="flex gap-2">
                            @foreach(['' => 'Semua', 'digital' => 'Digital', 'physical' => 'Fisik'] as $val => $label)
                                <label class="flex-1">
                                    <input type="radio" name="type" value="{{ $val }}" {{ request('type', '') === $val ? 'checked' : '' }} class="sr-only peer" onchange="document.getElementById('mobileFilterForm').submit()">
                                    <span class="block text-center px-3 py-2 rounded-xl border text-sm font-medium cursor-pointer transition peer-checked:bg-teal-600 peer-checked:text-white peer-checked:border-teal-600 border-gray-200 text-gray-600">
                                        {{ $label }}
                                    </span>
                                </label>
                            @endforeach
                        </div>
                    </div>

                    {{-- Harga --}}
                    <div class="mb-6">
                        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3">Rentang Harga</p>
                        <div class="flex gap-2">
                            <input type="number" name="min_price" value="{{ request('min_price') }}" placeholder="Min (Rp)" class="flex-1 px-3 py-2.5 text-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-teal-500">
                            <span class="flex items-center text-gray-400 text-sm">—</span>
                            <input type="number" name="max_price" value="{{ request('max_price') }}" placeholder="Max (Rp)" class="flex-1 px-3 py-2.5 text-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-teal-500">
                        </div>
                    </div>

                    {{-- Kategori --}}
                    <div class="mb-4">
                        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3">Kategori</p>
                        <div class="space-y-0.5">
                            <a href="{{ route('stores.show', array_merge(['store' => $store->slug], request()->except(['category', 'page']))) }}"
                               class="flex items-center justify-between px-3 py-2.5 rounded-xl text-sm transition
                                   {{ !request('category') ? 'bg-teal-50 text-teal-700 font-semibold' : 'text-gray-700 hover:bg-gray-50' }}">
                                Semua Kategori
                            </a>
                            @foreach($categories as $cat)
                                <a href="{{ route('stores.show', array_merge(['store' => $store->slug], request()->except(['page']), ['category' => $cat->slug])) }}"
                                   class="flex items-center justify-between px-3 py-2.5 rounded-xl text-sm transition
                                       {{ request('category') === $cat->slug ? 'bg-teal-50 text-teal-700 font-semibold' : 'text-gray-700 hover:bg-gray-50' }}">
                                    {{ $cat->name }}
                                </a>
                                @foreach($cat->children as $child)
                                    <a href="{{ route('stores.show', array_merge(['store' => $store->slug], request()->except(['page']), ['category' => $child->slug])) }}"
                                       class="flex items-center px-3 py-2 pl-7 rounded-xl text-sm transition
                                           {{ request('category') === $child->slug ? 'bg-teal-50 text-teal-700 font-semibold' : 'text-gray-500 hover:bg-gray-50' }}">
                                        {{ $child->name }}
                                    </a>
                                @endforeach
                            @endforeach
                        </div>
                    </div>
                </form>
            </div>

            {{-- Footer actions --}}
            <div class="px-5 py-4 border-t border-gray-100 flex gap-3 shrink-0">
                @if(request()->hasAny(['type', 'min_price', 'max_price', 'category']))
                    <a href="{{ route('stores.show', $store) }}{{ request('q') ? '?q='.request('q') : '' }}"
                       class="flex-1 py-3 text-sm font-medium text-gray-600 bg-gray-100 rounded-xl text-center hover:bg-gray-200 transition">
                        Reset
                    </a>
                @endif
                <button @click="document.getElementById('mobileFilterForm').submit()" class="flex-1 py-3 text-sm font-semibold text-white bg-teal-600 rounded-xl hover:bg-teal-700 transition">
                    Terapkan
                </button>
            </div>
        </div>
    </div>
</div>

<x-whatsapp-bubble :store="$store" message="Halo, saya ingin bertanya tentang produk di toko {{ $store->name }}" />

@endsection