@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>


        {{ html()->form('GET')->route('program.coursefinder')->class(['filter-course-form'])->attributes(['id' => 'filter-course-form'])->open() }}
        <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>
                    {{ html()->text('search')->placeholder('Search Program...')->class('form-control px-10 py-10')->style('width: 95%;') }}
                    <button 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">
                                {{ html()->select('country_id', $countryOptions)->value(request('country_id'))->placeholder('Select Country')->class('form-select choices-select countryDropdown w-full py-10 px-5 text-14') }}
                            </div>

                            <div class="col col-sm-6 col-md-4">
                                {{ html()->select('institution_id', $institutionOptions)->value(request('institution_id'))->placeholder('Select Institution')->class('form-select institutionDropdown  w-full  py-10 px-5 text-14') }}
                            </div>

                            <div class="col col-sm-6 col-md-4">
                                {{ html()->select('programlevel_id', $programLevelOptions)->value(request('programlevel_id'))->placeholder('Select Program Level')->class('form-select choices-select  w-full  py-10 px-5 text-14') }}
                            </div>

                            <div class="col col-sm-6 col-md-4">
                                {{ html()->select('intake_id', $intakeOptions)->value(request('intake_id'))->placeholder('Select Intake')->class('form-select choices-select  w-full  py-10 px-5 text-14') }}
                            </div>

                            @php
                                $statusList = config('constants.page_status_options');
                                $hasClass = false;
                                $hasStatus = false;

                                if (request()->has('class_id')) {
                                    $hasClass = true;
                                }

                                if (request()->has('status')) {
                                    $hasStatus = true;
                                }

                            @endphp

                            <div class="col col-sm-6 col-md-4">
                                {{ html()->select('test_id', $testOptions)->value(request('test_id'))->placeholder('Test Proficiency')->class('form-select choices-select w-full  py-10 px-5 text-14') }}
                            </div>

                            <div class="col col-sm-6 col-md-4">
                                <div class="flex gap-10 items-center flex-wrp">
                                    {{ html()->text('min_score')->class('form-control form-control-sm numeric bg-light text-14 px-5 py-10 w-50percent')->placeholder('Min score') }}

                                    {{ html()->text('max_score')->class('form-control form-control-sm numeric bg-light text-14 px-5 py-10 w-50percent')->placeholder('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-course-filter">Reset</button></a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <div class="data-wrapper py-20" id="data-wrapper">
                                @forelse ($programs as $item)
                                    <h2 class="text-22 text-center text-sec font-bold">Available Courses</h2>
                                    <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="{{ $item->institution?->image }}"
                                                        alt="">
                                                </div>
                                            </div>

                                            <div class="col col-md-7">
                                                <div class="flex flex-col gap-5">
                                                    <a href="{{ route('coursefinder.single', $item->id) }}">
                                                    <h3 class="text-20 font-medium">{{ $item->title }}</h3></a>
                                                    <h5 class="text-16 font-lighter">{{ $item->institution?->title }} <span
                                                            class="text-brand">{{ $item->institution?->country?->title }}</span>
                                                    </h5>
                                                    <div class="flex gap-10 items-center">
                                                        <h6 class="text-grey font-medium text-14"><span
                                                                class="font-bold">Code:</span>
                                                            {{ !empty($item->code) ? $item->code : 'N/A' }}</h6>
                                                        <h6 class="text-grey font-medium text-14"><span
                                                                class="font-bold">Fee:</span>
                                                            {{ !empty($item->fee) ? $item->fee : 'N/A' }}</h6>
                                                        <h6 class="text-grey font-medium text-14"><span
                                                                class="font-bold">Schlorship:</span>
                                                            {{ !empty($item->scholarship) ? $item->scholarship : 'N/A' }}
                                                        </h6>
                                                    </div>

                                                    <div class="flex gap-10 items-center">
                                                        <h6 class="text-grey font-medium text-14"><span
                                                                class="font-bold">Level:</span>
                                                            {{ !empty($item->programlevel?->title) ? $item->programlevel?->title : 'N/A' }}
                                                        </h6>
                                                        <h6 class="text-grey font-medium text-14"><span
                                                                class="font-bold">Duration:</span>
                                                            {{ !empty($item->year) ? $item->year : 'N/A' }}</h6>
                                                        </h6>
                                                        <h6 class="text-grey font-medium text-14"><span
                                                                class="font-bold">PSW:</span>
                                                            {{ !empty($item->psw) ? $item->psw : 'N/A' }}</h6>
                                                        </h6>
                                                    </div>

                                                </div>

                                            </div>
                                            <div class="col col-md-3">
                                                <div class="flex flex-col gap-10 ">
                                                    @foreach ($item->tests as $index => $test)
                                                        <h6 class="text-black text-16 font-medium"><span
                                                                class="font-bold">{{ $test->title }}:</span>
                                                            {{ $test->pivot?->min_score }}
                                                            ({{ $test->pivot?->band_score }})
                                                        </h6>
                                                    @endforeach
                                                </div>

                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col col-12">
                                                <div class="flex items-center gap-10">
                                                    @if (!empty($item->intakes))
                                                        <h6 class="text-16">Intake:</h6>
                                                        @forelse ($item->intakes as $value)
                                                            <h6
                                                                class="bg-sec text-14 text-white px-5 py-5 rounded-10 font-bold">
                                                                {{ $intakeOptions[$value] }}</h6>
                                                            </h6>
                                                        @empty
                                                            <span class="fs-13 text-muted mb-0 text-center"><span
                                                                    class="badge bg-danger p-2">N/A</span></span>
                                                        @endforelse
                                                    @endif
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                @empty
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="data-wrapper py-20" id="data-wrapper">
                                                <div class="text-center">
                                                    <h2 class="text-danger">No Course Found !!!</h2>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforelse
                                {{ $programs->links() }}
                            </div>
                            <div class="auto-load text-center" style="display: none;">
                                <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg"
                                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="60"
                                    viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
                                    <path fill="#000"
                                        d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
                                        <animateTransform attributeName="transform" attributeType="XML" type="rotate"
                                            dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite" />
                                    </path>
                                </svg>
                            </div>
                        </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>
        {{ html()->form()->close() }}

        <!-- next row for b  -->
        <!-- form starts -->
    </div>
@endsection