@push('styles_top')
    <style>
        #topFilters {
            background-color: var(--bs-body-bg);
        }

        .side-menu {
    height: calc(100vh - 65px);
    will-change: opacity;
    transition: opacity 0.3s ease;
    
    position: absolute;
    left: 0;
    width: 300px;
    padding: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    border-right: 1px solid #d1d5db;
    background-color: var(--bs-body-bg);
    z-index: 1;
    
    /* Initial hidden state */
    opacity: 0;
    pointer-events: none;
}

.side-menu.show {
    opacity: 1;
    pointer-events: auto;
}

.side-menu.hide {
    opacity: 0;
    pointer-events: none;
}
    </style>
@endpush

<div class="side-menu hide d-none d-md-block">
    <form id="filtersForm" class="w-100" onsubmit="return false;">
        <div id="topFilters" class="w-100">
            <div class="d-flex flex-wrap align-items-center mb-1 text-center">
                <span class="w-100 fw-bold fs-lg">{{ trans('panel.filters') }}</span>
            </div>
            <div class="d-flex flex-wrap align-items-center mb-1">
                <div class="w-100 d-flex align-items-center space-x-2 mb-1 mt-3">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="upcoming" name="upcoming">
                        <label class="form-check-label text-gray-700"
                            for="upcoming">{{ trans('panel.upcoming') }}</label>
                    </div>
                </div>

                <div class="w-100 d-flex align-items-center space-x-2 mb-1">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="free" name="free">
                        <label class="form-check-label text-gray-700" for="free">{{ trans('public.free') }}</label>
                    </div>
                </div>

                <div class="w-100 d-flex align-items-center space-x-2 mb-1">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="discount" name="discount">
                        <label class="form-check-label text-gray-700"
                            for="discount">{{ trans('public.discount') }}</label>
                    </div>
                </div>

                <div class="w-100 d-flex align-items-center space-x-2 mb-1">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="download" name="downloadable">
                        <label class="form-check-label text-gray-700"
                            for="download">{{ trans('home.download') }}</label>
                    </div>
                </div>

                <div class="w-100 mb-4">
                    <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>

                <div class="w-100 mb-4">
                    <h4 class="font-14 text-gray font-weight-500 mb-2">{{ trans('public.type') }}</h4>
                    @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 text-gray-700" for="filterType{{ $typeOption }}">
                                @if ($typeOption == 'bundle')
                                    {{ trans('update.bundle') }}
                                @else
                                    {{ trans('webinars.' . $typeOption) }}
                                @endif
                            </label>
                        </div>
                    @endforeach
                </div>

                <div class="w-100 mb-4">
                    <h4 class="font-14 text-gray font-weight-500 mb-2">{{ trans('site.more_options') }}</h4>
                    @foreach (['subscribe', 'certificate_included', 'with_quiz', 'featured'] as $moreOption)
                        <div class="form-check form-switch mb-2">
                            <input class="form-check-input" type="checkbox" id="filterOption{{ $moreOption }}"
                                name="moreOptions[]" value="{{ $moreOption }}">
                            <label class="form-check-label text-gray-700" for="filterOption{{ $moreOption }}">
                                {{ trans('webinars.show_only_' . $moreOption) }}
                            </label>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </form>
</div>