@extends('frontend.layouts.master')
@section('meta_title', __('Tutors') . ' || ' . $setting->app_name)
@section('contents')
<!-- breadcrumb-area -->
<!-- <x-frontend.breadcrumb :title="__('Tutors')" :links="[['url' => route('home'), 'text' => __('Home')], ['url' => '', 'text' => __('Tutors')]]" /> -->
<!-- breadcrumb-area-end -->
<!-- instructor-area -->


<section class="breadcrumb__area breadcrumb__bg" data-background="{{ asset(Cache::get('setting')?->breadcrumb_image) }}">
    <div class="container">

        <div class="row" style="display: flex; align-items: center;">
            <div class="col-5">
                <div class="breadcrumb__content">
                    <h3 class="title">Tutors</h3>
                    <nav class="breadcrumb">

                        <span property="itemListElement" typeof="ListItem">
                            <a href="{{ route('home') }}">Home</a>
                        </span>
                        <span class="breadcrumb-separator"><i class="fas fa-angle-right"></i></span>
                        <span property="itemListElement" typeof="ListItem">
                            <a href="javascript:;">Tutors</a>
                        </span>
                    </nav>
                </div>
            </div>
            <div class="col-7 d-flex align-items-center justify-content-end">

                <div class="filter-search-form">
                    <form method="get" style="display: flex; gap: 10px; align-items: center;">
                        <!-- Dropdown: Subjects -->
                        <div class="col-md-5">
                            <select name="subject" id="subject" class="form-select">
                                <option value="">{{ __('All Select') }}</option>
                                @foreach (subjects() as $subject)
                                <option @selected(request()->get('subject') == $subject->id) value="{{ $subject->id }}">{{ $subject->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Dropdown: Segments -->
                        <div class="col-md-5">
                            <select name="segments" class="form-select" id="filterCurriculums">
                                <option value="">All Segments</option>
                                @foreach (tutorsCategories() as $tutorsCategories)
                                <option @selected(request()->get('segments') == $tutorsCategories->id) value="{{ $tutorsCategories->id }}">{{ $tutorsCategories->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Search Input -->
                        <!-- <input type="text" placeholder="Search here" name="search" class="form-control"> -->
                        <button type="submit" class="search-btn">Filter</button>
                    </form>
                </div>

            </div>
        </div>

    </div>
    <div class="breadcrumb__shape-wrap">
        <img src="{{ asset('frontend/img/others/breadcrumb_shape01.svg') }}" alt="img" class="alltuchtopdown">
        <img src="{{ asset('frontend/img/others/breadcrumb_shape02.svg') }}" alt="img" data-aos="fade-right"
            data-aos-delay="300">
        <img src="{{ asset('frontend/img/others/breadcrumb_shape03.svg') }}" alt="img" data-aos="fade-up"
            data-aos-delay="400">
        <img src="{{ asset('frontend/img/others/breadcrumb_shape04.svg') }}" alt="img" data-aos="fade-down-left"
            data-aos-delay="400">
        <img src="{{ asset('frontend/img/others/breadcrumb_shape05.svg') }}" alt="img" data-aos="fade-left"
            data-aos-delay="400">
    </div>
</section>


<section class="instructor__area">


    <div class="container">
        <div class="filter-form" style="display: none;">
            <form>
                <div class="row">
                    <!-- Dropdown: Subjects -->
                    <div class="col-md-5 mb-3">
                        <label for="filterSubjects" class="form-label">Subjects</label>
                        <select name="subject" id="subject" class="subject form-select">
                            <option value="">{{ __('Select') }}</option>
                            @foreach (subjects() as $subject)
                            <option @selected(request()->get('subject') == $subject->id) value="{{ $subject->id }}">{{ $subject->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Dropdown: Curriculums -->
                    <div class="col-md-5 mb-3">
                        <label for="filterCurriculums" class="form-label">Segments</label>
                        <select name="segments" class="form-select" id="filterCurriculums">
                            <option value="">Select Segments</option>
                            @foreach (tutorsCategories() as $tutorsCategories)
                            <option @selected(request()->get('segments') == $tutorsCategories->id) value="{{ $tutorsCategories->id }}">{{ $tutorsCategories->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 mb-3">
                        <div class="d-flex justify-content-end filter-buttons">
                            <!-- <button type="reset" class="btn btn-secondary me-2">Reset</button> -->
                            <button type="submit" class="btn btn-primary">Filter</button>
                        </div>
                    </div>
                </div>

                <div class="row" style="display: none;">
                    <!-- Dropdown: Areas -->
                    <div class="col-md-6 mb-3">
                        <label for="filterAreas" class="form-label">Areas</label>
                        <select class="form-select" id="filterAreas">
                            <option selected>Select area</option>
                            <option value="north">North</option>
                            <option value="south">South</option>
                            <option value="east">East</option>
                            <option value="west">West</option>
                            <!-- Add more options as needed -->
                        </select>
                    </div>

                    <!-- Dropdown: Segments -->
                    <div class="col-md-6 mb-3">
                        <label for="filterSegments" class="form-label">Segments</label>
                        <select class="form-select" id="filterSegments">
                            <option selected>Select segment</option>
                            <option value="primary">Primary</option>
                            <option value="secondary">Secondary</option>
                            <option value="highschool">High School</option>
                            <!-- Add more options as needed -->
                        </select>
                    </div>
                </div>


            </form>
        </div>
    </div>



    <div class="container mt-5">
        <div class="row">

            <div class="courses-top-wrap courses-top-wrap">
                <div class="row align-items-center">
                    <div class="col-md-5">
                        <div class="courses-top-left">
                            <p>{{ __('Total') }} <span class="course-count">{{ $instructors->total() }}</span> {{ __('Tutors found') }}
                            </p>
                        </div>
                    </div>
                    <div class="col-md-7">
                        <div class="d-flex justify-content-center align-items-center flex-wrap">
                            <div class="courses-top-right m-0 ms-md-auto" style="display: none;">
                                <span class="sort-by">{{ __('Sort By') }}:</span>
                                <div class="courses-top-right-select">
                                    <select name="orderby" class="orderby">
                                        <option value="desc">{{ __('Latest to Oldest') }}</option>
                                        <option value="asc">{{ __('Oldest to Latest') }}</option>
                                    </select>
                                </div>
                            </div>

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

            @foreach($instructors as $instructor)
            <div class="col-xl-4 col-sm-6">
                <div class="instructor__item">
                    <div class="instructor__thumb">
                        <a href="{{ route('instructor-details', ['id' => $instructor->id, 'slug' => Str::slug($instructor->name)]) }}"><img src="{{ asset($instructor->image) }}"
                                alt="img"></a>
                    </div>
                    <div class="instructor__content">
                        <h2 class="title"><a href="{{ route('instructor-details', ['id' => $instructor->id, 'slug' => Str::slug($instructor->name)]) }}">{{ $instructor->name }}</a></h2>
                        <span class="designation">{{ $instructor->job_title }}</span>
                        <!-- <span>{{ $instructor->courses->count() }} {{ __('Courses') }}</span> -->
                         <span>{{ @$instructor->subject->name }}</span>
                        <p class="avg-rating">
                            <i class="fas fa-star"></i>
                            {{ number_format($instructor->courses->avg('avg_rating'), 1) }} {{ __('Ratings') }}
                        </p>
                        <div class="instructor__social">
                            <ul class="list-wrap">
                                @if($instructor->facebook)
                                <li><a href="{{ $instructor->facebook }}"><i class="fab fa-facebook-f"></i></a></li>
                                @endif
                                @if($instructor->twitter)
                                <li><a href="{{ $instructor->twitter }}"><i class="fab fa-instagram"></i></a></li>
                                @endif
                                @if($instructor->linkedin)
                                <li><a href="{{ $instructor->linkedin }}"><i class="fab fa-linkedin"></i></a></li>
                                @endif
                                @if($instructor->github)
                                <li><a href="{{ $instructor->github }}"><i class="fab fa-youtube"></i></a></li>
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
            <nav class="pagination__wrap mt-25">
                {{ $instructors->links() }}
            </nav>
        </div>
    </div>
</section>
<!-- instructor-area-end -->
@endsection
@push('styles')
<style>
    .breadcrumb__bg {
        padding: 20px 0;
    }

    .courses__item {
        min-height: 388px;
        max-height: 388px;
    }

    .section-py-120 {
        padding: 60px 0;
    }

    .btn.btn-primary:hover {
        color: #ffffff;
    }
</style>
<style>
    /* Custom Styles */
    .filter-form {
        background-color: #f8f9fa;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .filter-form h2 {
        margin-bottom: 20px;
    }

    .form-label {
        font-weight: bold;
    }

    .filter-buttons {
        margin-top: 20px;
    }

    .filter-buttons button {
        min-width: 100px;
    }

    .instructor__area {
        padding: 20px 0 85px;
    }

    .filter-search-form {
        width: 100%;
    }

    .search-btn {
        font-weight: 600;
        padding: 1px 20px;
        border-radius: 3px;
        background-color: #DC6135;
        color: white;
        border: 2px solid #DC6135;
        background-image: linear-gradient(to right, #DC6135, #DC6135);
    }

    .search-btn:hover {
        background-color: #FFF;
        color: #DC6135;
        background-image: linear-gradient(to right, #FFF, #FFF);
    }
</style>
@endpush