@php
    [
        $categories,
        $brands,
        $tags,
        $rand,
        $categoriesRequest,
        $urlCurrent,
        $categoryId,
        $maxFilterPrice,
    ] = EcommerceHelper::dataForFilter($category ?? null);
@endphp

<style>
    .filter-info,
    .number-info {
        width: inherit !important;
    }

    .product-toolbar {
        margin-bottom: 20px;
    }

    .toolbar-row {
        background: #f5f5f5;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 15px;
    }

    .search-box .input-group {
        border-radius: 6px;
        overflow: hidden;
    }

    .search-box .form-control {
        border-right: none;
    }

    .filter-box select,
    .sort-box select {
        border-radius: 6px;
        border: 1px solid #ced4da;
        padding: 8px 12px;
        font-size: 14px;
    }

    .view-toggle-box .btn {
        padding: 8px 12px;
        border-radius: 6px;
    }

    .view-toggle-box .btn.active {
        background-color: #0d6efd;
        border-color: #0d6efd;
        color: white;
    }

    /* Tablet and smaller screens */
    @media (max-width: 991px) {
        .toolbar-row {
            flex-direction: column;
            gap: 15px;
        }

        .search-box {
            min-width: unset;
            width: 100%;
        }

        .filter-box {
            width: 100%;
        }

        .filter-box select {
            width: 100% !important;
        }

        .d-flex.align-items-center.gap-2:last-child {
            justify-content: space-between;
            width: 100%;
        }
    }

    /* Mobile screens */
    @media (max-width: 576px) {
        .search-box {
            flex-direction: column;
            gap: 10px;
        }

        .search-box .position-relative {
            width: 100%;
        }

        .btn-sms {
            width: 100%;
            margin: 0;
        }

        .d-flex.align-items-center.gap-2:last-child {
            flex-direction: column;
            gap: 15px;
        }

        .filter-info {
            width: 100%;
            text-align: center;
        }

        .view-toggle-buttons {
            width: 100%;
        }

        .view-toggle-buttons .btn-group {
            width: 100%;
            display: flex;
        }

        .view-toggle-buttons .btn {
            flex: 1;
        }
    }

    .flex-grow-1 {
        flex-grow: 1 !important;
    }

    .search-box .search-icon {
        position: absolute;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
        font-size: 16px;
        color: #7d7d7d;
    }

    .search-input {
        padding-left: 35px !important;
        border-radius: 5px;
    }

    .btn-sms {
        height: 39px !important;
        padding: 6px 14px !important;
        font-size: 13px;
        border-radius: 5px;
        white-space: nowrap;
    }

    .select2-container {
        box-sizing: border-box;
        display: inline-block;
        margin: 0;
        position: relative;
        vertical-align: middle;
    }

    .select2-container--default.select2-container--focus .select2-selection--multiple {
        border: none !important;
    }

    .select2-container--default .select2-selection--multiple {
        border: none !important;
    }

    .select2-container--default .select2-search--inline .select2-search__field {
        padding-left: 7px !important;
    }

    /* Loading indicator styles */
    .loading-indicator {
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1000;
    }

    .loading-spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    /* Status indicators */
    .status-indicator {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-right: 5px;
    }

    .status-big {
        background-color: #28a745;
    }

    .status-medium {
        background-color: #ffc107;
    }

    .status-red {
        background-color: #dc3545;
    }

    /* Select2 Custom Styles for Registration Form */
    .select2-container--default .select2-selection--single {
        height: 60px;
        padding: 0 15px;
        background-color: #fff;
        font-size: 14px;
        line-height: 48px;
        align-content: center;
        border-radius: 5px;
        border: 1px solid #ced4da;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #333;
        padding-left: 0;
        padding-right: 20px;
    }

    .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: #999;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 48px;
        right: 10px;
    }

    .select2-container--default .select2-selection--single:focus {
        outline: none;
    }

    .select2-dropdown {
        border: 1px solid #e0e6ed;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .select2-container--default .select2-results__option {
        padding: 9px 8px;
        font-size: 14px;
    }

    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: #eeeeee;
    }

    .select2-container--default .select2-search--dropdown .select2-search__field {
        border: 1px solid #e0e6ed;
        border-radius: 6px;
        padding: 8px 8px;
        font-size: 14px;
    }

    /* Disabled state */
    .select2-container--default .select2-selection--single[aria-disabled="true"] {
        background-color: #f8f9fa;
        color: #6c757d;
        cursor: not-allowed;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 35px;
        right: 10px;
    }

    .select2-container--default .select2-selection--single {
        height: 39px;
        padding: 0 15px;
        background-color: #fff;
        font-size: 14px;
        line-height: 37px;
        align-content: center;
    }

    .product-item-2 .product-image {
        float: left;
        height: 237px;
        /* height: 236px; */
        line-height: 237px;
        margin: 0 0 20px;
        min-height: 237px;
        padding: 5px 0 0;
        position: relative;
        text-align: center;
        width: 100%;
    }
