@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-drmkhawarnazir-18996760.jpg");
        }
    </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">
                {{ $package->name }}</h1>
        </div>
    </div>
    <div class=" max-w-[1100px] mx-auto w-full py-12 flex md:flex-row px-4 flex-col justify-between gap-8">
        <div class=" md:w-[70%] w-full">
            <div class="max-w-3xl mx-auto">
                <!-- Featured Image -->
                <div class=" md:h-[450px] h-[300px]">
                    @if (count($package->media) > 0)
                        <img id="featuredImage" class="h-full w-full rounded-lg" src="{{ $package->media[0]->getFullUrl() }}"
                            alt="">
                    @endif
                </div>

                <!-- Scrollable Thumbnail Gallery -->
                <div class="relative mt-4 flex items-center justify-center">
                    <div id="thumbnailContainer"
                        class="grid grid-flow-col auto-cols-[100px] overflow-x-auto gap-4 scrollbar-hide px-8">
                        @forelse ($package->media as $media)
                        @empty
                        @endforelse
                        <img class="thumbnail h-auto max-w-full rounded-lg cursor-pointer" src="{{ $media->getFullUrl() }}"
                            alt="">
                    </div>
                </div>
            </div>

            <div class="relative font-inter antialiased mt-12 bg-slate-50 px-4 py-6 rounded-md">
                <div class="divide-y divide-slate-200">
                    <!-- Accordion item -->
                    <div x-data="{ expanded: true }" class="py-2">
                        <h2>
                            <button id="faqs-title-03" type="button"
                                class="flex items-center justify-between w-full text-left font-semibold py-2"
                                @click="expanded = !expanded" :aria-expanded="expanded" aria-controls="faqs-text-03">
                                <span>Details</span>
                                <svg class="fill-indigo-500 shrink-0 ml-8" width="16" height="16"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect y="7" width="16" height="2" rx="1"
                                        class="transform origin-center transition duration-200 ease-out"
                                        :class="{ '!rotate-180': expanded }" />
                                    <rect y="7" width="16" height="2" rx="1"
                                        class="transform origin-center rotate-90 transition duration-200 ease-out"
                                        :class="{ '!rotate-180': expanded }" />
                                </svg>
                            </button>
                        </h2>
                        <div id="faqs-text-03" role="region" aria-labelledby="faqs-title-03"
                            class="grid text-sm  text-slate-600 overflow-hidden transition-all duration-300 ease-in-out"
                            :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'">
                            <div class="overflow-hidden">
                                {!! $package->description !!}
                            </div>
                        </div>
                    </div>
                    <!-- Accordion item -->
                    <div x-data="{ expanded: false }" class="py-2">
                        <h2>
                            <button id="faqs-title-04" type="button"
                                class="flex items-center justify-between w-full text-left font-semibold py-2"
                                @click="expanded = !expanded" :aria-expanded="expanded" aria-controls="faqs-text-04">
                                <span>Itinerary</span>
                                <svg class="fill-indigo-500 shrink-0 ml-8" width="16" height="16"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect y="7" width="16" height="2" rx="1"
                                        class="transform origin-center transition duration-200 ease-out"
                                        :class="{ '!rotate-180': expanded }" />
                                    <rect y="7" width="16" height="2" rx="1"
                                        class="transform origin-center rotate-90 transition duration-200 ease-out"
                                        :class="{ '!rotate-180': expanded }" />
                                </svg>
                            </button>
                        </h2>
                        <div id="faqs-text-04" role="region" aria-labelledby="faqs-title-04"
                            class="grid  text-sm text-slate-600 overflow-hidden transition-all duration-300 ease-in-out"
                            :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'">
                            <div class="overflow-hidden ">
                                {!! $package->itinerary !!}
                            </div>
                        </div>
                    </div>
                    <div x-data="{ expanded: false }" class="py-2">
                        <h2>
                            <button id="faqs-title-04" type="button"
                                class="flex items-center justify-between w-full text-left font-semibold py-2"
                                @click="expanded = !expanded" :aria-expanded="expanded" aria-controls="faqs-text-04">
                                <span>Remarks</span>
                                <svg class="fill-indigo-500 shrink-0 ml-8" width="16" height="16"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect y="7" width="16" height="2" rx="1"
                                        class="transform origin-center transition duration-200 ease-out"
                                        :class="{ '!rotate-180': expanded }" />
                                    <rect y="7" width="16" height="2" rx="1"
                                        class="transform origin-center rotate-90 transition duration-200 ease-out"
                                        :class="{ '!rotate-180': expanded }" />
                                </svg>
                            </button>
                        </h2>
                        <div id="faqs-text-04" role="region" aria-labelledby="faqs-title-04"
                            class="grid  text-sm text-slate-600 overflow-hidden transition-all duration-300 ease-in-out"
                            :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'">
                            <div class="overflow-hidden">
                                {!! $package->remarks !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="md:w-[30%] w-full">
            <div class=" bg-slate-50 shadow-sm rounded-md mb-4">
                <h4 class=" bg-sky-200 text-sky-800 text-base font-bold py-3 text-center rounded-tl-md rounded-tr-md">
                    Package Details</h4>
                <div class=" py-6 px-4">
                    <h2 class=" text-lg font-bold text-dark pb-2">{{ $package->name }}</h2>
                    @if ($package->category)
                        <p class=" text-blue-700 font-bold text-xs uppercase">{{ $package->category->name }}</p>
                    @endif
                    <p class="text-sm text-slate-600 py-3">
                        Starts From: BDT {{ $package->price }} / Per person
                    </p>
                </div>
            </div>
            <div class=" bg-slate-50 shadow-sm rounded-md">
                <h4 class=" bg-sky-200 text-sky-800 text-base font-bold py-3 text-center rounded-tl-md rounded-tr-md">
                    Contact Details</h4>
                <div class=" py-6 px-4">
                    <div class=" px-3 py-2 bg-white rounded-md gap-5 shadow-sm flex items-center my-2">
                        <span>
                            <i class="fa fa-mobile text-lg text-blue-600" aria-hidden="true"></i>
                        </span>
                        <p class=" text-slate-600 flex flex-col text-base">
                            <span>{{ $package->contact_information['primary_mobile_number'] }}</span>
                            <span>{{ $package->contact_information['secondary_mobile_number'] }}</span>
                        </p>
                    </div>
                    <div class=" px-3 py-2 bg-white rounded-md gap-5 shadow-sm flex items-center my-2">
                        <span>
                            <i class="fa fa-envelope text-lg text-blue-600" aria-hidden="true"></i>
                        </span>
                        <p class="text-slate-600 flex flex-col text-base">
                            <span> {{ $package->contact_information['primary_email_number'] }}</span>
                            <span>{{ $package->contact_information['secondary_email_number'] }}</span>
                        </p>
                    </div>
                    <div class=" px-3 py-2 bg-white rounded-md gap-5 shadow-sm flex items-center my-2">
                        <span>
                            <i class="fa fa-map-pin text-lg text-blue-600" aria-hidden="true"></i>
                        </span>
                        <p class="text-slate-600 flex flex-col text-base">
                            {{ $package->contact_information['address'] }}

                        </p>
                    </div>
                </div>
            </div>
            <div class=" bg-slate-50 shadow-sm rounded-md">
                <h4 class=" bg-sky-200 text-sky-800 text-base font-bold py-3 text-center rounded-tl-md rounded-tr-md">
                    Related Packages</h4>
                <div class=" py-6 px-4">
                    @forelse ($related_packages as $item)
                        <div class=" px-3 py-2 bg-white rounded-md shadow-sm flex flex-col my-2">
                            <a href="{{ route('get.single.package', $item->slug) }}">
                                <h4 class=" text-base">{{ $item->name }}</h4>
                                <p class=" text-slate-600 flex flex-col text-xs">
                                    <span>Starts from: {{ $item->price }} / Per person</span>
                                </p>
                            </a>
                        </div>
                    @empty
                    @endforelse

                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
@endsection

@section('custom_script')
    @if (session()->has('message'))
        <script>
            toastr.success('{{ session('message') }}');
        </script>
    @endif
    <script>
        const featuredImage = document.getElementById("featuredImage");
        const thumbnails = document.querySelectorAll(".thumbnail");
        const thumbnailContainer = document.getElementById("thumbnailContainer");
        const prevBtn = document.getElementById("prevBtn");
        const nextBtn = document.getElementById("nextBtn");

        // Change featured image when clicking on a thumbnail
        thumbnails.forEach((thumbnail) => {
            thumbnail.addEventListener("click", () => {
                featuredImage.src = thumbnail.src;
            });
        });

        // Scroll gallery left/right
        prevBtn.addEventListener("click", () => {
            thumbnailContainer.scrollBy({
                left: -200,
                behavior: "smooth"
            });
        });

        nextBtn.addEventListener("click", () => {
            thumbnailContainer.scrollBy({
                left: 200,
                behavior: "smooth"
            });
        });
    </script>
@endsection