@extends('website.mobile.layouts.app')

@section('title','University Page' )
@section('description','UK university is an excellent way to gain a world-class education, develop your skills and knowledge, and enhance your career prospects')

@section('main')
<main>
    <section class="py-4 py-lg-5">
        <div class="container">
            <div class="row mb-4">
                @if(!empty($pageContent->middle_content))
                    {!!@$pageContent->middle_content!!}
                @else
                    <div class="col-lg-12 mx-auto text-center">
                        <h1 class="fs-1 fw-medium sub-banner-title">We Simplify Your Search for the Ideal University</h1>
                        <p class="mb-0 mb-sm-3">Choosing the right university for studying abroad can be challenging. Trust us to guide you towards success with our expertise and personalized approach. <a href="#" data-bs-toggle="modal" data-bs-target="#requestCallbackModal" class="fw-bold">Schedule a Call Today!</a></p>
                    </div>
                @endif
            </div>
            <div class="bg-white mb-4 px-3 py-4 shadow rounded-3">
                <form action="{{ route('website.universities')}}" class="d-flex justify-content-between align-items-start university_help_form flex-wrap" id="UniversitySearchForm">
                    {{-- <div class="filter_selects mb-3 mb-sm-0">
                        <select name="studyLevel" class="form-select js-choice z-index-9 bg-white" id="LevelofStudy" aria-label=".form-select-sm">
                            <option value="">Level of Study</option>
                            <option value="Masters">Masters</option>
                            <option value="Bachelors">Bachelors</option>
                        </select>
                    </div>
                    <div class="filter_selects mb-3 mb-sm-0">
                        <select name="fees" class="form-select js-choice z-index-9 bg-white" id="Fees" aria-label=".form-select-sm">
                            <option value="">Fees</option>
                            <option value="< 20 Lakh">&lt; 20 Lakh </option>
                            <option value="20-40 Lakh">20-40 Lakh</option>
                            <option value="40-60 Lakh">40-60 Lakh</option>
                            <option value="60-80 Lakh">60-80 Lakh</option>
                            <option value="> 80 Lakh">&gt; 80 Lakh</option>
                        </select>
                    </div> --}}
                    <div class="row filter_selects m-0">
                    <div class="col-12 col-md-6 mb-4 mb-md-0 fields_box position-relative">
                        <div class="border rounded p-2 input-group input-borderless search-box">
                            <input class="form-control me-1 py-0 px-xl-3 px-2 searchbox" value="{{request('searchUniversity')}}" name="searchUniversity" type="search" placeholder="Search University">
                            <button type="submit" class="btn btn-primary mb-0 rounded py-1 searchButton"><i class="fas fa-search"></i></button>
                        </div>
                        <div class="text-danger searchError position-absolute"></div>
                    </div>
                        <div class="col-12 col-md-6 mb-4 mb-md-0 fields_box position-relative">
                            <select name="country" class="form-select js-choice z-index-9 bg-white p-1 search-page-country countrybox" id="Country" aria-label="form-select-sm">
                                <option value="">Country</option>
                                <option value="15" {{ @$countryId == 15 ? 'selected' : '' }}>Australia</option>
                                <option value="39" {{ @$countryId == 39 ? 'selected' : '' }}>Canada</option>
                                <option value="79" {{ @$countryId == 79 ? 'selected' : '' }}>United Kingdom</option>
                                <option value="100" {{ @$countryId == 100 ? 'selected' : '' }}>Hungary</option>
                                <option value="university" {{ @$countryId == 'university' ? 'selected' : '' }}>View All</option>
                            </select>
                            <div class="filterError text-danger position-absolute"></div>
                        </div>
                    {{--<div class="col-12 col-md-6 mb-4 mb-md-0 fields_box position-relative">
                            <select name="exams" class="form-select js-choice z-index-9 bg-white" id="ExamsAccepted" aria-label=".form-select-sm">
                                <option value="">Exams Accepted</option>
                                <option value="SAT">SAT</option>
                                <option value="IELTS">IELTS</option>
                                <option value="GRE">GRE</option>
                                <option value="GMAT">GMAT</option>
                                <option value="DUOLINGO">DUOLINGO</option>
                                <option value="ACT">ACT</option>
                                <option value="TOEFL">TOEFL</option>
                                <option value="PTE">PTE</option>
                            </select>
                    </div>--}}
                    </div>
                    <div class="filter_selects_btn d-grid mx-auto mx-md-0">
                        <button type="submit" class="btn btn-primary mb-0 py-lg-3 py-2 filter">Filter Results</button>
                    </div>
                </form>
            </div>
            <div class="row gy-3 gy-md-4 gy-lg-5">
                {{-- <div class="col-sm-6 col-lg-4 px-lg-2 px-xl-3">
                    <div class="card shadow card-body p-md-2 p-xl-3"><!-- Title -->
                        <div class="d-flex mb-2 align-items-start"><img src="http://gradding.com/university/university-of-cambridge/CJDxaDtVFd9oSjbAqXgmekqsOvMu304PWJczWFTm.png" width="24px" height="28px" alt="">
                            <h5 class="card-title mb-0 ms-2">Indiana College of - Montreal</h5>
                        </div>
                        <p class="mb-2 d-flex"><i class="fas fa-map-marker-alt me-2"></i> 4653 Linda Street Newark, PA </p>
                        <p class="mb-2"><i class="far fa-clock text-danger me-2"></i>Intake sessions</p>
                        <!-- Rating -->
                        <ul class="list-inline mb-2">
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star-half-alt text-warning"></i></li>
                            <li class="list-inline-item ms-2 h6 fw-light">4.5/5.0</li>
                        </ul>
                        <div class="d-flex justify-content-between">
                            <a href="#" class="btn btn-outline-primary m-0 px-xxl-4 px-3">Explore Courses</a>
                            <a href="#" class="btn btn-primary m-0 px-xxl-4 px-3">View Details</a>
                        </div>
                    </div>
                </div> --}}
                @forelse($universities as $university)
                <div class="col-sm-6 col-lg-4 px-lg-2 px-xl-3">
                    <div class="card shadow card-body p-md-2 p-xl-3"><!-- Title -->
                        <div class="d-flex mb-2 align-items-start"><img src="{{asset(empty($university->university_icon)?@$university->logo : $university->university_icon)}}" width="24px" height="24px" alt="">
                            <a href="{{route('website.home')}}/{{$university->countries->url}}/universities/{{$university->url}}" class="card-title mb-0 ms-2 h5 text-truncate">{{$university->name}}</a>
                        </div>
                        <p class="mb-2 d-flex h-40 align-items-baseline"><i class="fas fa-map-marker-alt me-2"></i> {!! $university->address !!}</p>
                        <p class="mb-2"><i class="far fa-clock text-danger me-2"></i>Intake sessions</p>
                        <!-- Rating -->
                        {{-- <ul class="list-inline mb-2">
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star-half-alt text-warning"></i></li>
                            <li class="list-inline-item ms-2 h6 fw-light">4.5/5.0</li>
                        </ul> --}}
                        <div class="d-flex justify-content-between">
                            <a href="{{route('website.home')}}/{{$university->countries->url}}/universities/{{$university->url}}#v-pills-courses-tab" class="btn btn-outline-primary m-0 px-xxl-4 px-3">Explore Courses</a>
                            <a href="{{route('website.home')}}/{{$university->countries->url}}/universities/{{$university->url}}" class="btn btn-primary m-0 px-xxl-4 px-3">View Details</a>
                        </div>
                    </div>
                </div>
                @empty
                <div class="col-sm-6 col-lg-4 px-lg-2 px-xl-3">
                    <div class="card shadow card-body p-md-2 p-xl-3"><!-- Title -->
                            <a class="m-0 px-xxl-4 px-3">No Data Found</a>
                    </div>
                </div>
                @endforelse
                {{-- <div class="col-sm-6 col-lg-4 px-lg-2 px-xl-3">
                    <div class="card shadow card-body p-md-2 p-xl-3"><!-- Title -->
                        <div class="d-flex mb-2 align-items-start"><img src="http://gradding.com/university/university-of-cambridge/CJDxaDtVFd9oSjbAqXgmekqsOvMu304PWJczWFTm.png" width="24px" height="28px" alt="">
                            <h5 class="card-title mb-0 ms-2">Indiana College of - Montreal</h5>
                        </div>
                        <p class="mb-2 d-flex"><i class="fas fa-map-marker-alt me-2"></i> 4653 Linda Street Newark, PA </p>
                        <p class="mb-2"><i class="far fa-clock text-danger me-2"></i>Intake sessions</p>
                        <!-- Rating -->
                        <ul class="list-inline mb-2">
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star-half-alt text-warning"></i></li>
                            <li class="list-inline-item ms-2 h6 fw-light">4.5/5.0</li>
                        </ul>
                        <div class="d-flex justify-content-between">
                            <a href="#" class="btn btn-outline-primary m-0 px-xxl-4 px-3">Explore Courses</a>
                            <a href="#" class="btn btn-primary m-0 px-xxl-4 px-3">View Details</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-4 px-lg-2 px-xl-3">
                    <div class="card shadow card-body p-md-2 p-xl-3"><!-- Title -->
                        <div class="d-flex mb-2 align-items-start"><img src="http://gradding.com/university/university-of-cambridge/CJDxaDtVFd9oSjbAqXgmekqsOvMu304PWJczWFTm.png" width="24px" height="28px" alt="">
                            <h5 class="card-title mb-0 ms-2">Indiana College of - Montreal</h5>
                        </div>
                        <p class="mb-2 d-flex"><i class="fas fa-map-marker-alt me-2"></i> 4653 Linda Street Newark, PA </p>
                        <p class="mb-2"><i class="far fa-clock text-danger me-2"></i>Intake sessions</p>
                        <!-- Rating -->
                        <ul class="list-inline mb-2">
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star-half-alt text-warning"></i></li>
                            <li class="list-inline-item ms-2 h6 fw-light">4.5/5.0</li>
                        </ul>
                        <div class="d-flex justify-content-between">
                            <a href="#" class="btn btn-outline-primary m-0 px-xxl-4 px-3">Explore Courses</a>
                            <a href="#" class="btn btn-primary m-0 px-xxl-4 px-3">View Details</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-4 px-lg-2 px-xl-3">
                    <div class="card shadow card-body p-md-2 p-xl-3"><!-- Title -->
                        <div class="d-flex mb-2 align-items-start"><img src="http://gradding.com/university/university-of-cambridge/CJDxaDtVFd9oSjbAqXgmekqsOvMu304PWJczWFTm.png" width="24px" height="28px" alt="">
                            <h5 class="card-title mb-0 ms-2">Indiana College of - Montreal</h5>
                        </div>
                        <p class="mb-2 d-flex"><i class="fas fa-map-marker-alt me-2"></i> 4653 Linda Street Newark, PA </p>
                        <p class="mb-2"><i class="far fa-clock text-danger me-2"></i>Intake sessions</p>
                        <!-- Rating -->
                        <ul class="list-inline mb-2">
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star-half-alt text-warning"></i></li>
                            <li class="list-inline-item ms-2 h6 fw-light">4.5/5.0</li>
                        </ul>
                        <div class="d-flex justify-content-between">
                            <a href="#" class="btn btn-outline-primary m-0 px-xxl-4 px-3">Explore Courses</a>
                            <a href="#" class="btn btn-primary m-0 px-xxl-4 px-3">View Details</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-4 px-lg-2 px-xl-3">
                    <div class="card shadow card-body p-md-2 p-xl-3"><!-- Title -->
                        <div class="d-flex mb-2 align-items-start"><img src="http://gradding.com/university/university-of-cambridge/CJDxaDtVFd9oSjbAqXgmekqsOvMu304PWJczWFTm.png" width="24px" height="28px" alt="">
                            <h5 class="card-title mb-0 ms-2">Indiana College of - Montreal</h5>
                        </div>
                        <p class="mb-2 d-flex"><i class="fas fa-map-marker-alt me-2"></i> 4653 Linda Street Newark, PA </p>
                        <p class="mb-2"><i class="far fa-clock text-danger me-2"></i>Intake sessions</p>
                        <!-- Rating -->
                        <ul class="list-inline mb-2">
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star-half-alt text-warning"></i></li>
                            <li class="list-inline-item ms-2 h6 fw-light">4.5/5.0</li>
                        </ul>
                        <div class="d-flex justify-content-between">
                            <a href="#" class="btn btn-outline-primary m-0 px-xxl-4 px-3">Explore Courses</a>
                            <a href="#" class="btn btn-primary m-0 px-xxl-4 px-3">View Details</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-4 px-lg-2 px-xl-3">
                    <div class="card shadow card-body p-md-2 p-xl-3"><!-- Title -->
                        <div class="d-flex mb-2 align-items-start"><img src="http://gradding.com/university/university-of-cambridge/CJDxaDtVFd9oSjbAqXgmekqsOvMu304PWJczWFTm.png" width="24px" height="28px" alt="">
                            <h5 class="card-title mb-0 ms-2">Indiana College of - Montreal</h5>
                        </div>
                        <p class="mb-2 d-flex"><i class="fas fa-map-marker-alt me-2"></i> 4653 Linda Street Newark, PA </p>
                        <p class="mb-2"><i class="far fa-clock text-danger me-2"></i>Intake sessions</p>
                        <!-- Rating -->
                        <ul class="list-inline mb-2">
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star-half-alt text-warning"></i></li>
                            <li class="list-inline-item ms-2 h6 fw-light">4.5/5.0</li>
                        </ul>
                        <div class="d-flex justify-content-between">
                            <a href="#" class="btn btn-outline-primary m-0 px-xxl-4 px-3">Explore Courses</a>
                            <a href="#" class="btn btn-primary m-0 px-xxl-4 px-3">View Details</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-4 px-lg-2 px-xl-3">
                    <div class="card shadow card-body p-md-2 p-xl-3"><!-- Title -->
                        <div class="d-flex mb-2 align-items-start"><img src="http://gradding.com/university/university-of-cambridge/CJDxaDtVFd9oSjbAqXgmekqsOvMu304PWJczWFTm.png" width="24px" height="28px" alt="">
                            <h5 class="card-title mb-0 ms-2">Indiana College of - Montreal</h5>
                        </div>
                        <p class="mb-2 d-flex"><i class="fas fa-map-marker-alt me-2"></i> 4653 Linda Street Newark, PA </p>
                        <p class="mb-2"><i class="far fa-clock text-danger me-2"></i>Intake sessions</p>
                        <!-- Rating -->
                        <ul class="list-inline mb-2">
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star-half-alt text-warning"></i></li>
                            <li class="list-inline-item ms-2 h6 fw-light">4.5/5.0</li>
                        </ul>
                        <div class="d-flex justify-content-between">
                            <a href="#" class="btn btn-outline-primary m-0 px-xxl-4 px-3">Explore Courses</a>
                            <a href="#" class="btn btn-primary m-0 px-xxl-4 px-3">View Details</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-4 px-lg-2 px-xl-3">
                    <div class="card shadow card-body p-md-2 p-xl-3"><!-- Title -->
                        <div class="d-flex mb-2 align-items-start"><img src="http://gradding.com/university/university-of-cambridge/CJDxaDtVFd9oSjbAqXgmekqsOvMu304PWJczWFTm.png" width="24px" height="28px" alt="">
                            <h5 class="card-title mb-0 ms-2">Indiana College of - Montreal</h5>
                        </div>
                        <p class="mb-2 d-flex"><i class="fas fa-map-marker-alt me-2"></i> 4653 Linda Street Newark, PA </p>
                        <p class="mb-2"><i class="far fa-clock text-danger me-2"></i>Intake sessions</p>
                        <!-- Rating -->
                        <ul class="list-inline mb-2">
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
                            <li class="list-inline-item me-0 small"><i class="fas fa-star-half-alt text-warning"></i></li>
                            <li class="list-inline-item ms-2 h6 fw-light">4.5/5.0</li>
                        </ul>
                        <div class="d-flex justify-content-between">
                            <a href="#" class="btn btn-outline-primary m-0 px-xxl-4 px-3">Explore Courses</a>
                            <a href="#" class="btn btn-primary m-0 px-xxl-4 px-3">View Details</a>
                        </div>
                    </div>
                </div> --}}
            </div>
            <div class="row mt-md-4 mt-0">
                <div class="col-12">
                    <nav class="mt-4 d-flex justify-content-center" aria-label="navigation">
                        <ul class="pagination pagination-primary-soft rounded">
                                                        @if($is_mobile)
                                {{ $universities->onEachSide(1)->links() }}
                            @else
                                {{$universities->links()}}
                            @endif
                        </ul>
                    </nav>
                </div>  
            </div>
        </div>
    </section>
    <section class="pb-4 pb-lg-5 pt-0">
        <div class="container position-relative">
            <!-- SVG decoration START -->
            <figure class="position-absolute top-50 start-50 translate-middle ms-2 d-none">
                <svg>
                    <path class="fill-white opacity-4" d="m496 22.999c0 10.493-8.506 18.999-18.999 18.999s-19-8.506-19-18.999 8.507-18.999 19-18.999 18.999 8.506 18.999 18.999z"></path>
                    <path class="fill-white opacity-4" d="m775 102.5c0 5.799-4.701 10.5-10.5 10.5-5.798 0-10.499-4.701-10.499-10.5 0-5.798 4.701-10.499 10.499-10.499 5.799 0 10.5 4.701 10.5 10.499z"></path>
                    <path class="fill-white opacity-4" d="m192 102c0 6.626-5.373 11.999-12 11.999s-11.999-5.373-11.999-11.999c0-6.628 5.372-12 11.999-12s12 5.372 12 12z"></path>
                    <path class="fill-white opacity-4" d="m20.499 10.25c0 5.66-4.589 10.249-10.25 10.249-5.66 0-10.249-4.589-10.249-10.249-0-5.661 4.589-10.25 10.249-10.25 5.661-0 10.25 4.589 10.25 10.25z"></path>
                </svg>
            </figure>
            <!-- SVG decoration END -->

            <div class="row">
                <div class="col-12">
                    <div class="bg-info p-4 p-lg-5 rounded-3">
                        <div class="row position-relative">
                            <!-- Svg decoration -->
                            <figure class="fill-white opacity-1 position-absolute top-50 start-0 translate-middle-y">
                                <svg width="141px" height="141px">
                                    <path d="M140.520,70.258 C140.520,109.064 109.062,140.519 70.258,140.519 C31.454,140.519 -0.004,109.064 -0.004,70.258 C-0.004,31.455 31.454,-0.003 70.258,-0.003 C109.062,-0.003 140.520,31.455 140.520,70.258 Z"></path>
                                </svg>
                            </figure>
                            <!-- Action box -->
                            <div class="col-xxl-11 col-12 mx-auto position-relative">
                                <div class="row align-items-center">
                                    <!-- Title -->
                                    <div class="col-lg-8">
                                        <h3 class="text-white">Confused about Countries, Universities & Courses?</h3>
                                        <p class="text-white mb-3 mb-lg-0">Let our counseller help you in making your Study Abroad Planning easy & seamless!</p>
                                    </div>
                                    <!-- Content and input -->
                                    <div class="col-lg-4 text-lg-end">
                                        <a href="{{$website_setting->phone}}" class="btn btn-warning mb-0 fw-bold" data-bs-toggle="modal" data-bs-target="#addLecture">Talk to our Counseller now!</a>
                                    </div>
                                </div>
                            </div>
                        </div> <!-- Row END -->
                    </div>
                </div>
            </div> <!-- Row END -->

        </div>
    </section>

    @if(!empty($pageContent->description))
        {!!@$pageContent->description!!}
    @else
        <section class="pb-4 pb-lg-5 pt-0">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h2 class="fs-3 fw-normal sub-banner-title">Let’s Streamline Your University Selection</h2>
                        <p>Choosing the right university for your study abroad journey is tricky. With so many options available, navigating the sea of universities can be overwhelming and confusing. That's where Gradding comes in to simplify the process and guide you towards making the best choice.
                            <!-- Collapse body -->
                        </p>
                        <div class="collapse" id="collapseContent">
                            <p>With our extensive database of universities worldwide, you gain access to a comprehensive collection of information that includes program offerings, faculty profiles, campus facilities, admission requirements, and student reviews. Our platform empowers you to explore and compare universities based on your specific criteria, such as location, academic reputation, scholarship opportunities, and more.</p>
                            <p>Don't let the overwhelming options deter you from pursuing your study abroad dreams. Let Gradding be your trusted companion in finding the ideal university that aligns with your aspirations and unlocks your full potential. Start your journey with us today and experience the transformative power of making the right choice.</p>

                        </div>
                        <!-- Collapse button --> <a class="p-0 mb-0 mt-2 btn-more d-flex align-items-center collapsed" data-bs-toggle="collapse" href="#collapseContent" role="button" aria-expanded="false" aria-controls="collapseContent"> Read <span class="see-more ms-1">more</span><span class="see-less ms-1">less</span><i class="fas fa-angle-down ms-2"></i> </a>
                    </div>
                </div>
            </div>
        </section>
    @endif
