@extends('front.layout.master')
@section('title', filter_var($store->name) . ' | ' . config('app.name'))
@section('body')

@php
    $lang = session()->get('changed_language') ?? config('translatable.fallback_locale');
    $coverExists = $store->cover_photo && file_exists(public_path('/images/store/cover_photo/' . $store->cover_photo));
    $coverUrl = $coverExists
        ? url('images/store/cover_photo/' . $store->cover_photo)
        : url('images/default_cover_store.jpg');
    $storeLogoFile = $store->store_logo ?? $store->logo ?? null;
    $logoExists = $storeLogoFile && file_exists(public_path('/images/store/logo/' . $storeLogoFile));
    $sort  = request('sort', 'A-Z');
    $limit = (int) request('limit', 12);
    $totalProducts = method_exists($products, 'total') ? $products->total() : count($products);
@endphp

{{-- ============= STORE HERO ============= --}}
<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-4">
    <div class="bg-white rounded-2xl shadow-card overflow-hidden">
        <div class="relative h-44 sm:h-56 lg:h-72 bg-slate-100">
            <img src="{{ $coverUrl }}" alt="{{ $store->name }}" class="absolute inset-0 w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-t from-deep/85 via-deep/30 to-transparent"></div>

            <div class="absolute left-4 right-4 lg:left-7 lg:right-7 bottom-4 lg:bottom-7 flex items-end gap-4">
                <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl bg-white shadow-card grid place-items-center shrink-0 overflow-hidden ring-4 ring-white">
                    @if($logoExists)
                        <img src="{{ url('images/store/logo/' . $storeLogoFile) }}" alt="" class="w-full h-full object-contain p-2">
                    @else
                        <span class="font-display font-extrabold text-3xl text-brand-600">{{ strtoupper(substr($store->name, 0, 1)) }}</span>
                    @endif
                </div>
                <div class="flex-1 min-w-0 text-white">
                    <div class="flex items-center gap-2 flex-wrap">
                        <h1 class="font-display font-extrabold text-2xl lg:text-4xl leading-tight truncate">{{ $store->name }}</h1>
                        @if($store->verified_store == '1')
                            <span class="inline-flex items-center gap-1 bg-emerald-500 text-white text-[11px] font-bold px-2 py-1 rounded-full">
                                <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19l12-12-1.4-1.4z"/></svg>
                                {{ __('Verified') }}
                            </span>
                        @endif
                        @if(!empty($google_reviews))
                            <button type="button" data-sh-modal-open="googleReviewsModal" class="inline-flex items-center gap-1 bg-amber-400 text-deep text-[11px] font-bold px-2 py-1 rounded-full hover:bg-amber-300 transition-colors">
                                <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.5l2.9 6 6.6 1-4.8 4.6 1.1 6.6L12 17.6 6.2 20.7 7.3 14.1 2.5 9.5l6.6-1L12 2.5Z"/></svg>
                                {{ number_format($google_reviews['rating'], 1) }} {{ __('Google Reviews') }}
                            </button>
                        @endif
                    </div>
                    <div class="flex items-center gap-3 mt-1 text-[12px] text-white/85 flex-wrap">
                        <span>{{ $totalProducts }} {{ __('products') }}</span>
                        @if($store->city)<span>·</span><span>{{ $store->city['name'] ?? '' }}, {{ $store->country['nicename'] ?? '' }}</span>@endif
                    </div>
                </div>
            </div>
        </div>

        @if($store->description || $store->address || $store->mobile || $store->email)
            <div class="px-4 lg:px-7 py-5 grid md:grid-cols-2 gap-5 border-t border-slate-100">
                <div class="text-[13px] text-slate-600 leading-relaxed">
                    @if($store->description)
                        {!! \Illuminate\Support\Str::limit(strip_tags($store->description), 280) !!}
                    @else
                        <span class="text-slate-400">{{ __('Trusted seller on') }} {{ config('app.name') }}.</span>
                    @endif
                </div>
                <div class="text-[13px] text-slate-600 space-y-2">
                    @if($store->address || $store->city || $store->country)
                        <div class="flex items-start gap-2">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" class="text-brand-600 mt-0.5 shrink-0"><path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                            <span>{{ trim($store->address . ' ' . ($store->city['name'] ?? '') . ', ' . ($store->state['name'] ?? '') . ', ' . ($store->country['nicename'] ?? '') . ' ' . ($store->pin_code ?? ''), ', ') }}</span>
                        </div>
                    @endif
                    @if($store->mobile)
                        <div class="flex items-center gap-2">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" class="text-brand-600 shrink-0"><path d="M22 16.92V21a1 1 0 0 1-1.09 1A19.9 19.9 0 0 1 2 4.09 1 1 0 0 1 3 3h4.09a1 1 0 0 1 1 .75l1.27 5.07a1 1 0 0 1-.27 1L7.21 11.79a16 16 0 0 0 5 5l1.97-1.88a1 1 0 0 1 1-.27l5.07 1.27a1 1 0 0 1 .75 1z"/></svg>
                            <a href="tel:{{ $store->mobile }}" class="hover:text-brand-600">{{ $store->mobile }}</a>
                        </div>
                    @endif
                    @if($store->email)
                        <div class="flex items-center gap-2">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" class="text-brand-600 shrink-0"><path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/><path d="m22 6-10 7L2 6"/></svg>
                            <a href="mailto:{{ $store->email }}" class="hover:text-brand-600 truncate">{{ $store->email }}</a>
                        </div>
                    @endif
                </div>
            </div>
        @endif
    </div>