</style>

<div class="product-toolbar">
    {{-- Main Toolbar Row --}}
    <div class="toolbar-row d-flex align-items-center gap-2 mb-3 p-3  rounded">
        {{-- Search Box - Full Width --}}
        <div class="search-box d-flex align-items-center gap-2 flex-grow-1">
            <div class="position-relative flex-grow-1">
                <i class="fi-rr-search search-icon"></i>
                <input type="text" class="form-control search-input ps-5" value="{{ request()->input('q', '') }}"
                    placeholder="{{ __('Search products...') }}" style="height: 36px;">
            </div>

            <button class="btn btn-primary btn-sm btn-sms search-btn" type="button">
                {{ __('Search') }}
            </button>

            <button class="btn btn-outline-secondary btn-sm btn-sms clear-btn" type="button">
                {{ __('Clear') }}
            </button>
        </div>

        {{-- Category Filter --}}
        @if ($categories->isNotEmpty())
            <div class="filter-box">
                <select class="form-select category-filter" style="width: 180px;">
                    <option value="">{{ __('All Categories') }}</option>
                    @foreach ($categories as $category)
                        <option value="{{ $category->id }}" @if (in_array($category->id, request()->input('categories', []))) selected @endif>
                            {{ ucfirst(strtolower($category->name)) }}
                        </option>
                    @endforeach
                </select>
            </div>
        @endif

        {{-- Brand Filter --}}
        @if ($brands->isNotEmpty())
            <div class="filter-box">
                <select class="form-select brand-filter" style="width: 180px;">
                    <option value="">{{ __('All Brands') }}</option>
                    @foreach ($brands as $brand)
                        <option value="{{ $brand->id }}" @if (in_array($brand->id, request()->input('brands', []))) selected @endif>
                            {{ ucfirst(strtolower($brand->name)) }}
                        </option>
                    @endforeach
                </select>
            </div>
        @endif

        {{-- Right Side: Sort + View Toggle --}}
        <div class="d-flex align-items-center gap-2">
            {{-- Sort Info Box --}}
            <div class="filter-info">
                @if ($sortParams = EcommerceHelper::getSortParams())
                    @php
                        $sortBy = request()->input('sort-by');
                        if ($sortBy && Arr::has($sortParams, $sortBy)) {
                            $sortByLabel = Arr::get($sortParams, $sortBy);
                        } else {
                            $sortByLabel = Arr::first($sortParams);
                            $sortBy = array_key_first($sortParams);
                        }
                    @endphp

                    <div class="icon-sort text-body color-gray-500 catalog-toolbar__ordering">
                        <input type="hidden" name="sort-by" value="{{ $sortBy }}">
                        <span class="d-inline-block">{{ __('Sort by') }}:</span>
                        <div class="color-green-900 d-inline-block">
                            <div class="dropdown dropdown-sort">
                                <a class="btn dropdown-toggle" id="dropdownSort" type="button"
                                    data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static"
                                    href="#">
                                    <span>{{ $sortByLabel }}</span>
                                    <i class="fi-rr-angle-small-down"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-light" aria-labelledby="dropdownSort">
                                    @foreach ($sortParams as $key => $name)
                                        <li>
                                            <a class="dropdown-item @if ($sortBy == $key) active @endif"
                                                href="#" data-value="{{ $key }}">
                                                {{ $name }}
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                @endif
            </div>

            {{-- View Toggle Buttons --}}
            <div class="view-toggle-buttons">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-outline-secondary view-toggle active radius-group"
                        data-view="grid" title="Grid View">
                        <i class="fi-rr-apps"></i>
                    </button>
                    <button type="button" class="btn btn-outline-secondary view-toggle radius-group" data-view="list"
                        title="List View">
                        <i class="fi-rr-list"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Product Count --}}
    <div class="product-count mb-3">
        <strong class="text-body color-gray-500 products-found">
            <span class="color-green-900 me-1">{{ $products->total() }}</span>
            <span>{{ __('product(s) found') }}</span>
        </strong>
    </div>


</div>