</main>
@endsection
@section('css')
<link rel="stylesheet" type="text/css" href="{{ asset('frontend') }}/primary-theme/assets/vendor/choices/css/choices.min.css">
<style>
    .search-page-country{
        background-color: var(--bs-body-bg);
    color: var(--bs-gray-700);
    border: 1px solid var(--bs-gray-300);
    line-height: 1.5;
    border-radius: 0.325rem;
    min-height: auto;
    font-size: 0.9375rem;
    padding: 0.8rem 2.25rem 0.8rem 1rem !important;
    opacity: .5;
    }
    .filter_selects_btn{
        width:18%;
    }
    .search-box{
        border: 1px solid #dde0e3 !important;
    }
    .filter_selects {
        width: 81%;
    }
    .university_help_form .choices{
        margin:0;
    }
    .university_help_form .countrybox,.university_help_form .filter_selects_btn .btn {
        padding: 0.8rem !important;
    }
    .university_help_form .country_select{
        border: 1px solid var(--bs-gray-300);
    }
    .university_help_form select.country_select:focus{
        border: 1px solid var(--bs-gray-300);
    }
    .university_help_form .choices[data-type*=select-one] .choices__input {
        display: none;
    }

    .university_help_form .choices[data-type*=select-one]::after {
        background-color: #fff;
    }

    .university_help_form .choices[data-type*=select-one].is-open::after {
        margin-top: 0;
    }

    .h-40 {
        height: 40px;
    }
    @media (max-width: 1366px) {
        .h-40 {
        height: 65px;
    }
    }
    @media (max-width: 1024px) {
        .choices .choices__inner {
            white-space: nowrap;
        }
    }
    @media (max-width: 768px) {
        .searchError,.filterError{
            font-size:13px;
        }
    }
    @media (max-width:767px){
        .filter_selects .fields{
         width: 100% !important;
        }
        .filter_selects,.filter_selects_btn{
         width:100%;
        }
        .fields_box{
        padding: 0 !important;
        }
    }
