@extends('client.raffles.layouts.app')
@section('content')
    <div class="about-banner">
    </div>

    <div class="container section course-finder">
        <div class="w-80percent mx-auto">
            <h2 class="md:text-30 text-60 text-sec text-center">Course-Finder</h2>
            <div class="title-line mx-auto"></div>

            <p class="md:text-14 text-20 text-center leading-10">With so many courses and universities to choose from,
                deciding where and what to study abroad can be a daunting task. Don't worry, we are here to guide you during
                the entire process.</p>
        </div>
        <form id="filterForm" method="GET">
            <div class="row">
                <div class=" col col-md-9 ">
                    <div class=" course-finder-top">
                        <h2 class="text-black text-center text-24 py-10">Browse Subjects</h2>
                        <input class="w-full px-10 py-10" type="text" name="" id=""
                            value="{{ request('search') }}" placeholder="Search Your Favourite Subjects" autocomplete="off">
                        <button type="submit" class="bg-transparent border-0"><i
                                class="lqd-icn-ess icon-ld-search-2 text-24 font-bold"></i></button>
                    </div>
                </div>
            </div>


            <div class="py-20 ">
                <div class="row">
                    <div class="col col-md-9">
                        <div class="course-finder-form">
                            <h2 class="text-22 text-center text-sec font-bold">Browse Through Category</h2>
                            <div class="row">
                                <div class="col col-sm-6 col-md-4">
                                    <select class="w-full py-10 px-5 text-14" name="country_id"
                                        value="{{ request('country_id') }}">
                                        <option value="" selected hidden>Choose Country</option>
                                        @foreach ($countryOptions as $key => $value)
                                            <option value="{{ $key }}" @selected(request('country_id') == $key)>
                                                {{ $value }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col col-sm-6 col-md-4">
                                    <select class=" w-full py-10 px-5 text-14" name="" id="institutionDropdown"
                                        name="institution_id">
                                        <option value="" selected>Choose Institution</option>
                                        @foreach ($institutionOptions as $key => $Institution)
                                            <option value="{{ $key }}" @selected(request('institution_id') == $key)>
                                                {{ $Institution }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col col-sm-6 col-md-4">
                                    <select class=" w-full py-10 px-5 text-14" name="programlevel_id"
                                        value="{{ request('institution_id') }}">
                                        <option value="" selected hidden>Choose Level</option>
                                        @foreach ($programLevelOptions as $key => $Level)
                                            <option value="{{ $key }}" @selected(request('programlevel_id') == $key)>
                                                {{ $Level }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col col-sm-6 col-md-4">
                                    <select class=" w-full py-10 px-5 text-14" name="intake_id"
                                        value="{{ request('intake_id') }}">
                                        <option value="" selected hidden>Choose Intake</option>
                                        @foreach ($intakeOptions as $key => $Intake)
                                            <option value="{{ $key }}" @selected(request('intake_id') == $key)>
                                                {{ $Intake }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col col-sm-6 col-md-4">
                                    <select class=" w-full py-10 px-5 text-14" name="test_id"
                                        value="{{ request('test_id') }}">
                                        <option value="" selected hidden>Choose Class</option>
                                        @foreach ($testOptions as $key => $Test)
                                            <option value="{{ $key }}" @selected(request('test_id') == $key)>
                                                {{ $Test }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col col-sm-6 col-md-4">
                                    <div class="flex gap-10 items-center flex-wrp">
                                        <input class="text-14 px-5 py-10 w-50percent" type="text" name="min_score"
                                            placeholder="Min score" value="{{ request('min_score') }}">
                                        <input class="text-14 px-5 py-10 w-50percent" type="text" placeholder="Max Score"
                                            value="{{ request('max_score') }}">
                                    </div>
                                </div>

                                <div class="col col-sm-12">
                                    <div class="flex gap-20 justify-center items-center">
                                        <button type="submit"
                                            class="text-14 px-20 py-10 rounded-10 bg-sec text-white border-0">Submit</button>
                                        <a href="javascript:void(0)" onclick="resetForm()"><button
                                                class="text-14 px-20 py-10 rounded-10 bg-brand text-white border-0">Reset</button></a>
                                    </div>
                                </div>
                            </div>
                        </div>

        </form>

        <div class="py-20">
            {{-- <div class="course-finder-box">
                <div class="row">
                    <div class="col col-md-2">
                        <div class="sm:w-50percent  w-full h-70">
                            <img class="w-full h-full" src="assets/images/general/university.jpg" alt="">

                        </div>


                    </div>
                    <div class="col col-md-7">
                        <div class="flex flex-col gap-5">
                            <h3 class="text-20 font-medium">(STEM) Bachelor of Architecture (BArch)</h3>
                            <h5 class="text-16 font-lighter">Marywood University <span class="text-brand">(USA)</span></h5>
                            <div class="flex gap-10 items-center">
                                <h6 class="text-grey font-medium text-14"><span class="font-bold">Code:</span>
                                    BArch</h6>
                                <h6 class="text-grey font-medium text-14"><span class="font-bold">Fee:</span>
                                    $41,3700 per year</h6>
                                <h6 class="text-grey font-medium text-14"><span class="font-bold">Schlorship:</span> Upto
                                    $23,000</h6>
                            </div>
                            <div class="flex gap-10 items-center">
                                <h6 class="text-grey font-medium text-14"><span class="font-bold">Level:</span>
                                    Bachelor</h6>
                                <h6 class="text-grey font-medium text-14"><span class="font-bold">Duration:</span> N/A
                                </h6>

                            </div>

                        </div>

                    </div>
                    <div class="col col-md-3">
                        <div class="flex flex-col gap-10 ">
                            <h6 class="text-black text-16 font-medium"><span class="font-bold">IELTS:</span>
                                5.5(5.5)</h6>
                            <h6 class="text-gray text-16 font-medium"><span class="font-bold">PTE:</span>
                                48(48)</h6>
                            <h6 class="text-gray text-16 font-medium"><span class="font-bold">Duolingo:</span>
                                90 Overall</h6>

                        </div>

                    </div>
                </div>

                <div class="row">
                    <div class="col col-12">
                        <div class="flex items-center gap-10">
                            <h6 class="text-16">Intake:</h6>
                            <h6 class="bg-sec text-14 text-white px-5 py-5 rounded-10 font-bold">January
                            </h6>
                            <h6 class="bg-sec text-14 text-white px-5 py-5 rounded-10 font-bold">January
                            </h6>

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

            </div>
            <div class="course-finder-box">
                <div class="row">
                    <div class="col col-md-2">
                        <div class="sm:w-50percent  w-full h-70">
                            <img class="w-full h-full" src="assets/images/general/university.jpg" alt="">

                        </div>


                    </div>
                    <div class="col col-md-7">
                        <div class="flex flex-col gap-5">
                            <h3 class="text-20 font-medium">(STEM) Bachelor of Architecture (BArch)</h3>
                            <h5 class="text-16 font-lighter">Marywood University <span class="text-brand">(USA)</span>
                            </h5>
                            <div class="flex gap-10 items-center">
                                <h6 class="text-grey font-medium text-14"><span class="font-bold">Code:</span>
                                    BArch</h6>
                                <h6 class="text-grey font-medium text-14"><span class="font-bold">Fee:</span>
                                    $41,3700 per year</h6>
                                <h6 class="text-grey font-medium text-14"><span class="font-bold">Schlorship:</span> Upto
                                    $23,000</h6>
                            </div>
                            <div class="flex gap-10 items-center">
                                <h6 class="text-grey font-medium text-14"><span class="font-bold">Level:</span> Bachelor
                                </h6>
                                <h6 class="text-grey font-medium text-14"><span class="font-bold">Duration:</span> N/A
                                </h6>

                            </div>

                        </div>
                    </div>
                    <div class="col col-md-3">
                        <div class="flex flex-col gap-10 ">
                            <h6 class="text-black text-16 font-medium"><span class="font-bold">IELTS:</span>
                                5.5(5.5)</h6>
                            <h6 class="text-gray text-16 font-medium"><span class="font-bold">PTE:</span>
                                48(48)</h6>
                            <h6 class="text-gray text-16 font-medium"><span class="font-bold">Duolingo:</span>
                                90 Overall</h6>

                        </div>

                    </div>
                </div>
                <div class="row">
                    <div class="col col-12">
                        <div class="flex items-center gap-10">
                            <h6 class="text-16">Intake:</h6>
                            <h6 class="bg-sec text-14 text-white px-5 py-5 rounded-10 font-bold">January
                            </h6>
                            <h6 class="bg-sec text-14 text-white px-5 py-5 rounded-10 font-bold">January
                            </h6>

                        </div>
                    </div>
                </div>
            </div>
            <div class="course-finder-box">
                <div class="row">
                    <div class="col col-md-2">
                        <div class="sm:w-50percent  w-full h-70">
                            <img class="w-full h-full" src="assets/images/general/university.jpg" alt="">
                        </div>
                    </div>
                    <div class="col col-md-7">
                        <div class="flex flex-col gap-5">
                            <h3 class="text-20 font-medium">(STEM) Bachelor of Architecture (BArch)</h3>
                            <h5 class="text-16 font-lighter">Marywood University <span class="text-brand">(USA)</span>
                            </h5>
                            <div class="flex gap-10 items-center">
                                <h6 class="text-grey font-medium text-14"><span class="font-bold">Code:</span>
                                    BArch</h6>
                                <h6 class="text-grey font-medium text-14"><span class="font-bold">Fee:</span>
                                    $41,3700 per year</h6>
                                <h6 class="text-grey font-medium text-14"><span class="font-bold">Schlorship:</span> Upto
                                    $23,000</h6>
                            </div>
                            <div class="flex gap-10 items-center">
                                <h6 class="text-grey font-medium text-14"><span class="font-bold">Level:</span> Bachelor
                                </h6>
                                <h6 class="text-grey font-medium text-14"><span class="font-bold">Duration:</span> N/A
                                </h6>
                            </div>
                        </div>
                    </div>
                    <div class="col col-md-3">
                        <div class="flex flex-col gap-10 ">
                            <h6 class="text-black text-16 font-medium"><span class="font-bold">IELTS:</span>
                                5.5(5.5)</h6>
                            <h6 class="text-gray text-16 font-medium"><span class="font-bold">PTE:</span>
                                48(48)</h6>
                            <h6 class="text-gray text-16 font-medium"><span class="font-bold">Duolingo:</span>
                                90 Overall</h6>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col col-12">
                        <div class="flex items-center gap-10">
                            <h6 class="text-16">Intake:</h6>
                            <h6 class="bg-sec text-14 text-white px-5 py-5 rounded-10 font-bold">January
                            </h6>
                            <h6 class="bg-sec text-14 text-white px-5 py-5 rounded-10 font-bold">January
                            </h6>
                        </div>
                    </div>
                </div>
            </div> --}}
            <div class="text-center">
                <p class="text-danger">No Course Found !!!</p>
            </div>
        </div>
    </div>
    <div class="col col-md-3">
        <div class=" sticky top-60 " data-custom-animations="true"
            data-ca-options='{"animationTarget": ".btn, h2", "ease": "power4.out", "initValues":{"x": "-10px", "y": "10px", "opacity":0} , "animations":{"x": "0px", "y": "0px", "opacity":1}}'>
            <div
                class="module-title flex flex-col h-full relative bg-size bg-no-repeat bg-center-right transition-all pt-30 pb-30 px-20 sm:mr-0  rounded-10">

                <div class="d-flex justify-center pb-10">
                    <h2 class="ld-fh-element mb-0/2em inline-block relative leading-45 -mt-0/2em text-sec text-20">
                        Get Your Free Counselling!
                    </h2>
                </div>

                <form action="{{ route('enquiry.store') }}" method="post" id="contact-form">
                    @csrf
                    <input class="w-full mb-30 rounded-6 py-15 text-14 px-10 bg-light-blue border-light-grey" type="text"
                        name="name" id="" placeholder="Full Name">
                    <input class="w-full mb-30 rounded-6 py-15 text-14 px-10 bg-light-blue border-light-grey" type="text"
                        name="phone" id="" placeholder="Phone">
                    <input class="w-full mb-30 rounded-6 py-15 text-14 px-10 bg-light-blue border-light-grey"
                        type="email" name="email" id="" placeholder="Email">
                    <textarea class="w-full mb-20 rounded-6 py-15 text-14 px-10 bg-light-blue border-light-grey" name="subject"
                        id="" placeholder="Message"></textarea>
                    <button type="submit" id="submit-btn"
                        class="px-20 py-10 bg-sec text-white rounded-30 text-14 border-0 button-hover">Submit</button>
                </form>
            </div>
        </div>
    </div>
    </div>
    </div>
    <!-- next row for b  -->
    <!-- form starts -->
    </div>
@endsection