<div class="filters-sidebar" id="filtersSidebar">
    <!-- Search by Name -->
    <div class="filter-widget">
        <div class="filter-title uk-text-secondary">By Name</div>
        <div class="search-filter">
            <div class="uk-position-relative">
                <span class="uk-form-icon" uk-icon="icon: search; ratio: 0.8"></span>
                <input type="text" class="uk-input" id="trainerName" placeholder="Enter trainer name...">
            </div>
        </div>
    </div><!-- Search by Name -->

    <!-- Price Range Filter -->
    <div class="filter-widget">
        <div class="filter-title uk-text-secondary">Price Range (SAR)</div>
        <div class="price-range">
            <input type="number" class="uk-input min-price" id="minPrice" placeholder="Min Price" min="0">
            <span class="price-separator"><span uk-icon="icon: arrow-right; ratio: 1.6" class="uk-icon uk-text-secondary" aria-hidden="true"></span></span>
            <input type="number" class="uk-input max-price" id="maxPrice" placeholder="Max Price" min="0">
        </div>
        <div id="priceError" class="price-error-message" style="display: none; color: #CE4E50; font-size: 0.8rem; margin-top: 0.5rem;">
            Please enter numbers only
        </div>
    </div><!-- Price Range Filter -->

    <!-- Category Filter -->
    <div class="filter-widget">
        <div class="filter-title uk-text-secondary">Category</div>
        <div class="category-filter flex-grid gap-8">
            <div class="category-option filter-option">
                <input type="checkbox" class="uk-checkbox" id="catCareer" value="career">
                <label for="catCareer">Career Development</label>
            </div>
            <div class="category-option filter-option">
                <input type="checkbox" class="uk-checkbox" id="catBusiness" value="business">
                <label for="catBusiness">Business Skills</label>
            </div>
            <div class="category-option filter-option">
                <input type="checkbox" class="uk-checkbox" id="catTech" value="technology">
                <label for="catTech">Technology</label>
            </div>
            <div class="category-option filter-option">
                <input type="checkbox" class="uk-checkbox" id="catLeadership" value="leadership">
                <label for="catLeadership">Leadership</label>
            </div>
            <div class="category-option filter-option">
                <input type="checkbox" class="uk-checkbox" id="catCommunication" value="communication">
                <label for="catCommunication">Communication</label>
            </div>
            <div class="category-option filter-option">
                <input type="checkbox" class="uk-checkbox" id="catPersonal" value="personal">
                <label for="catPersonal">Personal Development</label>
            </div>
        </div>
    </div><!-- Category Filter -->

    <!-- Gender Filter -->
    <div class="filter-widget">
        <div class="filter-title uk-text-secondary">Gender</div>
        <div class="gender-filter flex-grid gap-8">
            <div class="gender-option filter-option">
                <input type="checkbox" class="uk-checkbox" id="genderMale" value="male">
                <label for="genderMale">Male</label>
            </div>
            <div class="gender-option filter-option">
                <input type="checkbox" class="uk-checkbox" id="genderFemale" value="female">
                <label for="genderFemale">Female</label>
            </div>
        </div>
    </div><!-- Gender Filter -->

    <!-- Language Filter -->
    <div class="filter-widget">
        <div class="filter-title uk-text-secondary">Language</div>
        <div class="language-filter flex-grid gap-8">
            <div class="language-option filter-option">
                <input type="checkbox" class="uk-checkbox" id="langArabic" value="arabic">
                <label for="langArabic">Arabic</label>
            </div>
            <div class="language-option filter-option">
                <input type="checkbox" class="uk-checkbox" id="langEnglish" value="english">
                <label for="langEnglish">English</label>
            </div>
            <div class="language-option filter-option">
                <input type="checkbox" class="uk-checkbox" id="langBoth" value="both">
                <label for="langBoth">Arabic & English</label>
            </div>
        </div>
    </div><!-- Language Filter -->

    <!-- Rating Filter -->
    <div class="filter-widget">
        <div class="filter-title uk-text-secondary">Minimum Rating</div>
        <div class="rating-filter flex-grid gap-8">
            <label class="rating-option filter-option">
                <input type="radio" class="uk-radio" name="rating" value="0" checked>
                <span class="rating-text">Any Rating</span>
            </label>

            <label class="rating-option filter-option">
                <input type="radio" class="uk-radio" name="rating" value="3">
                <span class="rating-stars">
                    <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon star-rate"></span>
                    <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon star-rate"></span>
                    <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon star-rate"></span>
                </span>
                <span class="rating-text">3+ Stars</span>
            </label>

            <label class="rating-option filter-option">
                <input type="radio" class="uk-radio" name="rating" value="4">
                <span class="rating-stars">
                    <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon star-rate"></span>
                    <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon star-rate"></span>
                    <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon star-rate"></span>
                    <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon star-rate"></span>
                </span>
                <span class="rating-text">4+ Stars</span>
            </label>

            <label class="rating-option filter-option">
                <input type="radio" class="uk-radio" name="rating" value="5">
                <span class="rating-stars">
                    <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon star-rate"></span>
                    <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon star-rate"></span>
                    <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon star-rate"></span>
                    <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon star-rate"></span>
                    <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon star-rate"></span>
                </span>
                <span class="rating-text">5 Stars Only</span>
            </label>
        </div>
    </div><!-- Rating Filter -->

    <!-- Reset Filters -->
    <button class="reset-filters-btn uk-margin-small uk-button uk-button-default uk-width-1-1 uk-flex-inline uk-flex-middle uk-flex-center gap-8">
        <span uk-icon="icon: undo; ratio: .7" class="uk-icon" aria-hidden="true"></span>
        <span>Reset All Filters</span>
    </button>
