@extends('layouts.app')

@section('title', 'Study Countries')

@section('content')
    @include('layouts.partials.page_header', [
        'title' => 'Explore Study Destinations',
        'showSocial' => false,
        'breadcrumbs' => [
            ['label' => 'Home', 'url' => route('home')],
            ['label' => 'Countries', 'url' => ''],
        ],
    ])

    <section class="course-grid">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="course-grid__left">
                        <div class="course-grid__sidebar">
                            <div class="course-grid__search course-grid__single">
                                <div class="course-grid__title-box">
                                    <h3 class="course-grid__title">Find Your Destination</h3>
                                    <div class="course-grid__title-shape-1">
                                        <img src="{{ asset('images/shapes/course-grid-title-shape-1.png') }}" alt="">
                                    </div>
                                </div>

                                <div class="course-grid__search-text">
                                    Discover countries by name, or focus on our most popular destinations.
                                </div>

                                <form method="GET" action="{{ route('countries.index') }}">
                                    <div class="course-grid__search-form">
                                        <input type="search" name="search" class="form-control"
                                               value="{{ request('search') }}"
                                               placeholder="Search countries...">
                                        <button type="submit" class="thm-btn">
                                            <i class="icon-search"></i> Search
                                        </button>
                                    </div>

                                    <div class="course-grid__price-filter-free-and-paid-course mt-4">
                                        <label class="custom-radio">
                                            <input type="checkbox" name="popular" value="1"
                                                   {{ request()->boolean('popular') ? 'checked' : '' }}
                                                   onchange="this.form.submit()">
                                            <span class="radio-dot"></span>
                                            <span class="radio-text">Show popular destinations only</span>
                                        </label>
                                        <a href="{{ route('countries.index') }}" class="thm-btn-two">
                                            <span>Reset</span>
                                            <i class="icon-angles-right"></i>
                                        </a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                @forelse($countries as $country)
                    <div class="col-xl-3 col-lg-4 col-md-6">
                        <div class="courses-two__single h-100">
                            <div class="courses-two__img-box">
                                <div class="courses-two__img d-flex align-items-center justify-content-center"
                                     style="min-height: 150px; background: #f7fafc;">
                                    @if($country->flag_path)
                                        <img src="{{ asset('storage/' . $country->flag_path) }}"
                                             alt="{{ $country->name }}"
                                             style="max-height: 90px; width: auto;">
                                    @else
                                        <div class="d-flex h-100 w-100 align-items-center justify-content-center rounded-3 bg-light">
                                            <span class="fw-bold text-uppercase">{{ \Illuminate\Support\Str::substr($country->name, 0, 2) }}</span>
                                        </div>
                                    @endif
                                </div>
                                <div class="courses-two__heart">
                                    <a href="{{ route('countries.show', $country->slug) }}">
                                        <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>{{ $country->universities_count }} Universities</p>
                                    </div>
                                    @if($country->is_popular)
                                        <div class="courses-two__review">
                                            <p><i class="icon-star"></i> Popular</p>
                                        </div>
                                    @endif
                                </div>

                                <h3 class="courses-two__title">
                                    <a href="{{ route('countries.show', $country->slug) }}">{{ $country->name }}</a>
                                </h3>
                                <p class="courses-two__text">
                                    {{ \Illuminate\Support\Str::limit($country->description ?? ('Discover study opportunities in ' . $country->name . '.'), 90) }}
                                </p>

                                <ul class="courses-two__meta list-unstyled">
                                    <li>
                                        <div class="icon"><span class="icon-book"></span></div>
                                        <p>{{ $country->universities_count }} Universities</p>
                                    </li>
                                    <li>
                                        <div class="icon"><span class="icon-clock"></span></div>
                                        <p>{{ $country->scholarships_count }} Scholarships</p>
                                    </li>
                                </ul>

                                <div class="courses-two__btn-and-client-box">
                                    <div class="courses-two__btn-box">
                                        <a href="{{ route('countries.show', $country->slug) }}" class="thm-btn-two">
                                            <span>View Country</span>
                                            <i class="icon-angles-right"></i>
                                        </a>
                                    </div>
                                    <div class="courses-two__btn-box">
                                        <a href="{{ route('universities.index', ['country' => $country->id]) }}" class="thm-btn">
                                            <span>Universities</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center py-5">
                        <h4>No countries found.</h4>
                        <p>Try a different search term or clear the popular filter.</p>
                    </div>
                @endforelse
            </div>

            <div class="blog-list__pagination mt-5">
                {{ $countries->appends(request()->query())->links('vendor.pagination.custom') }}
            </div>
        </div>
    </section>
@endsection