@php
    $images = json_decode($package->images, true);
    $image = @$images[0];
    if (!str_contains($image, 'http')) {
        $image = "/assets/images/packages/$image";
    }
@endphp

@extends('layout')

@section('container')

 <!-- Start -->
 <section class="py-24 w-full table relative" style="background: url('{{ $image }}') center; background-size: cover;">
    <div class="absolute inset-0 bg-black opacity-80"></div>
    <div class="container relative">
        <div class="grid grid-cols-1 pb-8 text-center">
            <div class="mt-28">
                <div>
                    <h4 class="lg:text-5xl text-4xl lg:leading-normal leading-normal font-medium mb-7 position-relative text-white uppercase">{{ $package->name }}</h4>
                </div>
            </div>
        </div><!--end grid-->
    </div><!--end container-->
</section><!--end section-->
<!-- End -->

<!-- start -->
<section class="relative md:py-24 py-16 bg-zinc-50 dark:bg-gray-800" id="testi">
    <div class="container">
        <div class="grid grid-cols-1 pb-8 text-center">
            <p class="text-slate-400 dark:text-slate-300 max-w-xl mx-auto text-xl">{{ $package->desc_1 }}</p>
        </div><!--end grid-->

        <div class="grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 gap-6 mt-8">

            @foreach($images as $k => $v)
                @php
                    if (!str_contains($v, 'http')) {
                        $v = "/assets/images/packages/$v";
                    }
                @endphp
            <div class="relative rounded-md shadow-sm overflow-hidden group">
                <img src="{{ $v }}" class="group-hover:origin-center group-hover:scale-110 group-hover:rotate-3 transition duration-500" alt="">
                <div class="absolute inset-0 group-hover:bg-black opacity-50 transition duration-500 z-0"></div>

                <div class="content">
                    <div class="icon absolute z-10 hidden group-hover:block top-4 right-4">
                        <a href="{{ $v }}" class="btn bg-amber-600 hover:bg-amber-700 border-amber-600 hover:border-amber-700 text-white btn-icon rounded-full lightbox"><i class="uil uil-camera"></i></a>
                    </div>
                </div>
            </div>
            @endforeach

        </div>
    </div>
</section>


<section class="relative md:py-24 py-16 bg-white">
    <div class="container">

        <div class="grid grid-cols-1 pb-8 md:text-center max-w-xl mx-auto">
            <h3 class="mb-4 md:text-3xl text-2xl font-medium dark:text-white">Itinerary</h3>

            <ul class="self-start px-4 pt-4">
                @php
                    $itinerary = json_decode($package->itinerary, true);
                @endphp

                @foreach($itinerary as $k => $v)
                <li class="flex items-center my-2 text-slate-400 dark:text-slate-300 text-xl">
                    <i class="uil uil-check-circle text-lg text-green-600 mr-1"></i>
                    <span>{{ $v }}</span>
                </li>
                @endforeach

            </ul>
        </div>

    </div>
</section>


<section class="relative md:py-24 py-16 bg-zinc-50">
    <div class="container">

        <div class="grid md:grid-cols-2  max-w-xl mx-auto">

            <div class="pb-8">
                <h3 class="mb-4 md:text-3xl text-2xl font-medium">Including</h3>
                <ul class="self-start px-4 pt-4">
                    @php
                        $itinerary = json_decode($package->itinerary, true);
                    @endphp

                    @foreach($itinerary as $k => $v)
                    <li class="flex items-center my-2 text-slate-400 dark:text-slate-300 text-xl">
                        <i class="uil uil-check-circle text-lg text-green-600 mr-1"></i>
                        <span>{{ $v }}</span>
                    </li>
                    @endforeach

                </ul>
            </div>


            @if($package->excluding != null)
            <div class="pb-8">
                <h3 class="mb-4 md:text-3xl text-2xl font-medium">Excluding</h3>
                <ul class="self-start px-4 pt-4">
                    @php
                        $excluding = json_decode($package->excluding, true);
                    @endphp

                    @foreach($excluding as $k => $v)
                    <li class="flex items-center my-2 text-slate-400 dark:text-slate-300 text-xl">
                        <i class="uil uil-check-circle text-lg text-green-600 mr-1"></i>
                        <span>{{ $v }}</span>
                    </li>
                    @endforeach

                </ul>
            </div>

            @endif


        </div>

    </div>
</section>


<section class="relative md:py-24 py-16 bg-white">
    <div class="container">

        <div class="grid grid-cols-1 pb-8 md:text-center max-w-xl mx-auto">
            <h3 class="mb-4 md:text-3xl text-2xl font-medium dark:text-white">Pricing</h3>

            @if($package->change_rate != null)
            <h3 class="mb-4 md:text-2xl text-xl font-medium dark:text-white mt-8">Change Rate</h3>
            <ul class="self-start px-4 pt-4">
                @php
                    $change_rate = json_decode($package->change_rate, true);
                @endphp

                @foreach($change_rate as $k => $v)
                <li class="flex items-center my-2 text-slate-400 dark:text-slate-300 text-xl">
                    <i class="uil uil-dollar-sign-alt text-lg text-green-600 mr-1"></i>
                    <span>{{ $v }}</span>
                </li>
                @endforeach
            </ul>

            @endif

            <h3 class="mb-4 md:text-2xl text-xl font-medium dark:text-white mt-8">Pickup Area</h3>
            <ul class="self-start px-4 pt-4">
                @php
                    $pickup_area = json_decode($package->pick_up_area, true);
                @endphp

                @foreach($pickup_area as $k => $v)
                <li class="flex items-center my-2 text-slate-400 dark:text-slate-300 text-xl">
                    <i class="uil uil-check text-lg text-green-600 mr-1"></i>
                    <span>{{ $v }}</span>
                </li>
                @endforeach
            </ul>

        </div>

    </div>
</section>


 <!-- Start -->
 <section class="py-24 w-full table relative" data-jarallax='{"speed": 0.5}' style="background: url('{{ $image }}') center">
    <div class="absolute inset-0 bg-black opacity-80"></div>
    <div class="container relative">
        <div class="grid grid-cols-1 pb-8 text-center">
            <h3 class="mb-6 md:text-3xl text-2xl text-white font-medium">Interest With This Package?</h3>
            <div class="relative mt-10">
                <a target="_blank" href="https://wa.me/6281916290350?text=Hi, I'm interested in your {{ $package->name }} package" class="btn bg-orange-600 hover:bg-orange-700 border-orange-600 hover:border-orange-700 text-white rounded-md">Book Now</a>
            </div>
        </div><!--end grid-->
    </div><!--end container-->
</section><!--end section-->
<!-- End -->


@stop