@if (isset($categories) && count($categories) > 0)
    <div class="container">
        <div class="bg-light rounded-1 shadow-sm">
            <div class="listing_heading p-3 border-bottom">
                <h4 class="title m-0">Select a category</h4>
            </div>
            <div class="row d-flex align-items-center justify-content-center p-4 px-0">
                <!-- ======================= Category Start  ============================ -->
                <div class="category_section">
                    <div class="container">
                        <!--<div class="section_heading mb-4">
                                                                                                        <h2 class="title">Add items by category</h2>
                                                                                                    </div>-->
                        <div
                            class="row g-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 border rounded overflow-hidden">

                            @forelse($categories as $category)
                                <!-- category -->
                                <div class="col">
                                    <div
                                        class="category_item d-flex align-items-center position-relative p-3 p-lg-4 h-100 border-end border-bottom">
                                        <div class="category_icon bg-light rounded p-2 shadow-sm me-2">
                                            <a href="javascript:void(0);" class="stretched-link openCategoryModal"
                                                data-category-id="{{ $category->id }}"data-category-slug="{{ $category->slug }}"
                                                data-category-name="{{ $category->name }}">
                                                <img src="{{ getIcon($category?->image) }}" width="40"
                                                    class="img-fluid" alt="{{ $category?->slug }}">
                                            </a>
                                        </div>
                                        <div class="category_content">
                                            <div class="category_name mb-1">
                                                <strong>{{ $category?->name }}</strong>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @empty
                            @endforelse
                        </div>
                    </div>
                </div>
                <!-- ======================= Category End  ============================ -->
            </div>
        </div>
    </div>
@endif


<!-- Category Selection Modal -->
<div class="modal fade" id="categoryModal" tabindex="-1" aria-labelledby="categoryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-3 shadow">
            <div class="modal-header">
                <h5 class="modal-title" id="categoryModalLabel">Select Subcategory & Location</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="categorySelectionForm">
                    <input type="hidden" id="selectedCategoryId">

                    <!-- Subcategory -->
                    <div class="mb-3">
                        <label class="form-label">Subcategory</label>
                        <select id="subcategory_id" class="form-select" data-placeholder="Select subcategory" required>
                            <option value="">Select subcategory</option>
                        </select>
                    </div>

                    <!-- Region -->
                    <div class="mb-3">
                        <label class="form-label">Region</label>
                        <select id="region_id" class="form-select" data-placeholder="Select region" required>
                            <option value="">Select region</option>
                            @foreach ($regions as $region)
                                <option value="{{ $region->id }}">{{ $region->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- City -->
                    <div class="mb-3">
                        <label class="form-label">City</label>
                        <select id="city_id" class="form-select" data-placeholder="Select city" required>
                            <option value="">Select city</option>
                        </select>
                    </div>

                    <button type="submit" class="btn btn-primary w-100">Continue</button>
                </form>
            </div>
        </div>
    </div>
</div>



@push('scripts')
    <script>
        $(document).ready(function() {

            // 🟩 Open Modal
            $(document).on('click', '.openCategoryModal', function() {
                let categoryId = $(this).data('category-id');
                let categorySlug = $(this).data('category-slug');
                let categoryName = $(this).data('category-name');

                $('#selectedCategoryId').val(categorySlug);
                $('#categoryModalLabel').text('Select Subcategory & Location for ' + categoryName);

                // Load subcategories using your existing function
                let subcategoryElement = $('#subcategory_id');
                loadSubcategories(categoryId, subcategoryElement);

                // Reset region/city selections
                $('#region_id').val('');
                $('#city_id').html('<option value="">Select city</option>');

                $('#categoryModal').modal('show');
            });

            // 🟩 Region → City dynamic loading
            $(document).on('change', '#region_id', function() {
                let regionId = $(this).val();
                let cityElement = $('#city_id');
                getCityByRegion(regionId, cityElement);
            });

            // 🟩 On form submit → redirect
            $('#categorySelectionForm').on('submit', function(e) {
                e.preventDefault();

                let categoryId = $('#selectedCategoryId').val();
                let subcategoryId = $('#subcategory_id').val();
                let regionId = $('#region_id').val();
                let cityId = $('#city_id').val();

                if (!subcategoryId || !regionId || !cityId) {
                    // alert('Please select all fields');
                    return;
                }

                // Redirect to create ad with selected values
                let targetUrl =
                    `/user/my-ads/create?category=${categoryId}&subcategory=${subcategoryId}&region=${regionId}&city=${cityId}`;
                window.location.href = targetUrl;
            });
        });
    </script>
@endpush