@extends('layouts.app')
@section('content')

    <div class="container mx-auto md:mt-8 lg:mt-8 sm:mt-3">
        <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
            <!-- Main Content -->
            <div class="md:col-span-9">
                <!-- Page Title and Description and Breadcumb -->
                <div class="ml-4 mb-10 mr-4">
                    {{ Breadcrumbs::render('stores') }}
                    <h1 class="text-3xl font-bold">{{ __('messages.all_stores') }}</h1>
                    <p class="text-gray-600 mt-3">{{ __('messages.all_stores_description') }}</p>
                </div>

                <!-- Categories Filter -->
                <div class="mb-10 ml-4 swiper-store overflow-hidden relative " style="max-width: 100%;">
                    <div class="swiper-wrapper" role="group" id="categoryFilter">
                        <div class="swiper-slide">
                            <button type="button"
                                class="w-full px-4 py-2 border border-gray-300 rounded text-sm font-medium text-gray-700 hover:bg-gray-100 active:bg-gray-200 focus:outline-none focus:ring-2  filter-btn active"
                                data-category-id="all">{{ __('messages.all_categories') }}</button>
                        </div>
                        <!-- Category Buttons -->
                        @foreach ($main_categories as $category)
                            <div class="swiper-slide">
                                <button type="button"
                                    class="w-full px-4 py-2 border border-gray-300 rounded text-sm font-medium text-gray-700 hover:bg-gray-100 active:bg-gray-200 focus:outline-none focus:ring-2  filter-btn"
                                    data-category-id="{{ $category['id'] }}">{{ $category['name'] }}</button>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- Stores Section -->
                <div id="storesContainer">
                    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4" id="storesList">
                        @include('partials.store-list', ['stores' => $stores])
                    </div>
                    <!-- Load More Button -->
                    @if ($stores->hasMorePages())
                        <div class="flex justify-center mt-6">
                            <button id="loadMoreBtn"
                                class="px-6 py-2 bgd-color text-white rounded bgd-color focus:outline-none">
                                {{ __('messages.download_more') }}
                            </button>
                        </div>
                    @endif

                    <!-- No More Stores Message -->
                    <div id="noMoreStoresMessage" class="hidden text-center text-gray-500 mt-4">
                        {{ __('messages.no_more_stores') }}
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="md:col-span-3">
                @include('partials.sidebar')
            </div>
        </div>
    </div>

    @vite('resources/js/components/stores.js')

    <script>
        window.storeData = {
            ajaxUrl: "{{ url('/ajax/stores') }}",
        };
    </script>
@endsection