</div>

<script>
    // Handle filter option clicks
    document.querySelectorAll('.filter-option').forEach(option => {
        option.addEventListener('click', function(e) {
            const input = this.querySelector('input');
            if (!input) return;

            // Ignore clicks on the input or its label
            if (e.target === input || e.target.tagName.toLowerCase() === 'label') return;

            if (input.type === 'radio') {
                input.checked = true;
            } else if (input.type === 'checkbox') {
                input.checked = !input.checked;
            }

            input.dispatchEvent(new Event('change', {
                bubbles: true
            }));
        });
    });

    // Price input validation
    function setupPriceValidation() {
        const priceInputs = document.querySelectorAll('#minPrice, #maxPrice');
        const errorMessage = document.getElementById('priceError');
        let errorTimeout;

        priceInputs.forEach(input => {
            // Prevent non-numeric characters from being typed
            input.addEventListener('keypress', function(e) {
                // Allow: backspace, delete, tab, escape, enter, decimal point
                if ([8, 9, 27, 13, 46].indexOf(e.keyCode) !== -1 ||
                    // Allow: Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X
                    (e.keyCode === 65 && e.ctrlKey === true) ||
                    (e.keyCode === 67 && e.ctrlKey === true) ||
                    (e.keyCode === 86 && e.ctrlKey === true) ||
                    (e.keyCode === 88 && e.ctrlKey === true)) {
                    return;
                }

                // Ensure that it is a number and stop the keypress
                if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                    e.preventDefault();
                    showPriceError();
                }
            });

            // Additional validation on input event (for pasted content)
            input.addEventListener('input', function(e) {
                const value = this.value;
                const numericValue = value.replace(/[^0-9.]/g, '');

                if (value !== numericValue) {
                    this.value = numericValue;
                    showPriceError();
                }

                // Remove error styling when input becomes valid
                if (numericValue === value && value !== '') {
                    hidePriceError();
                }
            });

            // Clear error when input is focused and valid
            input.addEventListener('focus', function() {
                if (this.value && !isNaN(this.value)) {
                    hidePriceError();
                }
            });
        });

        function showPriceError() {
            // Add error styling to inputs
            priceInputs.forEach(input => {
                input.style.borderColor = '#CE4E50';
                input.style.boxShadow = '0 0 0 2px rgba(359, 57, 56, 0.1)';
            });

            // Show error message
            errorMessage.style.display = 'block';

            // Clear previous timeout
            if (errorTimeout) {
                clearTimeout(errorTimeout);
            }

            // Hide error after 3 seconds
            errorTimeout = setTimeout(() => {
                hidePriceError();
            }, 3000);
        }

        function hidePriceError() {
            // Remove error styling
            priceInputs.forEach(input => {
                input.style.borderColor = '';
                input.style.boxShadow = '';
            });

            // Hide error message
            errorMessage.style.display = 'none';

            // Clear timeout
            if (errorTimeout) {
                clearTimeout(errorTimeout);
            }
        }
    }

    // Initialize price validation
    setupPriceValidation();

    // Reset All Filters functionality
    document.querySelector('.reset-filters-btn').addEventListener('click', function() {
        // Reset name search
        document.getElementById('trainerName').value = '';

        // Reset price range
        document.getElementById('minPrice').value = '';
        document.getElementById('maxPrice').value = '';

        // Hide price error if visible
        document.getElementById('priceError').style.display = 'none';

        // Reset gender checkboxes
        document.getElementById('genderMale').checked = false;
        document.getElementById('genderFemale').checked = false;

        // Reset language checkboxes
        document.getElementById('langArabic').checked = false;
        document.getElementById('langEnglish').checked = false;
        document.getElementById('langBoth').checked = false;

        // ADD THIS LINE HERE - Reset category checkboxes 
        document.querySelectorAll('.category-filter input[type="checkbox"]').forEach(checkbox => {
            checkbox.checked = false;
        });

        // Reset rating to "Any Rating"
        document.querySelector('input[name="rating"][value="0"]').checked = true;

        // Remove any error styling from price inputs
        const priceInputs = document.querySelectorAll('#minPrice, #maxPrice');
        priceInputs.forEach(input => {
            input.style.borderColor = '';
            input.style.boxShadow = '';
        });

        // Trigger change events for any listeners that might be attached
        const allInputs = document.querySelectorAll('#filtersSidebar input');
        allInputs.forEach(input => {
            input.dispatchEvent(new Event('change', {
                bubbles: true
            }));
        });

        // Optional: Trigger a custom reset event for external listeners
        document.dispatchEvent(new CustomEvent('filtersReset', {
            bubbles: true,
            detail: {
                sidebar: document.getElementById('filtersSidebar')
            }
        }));
    });
</script>