@push('styles_top')
    <style>
        .mobile-toolbar {
            display: flex;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: var(--bs-body-bg);
            box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.1);
            z-index: 1000;
            padding: 0.5rem;
            justify-content: space-around;
        }

        .mobile-toolbar .toolbar-icon {
            font-size: 1.5rem;
            cursor: pointer;
        }

        .popup-menu {
            display: none;
            position: fixed;
            bottom: 3rem;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--bs-body-bg);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
            border: 1px solid #d1d5db;
            border-radius: 0.375rem;
            z-index: 1001;
            width: 90%;
            max-width: 400px;
            padding: 1rem;
        }

        .popup-menu.active {
            display: block;
        }
    </style>
@endpush

<div class="mobile-toolbar">
    <div class="toolbar-icon" id="filter-icon"><i class="fas fa-filter"></i></div>
    <div class="toolbar-icon" id="type-icon"><i class="fas fa-list"></i></div>
    <div class="toolbar-icon" id="sort-icon"><i class="fas fa-sort"></i></div>
</div>

<form id="mobileFiltersForm" onsubmit="return false;">
    <div class="popup-menu" id="filter-popup">
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="upcoming" name="upcoming">
            <label class="form-check-label" for="upcoming">{{ trans('panel.upcoming') }}</label>
        </div>
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="free" name="free">
            <label class="form-check-label" for="free">{{ trans('public.free') }}</label>
        </div>
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="discount" name="discount">
            <label class="form-check-label" for="discount">{{ trans('public.discount') }}</label>
        </div>
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="download" name="downloadable">
            <label class="form-check-label" for="download">{{ trans('home.download') }}</label>
        </div>
    </div>

    <div class="popup-menu" id="type-popup">
        @foreach (['bundle', 'webinar', 'course', 'text_lesson'] as $typeOption)
            <div class="form-check form-switch mb-2">
                <input class="form-check-input" type="checkbox" id="filterType{{ $typeOption }}" name="type[]"
                    value="{{ $typeOption }}">
                <label class="form-check-label" for="filterType{{ $typeOption }}">
                    @if ($typeOption == 'bundle')
                        {{ trans('update.bundle') }}
                    @else
                        {{ trans('webinars.' . $typeOption) }}
                    @endif
                </label>
            </div>
        @endforeach
    </div>

    <div class="popup-menu" id="sort-popup">
        <select name="sort" class="form-select font-14">
            <option disabled selected>{{ trans('public.sort_by') }}</option>
            <option value="">{{ trans('public.all') }}</option>
            <option value="newest">{{ trans('public.newest') }}</option>
            <option value="expensive">{{ trans('public.expensive') }}</option>
            <option value="inexpensive">{{ trans('public.inexpensive') }}</option>
            <option value="bestsellers">{{ trans('public.bestsellers') }}</option>
            <option value="best_rates">{{ trans('public.best_rates') }}</option>
        </select>
    </div>
</form>

@push('scripts_bottom')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const filterIcon = document.getElementById('filter-icon');
            const typeIcon = document.getElementById('type-icon');
            const sortIcon = document.getElementById('sort-icon');

            const filterPopup = document.getElementById('filter-popup');
            const typePopup = document.getElementById('type-popup');
            const sortPopup = document.getElementById('sort-popup');

            filterIcon.addEventListener('click', function() {
                togglePopup(filterPopup);
            });

            typeIcon.addEventListener('click', function() {
                togglePopup(typePopup);
            });

            sortIcon.addEventListener('click', function() {
                togglePopup(sortPopup);
            });

            function togglePopup(popup) {
                // Check if the popup is already active
                const isActive = popup.classList.contains('active');

                // Hide all popups first
                filterPopup.classList.remove('active');
                typePopup.classList.remove('active');
                sortPopup.classList.remove('active');

                // Toggle the selected popup if it was not already active
                if (!isActive) {
                    popup.classList.add('active');
                }
            }
            // Hide popups when clicking outside
            document.addEventListener('click', function(event) {
                if (!filterPopup.contains(event.target) && !filterIcon.contains(event.target)) {
                    filterPopup.classList.remove('active');
                }
                if (!typePopup.contains(event.target) && !typeIcon.contains(event.target)) {
                    typePopup.classList.remove('active');
                }
                if (!sortPopup.contains(event.target) && !sortIcon.contains(event.target)) {
                    sortPopup.classList.remove('active');
                }
            });
        });
    </script>
@endpush