{{-- resources/views/storefront/stores.blade.php --}}
@extends('storefront.layout')

@section('title', ($pageTitle ?? trans_key('storefront.pageTitles.nearbyStores')).' - '.config('app.name', 'FreshMart'))

@section('content')
@php
    $activeFilters = $activeFilters ?? ['sort' => 'latest', 'category' => '', 'min_rating' => 0, 'offers' => false, 'open' => false];
    $storeCount = method_exists($stores, 'total') ? $stores->total() : $stores->count();
    $isFood = ($selectedService ?? null) === 'food';
@endphp

<style>
.fm-stores {
    padding: 12px 0 80px;
}

.fm-stores-header {
    margin-bottom: 16px;
}

.fm-stores-header h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--fm-text, #1a1a2e);
    margin: 0 0 2px;
}

.fm-stores-header p {
    font-size: 13px;
    color: var(--fm-text-secondary, #6b7280);
    margin: 0;
}

.fm-filter-row {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 0 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.fm-filter-row::-webkit-scrollbar {
    display: none;
}

.fm-filter-row a {
    flex-shrink: 0;
    padding: 4px 14px;
    border-radius: var(--fm-radius-full, 9999px);
    font-size: 12px;
    font-weight: 500;
    color: var(--fm-text-secondary, #6b7280);
    background: var(--fm-card-bg, #ffffff);
    text-decoration: none;
    border: 1px solid var(--fm-border, #e5e7eb);
    transition: all var(--fm-transition, 0.25s ease);
}

.fm-filter-row a.is-active {
    background: var(--fm-primary, #2daa37);
    color: white;
    border-color: var(--fm-primary, #2daa37);
}

.fm-store-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 380px) {
    .fm-store-grid { grid-template-columns: 1fr; }
}

@media (min-width: 481px) {
    .fm-store-grid { grid-template-columns: repeat(3, 1fr); }
}
</style>

<div class="fm-stores">
    <div class="fm-stores-header">
        <h1>{{ $isFood ? trans_key('storefront.fallbacks.exploreRestaurants') : ($heading ?? trans_key('storefront.fallbacks.nearbyStores')) }}</h1>
        <p>{{ $storeCount }} {{ Str::plural('store', $storeCount) }} found near you</p>
    </div>

    <nav class="fm-filter-row">
        <a href="{{ request()->fullUrlWithQuery(['sort' => 'latest']) }}" class="{{ $activeFilters['sort'] === 'latest' ? 'is-active' : '' }}">Latest</a>
        <a href="{{ request()->fullUrlWithQuery(['sort' => 'featured']) }}" class="{{ $activeFilters['sort'] === 'featured' ? 'is-active' : '' }}">Featured</a>
        <a href="{{ request()->fullUrlWithQuery(['sort' => 'distance']) }}" class="{{ $activeFilters['sort'] === 'distance' ? 'is-active' : '' }}">Distance</a>
        <a href="{{ request()->fullUrlWithQuery(['open' => $activeFilters['open'] ? null : 1]) }}" class="{{ $activeFilters['open'] ? 'is-active' : '' }}">Open now</a>
        <a href="{{ request()->fullUrlWithQuery(['offers' => $activeFilters['offers'] ? null : 1]) }}" class="{{ $activeFilters['offers'] ? 'is-active' : '' }}">Offers</a>
    </nav>

    @if($stores->count())
        <div class="fm-store-grid">
            @foreach($stores as $store)
                @include('storefront.partials.store-card', ['store' => $store])
            @endforeach
        </div>
        @if(method_exists($stores, 'links'))
            <div style="margin-top:16px;">{{ $stores->withQueryString()->links('storefront.partials.pagination') }}</div>
        @endif
    @else
        <div style="text-align:center;padding:60px 0;background:var(--fm-card-bg,#ffffff);border-radius:var(--fm-radius,10px);box-shadow:var(--fm-shadow,0 2px 8px rgba(0,0,0,0.06));">
            <h3 style="font-size:16px;font-weight:700;margin:0;color:var(--fm-text,#1a1a2e);">No stores available</h3>
            <p style="font-size:13px;color:var(--fm-text-secondary,#6b7280);margin:4px 0 16px;">Try changing your location or service tab.</p>
            <a href="{{ route('storefront.home', ['manage_location' => 1]) }}" style="display:inline-block;padding:10px 32px;background:var(--fm-primary,#2daa37);color:white;border-radius:var(--fm-radius-full,9999px);text-decoration:none;font-weight:600;">Change location</a>
        </div>
    @endif
</div>
@endsection