<section class="container pb-5 mb-1 mb-sm-3 mb-lg-4 mb-xl-5" id="brand-home-section">
    <div class="swiper my-md-3"
        data-swiper='{
          "slidesPerView": 2,
          "pagination": {
            "el": ".swiper-pagination",
            "clickable": true
          },
          "breakpoints": {
            "500": {
              "slidesPerView": 3
            },
            "768": {
              "slidesPerView": 4,
              "spaceBetween": 12
            },
            "992": {
              "slidesPerView": 5,
              "spaceBetween": 20
            },
            "1200": {
              "slidesPerView": 6,
              "spaceBetween": 24
            }
          }
        }'>
        <div class="swiper-wrapper" id="brand-container">
            <!-- Brands will be loaded via AJAX -->
        </div>

        <!-- Pagination (Bullets) -->
        <div class="swiper-pagination position-static mt-3"></div>
    </div>

    <!-- Loading state -->
    <div class="text-center py-5 d-none" id="brand-loading">
        <div class="swiper my-md-3">
            <div class="swiper-wrapper">
                @for ($i = 1; $i <= 6; $i++)
                    <div class="swiper-slide text-body">
                        <div class="shimmer-wrapper">
                            <div class="shimmer">
                                <div class="shimmer-content rounded">
                                    <div class="shimmer-line shimmer-image rounded"
                                        style="height: 60px; width: 100%; background-color: rgba(0, 0, 0, 0.1);">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endfor
            </div>
        </div>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const brandContainer = document.getElementById('brand-container');
    const loadingSpinner = document.getElementById('brand-loading');
    const section = document.getElementById('brand-home-section');

    if (!brandContainer || !loadingSpinner) {
        return;
    }

    // Load brands on page load
    loadBrands();

    function loadBrands() {
        // Show loading spinner
        loadingSpinner.classList.remove('d-none');

        // Make AJAX request for brands
        fetch('{{ route("product.ajax.brands") }}')
            .then(response => response.json())
            .then(data => {
                if (data.success && data.brands) {
                    brandContainer.innerHTML = data.brands;
                } else {
                    // Handle error
                    brandContainer.innerHTML = '<div class="swiper-slide text-center py-4">Error loading brands</div>';
                }
            })
            .catch(error => {
                console.error('Error loading brands:', error);
                brandContainer.innerHTML = '<div class="swiper-slide text-center py-4">Error loading brands</div>';
            })
            .finally(() => {
                // Hide loading spinner
                loadingSpinner.classList.add('d-none');
                
                // Re-initialize Swiper
                if (window.Swiper) {
                    const swiper = section.querySelector('.swiper');
                    if (swiper && swiper.swiper) {
                        swiper.swiper.update();
                    }
                }
            });
    }
});
</script>
