@extends('main-site.partials.app')
@section('styles')
    <style>
        .select2-container .select2-selection--single {
            height: 41px !important;
            padding: 5px;
        }
    </style>
@endsection
@section('title', __('Courses'))

@section('content')

    <!-- Page Banner -->
    <div class="page-banner" style="background-image: url(main-site/assets/img/blog-banner.jpg);">
        <div class="container position-relative">
            <div class="banner-content">
                <h1 class="page-banner-title">
                    {{ __('website_301.courses.DiscoverProfile') }}
                    <br>
                    {{ __('website_301.courses.GetNeededInformation') }}
                </h1>
                <p class="banner-desc mb-0">
                    {{ __('website_301.courses.DiscoverProfile2') }}

                </p>
            </div>
        </div>
    </div>

    <!-- courses section -->
    <div class="courses-section sec-padding bg-grey wow fadeInUp">
        <div class="container">

            <!-- filter -->
            <form class="courses-filter main-form mb-45" action="{{ route('courses') }}" method="GET">
                <div class="text-center mb-45">
                    <h4 class="dark-color fw-600 mb-2">{{ __('website_301.courses.InformationSearch') }}
                    </h4>
                    <p class="small-text opacity-70 dark-color mb-0">{{ __('website_301.courses.AfterLogin') }}</p>
                </div>
                <div class="filter-wrapper d-flex align-items-end flex-wrap gap-3">
                    {{-- <div class="form-group" style="p-3">
						<label class="form-label dark-color mb-3 fw-600 p-3">الصف</label>
						<select class="form-select">
							<option selected>السابع</option>
							<option value="1">One</option>
						</select>
					</div> --}}
                    <div class="form-group">
                        <label class="form-label dark-color mb-3 fw-600">{{ __('messages_301.Academic Year') }}</label>
                        <select class="form-select" name="academic_year_id" id="academic_year_id">
                            <option value="" selected disabled>{{ __('messages_301.Select Academic Year') }}</option>
                            @foreach ($academicYears as $academicYear)
                                <option value="{{ $academicYear->id }}"
                                    {{ request('academic_year_id') == $academicYear->id ? 'selected' : '' }}>
                                    {{ $academicYear->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label dark-color mb-3 fw-600">{{ __('messages_301.Academic Term') }}</label>
                        <select class="form-select" name="academic_term_id" id="academic_term_id">
                            <option value="" selected disabled>{{ __('messages_301.Select Academic Term') }}</option>
                            @foreach ($academicTerms as $academicTerm)
                                <option value="{{ $academicTerm->id }}"
                                    {{ request('academic_term_id') == $academicTerm->id ? 'selected' : '' }}>
                                    {{ $academicTerm->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label dark-color mb-3 fw-600">{{ __('messages_301.Subject') }}</label>
                        <select class="form-select" name="subject_id" id="subject_id">
                            <option value="" selected disabled>{{ __('messages_301.Select Subject') }}</option>
                            @foreach ($subjects as $subject)
                                <option value="{{ $subject->id }}"
                                    {{ request('subject_id') == $subject->id ? 'selected' : '' }}>{{ $subject->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <button type="submit" class="main-btn">{{ __("messages_301.Show") }}</button>
                </div>
            </form>

            <div class="row">
                @forelse($courses as $course)
                    @include('main-site.partials.course', ['course', $course])

                @empty
                    <!-- empty-msg -->
                    <div class="empty-msg mt-5">
                        <div class="row justify-content-center text-center">
                            <div class="col-lg-6 col-10">
                                <p class="dark-color opacity-70">
                                    @include('main-site.partials.empty_data', [
                                        'message' => __("website_301.course.NoCourses"),
                                    ])
                                </p>
                            </div>
                        </div>
                    </div>
                @endforelse
            </div>

            <!-- pagination -->
            <div class="pagination justify-content-center mt-5">
                {{ $courses->appends(Request::except(['_token']))->links('main-site.partials.custom-pagination') }}
            </div>
        </div>
    </div>

@endsection