@extends('front.master')

@section('header')
    <style>
        .hero-image__single {
            background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/images/pexels-nurseryart-346798.jpg");
        }

        .bottom_line {
            max-width: 150px;
            height: 3px;
            background: rgb(7, 0, 132);
            border-radius: 5px;
            margin: 2px auto
        }

        .icon__card {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgb(7, 0, 132);
            color: white;
            font-size: 24px
        }

        .title_card {
            font-size: 16px;
            color: #000;
            font-weight: 700;
            text-transform: capitalize;
            margin: 20px 0 10px
        }

        .desc_card {
            font-size: 14px;
            color: #000;
            font-weight: 400;
            margin: 10px 0
        }

        .image__card {
            width: 100%;
            height: 150px;
        }

        .image__card img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px
        }

        .card__title {
            font-size: 16px;
            text-transform: capitalize;
            font-weight: 700;
            padding: 10px 20px
        }
    </style>

    <div class="hero-image__single min-h-[300px] flex items-center justify-center bg-center bg-cover ">
        <div class="container max-w-[1400px] mx-auto">
            <h1
                class="max-w-full md:max-w-[90%] lg:max-w-[70%] lg:text-4xl text-xl text-center mx-auto text-white font-bold">
                All visa plan</h1>
        </div>
    </div>

    <div class="mx-auto max-w-[1100px] py-20">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            @forelse ($country as $item)
                <div class="col-md-3 col-6">
                    <div class="card p-0 bg-white shadow-md rounded-xl min-h-[250px]">
                        <div class="card-body p-0">
                            <div class="image__card">
                                <img src="/storage/{{ $item->country_image }}" alt="Country Image">
                            </div>
                            <h2 class="card__title">
                                {{ $item->name }}
                            </h2>
                            @php
                                $id = base64_encode($item->id);
                            @endphp
                            <a href="{{ route('get.single.visa', [$id]) }}"
                                class="py-2 bg-transparent underline px-5 hover:text-blue-800">Explore now</a>
                        </div>
                    </div>
                </div>
            @empty
            @endforelse
        </div>
        <div class="mt-4">
            {{ $country->links() }}
        </div>
    </div>
@endsection

@section('content')
@endsection

@section('custom_script')
    @if (session()->has('message'))
        <script>
            toastr.success('{{ session('message') }}');
        </script>
    @endif
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.from_country').select2();
            $('.to_country').select2();
        });
    </script>
@endsection