@extends('front.master')

@section('header')
    <style>
        #destination-dropdown {
            display: none
        }

        .hero-image {
            background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://unsplash.com/photos/r-nJDGpjRic/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjU1OTA1NTY3&force=true&w=2400");
            /* max-height: 550px; */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
            padding: 150px 140px;
        }

        .search__box {
            background: #FFFFFF;
            padding: 40px;
            border-radius: 10px;
            width: 100%
        }

        .hero__title {
            color: #fff;
            font-size: 35px;
            font-weight: 700;
            text-transform: capitalize
        }

        .hero_text p {
            font-size: 18px;
            font-weight: 400;
            font-style: italic;
            color: #fff;
        }

        .search__submit {
            background: rgb(7, 0, 132);
            color: #fff;
        }

        .search__submit:hover {
            background: #111;
            color: #fff;
        }

        .process__title h2 {
            color: rgb(0, 0, 0);
            font-size: 22px;
            font-weight: 700;
            text-align: center
        }

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

        .icon__card {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            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
        }

        .explore_btn {
            margin: 0 20px 20px;
            background: rgb(7, 0, 132);
            color: white;
            text-transform: capitalize;
            font-size: 13px
        }

        .explore_btn:hover {
            background: rgb(11, 3, 179);
            color: white;
        }

        @media(max-width:767px) {

            .hero-image {

                min-height: 350px !important;
                padding: 40px 20px !important;

            }

            .hero__title {

                font-size: 25px !important;

            }

            .search__box {
                max-width: 95%;
            }

        }
    </style>

    <div class="container-fluid px-0" id="hero">
        <div class="hero-image flex items-center justify-between flex-col md:flex-row">
            <div class="hero_text lg:w-[50%] md:w-full w-full mx-auto">
                <h2 class=" hero__title text-center">Simplifying Travel Around The World
                    Fast & easy service for your peace of mind!</h2>
                <p class=" text-center py-4">Check Travel Requirements
                </p>
                <form id="search_visa" class="flex items-center justify-center flex-col" action="{{ route('search.result') }}"
                    method="get">
                    <input type="hidden" name="from_country" value="BD">
                    <input type="hidden" name="to_country" id="to_country">
                    <div class="md:w-[80%] w-full mx-auto relative">
                        <input type="text" placeholder=" Enter Destination"
                            class=" rounded-full outline-none focus:outline-none focus:border-0 px-5 py-3 pl-10 bg-white w-full"
                            name="" id="destination">
                        <i class="fa fa-search text-slate-400 absolute left-4 top-1/2 translate-y-[-50%]"
                            aria-hidden="true"></i>
                        <div id="destination-dropdown"
                            class=" max-h-[300px] mt-2 overflow-y-auto p-4 bg-white z-50 absolute top-[100%] left-0 shadow-md rounded-md">
                        </div>
                    </div>
                    {{-- suggestions --}}
                    <h6 class=" text-white text-sm text-center mt-8">SUGGESTIONS</h6>
                    <div class="overflow-x-auto overflow-y-hidden scrollbar-hidden md:max-w-[650px] max-w-full">
                        <ul class=" flex items-center justify-center gap-2 mt-3 w-max">
                            @forelse ($country as $item)
                                <li data-id="{{ $item->id }}"
                                    class="country_item cursor-pointer px-4 py-1 rounded-full bg-white text-black text-sm flex items-center justify-center">
                                    <span>{{ ucfirst($item->name) }}</span>
                                </li>
                            @empty
                            @endforelse
                        </ul>
                    </div>
                </form>

            </div>
        </div>
    </div>
    <style>
    </style>
    <div class="container py-20 mx-auto">
        <div class="">
            <div class="col-md-12">
                <div class="visa_process">
                    <div class="process__title">
                        <h2>Apply Visa Online In 4 Simple Steps</h2>
                        <div class="bottom_line"></div>
                    </div>
                </div>
                <div class="row mt-5 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                    <div class="col-md-3 col-6 mb-2">
                        <div class="card p-4" style="border-radius: 20px;border:1px solid rgba(0,0,0,0.2);min-height:250px">
                            <div class="card-body">
                                <div class="icon__card bg-blue-100 text-blue-700">
                                    <i class="fa fa-person-booth"></i>
                                </div>
                                <h2 class=" title_card">
                                    Book Visa Online
                                </h2>
                                <p class="desc_card">Simplest way to apply visa online.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-6 mb-2">
                        <div class="card p-4" style="border-radius: 20px;border:1px solid rgba(0,0,0,0.2);min-height:250px">
                            <div class="card-body">
                                <div class="icon__card bg-blue-100 text-blue-700">
                                    <i class="fa-solid fa-file-circle-check"></i>
                                </div>
                                <h2 class=" title_card">
                                    Document Validation
                                </h2>
                                <p class="desc_card">Simplest way to apply Our visa expert will collect & verify your
                                    documents.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-6 mb-2">
                        <div class="card p-4" style="border-radius: 20px;border:1px solid rgba(0,0,0,0.2);min-height:250px">
                            <div class="card-body">
                                <div class="icon__card bg-blue-100 text-blue-700">
                                    <i class="fa-solid fa-person-running"></i>
                                </div>
                                <h2 class=" title_card">
                                    Visa Processing
                                </h2>
                                <p class="desc_card">We schedule documents submission, biometric / interview
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-6 mb-2">
                        <div class="card p-4" style="border-radius: 20px;border:1px solid rgba(0,0,0,0.2);min-height:250px">
                            <div class="card-body">
                                <div class="icon__card bg-blue-100 text-blue-700">
                                    <i class="fa-solid fa-door-closed"></i>
                                </div>
                                <h2 class=" title_card">
                                    Visa at Doorstep
                                </h2>
                                <p class="desc_card">Passport gets delivered at your doorstep</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="py-20 bg-slate-100">
        <div class="container mx-auto">
            <div class="row ">
                <div class="col-md-12">
                    <div class="visa_process">
                        <div class="process__title">
                            <h2>Popular Destinations</h2>
                            <div class="bottom_line"></div>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-5">
                        @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>
                <div class=" grid place-content-center pt-8">
                    <a href="{{ route('get.all.visa') }}" class=" py-2 px-5 bg-blue-600 text-white inline-flex mx-auto">View
                        More</a>
                </div>
            </div>
        </div>
    </div>

    <div class="py-20 bg-gradient-to-tr bg-white">
        <div class="container mx-auto">
            <div class="row ">
                <div class="col-md-12">
                    <div class="visa_process">
                        <div class="process__title">
                            <h2>Popular Packages</h2>
                            <div class="bottom_line"></div>
                        </div>
                    </div>
                    <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-sm 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>
                <div class=" grid place-content-center pt-8">
                    <a href="{{ route('get.all.package') }}"
                        class=" py-2 px-5 bg-blue-600 text-white inline-flex mx-auto">View
                        More</a>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
