@extends('site.layouts.layout')

@section('title', 'Find A Tutor')

@section('content')

    {{-- @include('site.components.blogspageSec') --}}

    <section class="w-full md:py-16 py-6 bg-white blog-page-sec">
        <div class="max-w-[1700px] mx-auto px-4 2xl:px-0">

            <!-- SEARCH + FILTER -->
            <div class="grid grid-cols-1 lg:grid-cols-12  lg:gap-6   xl:gap-10">

                <!-- SEARCH -->
                <div class="xl:col-span-6 sm:col-span-5 col-span-12 lg:mb-0 mb-5">
                    <div class="gap-4 items-center lg:mb-8 w-full search border-2 border-[#DBDBDB] rounded-full">
                        <div class="flex  flex-row w-full">
                            <input type="text" placeholder="What are you looking for?"
                                class="w-full sm:p-5 md:text-start text-center   p-4 pl-5 sm:pl-17 focus:outline-none fo-xb text-[16px]"
                                id="searchInput" />
                            <button id="searchButton"
                                class="cursor-pointer md:block hidden  fo-xb text-[16px] sm:w-70 w-28 m-1 bg-yellow-400 hover:bg-yellow-500 px-6 rounded-full font-semibold">
                                Search
                            </button>
                            <button
                                class="cursor-pointer fo-xb md:hidden block text-[16px] sm:w-70 w-14 m-1 bg-yellow-400 hover:bg-yellow-500 px-2 rounded-full font-semibold">
                                <i class="fa-solid fa-magnifying-glass"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- FILTERS -->
                <div class="sm:col-span-7 xl:col-span-6 ">
                    <div class="flex flex-col lg:flex-row gap-4">

                        <!-- Category Dropdown -->
                        <div class="relative w-full">
                            <select
                                class="fo-xb text-[16px] text-[#585858] w-full rounded-full bg-[#F8F8F8] p-5 pr-12 focus:outline-none appearance-none"
                                id="subjects">
                                <option value="">Select Subject</option>
                                @foreach ($subjects as $subject)
                                    <option value="{{ $subject->id }}"> {{ $subject->subject_name }} </option>
                                @endforeach
                            </select>

                            <img src="{{ asset('site/Sites/images/arrow-down.png') }}" alt="arrow"
                                class="pointer-events-none absolute right-5 top-1/2 -translate-y-1/2 w-2 h-2">
                        </div>

                        <!-- Price Dropdown -->
                        <div class="relative w-full">
                            <select
                                class="fo-xb text-[16px] text-[#585858] w-full rounded-full bg-[#F8F8F8] p-5 pr-12 focus:outline-none appearance-none"
                                id="sortBy">
                                <option value="">Sort By</option>
                                <option value="price_ltoh">Price Low to High</option>
                                <option value="price_htol">Price High to Low</option>
                                <option value="top_rating">Top Rated</option>

                            </select>

                            <img src="{{ asset('site/Sites/images/arrow-down.png') }}" alt="arrow"
                                class="pointer-events-none absolute right-5 top-1/2 -translate-y-1/2 w-2 h-2">
                        </div>

                        <!-- Filter Button -->
                        <button command="show-modal" commandfor="filterpop"
                            class="fo-xb text-[16px] cursor-pointer md:w-100 w-full flex justify-center items-center gap-2 bg-teal-400 hover:bg-teal-500 text-black p-5 rounded-full font-semibold">
                            <img src="{{ asset('site/Sites/images/filter-icon.png') }}"> Filters
                        </button>

                    </div>

                </div>

            </div>

            <!-- CARDS -->
            <div class="max-w-[1700px] mx-auto pt-10" id="tutor-cards">

            </div>

        </div>
    </section>


    <el-dialog>
        <dialog id="filterpop" aria-labelledby="dialog-title"
            class="fixed modalShadow inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent">

            <el-dialog-backdrop
                class="fixed inset-0 bg-gray-900/80 opacity-50 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in">
            </el-dialog-backdrop>

            <div tabindex="0"
                class="m-auto flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0">

                <el-dialog-panel
                    class="m-auto relative transform overflow-hidden rounded-sm bg-gray-800 text-left shadow-xl outline -outline-offset-1 outline-white/10 transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-[585px] data-closed:sm:translate-y-0 data-closed:sm:scale-95">

                    <div class="form bg-[#FFFFFF] px-4 pt-5 pb-4 sm:p-8 sm:pb-4">

                        <div class="flex justify-between sm:items-start">
                            <h1 class="text-[#181D27] fo-m sm:text-[26px] text-lg">Filters</h1>

                            <button command="close" commandfor="filterpop" class="cursor-pointer">
                                <img src="{{ asset('site/Sites/images/cros-icon.png') }}" />
                            </button>
                        </div>

                        <!-- Hourly Rate -->
                        <div class="mt-3">
                            <p class="fo-m text-lg text-[#414651] font-medium">Hourly Rate</p>
                            <div class="relative flex gap-5 w-full mt-3">
                                <div class="field w-full">
                                    <input id="price_from" type="number" placeholder="From"
                                        class="w-full text-[#717680] fo-n text-[17px] border-[#D5D7DA] border-[1.29px] sm:p-5 p-3 rounded-[10px] bg-white">
                                </div>
                                <div class="field w-full">
                                    <input id="price_to" type="number" placeholder="To"
                                        class="w-full text-[#717680] fo-n text-[17px] border-[#D5D7DA] border-[1.29px] sm:p-5 p-3 rounded-[10px] bg-white">
                                </div>
                            </div>
                        </div>

                        <!-- Available Days -->
                        <div class="mt-5 days">
                            <p class="fo-m text-lg text-[#414651] font-medium">Available Days</p>
                            <div class="relative flex gap-5 w-full mt-3">
                                <div class="checkbox flex flex-wrap gap-5">

                                    <div class="box">
                                        <input type="checkbox" id="day_monday" class="day-filter" value="Monday">
                                        <label for="day_monday"
                                            class="text-[#1D1D1D] fo-m sm:text-[15px] text-[12px]">Monday</label>
                                    </div>

                                    <div class="box">
                                        <input type="checkbox" id="day_tuesday" class="day-filter" value="Tuesday">
                                        <label for="day_tuesday"
                                            class="text-[#1D1D1D] fo-m sm:text-[15px] text-[12px]">Tuesday</label>
                                    </div>

                                    <div class="box">
                                        <input type="checkbox" id="day_wednesday" class="day-filter" value="Wednesday">
                                        <label for="day_wednesday"
                                            class="text-[#1D1D1D] fo-m sm:text-[15px] text-[12px]">Wednesday</label>
                                    </div>

                                    <div class="box">
                                        <input type="checkbox" id="day_thursday" class="day-filter" value="Thursday">
                                        <label for="day_thursday"
                                            class="text-[#1D1D1D] fo-m sm:text-[15px] text-[12px]">Thursday</label>
                                    </div>

                                    <div class="box">
                                        <input type="checkbox" id="day_friday" class="day-filter" value="Friday">
                                        <label for="day_friday"
                                            class="text-[#1D1D1D] fo-m sm:text-[15px] text-[12px]">Friday</label>
                                    </div>

                                    <div class="box">
                                        <input type="checkbox" id="day_saturday" class="day-filter" value="Saturday">
                                        <label for="day_saturday"
                                            class="text-[#1D1D1D] fo-m sm:text-[15px] text-[12px]">Saturday</label>
                                    </div>

                                    <div class="box">
                                        <input type="checkbox" id="day_sunday" class="day-filter" value="Sunday">
                                        <label for="day_sunday"
                                            class="text-[#1D1D1D] fo-m sm:text-[15px] text-[12px]">Sunday</label>
                                    </div>

                                </div>

                            </div>
                        </div>

                        <!-- Timing -->
                        <div class="mt-5 days">
                            <p class="fo-m text-lg text-[#414651] font-medium">Timing</p>
                            <div class="relative flex gap-5 w-full mt-3">
                                <div class="checkbox flex flex-wrap gap-5">

                                    <div class="box">
                                        <input type="checkbox" class="time-filter" value="pre_12">
                                        <label class="text-[#1D1D1D] fo-m sm:text-[15px] text-[12px]">Pre 12 PM</label>
                                    </div>

                                    <div class="box">
                                        <input type="checkbox" class="time-filter" value="12_5">
                                        <label class="text-[#1D1D1D] fo-m sm:text-[15px] text-[12px]">12PM - 5PM</label>
                                    </div>

                                    <div class="box">
                                        <input type="checkbox" class="time-filter" value="after_5">
                                        <label class="text-[#1D1D1D] fo-m sm:text-[15px] text-[12px]">After 5 PM</label>
                                    </div>

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

                        <!-- Rating -->
                        <div class="mt-5">
                            <p class="fo-m text-lg text-[#414651] font-medium">Rating</p>
                            <div class="relative w-full mt-3">
                                <select id="rating"
                                    class="w-full appearance-none text-[#717680] fo-n text-[17px] border-[#D5D7DA] border-[1.29px] sm:p-5 p-3 pr-10 rounded-[10px] bg-white">
                                    <option value="">Select Rating</option>
                                    <option value="5">5.0/5.0</option>
                                    <option value="4">4.0+</option>
                                    <option value="3">3.0+</option>
                                </select>

                                <img src="{{ asset('site/Sites/images/arrow-down.png') }}"
                                    class="pointer-events-none absolute right-4 top-1/2 -translate-y-1/2" />
                            </div>
                        </div>

                        <!-- Level -->
                        <div class="mt-3">
                            <p class="fo-m text-lg text-[#414651] font-medium">Level of Teaching</p>
                            <div class="relative w-full mt-3">
                                <select id="level"
                                    class="w-full appearance-none text-[#717680] fo-n text-[17px] border-[#D5D7DA] border-[1.29px] sm:p-5 p-3 pr-10 rounded-[10px] bg-white">
                                    <option value="">Select Level</option>
                                    @foreach ($levels as $level)
                                        <option value="{{$level->id}}">{{ $level->level_name }}</option>
                                    @endforeach
                                </select>

                                <img src="{{ asset('site/Sites/images/arrow-down.png') }}"
                                    class="pointer-events-none absolute right-4 top-1/2 -translate-y-1/2" />
                            </div>
                        </div>

                        <!-- Apply -->
                        <div class="mt-3">
                            <button type="button"
                                class="apply-filters bg-[#1CD8C4] cursor-pointer px-3 border-[#1CD8C4] border rounded-[10px] font-semibold w-full sm:py-4 py-3 text-[#FFFFFF] fm-xb mt-3 sm:text-[19px] text-sm">
                                Apply Filters
                            </button>
                        </div>

                    </div>
                </el-dialog-panel>
            </div>
        </dialog>
    </el-dialog>




    @push('script')
        <script>
            $(function() {

                // function fetchTutors(page = 1) {
                //     $.ajax({
                //         url: "{{ route('tutors.fetch') }}",
                //         data: {
                //             search: $('#searchInput').val(),
                //             subject: $('#subjects').val(),
                //             sortBy: $('#sortBy').val(),

                //             page: page
                //         },
                //         success: function(html) {
                //             $('#tutor-cards').html(html);
                //         }
                //     });
                // }

                function fetchTutors(page = 1) {

                    let days = [];
                    $('.day-filter:checked').each(function() {
                        days.push($(this).val());
                    });

                    let times = [];
                    $('.time-filter:checked').each(function() {
                        times.push($(this).val());
                    });

                    $.ajax({
                        url: "{{ route('tutors.fetch') }}",
                        data: {
                            search: $('#searchInput').val(),
                            subject: $('#subjects').val(),
                            sortBy: $('#sortBy').val(),

                            price_from: $('#price_from').val(),
                            price_to: $('#price_to').val(),
                            days: days,
                            times: times,
                            rating: $('#rating').val(),
                            level: $('#level').val(),

                            page: page
                        },
                        success: function(html) {
                            $('#tutor-cards').html(html);
                        }
                    });
                }


                fetchTutors();

                $('#searchButton, #subjects , #sortBy').on('click change change', function() {
                    fetchTutors();
                });

                // ✅ IMPORTANT FIX HERE
                $(document).on('click', '.pagination a', function(e) {
                    e.preventDefault();
                    fetchTutors($(this).data('page'));
                });

                $('.apply-filters').on('click', function() {
                    fetchTutors();
                });
                $('.checkbox .box').on('click', function(e) {
                    // Prevent double toggle if label/input is clicked
                    if ($(e.target).is('input') || $(e.target).is('label')) return;

                    const checkbox = $(this).find('input[type="checkbox"]');
                    checkbox.prop('checked', !checkbox.prop('checked'));
                });

                // Optional: log checked days for debugging
                $('.day-filter').on('change', function() {
                    const selectedDays = $('.day-filter:checked').map(function() {
                        return this.value;
                    }).get();
                    console.log('Selected Days:', selectedDays);
                });
            });
        </script>
    @endpush
@endsection