<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize Select2 for filters
        if (typeof jQuery !== 'undefined') {
            jQuery('.category-filter').select2({
                placeholder: "{{ __('Select Category') }}",
                allowClear: true
            });

            jQuery('.brand-filter').select2({
                placeholder: "{{ __('Select Brand') }}",
                allowClear: true
            });
        }

        // Get DOM elements
        const searchInput = document.querySelector('.search-input');
        const searchBtn = document.querySelector('.search-btn');
        const clearBtn = document.querySelector('.clear-btn');
        const productsContainer = document.querySelector('.products-listing');
        const productsFound = document.querySelector('.products-found');
        const productsLoader = document.getElementById('products-loader');

        let searchTimeout;
        let isSearching = false;

        // Show/hide loader for products section only
        function showLoading() {
            if (productsLoader) {
                productsLoader.style.display = 'flex';
            }
            isSearching = true;
        }

        function hideLoading() {
            if (productsLoader) {
                productsLoader.style.display = 'none';
            }
            isSearching = false;
        }

        // Add status indicator to products
        function addStatusIndicators() {
            const products = document.querySelectorAll('.product-item');
            products.forEach(product => {
                const price = parseFloat(product.dataset.price || 0);
                const stock = parseInt(product.dataset.stock || 0);

                let statusClass = 'status-red';
                if (stock > 50 && price > 100) statusClass = 'status-big';
                else if (stock > 20 || price > 50) statusClass = 'status-medium';

                const indicator = document.createElement('span');
                indicator.className = `status-indicator ${statusClass}`;

                const titleElement = product.querySelector('.product-title');
                if (titleElement) {
                    titleElement.insertBefore(indicator, titleElement.firstChild);
                }
            });
        }

        // Perform search function
        function performSearch() {
            if (isSearching) return;

            const searchTerm = searchInput ? searchInput.value.trim() : '';
            const category = jQuery('.category-filter').val() || '';
            const brand = jQuery('.brand-filter').val() || '';
            const sortBy = document.querySelector('input[name="sort-by"]')?.value || '';

            // Build URL
            const params = new URLSearchParams();
            if (searchTerm) params.append('q', searchTerm);
            if (category) params.append('categories[]', category);
            if (brand) params.append('brands[]', brand);
            if (sortBy) params.append('sort-by', sortBy);
            params.append('ajax', '1');

            //  const newUrl = window.location.pathname + '?' + params.toString();
            // window.history.replaceState({}, '', newUrl);
            // Show loading
            showLoading();

            // AJAX request with proper error handling
            const ajaxUrl = '{{ route('public.products') }}';
            fetch(ajaxUrl + '?' + params.toString(), {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    if (productsContainer && data.data) {
                        productsContainer.innerHTML = data.data;
                        addStatusIndicators();
                    
                    }
                    if (data.message && productsFound) {
                        const match = data.message.match(/(\d+)/);
                        if (match) {
                            productsFound.innerHTML =
                                `<span class="color-green-900 me-1">${match[1]}</span><span>{{ __('product(s) found') }}</span>`;
                        }
                    }
                })
                .catch(error => {
                    console.error('Search error:', error);
                    if (productsContainer) {
                        productsContainer.innerHTML =
                            '<div class="text-center p-4 text-danger">{{ __('Error loading products. Please try again.') }}</div>';
                    }
                })
                .finally(() => {
                    hideLoading();
                });
        }

        // // Event listeners
        // if (searchInput) {
        //     searchInput.addEventListener('input', function() {
        //         clearTimeout(searchTimeout);
        //         searchTimeout = setTimeout(performSearch, 500);
        //     });

        //     searchInput.addEventListener('keypress', function(e) {
        //         if (e.key === 'Enter') {
        //             e.preventDefault();
        //             clearTimeout(searchTimeout);
        //             performSearch();
        //         }
        //     });
        // }

        if (searchBtn) {
            searchBtn.addEventListener('click', function() {
                clearTimeout(searchTimeout);
                performSearch();
            });
        }

        if (clearBtn) {
            clearBtn.addEventListener('click', function() {
                if (searchInput) searchInput.value = '';
                jQuery('.category-filter, .brand-filter').val('').trigger('change');
                const sortInput = document.querySelector('input[name="sort-by"]');
                if (sortInput) sortInput.value = '';
                performSearch();
            });
        }

        // Filter changes
        jQuery('.category-filter, .brand-filter').on('change', performSearch);

        // Sort dropdown functionality
        document.querySelectorAll('.dropdown-sort .dropdown-item').forEach(item => {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                const sortValue = this.getAttribute('data-value');
                const sortInput = document.querySelector('input[name="sort-by"]');
                if (sortInput) {
                    sortInput.value = sortValue;
                }
                const sortSpan = document.querySelector('#dropdownSort span');
                if (sortSpan) {
                    sortSpan.textContent = this.textContent;
                }

                // Update active state
                document.querySelectorAll('.dropdown-sort .dropdown-item').forEach(i => i
                    .classList.remove('active'));
                this.classList.add('active');

                performSearch();
            });
        });

        // View toggle functionality
        document.querySelectorAll('.view-toggle').forEach(button => {
            button.addEventListener('click', function() {
                // Remove active class from all buttons
                document.querySelectorAll('.view-toggle').forEach(btn => btn.classList.remove(
                    'active'));
                // Add active class to clicked button
                this.classList.add('active');

                const view = this.getAttribute('data-view');
                const productsContainer = document.querySelector('.products-listing');

                if (productsContainer) {
                    if (view === 'list') {
                        productsContainer.classList.add('list-view');
                        productsContainer.classList.remove('grid-view');
                    } else {
                        productsContainer.classList.add('grid-view');
                        productsContainer.classList.remove('list-view');
                    }
                }
            });
        });

     

        // Initialize status indicators and pagination handlers on page load
        addStatusIndicators();
    });
</script>