@endsection

@section('custom_script')
    @if (session()->has('message'))
        <script>
            toastr.success('{{ session('message') }}');
        </script>
    @endif
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        $(document).ready(function() {
            $("#destination").on('keyup change', function(event) {
                let value = $(this).val().toLowerCase();

                if (value.length > 0) {
                    $.ajax({
                        url: "/search-country",
                        method: "GET",
                        data: {
                            query: value
                        },
                        success: function(data) {
                            let dropdown = $("#destination-dropdown");
                            dropdown.empty(); // Clear previous results

                            if (data && data.length > 0) {
                                let listItems = data.map(item =>
                                    `<li data-id="${item.id}" class="country_item cursor-pointer px-4 py-1 rounded-full bg-white text-black text-sm flex items-center justify-center hover:bg-blue-500 hover:text-white">
                    <span>${item.name}</span>
                </li>`
                                ).join("");

                                dropdown.html(
                                    `<ul class="flex flex-col gap-2">${listItems}</ul>`);

                            } else {
                                dropdown.html(
                                    `<p class="text-gray-500 text-sm">No results found</p>`);
                            }
                            dropdown.show()
                        },
                        error: function(xhr, status, error) {
                            console.error("AJAX Error:", status, error);
                        }
                    });
                } else {
                    $("#destination-dropdown").hide();
                    $("#destination-dropdown").empty();
                }
            });

            $(document).on("click", function(event) {
                if (!$(event.target).closest("#destination, #destination-dropdown").length) {
                    $("#destination-dropdown").hide();
                }
            });
            // Handle click event on dropdown items
            $(document).on("click", ".country_item", function() {
                $("#to_country").val($(this).data('id')); // Set input value
                $("#search_visa").submit(); // Hide dropdown after selection
            });
        });
    </script>
@endsection