</style>
@endsection
@section('script')

<script>

window.onpageshow = function(event) {
  if (event.persisted) {
    // Reload the page
    location.reload();
  }
};

    $(".searchButton").on("click keyup", function(event) {
        if( $(".searchbox").val() == "" ){
            $('.searchError').html('Please Provide Valid Information');
            $(".searchButton").prop('disabled', true);
        }
    });
    $('.searchbox').on('keyup', function(){
        if( $(".searchbox").val() !== "" ){
            $(".searchButton").prop('disabled', false);
            $('.searchError').html('');
        }
    });
    $(".filter").click(function () {
        if( $(".countrybox").val() == "" ){
            $('.filterError').html('Please Select Any Country First');
            $(".filter").prop('disabled', true);
        }
    });
    $('.countrybox').on('change', function(){
        $(".filter").prop('disabled', false);
        $('.filterError').html('');
    });
    $(".countrybox").change(function() {
    $(".countrybox").attr('style', 'color: #404448 !important');
    });

    $(document).ready(function() {
        var windowWidth = $(window).width();
        if (windowWidth < 767) {
            $('.pagination').addClass('pagination-sm');
    }
    });
  // Check if the value of isFormModified is stored in localStorage
    var isFormModified = localStorage.getItem('isFormModified') === 'true';

    $('#UniversitySearchForm').on('submit', function() {
    isFormModified = true;
    // Store the value of isFormModified in localStorage
    localStorage.setItem('isFormModified', isFormModified);
    });

    var isFormModified = localStorage.getItem('isFormModified') === 'true';

$(window).on('beforeunload', function() {
  // Store the value of isFormModified in localStorage
  localStorage.setItem('isFormModified', isFormModified);
});

$(window).on('unload', function() {
  // Clear the textbox value when leaving the page
  $('.searchbox').val('');
});

$('.searchbox').on('keyup', function(e) {
  if (e.key === 'Backspace' || e.keyCode === 8) {
    if ($(this).val() === '') {
      if (isFormModified) {
        history.back();
      }
      isFormModified = false;
      // Store the value of isFormModified in localStorage
      localStorage.setItem('isFormModified', isFormModified);
    }
  }
});
// if(performance.navigation.type == 2){ 
    //     setTimeout(function(){
    //         document.getElementById("UniversitySearchForm").reset();
    //     },200);
    // }
</script>
@endsection