@extends('layouts.app')


@section('title', 'Universities')

@section('content')

    @include('layouts.partials.page_header', [
        'title' => 'Universities',
        'breadcrumbs' => [
            ['label' => 'Home', 'url' => route('home')],
            ['label' => 'Universities', 'url' => '']
        ]
    ])


    <!--Course Grid Start (Universities)-->
    <section class="course-grid">
        <div class="container">
            <div class="row">
                <!-- Sidebar Filters -->
                @include('universities.partials.sidebar')
                <!-- Main Content Grid -->
                <div class="col-xl-8 col-lg-7">
                    <div class="course-grid__right">
                        <!-- Top Bar -->
                       @include('universities.partials.topbar')

                        <!-- Universities Grid -->
                        <div class="course-grid__right-content-box">
                            <div class="row">
                                @forelse($universities as $university)
                                    <div class="col-xl-6">
                                        <div class="courses-two__single">
                                            <div class="courses-two__img-box">
                                                <div class="courses-two__img">
                                                    @if($university->logo_path)
                                                        <img style="height:150px;width:auto;display: block;
  margin: auto;" src="{{ asset('storage/' . $university->logo_path) }}"
                                                             alt="{{ $university->name }}">
                                                    @else
                                                        <img
                                                            src="{{ asset('images/resources/courses-2-1.jpg') }}"
                                                            alt="{{ $university->name }}">
                                                    @endif
                                                </div>
                                                <div class="courses-two__heart">
                                                    <a href="{{ route('universities.show', $university->slug ?? $university->id) }}"><span
                                                            class="icon-heart"></span></a>
                                                </div>
                                            </div>
                                            <div class="courses-two__content">
                                                <div class="courses-two__doller-and-review">
                                                    <div class="courses-two__doller">
                                                        <p>#{{ $university->ranking }}</p>
                                                    </div>
                                                    <div class="courses-two__review">
                                                        @if($university->featured)
                                                            <p><i class="icon-star"></i> Featured</p>
                                                        @endif
                                                    </div>
                                                </div>
                                                <h3 class="courses-two__title"><a
                                                        href="{{ route('universities.show', $university->slug ?? $university->id) }}">{{ $university->name }}</a>
                                                </h3>
                                                <div class="courses-two__btn-and-client-box">
                                                   
                                                    <div class="courses-two__client-box">
                                                        <!-- <div class="courses-two__client-img">
                                                            <img
                                                                src="{{ $university->country->flag_path ? asset('storage/'.$university->country->flag_path) : asset('images/resources/courses-two-client-img-1.jpg') }}"
                                                                alt="">
                                                        </div> -->
                                                        <div class="courses-two__client-content">
                                                            <h4>{{ $university->country->name }}</h4>
                                                            <p>{{ $university->location ?? 'Location' }}</p>
                                                        </div>
                                                    </div> <div class="courses-two__btn-box">
                                                        <a href="{{ route('universities.show', $university->slug ?? $university->id) }}"
                                                           class="thm-btn-two">
                                                            <span>View Details</span>
                                                            <i class="icon-angles-right"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                                <ul class="courses-two__meta list-unstyled">
                                                    <li>
                                                        <div class="icon"><span class="icon-chart-simple"></span></div>
                                                        <p>Rank #{{ $university->ranking }}</p>
                                                    </li>
                                                    <li>
                                                        <div class="icon"><span class="icon-book"></span></div>
                                                        <p>{{ $university->programs_count ?? '0' }} Programs</p>
                                                    </li>
                                                    <li>
                                                        <div class="icon"><span class="icon-clock"></span></div>
                                                        <p>{{ $university->created_at->format('Y') }}</p>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <div class="col-12 text-center py-5">
                                        <h4>No universities found.</h4>
                                    </div>
                                @endforelse
                            </div>
                        </div>

                        <!-- Pagination -->
                        <div class="blog-list__pagination">
                            {{ $universities->appends(request()->except('page'))->links('vendor.pagination.custom') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Course Grid End-->

@endsection

@push('scripts')
    <script>
        // Initialize ranking slider
        $(function () {
            $("#ranking-slider").slider({
                range: true,
                min: {{ $minRanking }},
                max: {{ $maxRanking }},
                values: [{{ $currentMin }}, {{ $currentMax }}],
                slide: function (event, ui) {
                    $(".min").val(ui.values[0]);
                    $(".max").val(ui.values[1]);
                    $("#ranking_min").val(ui.values[0]);
                    $("#ranking_max").val(ui.values[1]);
                    $(".course-grid__price-filter-title").text("Ranking: #" + ui.values[0] + " - #" + ui.values[1]);
                }
            });
            $(".min").val($("#ranking-slider").slider("values", 0));
            $(".max").val($("#ranking-slider").slider("values", 1));
            $("#ranking_min").val($("#ranking-slider").slider("values", 0));
            $("#ranking_max").val($("#ranking-slider").slider("values", 1));
        });

        // Sorting function
        function updateSort(value) {
            var parts = value.split('-');
            var sort = parts[0];
            var direction = parts[1];
            var url = new URL(window.location.href);
            url.searchParams.set('sort', sort);
            url.searchParams.set('direction', direction);
            window.location.href = url.toString();
        }
    </script>
@endpush