@extends('front.layouts.master')
@push('css')
    <link rel="stylesheet" href="{{ asset('front/assets/css/store.css') }}">
@endpush
@section('content')
    <section class="main_category" style="margin-top: 75px;">
        <div class="container">
            <form action="{{ route('site.stores') }}" method="get">
                <div class="form-container">
                    <div class="main_search">
                        <div class="search_wrapper">
                            <input type="search" class="search_main" placeholder="ابحث هنا..." name="search">
                            <img src="{{ asset('front/assets/img/Search_light.svg') }}" alt="" class="search_icon">
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-lg-6 col-md-6">
                            <div class="form-group">
                                <label class="form-label">{{ TranslationHelper::translate('MainCategory', 'site') }} <span
                                        class="text-danger">*</span></label>
                                <select class="form-select" id="MaincategoryDropdown" required>
                                    <option value="">{{ TranslationHelper::translate('Category', 'site') }}</option>
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}"
                                            {{ old('brand_id') == $category->id ? 'selected' : '' }}>
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <small id="categoryError" style="color: red; display: none;">This field is required.</small>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <div class="form-group">
                                <label class="form-label">{{ TranslationHelper::translate('Category', 'site') }} <span
                                        class="text-danger">*</span></label>
                                <select class="form-select" id="categoryDropdown" name="brand_id" required>
                                    <option value="">{{ TranslationHelper::translate('Category', 'site') }}</option>
                                </select>
                                <small id="categoryError" style="color: red; display: none;">This field is required.</small>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="theme-btn">بحث</button>
                </div>

            </form>
        </div>
    </section>


    {{-- <section class="category_hero">
        <div class="container">
            <div class="main_grid_category">
                @foreach ($brands as $brand)
                    <a href="{{ route('site.stores', ['brand_id' => $brand->id]) }}">
                        <div class="main_img">
                            <img src="{{ 'https://images.bkamthis.com/' . $brand->image }}" alt="brand" loading="lazy"
                                style="width: 137px; height: 137px;">
                            <div class="titel_category">
                                <h3>{{ $brand->name }}</h3>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>

        </div>
    </section> --}}

    <section class="stor_category">
        <div class="container">
            <div class="grid_stor">
                @forelse ($stores as $store)
                    <a href="{{ route('site.store.user', $store->id) }}">
                        <div class="main_stor">
                            <div class="img_stor">
                                <img src="{{ $store->getLogo() }}" alt="store" loading="lazy"
                                    style="width: 76px; height: 76px;">
                            </div>
                            <div class="titel_stor">
                                <h3>{{ $store->name }}</h3>
                                <p>{{ \Illuminate\Support\Str::limit($store->description, 40) }}</p>
                                <span class="location-icon">
                                    {{ $store->country?->name }} - {{ $store->city?->name }}
                                </span>
                            </div>
                        </div>
                    </a>
                @empty
                    <div class="col-12">
                        <div class="alert alert-danger text-center">
                            {{ TranslationHelper::translate('No stores found', 'site') }}
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
    </section>

    <div class="pagination">
        {{ $stores->links() }}
    </div>
@endsection

@push('js')
    <script>
        $('#MaincategoryDropdown').on('change', function() {
            var categoryId = $(this).val();
            if (!categoryId) {
                $('#categoryDropdown').empty().append('<option value="">---</option>');
                return; // stop if empty
            }

            var siteLang = '{{ app()->getLocale() }}';

            $.ajax({
                url: "/api/brands/" + categoryId,
                method: 'GET',
                headers: {
                    'Accept-Language': siteLang
                },
                success: function(data) {
                    $('#categoryDropdown').empty().append('<option value="">---</option>');
                    $.each(data.data, function(index, subcategory) {
                        $('#categoryDropdown').append('<option value="' +
                            subcategory.id + '">' + subcategory.name +
                            '</option>');
                    });
                    $('#categoryDropdown').niceSelect('update');
                },
                error: function(error) {
                    console.error('Error fetching subcategories:', error);
                }
            });
        });
    </script>
@endpush