@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/exclusive-hajj-package-from-bd.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 package plan</h1>
        </div>
    </div>

    <div class="mx-auto max-w-[1200px] py-20">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-5">
            @forelse ($packages as $package)
                <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=" h-[250px]">
                                <img src="{{ $package->media[0]->getFullUrl() }}" alt="Country Image"
                                    class=" w-full h-full object-cover">
                            </div>
                            <div class=" py-6 px-4">
                                <h2 class=" font-bold text-lg pt-3">
                                    {{ $package->name }}
                                </h2>
                                @if ($package->price)
                                    <p class=" text-xs text-blue-600 ">Starts from: BDT {{ $package->price }}
                                        / Per person</p>
                                @endif
                                <p class=" flex items-center gap-3 pt-4">
                                    @if ($package->category)
                                        <span class=" py-1 px-2 bg-blue-200 text-blue-800 rounded-full text-xs font-bold">
                                            {{ $package->category->name }}
                                        </span>
                                    @endif

                                    @if ($package->stay_duration)
                                        <span
                                            class=" py-1 px-2 bg-cyan-200 text-cyan-800 rounded-full text-xs font-bold">{{ $package->stay_duration }}
                                            Days</span>
                                    @endif

                                </p>
                                <a href="{{ route('get.single.package', $package->slug) }}"
                                    class="py-2 bg-transparent underline hover:text-blue-800 my-3 inline-flex">View
                                    details</a>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
            @endforelse
        </div>
        <div class="mt-4">
            {{ $packages->links() }}
        </div>
    </div>
@endsection

@section('content')
@endsection

@section('custom_script')
    @if (session()->has('message'))
        <script>
            toastr.success('{{ session('message') }}');
        </script>
    @endif
@endsection