@extends('ved.layout.layout')

@push('css')
    <link href="{{ asset('assets/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/css/app.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/css/icons.min.css') }}" rel="stylesheet" type="text/css" />
@endpush

@section('content')
    <div class="breadcrumbarea aos-init aos-animate" data-aos="fade-up">
            <div class="row">
                <div class="col-xl-12">
                    <div class="breadcrumb__content__wraper">
                        <div class="breadcrumb__title">
                            <h2 class="heading">Course Finder</h2>
                        </div>
                        <div class="breadcrumb__inner">
                            <ul>
                                <li><a href="{{ route('home') }}">Home</a></li>
                                <li> Course Finder</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        <div class="shape__icon__2">
            <img loading="lazy" class=" shape__icon__img shape__icon__img__1"
                src="{{ asset('ved/assets/img/herobanner/herobanner__1.png') }}" alt="photo">
            <img loading="lazy" class=" shape__icon__img shape__icon__img__2"
                src="{{ asset('ved/assets/img/herobanner/herobanner__2.png') }}" alt="photo">
            <img loading="lazy" class=" shape__icon__img shape__icon__img__3"
                src="{{ asset('ved/assets/img/herobanner/herobanner__3.png') }}" alt="photo">
            <img loading="lazy" class=" shape__icon__img shape__icon__img__4"
                src="{{ asset('ved/assets/img/herobanner/herobanner__5.png') }}" alt="photo">
        </div>
    </div>

    <div class="dashboardarea sp_bottom_100">

        <div class="dashboard">
            <div class="container-fluid full__width__padding">
                <div class="row">
                    <div class="col-xxl-12 col-lg-12">
                        <div class="dashboard__content__wraper">
                            <form id="filterForm" method="GET">
                                <div class="row">
                                    <div class="col-xl-3 col-lg-4">
                                        <div class="sticky-card">
                                            <div class="card">
                                                <div class="card-header">
                                                    <div class="d-flex">
                                                        <div class="flex-grow-1">
                                                            <h5 class="fs-16">Filter</h5>
                                                        </div>
                                                        <div class="flex-shrink-0">
                                                            <a href="#" onclick="resetForm()"
                                                                class="text-decoration-underline" id="clearall">Clear
                                                                All</a>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="card-body m-0 p-0">
                                                    <div class="accordion accordion-flush filter-accordion">
                                                        <div class="accordion-item">
                                                            {{-- <h2 class="accordion-header" id="flush-headingBrands">
                                                                <button class="accordion-button bg-transparent shadow-none"
                                                                    type="button" data-bs-toggle="collapse"
                                                                    data-bs-target="#flush-collapseBrands"
                                                                    aria-expanded="true"
                                                                    aria-controls="flush-collapseBrands">
                                                                    <span
                                                                        class="text-muted text-uppercase fs-12 fw-medium"></span>
                                                                    <span
                                                                        class="badge bg-success rounded-pill align-middle ms-1 filter-badge"></span>
                                                                </button>
                                                            </h2> --}}

                                                            <div id="flush-collapseBrands"
                                                                class="accordion-collapse collapse show"
                                                                aria-labelledby="flush-headingBrands">
                                                                <div class="accordion-body text-body pt-0">
                                                                    <div class="d-flex flex-column gap-3">
                                                                        <div>
                                                                            <p class="text-muted text-uppercase fs-11 fw-medium mb-2">
                                                                                Countries
                                                                            </p>
                                                                            @foreach ($Countries as $Country)
                                                                                <div class="form-check">
                                                                                    <input class="form-check-input" type="radio" id="country_{{ $Country->country_id }}"
                                                                                           name="country_id" value="{{ $Country->country_id }}"
                                                                                           {{ request('country_id') == $Country->country_id ? 'checked' : '' }}>
                                                                                    <label class="form-check-label" for="country_{{ $Country->country_id }}">
                                                                                        {{ $Country->title }}
                                                                                    </label>
                                                                                </div>
                                                                            @endforeach
                                                                        </div>
                                                                        <div>
                                                                            <p
                                                                                class="text-muted text-uppercase fs-11 fw-medium mb-2">
                                                                                Institutions
                                                                            </p>
                                                                            <select class="form-select select2"
                                                                                id="institutionDropdown"
                                                                                name="institution_id"
                                                                                value="{{ request('institution_id') }}">
                                                                                <option value="" selected>Choose
                                                                                    institution</option>
                                                                                @foreach ($Institutions as $Institution)
                                                                                    <option
                                                                                        value="{{ $Institution->institution_id }}"
                                                                                        @selected(request('institution_id') == $Institution->institution_id)>
                                                                                        {{ $Institution->title }}
                                                                                    </option>
                                                                                @endforeach
                                                                            </select>
                                                                        </div>

                                                                        <div>
                                                                            <p
                                                                                class="text-muted text-uppercase fs-11 fw-medium mb-2">
                                                                                Program Level
                                                                            </p>
                                                                            <select class="form-select select2"
                                                                                name="programlevel_id"
                                                                                value="{{ request('institution_id') }}">
                                                                                <option value="" selected>Choose level
                                                                                </option>
                                                                                @foreach ($Programlevels as $Level)
                                                                                    <option
                                                                                        value="{{ $Level->programlevel_id }}"
                                                                                        @selected(request('programlevel_id') == $Level->programlevel_id)>
                                                                                        {{ $Level->title }}</option>
                                                                                @endforeach
                                                                            </select>
                                                                        </div>

                                                                        <div>
                                                                            <p
                                                                                class="text-muted text-uppercase fs-11 fw-medium mb-2">
                                                                                Intake
                                                                            </p>
                                                                            <select class="form-select select2"
                                                                                name="intake_id"
                                                                                value="{{ request('intake_id') }}">
                                                                                <option value="" selected>Choose
                                                                                    intake</option>
                                                                                @foreach ($Intakes as $Intake)
                                                                                    <option
                                                                                        value="{{ $Intake->intake_id }}"
                                                                                        @selected(request('intake_id') == $Intake->intake_id)>
                                                                                        {{ $Intake->title }}</option>
                                                                                @endforeach
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- end accordion-item -->
                                                        </div>

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

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

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

                                                        @endphp

                                                        <div class="accordion-item">
                                                            <h2 class="accordion-header" id="flush-headingClass">
                                                                <button
                                                                    class="accordion-button bg-transparent shadow-none {{ $hasClass ?: 'collapsed' }}"
                                                                    type="button" data-bs-toggle="collapse"
                                                                    data-bs-target="#flush-collapseClass"
                                                                    aria-expanded="{{ $hasClass ? 'true' : 'false' }}"
                                                                    aria-controls="flush-collapseClass">
                                                                    <span
                                                                        class="text-muted text-uppercase fs-12 fw-medium">
                                                                        Score</span>
                                                                </button>
                                                            </h2>
                                                            <div id="flush-collapseClass"
                                                                class="accordion-collapse collapse {{ $hasClass ? 'show' : '' }}"
                                                                aria-labelledby="flush-headingClass">
                                                                <div class="accordion-body text-body pt-1">
                                                                    <div class="d-flex flex-column gap-2">
                                                                        <div class="mb-3">
                                                                            <select
                                                                                class="btn btn-sm btn-soft-primary mb-3 form-select"
                                                                                id="classDropdown" name="class_id"
                                                                                value="{{ request('class_id') }}">
                                                                                <option value="" selected>Choose
                                                                                    class</option>
                                                                                @foreach ($PreparationClasses as $Class)
                                                                                    <option
                                                                                        value="{{ $Class->preparationclass_id }}"
                                                                                        @selected(request('class_id') == $Class->preparationclass_id)>
                                                                                        {{ $Class->title }}</option>
                                                                                @endforeach
                                                                            </select>
                                                                            <div
                                                                                class="formCost d-flex gap-2 align-items-center">
                                                                                <input class="form-control form-control-sm"
                                                                                    type="text" name="min_score"
                                                                                    placeholder="Min score"
                                                                                    value="{{ request('min_score') }}" />
                                                                                <span
                                                                                    class="fw-semibold text-muted">to</span>
                                                                                <input class="form-control form-control-sm"
                                                                                    type="text" name="max_score"
                                                                                    placeholder="Max score"
                                                                                    value="{{ request('max_score') }}" />
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        {{-- <div class="accordion-item">
                                                            <h2 class="accordion-header" id="flush-headingStatus">
                                                                <button
                                                                    class="accordion-button bg-transparent shadow-none {{ $hasStatus ?: 'collapsed' }}"
                                                                    type="button" data-bs-toggle="collapse"
                                                                    data-bs-target="#flush-collapseStatus"
                                                                    aria-expanded="{{ $hasStatus ? 'true' : 'false' }}"
                                                                    aria-controls="flush-collapseStatus">
                                                                    <span
                                                                        class="text-muted text-uppercase fs-12 fw-medium">By
                                                                        Status</span>
                                                                </button>
                                                            </h2>
                                                            <div id="flush-collapseStatus"
                                                                class="accordion-collapse collapse {{ $hasStatus ? 'show' : '' }}"
                                                                aria-labelledby="flush-headingStatus">
                                                                <div class="accordion-body text-body pt-1">
                                                                    <div class="d-flex flex-column gap-2">
                                                                        <div>
                                                                            <select class="form-select select2"
                                                                                name="status"
                                                                                value="{{ request('status') }}">
                                                                                <option value="" selected>Choose
                                                                                    status</option>
                                                                                @foreach ($statusList as $index => $value)
                                                                                    <option value="{{ $index }}"
                                                                                        @selected(!is_null(request('status')) && request('status') == $index)>
                                                                                        {{ $value }}</option>
                                                                                @endforeach
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div> --}}
                                                    </div>
                                                </div>
                                                <div class="card-footer d-none d-lg-block">
                                                    <div class="d-flex gap-2 justify-content-end">
                                                        <button type="submit" class="btn btn-success"><i
                                                                class="ri-filter-2-line align-bottom"></i>
                                                            Filter</button>
                                                        <a href="javascript:void(0)" onclick="resetForm()"
                                                            class="btn btn-danger"><i
                                                                class="ri-refresh-line align-bottom"></i>
                                                            Reset</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- end card -->
                                    </div>
                                    <!-- end col -->
                                    <div class="col-md-9">
                                        <div class="row">
                                            <div class="col-lg-12">

                                                <div class="card">
                                                    <div class="card-header border-0">
                                                        <div class="d-flex align-items-center">
                                                            <h5 class="card-title mb-0 flex-grow-1">Explore Programs</h5>
                                                        </div>
                                                        <div class="collapse show" id="collapseExample">
                                                            <div
                                                                class="d-flex flex-row justify-content-between gap-2 mt-3">
                                                                <div class="w-75">
                                                                    <h6 class="text-uppercase fs-12 mb-2">By Keyword</h6>
                                                                    <input type="text" name="search"
                                                                        value="{{ request('search') }}"
                                                                        class="form-control"
                                                                        placeholder="Ex. Advanced Biomedical Engineering MSc"
                                                                        autocomplete="off">
                                                                </div>
                                                                <div class="align-self-end d-none d-md-block">
                                                                    <div class="d-flex gap-2 justify-content-end">
                                                                        <button type="submit" class="btn btn-success"><i
                                                                                class="ri-filter-2-line align-bottom"></i>
                                                                            Filter</button>
                                                                        <a href="javascript:void(0)" onclick="resetForm()"
                                                                            class="btn btn-danger"><i
                                                                                class="ri-refresh-line align-bottom"></i>
                                                                            Reset</a>
                                                                    </div>
                                                                </div>

                                                                <div class="col-4 col-lg-3 align-self-end d-lg-none">
                                                                    <div class="d-flex gap-2 justify-content-end">
                                                                        <button type="submit" class="btn btn-success"><i
                                                                                class="ri-filter-2-line align-bottom"></i></button>
                                                                        <a href="{{ route('coursefinder') }}"
                                                                            onclick="$('#filterForm')[0].reset()"
                                                                            class="btn btn-danger"><i
                                                                                class="ri-refresh-line align-bottom"></i></a>
                                                                    </div>
                                                                </div>

                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="card-body">
                                                        <div class="d-flex justify-content-start align-items-center">
                                                            <div class="align-self-center">
                                                                <p id="total-result">Total Results: {{ $queryCount }}
                                                                </p>
                                                            </div>
                                                        </div>

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

                                        <div class="row" style="height: 700px; overflow-y:scroll;">
                                            <div class="col-xl-12 col-lg-12">

                                                <div id="data-wrapper">
                                                    @include('crud.generated.coursefinder.programs.program-card')
                                                </div>

                                                <!-- Data Loader -->
                                                <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>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <x-update-intake-modal :Intakes="$Intakes" name="all" />
    <x-update-intake-modal :Intakes="$Intakes" name="program" />
