@extends('web.layouts.layout')

@section('content')

    <main>
        <!-- Start section -->
        <section class="courses_pg courses_sec bg-white section">
            <div class="container">
                <form>
                    <div class="row">
                        <div class="col-lg-3">
                            <div class="filter_box">
                                <h5 class="fw-bold mb-4 pb-2"> {{ __('main.search_filter') }} </h5>
                                <div class="search_box mb-4">
                                    <div class="form-group">
                                        <input class="form-control"
                                               name="search"
                                               value="{{ trim($request->search) }}"
                                               placeholder="{{ __('main.search') }}"/>
                                        <button class="submit_butn">
                                            <i class="fa-regular fa-magnifying-glass"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="form-group mb-4">
                                    <select name="stage_id"
                                            class="form-control form-select stage-select"
                                            data-selected-grade-id="{{ $request->grade_id }}"
                                            data-show-loading="false">
                                        <option value="" selected
                                                disabled>{{ __('courses::courses.educational_stages') }}</option>
                                        @foreach($stages as $stage)
                                            <option
                                                value="{{ $stage->id }}" @selected($stage->id == ($request->stage_id ?? request()->request_stage_id ?? ''))>
                                                {{ $stage->title }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group mb-4">
                                    <select name="grade_id"
                                            class="form-control form-select grade-select"
                                            data-selected-subject-id="{{ $request->subject_id }}"
                                            data-show-loading="false"
                                            data-title="{{ __('stages::stages.grades') }}">
                                        <option value="" selected>{{ __('stages::stages.grades') }}</option>
                                    </select>
                                </div>
                                <div class="form-group mb-4">
                                    <select name="subject_id"
                                            class="form-control form-select subject-select"
                                            data-title="{{ __('courses::courses.study_materials') }}">
                                        <option value="" selected
                                                disabled>{{ __('courses::courses.study_materials') }}</option>
                                    </select>
                                </div>
                                <div class="form-group mb-4">
                                    <select name="category_id"
                                            class="form-control form-select course-category-select"
                                            data-selected-course-type="{{ $request->course_type }}"
                                            data-show-loading="false">
                                        <option value="" selected
                                                disabled>{{ __('courses::courses.category_id') }}</option>
                                        @foreach($categories as $category)
                                            <option
                                                value="{{ $category->id }}" @selected($category->id == ($request->category_id ?? ''))>
                                                {{ $category->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group mb-4">
                                    <select name="course_type"
                                            class="form-control form-select course-type-select"
                                            data-title="{{ __('courses::courses.course_type') }}">
                                        <option value="" selected
                                                disabled>{{ __('courses::courses.course_type') }}</option>
                                    </select>
                                </div>
                                <div class="form-group mb-4">
                                    <select name="user_id"
                                            class="form-control form-select">
                                        <option value="" selected>{{ __('courses::courses.user_id') }}</option>
                                        @foreach($teachers as $teacher)
                                            <option
                                                value="{{ $teacher->id }}" @selected($teacher->id == $request->user_id)>
                                                {{ $teacher->name ?? $teacher->username ?? "" }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <button type="submit" class="butn primary_butn rounded w-100 ">
                                    <span> {{ __('main.search') }} </span>
                                </button>
                            </div>
                        </div>
                        <div class="col-lg-9">
                            <div class="col-lg-3 ms-auto mb-5">
                                <div class="form-group sort_box mb-4">
                                    <select name="sort_by" class="form-control form-select">
                                        <option value="" selected>{{ __('courses::courses.sort_by') }}</option>
                                        @foreach(config('courses.sort_by') as $sortBy)
                                            <option
                                                value="{{ $sortBy }}" @selected($sortBy == $request->sort_by)>
                                                {{ __("courses::courses.sort_by_$sortBy") }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <i class="fa-light fa-arrow-up-arrow-down"></i>
                                </div>
                            </div>

                            <div class="row">
                                @if($courses->isNotEmpty())
                                    @foreach($courses as $course)
                                        <div class="col-lg-4">
                                            @include('web.courses::_course_card')
                                        </div>
                                    @endforeach
                                @else
                                    <div class="col-lg-12">
                                        <div class="alert alert-info text-center">{{ __('general.no_results') }}</div>
                                    </div>
                                @endif
                            </div>

                            {{ $courses->links('vendor.pagination.custom2') }}

                        </div>
                    </div>
                </form>
            </div>
        </section>
    </main>

@endsection

@push('stack_scripts')
    @include('admin.subjects::_module_script')
    @include('admin.courses::_module_script')

    <script>
        $(document).ready(function () {
            $('select[name="sort_by"]').on('change', function () {
                $(this).closest('form').submit(); // Submit the closest form
            });
        });
    </script>
@endpush