</section>

{{-- ============= FILTER BAR ============= --}}
<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-5">
    <div class="bg-white rounded-2xl shadow-card p-4 lg:p-5 flex items-center justify-between flex-wrap gap-3">
        <div>
            <h2 class="font-display font-extrabold text-lg">{{ __('Products from this store') }}</h2>
            <p class="text-[12px] text-slate-500">{{ $totalProducts }} {{ __('items') }}</p>
        </div>
        <form method="GET" action="{{ route('store.view', ['uuid' => $store->uuid, 'title' => $store->name]) }}" class="flex items-center gap-2 flex-wrap">
            <label class="text-[12px] text-slate-500">{{ __('Sort') }}</label>
            <select name="sort" onchange="this.form.submit()" class="h-9 px-3 rounded-lg border border-slate-200 text-[13px] focus:border-brand-500 outline-none bg-white">
                <option value="A-Z" {{ $sort === 'A-Z' ? 'selected' : '' }}>{{ __('Name: A → Z') }}</option>
                <option value="Z-A" {{ $sort === 'Z-A' ? 'selected' : '' }}>{{ __('Name: Z → A') }}</option>
            </select>
            <label class="text-[12px] text-slate-500 ml-2">{{ __('Show') }}</label>
            <select name="limit" onchange="this.form.submit()" class="h-9 px-3 rounded-lg border border-slate-200 text-[13px] focus:border-brand-500 outline-none bg-white">
                @foreach([12, 24, 48, 96] as $n)
                    <option value="{{ $n }}" {{ $limit === $n ? 'selected' : '' }}>{{ $n }}</option>
                @endforeach
            </select>
        </form>
    </div>
</section>

{{-- ============= PRODUCT GRID ============= --}}
<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-5 mb-10">
    @if(count($products))
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 lg:gap-4">
            @foreach($products as $p)
                @includeIf('front.partials.product-card', ['p' => $p, 'lang' => $lang])
            @endforeach
        </div>

        @if(method_exists($products, 'links'))
            <div class="mt-8 flex justify-center">
                {!! $products->appends(request()->except('page'))->links() !!}
            </div>
        @endif
    @else
        <div class="bg-white rounded-2xl shadow-card p-10 text-center">
            <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" class="mx-auto text-slate-300 mb-3"><path d="M3 7h18M3 12h18M3 17h18"/></svg>
            <h3 class="font-semibold text-slate-700">{{ __('No products yet') }}</h3>
            <p class="text-slate-500 text-[13px] mt-1">{{ __('This store has not listed any products at the moment.') }}</p>
        </div>
    @endif
</section>

{{-- ============= GOOGLE REVIEWS MODAL ============= --}}
@if(!empty($google_reviews))
<div id="googleReviewsModal" class="sh-modal" role="dialog" aria-modal="true">
    <div class="sh-modal__backdrop" data-sh-close></div>
    <div class="sh-modal__panel max-w-2xl">
        <div class="flex items-center justify-between p-5 border-b border-slate-100">
            <h3 class="font-display font-extrabold text-lg flex items-center gap-2">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" class="text-amber-400"><path d="M12 2.5l2.9 6 6.6 1-4.8 4.6 1.1 6.6L12 17.6 6.2 20.7 7.3 14.1 2.5 9.5l6.6-1L12 2.5Z"/></svg>
                {{ __('Google Reviews') }} · {{ number_format($google_reviews['rating'], 1) }}
            </h3>
            <button type="button" data-sh-close class="w-9 h-9 grid place-items-center rounded-full hover:bg-slate-100"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
        </div>
        <div class="p-5 space-y-4 max-h-[60vh] overflow-y-auto">
            @forelse($google_reviews['reviews'] ?? [] as $rev)
                <article class="border border-slate-200 rounded-xl p-4">
                    <div class="flex items-center gap-3">
                        @if(!empty($rev['profile_photo_url']))
                            <img src="{{ $rev['profile_photo_url'] }}" alt="" class="w-9 h-9 rounded-full object-cover">
                        @endif
                        <div>
                            <div class="font-semibold text-[13px]">{{ $rev['author_name'] ?? '' }}</div>
                            <div class="text-amber-400 text-sm">@for($i=1;$i<=5;$i++){{ ($rev['rating'] ?? 0) >= $i ? '★' : '☆' }}@endfor</div>
                        </div>
                    </div>
                    <p class="text-[13px] text-slate-600 mt-3 leading-relaxed">{{ $rev['text'] ?? '' }}</p>
                </article>
            @empty
                <p class="text-center text-slate-500 text-[13px] py-8">{{ __('No reviews available.') }}</p>
            @endforelse
        </div>
    </div>
</div>
@endif

@endsection