@endsection

@push('js')
    <script type="text/javascript">
        $(document).ready(function() {
            const url = "{{ route('coursefinder.programs.index') }}";
            let isLoading = false;

            $(document).on('click', '.pagination .page-link', function(event) {
                event.preventDefault();
                const page = $(this).attr('href').split('page=')[1];

                if (!isLoading) {
                    isLoading = true;
                    infiniteLoadMore(page);
                }
            });

            function infiniteLoadMore(page) {
                $.ajax({
                        url: `${url}?page=${page}`,
                        datatype: "html",
                        type: "GET",
                        data: $('#filterForm').serializeArray(),
                        beforeSend: function() {
                            $("#data-wrapper").empty();
                            $('.auto-load').show();
                        }
                    })
                    .done(function(response) {
                        if (response.html == '') {
                            $('#total-result').text(`Total Results: ${response.queryCount}`);
                            $('.pagination').closest().parent().find('nav').hide();
                            $("#data-wrapper").empty().append(`
                                <div class="card">
                                    <div class="card-body">
                                        <p class="d-flex align-items-center justify-content-center">
                                            No data to display :(
                                        </p>
                                    </div>
                                </div>
                            `);
                            $('.auto-load').hide();
                            return;
                        }

                        $('.auto-load').hide();
                        $('#total-result').text(`Total Results: ${response.queryCount}`);
                        $("#data-wrapper").empty().append(response.html);
                    })
                    .fail(function(jqXHR, ajaxOptions, thrownError) {
                        console.log('Server error occurred');
                    })
                    .always(function() {
                        isLoading = false;
                    });
            }


            $(document).on('change', '#countryDropdown', function() {
                const id = $(this).val();
                const text = $('#countryDropdown option:selected').text();
                const url = "{{ route('coursefinder.institutions.fetchbycountry') }}";
                console.log(text);

                $.ajax({
                    url: url,
                    type: 'GET',
                    data: {
                        country_id: id,
                    },
                    dataType: 'json',
                }).done(function(response) {
                    console.log(response);
                    if (response) {
                        const institutionDropdown = $('#institutionDropdown');

                        institutionDropdown.empty();

                        institutionDropdown.append($('<option>', {
                            value: null,
                            text: `Choose institution`,
                            disabled: false,
                            selected: true,
                        }));

                        $.each(response, function(index, value) {
                            institutionDropdown.append($('<option>', {
                                value: value.institution_id,
                                text: value.title,
                            }));
                        });
                    } else {
                        console.error("Response not OK:", response);
                    }

                }).fail(function(jqXHR, textStatus, errorThrown) {
                    console.error("AJAX request failed:", textStatus, errorThrown);
                });

            });
        });

        function resetForm() {

            if (event) {
                event.preventDefault();
            }

            $('#filterForm')[0].reset();

            $('#filterForm .select2').each(function() {
                $(this).val($(this).find('option:first').val()).trigger('change.select2');
            });

            window.location.href = "{{ route('coursefinder') }}";

        }
    </script>
@endpush