@extends('layout')

@section('container')
        <!-- Hero Start -->
        <section class="py-36 lg:py-64 w-full table relative" style="background: url('assets/images/balinese-people-traditional-clothes-during-religious-ceremony-pura-taman-ayun-temple-bali-indonesia.jpg') center; background-size: cover;" id="home">
            <div class="absolute inset-0 bg-black opacity-80"></div>
            <div class="container relative">
                <div class="grid grid-cols-1 mt-12">
                    <h4 class="text-white lg:text-5xl text-4xl lg:leading-normal leading-normal font-medium mb-7 position-relative">Find The Perfect <span class="typewrite relative text-type-element" data-period="2000" data-type='[ "Tour", "Travel", "Guide", "VTC" ]'></span> In Bali</h4>

                    <p class="text-white opacity-50 mb-0 max-w-2xl text-lg">Launch your campaign and avail our services to explore Bali.</p>

                    <div class="relative mt-10">
                        <a href="#about" class="btn bg-amber-600 hover:bg-amber-700 border-amber-600 hover:border-amber-700 text-white rounded-md">Get Started</a>
                    </div>
                </div>
            </div><!--end container-->
        </section><!--end section-->
        <!-- Hero End -->

        <!-- Start -->
        <section class="relative md:py-24 py-16 bg-zinc-50 dark:bg-gray-800" id="about">
            <div class="container mx-auto">
                <div class="grid grid-cols-1 lg:grid-cols-12 md:grid-cols-2 gap-10 items-center">
                    <div class="lg:col-span-5">
                        <div class="relative">
                            <img src="/assets/images/profile.jpeg" class="rounded-lg shadow-lg relative" alt="">
                        </div>
                    </div><!--end col-->

                    <div class="lg:col-span-7">
                        <div class="lg:ml-7">
                            <h6 class="text-amber-600 text-base font-medium uppercase mb-2">Who Am I ?</h6>
                            <h3 class="mb-4 md:text-2xl text-xl font-medium dark:text-white">Dhe Angga</h3>

                            <p class="text-slate-400 dark:text-slate-300 max-w-2xl mx-auto">
                                Hy, my name is Dhe Angga
                            </p>
                            <div class="relative mt-10">
                                <a href="#contact" class="btn bg-amber-600 hover:bg-amber-700 border-amber-600 hover:border-amber-700 text-white rounded-md">Contact Me</a>
                            </div>
                        </div>
                    </div><!--end col-->
                </div><!--end grid-->
            </div><!--end container-->
        </section><!--end section-->
        <!-- End -->

         <!-- Start -->
         <section class="relative md:py-24 py-16" id="packages">
            <div class="container">
                <div class="grid grid-cols-1 pb-8 text-center">
                    <h3 class="mb-4 md:text-2xl text-xl font-medium dark:text-white">Favorite Packages</h3>
                    <p class="text-slate-400 dark:text-slate-300 max-w-xl mx-auto">These are some of our mainstay places that you must visit while on vacation in Bali</p>
                </div><!--end grid-->

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

                    @foreach($packages as $k => $package)
                    <div class="blog relative rounded-md shadow shadow-slate-200 dark:shadow-slate-800 overflow-hidden">
                        @php
                            $images = json_decode($package->images, true);
                            $image = @$images[0];
                            if (!str_contains($image, 'http')) {
                                $image = "/assets/images/packages/$image";
                            }
                        @endphp
        
                        <img src="{{ $image }}" alt="">
        
                        <div class="content p-6">
                            <a href="{{ url('/package') }}/{{ $package->slug }}" class="text-lg hover:text-amber-600 dark:text-white dark:hover:text-amber-600 transition-all duration-500 ease-in-out font-medium">{{ $package->name }}</a>
                            <p class="text-slate-400 mt-3">{{ substr($package->desc_1, 0, 100) }} [...]</p>
        
                            <div class="mt-5">
                                <a href="{{ url('/package') }}/{{ $package->slug }}" class="btn btn-link hover:text-orange-600 dark:hover:text-orange-600 after:bg-orange-600 dark:text-white transition duration-500">Read More <i class="uil uil-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                    @endforeach
        
                </div>

                <!--  -->
                {{--
                <div class="grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 gap-6 mt-8">
                    <div class="blog relative rounded-md shadow shadow-slate-200 dark:shadow-slate-800 overflow-hidden">
                        <img src="/assets/images/packages/nusa_penida_1.jpg" alt="">

                        <div class="content p-6">
                            <a href="{{ url('/package/west-nusa-penida') }}" class="text-lg hover:text-amber-600 dark:text-white dark:hover:text-amber-600 transition-all duration-500 ease-in-out font-medium">West Nusa Penida Tour</a>
                            <p class="text-slate-400 mt-3">Visiting beautiful beaches in Nusa Penida Bali</p>

                            <ul class="self-start px-4 pt-4">
                                <!--<li class="flex items-center my-1 text-slate-400 dark:text-slate-300">-->
                                <!--    <i class="uil uil-dollar-sign-alt text-lg text-green-600 mr-1"></i>-->
                                <!--    <span>From IDR 975k/car</span>-->
                                <!--</li>-->
                                <li class="flex items-center my-1 text-slate-400 dark:text-slate-300">
                                    <i class="uil uil-map-marker-shield text-lg text-green-600 mr-1"></i>
                                    <span>5 Spots</span>
                                </li>
                                <li class="flex items-center my-1 text-slate-400 dark:text-slate-300">
                                    <i class="uil uil-clock text-lg text-green-600 mr-1"></i>
                                    <span>Departure 6:00 am - 6:30 am</span>
                                </li>
                            </ul>

                            <div class="mt-5">
                                <a href="{{ url('/package/west-nusa-penida') }}" class="btn btn-link hover:text-orange-600 dark:hover:text-orange-600 after:bg-orange-600 dark:text-white transition duration-500">Read More <i class="uil uil-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>

                    <div class="blog relative rounded-md shadow shadow-slate-200 dark:shadow-slate-800 overflow-hidden">
                        <img src="/assets/images/packages/ubud_ (1).jpg" alt="">

                        <div class="content p-6">
                            <a href="{{ url('/package/ubud-tours') }}" class="text-lg hover:text-amber-600 dark:text-white dark:hover:text-amber-600 transition-all duration-500 ease-in-out font-medium">Ubud Tour</a>
                            <p class="text-slate-400 mt-3">Located far from the crowds, Ubud is quite exclusive to visit.</p>

                            <ul class="self-start px-4 pt-4">
                                <!--<li class="flex items-center my-1 text-slate-400 dark:text-slate-300">-->
                                <!--    <i class="uil uil-dollar-sign-alt text-lg text-green-600 mr-1"></i>-->
                                <!--    <span>From IDR 610k/car</span>-->
                                <!--</li>-->
                                <li class="flex items-center my-1 text-slate-400 dark:text-slate-300">
                                    <i class="uil uil-map-marker-shield text-lg text-green-600 mr-1"></i>
                                    <span>6 Spots</span>
                                </li>
                                <li class="flex items-center my-1 text-slate-400 dark:text-slate-300">
                                    <i class="uil uil-clock text-lg text-green-600 mr-1"></i>
                                    <span>Departure 8:30 am - 9:00 am</span>
                                </li>
                            </ul>

                            <div class="mt-5">
                                <a href="{{ url('/package/ubud-tours') }}" class="btn btn-link hover:text-orange-600 dark:hover:text-orange-600 after:bg-orange-600 dark:text-white transition duration-500">Read More <i class="uil uil-arrow-right"></i></a>
                            </div>

                        </div>
                    </div>

                    <div class="blog relative rounded-md shadow shadow-slate-200 dark:shadow-slate-800 overflow-hidden">
                        <img src="assets/images/karangasem.jpg" alt="">

                        <div class="content p-6">
                            <a href="{{ url('/package/east-bali-tour') }}" class="text-lg hover:text-amber-600 dark:text-white dark:hover:text-amber-600 transition-all duration-500 ease-in-out font-medium">East Bali Tour</a>
                            <p class="text-slate-400 mt-3">Explore tourism in East Bali that is unique to culture</p>

                            <ul class="self-start px-4 pt-4">
                                <!--<li class="flex items-center my-1 text-slate-400 dark:text-slate-300">-->
                                <!--    <i class="uil uil-dollar-sign-alt text-lg text-green-600 mr-1"></i>-->
                                <!--    <span>From IDR 710k/car</span>-->
                                <!--</li>-->
                                <li class="flex items-center my-1 text-slate-400 dark:text-slate-300">
                                    <i class="uil uil-map-marker-shield text-lg text-green-600 mr-1"></i>
                                    <span>4 Spots</span>
                                </li>
                                <li class="flex items-center my-1 text-slate-400 dark:text-slate-300">
                                    <i class="uil uil-clock text-lg text-green-600 mr-1"></i>
                                    <span>Departure 8:30 am - 9:00 am</span>
                                </li>
                            </ul>

                            <div class="mt-5">
                                <a href="{{ url('/package/east-bali-tour') }}" class="btn btn-link hover:text-orange-600 dark:hover:text-orange-600 after:bg-orange-600 dark:text-white transition duration-500">Read More <i class="uil uil-arrow-right"></i></a>
                            </div>

                        </div>
                    </div>


                    {{-- <div class="blog relative rounded-md shadow shadow-slate-200 dark:shadow-slate-800 overflow-hidden">
                        <img src="assets/images/pura-ulun-danu-bratan-bali-hindu-temple-surrounded-by-flowers-bratan-lake.jpg" alt="">

                        <div class="content p-6">
                            <a href="javascript:void(0)" class="text-lg hover:text-amber-600 dark:text-white dark:hover:text-amber-600 transition-all duration-500 ease-in-out font-medium">North Waterfall Tour</a>
                            <p class="text-slate-400 mt-3">Explore the water tourism area of North Bali</p>

                            <ul class="self-start px-4 pt-4">
                                <!--<li class="flex items-center my-1 text-slate-400 dark:text-slate-300">-->
                                <!--    <i class="uil uil-dollar-sign-alt text-lg text-green-600 mr-1"></i>-->
                                <!--    <span>From IDR 750k/car</span>-->
                                <!--</li>-->
                                <li class="flex items-center my-1 text-slate-400 dark:text-slate-300">
                                    <i class="uil uil-map-marker-shield text-lg text-green-600 mr-1"></i>
                                    <span>3 Spots</span>
                                </li>
                                <li class="flex items-center my-1 text-slate-400 dark:text-slate-300">
                                    <i class="uil uil-clock text-lg text-green-600 mr-1"></i>
                                    <span>Departure 8:30 am - 9:00 am</span>
                                </li>
                            </ul>

                        </div>
                    </div>


                    <div class="blog relative rounded-md shadow shadow-slate-200 dark:shadow-slate-800 overflow-hidden">
                        <img src="assets/images/temple-gates-lempuyang-luhur-temple-bali-indonesia.jpg" alt="">

                        <div class="content p-6">
                            <a href="javascript:void(0)" class="text-lg hover:text-amber-600 dark:text-white dark:hover:text-amber-600 transition-all duration-500 ease-in-out font-medium">South Coast Tour</a>
                            <p class="text-slate-400 mt-3">Take your time to explore the amazing beaches of the balinese south coast with this package.</p>

                            <ul class="self-start px-4 pt-4">
                                <!--<li class="flex items-center my-1 text-slate-400 dark:text-slate-300">-->
                                <!--    <i class="uil uil-dollar-sign-alt text-lg text-green-600 mr-1"></i>-->
                                <!--    <span>From IDR 700k/car</span>-->
                                <!--</li>-->
                                <li class="flex items-center my-1 text-slate-400 dark:text-slate-300">
                                    <i class="uil uil-map-marker-shield text-lg text-green-600 mr-1"></i>
                                    <span>7 Spots</span>
                                </li>
                                <li class="flex items-center my-1 text-slate-400 dark:text-slate-300">
                                    <i class="uil uil-clock text-lg text-green-600 mr-1"></i>
                                    <span>Departure 12:00 pm - 12:30 pm</span>
                                </li>
                            </ul>

                        </div>
                    </div>

                    <div class="blog relative rounded-md shadow shadow-slate-200 dark:shadow-slate-800 overflow-hidden">
                        <img src="assets/images/tanah-lot-temple-bali-island-indonesia.jpg" alt="">

                        <div class="content p-6">
                            <a href="javascript:void(0)" class="text-lg hover:text-amber-600 dark:text-white dark:hover:text-amber-600 transition-all duration-500 ease-in-out font-medium">Bratan & Tanah Lot Tour</a>
                            <p class="text-slate-400 mt-3">This little island near Bali is a peaceful place well known for the temples and the serenity who spreads from it.</p>

                            <ul class="self-start px-4 pt-4">
                                <!--<li class="flex items-center my-1 text-slate-400 dark:text-slate-300">-->
                                <!--    <i class="uil uil-dollar-sign-alt text-lg text-green-600 mr-1"></i>-->
                                <!--    <span>From IDR 710k/car</span>-->
                                <!--</li>-->
                                <li class="flex items-center my-1 text-slate-400 dark:text-slate-300">
                                    <i class="uil uil-map-marker-shield text-lg text-green-600 mr-1"></i>
                                    <span>5 Spots</span>
                                </li>
                                <li class="flex items-center my-1 text-slate-400 dark:text-slate-300">
                                    <i class="uil uil-clock text-lg text-green-600 mr-1"></i>
                                    <span>Departure 8:30 am - 9:00 am</span>
                                </li>
                            </ul>

                        </div>
                    </div> --}}



                </div><!--end grid-->
                --}}

                <div class="pb-8 text-center mt-8">
                    <a href="{{ url('package') }}" class="btn bg-amber-600 hover:bg-amber-700 border-amber-600 hover:border-amber-700 text-white rounded-md">Other Packages</a>
                </div><!--end grid-->


            </div><!--end container-->
        </section><!--end section-->
        <!-- End -->

        <!-- Start -->
        <section class="relative md:py-24 py-16" id="features">
            <div class="container lg mx-auto">
                <div class="grid grid-cols-1 lg:grid-cols-2 md:grid-cols-2 pb-8 items-center">
                    <div>
                        <h6 class="text-amber-600 text-base font-medium uppercase mb-2">What I Do ?</h6>
                        <h3 class="mb-4 md:text-2xl text-xl font-semibold dark:text-white md:mb-0">Perfect Partner to <br> Explore Bali</h3>
                    </div>
                </div><!--end grid-->

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

                    <div class="features p-6 hover:shadow-xl hover:shadow-slate-100 dark:hover:shadow-slate-800 transition duration-500 rounded-3xl mt-8">
                        <div class="w-20 h-20 bg-amber-600/5 text-amber-600 rounded-xl text-3xl flex align-middle justify-center items-center shadow-sm">
                            <i class="uil uil-thumbs-up"></i>
                        </div>
                        <div class="content mt-7">
                            <a href="javascript:void(0)" class="text-lg hover:text-amber-600 dark:text-white dark:hover:text-amber-600 transition-all duration-500 ease-in-out font-medium">Explore Best Place</a>
                            <p class="text-slate-400 mt-3">We will take you to explore Bali and the mysteries in it</p>
                        </div>
                    </div>

                    <div class="features p-6 shadow-xl shadow-slate-100 dark:shadow-slate-800 transition duration-500 rounded-3xl mt-8">
                        <div class="w-20 h-20 bg-amber-600/5 text-amber-600 rounded-xl text-3xl flex align-middle justify-center items-center shadow-sm">
                            <i class="uil uil-shield-exclamation"></i>
                        </div>
                        <div class="content mt-7">
                            <a href="javascript:void(0)" class="text-lg hover:text-amber-600 dark:text-white dark:hover:text-amber-600 transition-all duration-500 ease-in-out font-medium">Feel Safe</a>
                            <p class="text-slate-400 mt-3">We make sure you are always safe and so you can enjoy your trip</p>
                        </div>
                    </div>

                    <div class="features p-6 hover:shadow-xl hover:shadow-slate-100 dark:hover:shadow-slate-800 transition duration-500 rounded-3xl mt-8">
                        <div class="w-20 h-20 bg-amber-600/5 text-amber-600 rounded-xl text-3xl flex align-middle justify-center items-center shadow-sm">
                            <i class="uil uil-estate"></i>
                        </div>

                        <div class="content mt-7">
                            <a href="javascript:void(0)" class="text-lg hover:text-amber-600 dark:text-white dark:hover:text-amber-600 transition-all duration-500 ease-in-out font-medium">Best Place to Stay</a>
                            <p class="text-slate-400 mt-3">We will also provide recommendations for the best places to stay for you</p>
                        </div>
                    </div>

                </div><!--end grid-->
            </div><!--end container-->

        </section>


        <!-- Start -->
        <section class="relative md:py-24 py-16 bg-zinc-50 dark:bg-gray-800" id="portfolio">
            <div class="container">
                <div class="grid grid-cols-1 pb-8 text-center">
                    <h6 class="text-amber-600 text-base font-medium uppercase mb-2">Portfolio</h6>
                    <h3 class="mb-4 md:text-2xl text-xl font-medium dark:text-white">Our Lastest Travel</h3>
                </div><!--end grid-->

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

                    <div class="relative rounded-md shadow-sm overflow-hidden group">
                        <img src="/assets/images/portfolio_1.jpeg" 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="/assets/images/portfolio_1.jpeg" 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>

                    <div class="relative rounded-md shadow-sm overflow-hidden group">
                        <img src="/assets/images/portfolio_2.jpeg" 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="/assets/images/portfolio_2.jpeg" 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>

                    <div class="relative rounded-md shadow-sm overflow-hidden group">
                        <img src="/assets/images/portfolio_3.jpeg" 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="/assets/images/portfolio_3.jpeg" 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>

                </div><!--end grid-->
            </div><!--end container-->
        </section><!--end section-->
        <!-- End -->

        <!-- Start -->
        <section class="py-24 w-full table relative" style="background: url('assets/images/aerial-view-terraced-rice-fields-bali-indonesia.jpg') 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">
                    <h3 class="mb-6 md:text-3xl text-2xl text-white font-medium">Can't wait to enjoy your trip?</h3>

                    <p class="text-white opacity-50 max-w-xl mx-auto">Let's start contacting us to get your best offer. Discounts are waiting for you for your next fun trips.</p>

                    <div class="relative mt-10">
                        <a href="https://wa.me/6281916290350?text=Hi, I'm interested in your tour package" class="btn bg-amber-600 hover:bg-amber-700 border-amber-600 hover:border-amber-700 text-white rounded-md">Contact Me</a>
                    </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="contact">
            <div class="container">
                <div class="grid grid-cols-1 pb-8 text-center">
                    <h6 class="text-amber-600 text-base font-medium uppercase mb-2">Contact Me</h6>
                    <h3 class="mb-4 md:text-2xl text-xl font-medium dark:text-white">Get In Touch!</h3>

                    <p class="text-slate-400 dark:text-slate-300 max-w-xl mx-auto">Launch your campaign and benefit from our expertise on designing and managing conversion centered Tailwind CSS html page.</p>
                </div><!--end grid-->

                <div class="grid grid-cols-1 lg:grid-cols-12 md:grid-cols-2 mt-8 items-center gap-6">
                    <div class="lg:col-span-6">
                        <div class="text-center">
                            <img src="/assets/images/profile_crop.jpeg" class="mx-auto rounded-full border-amber-600 block mb-4" style="width: 50%; border-width: 5px;" />

                            <a href="https://wa.me/6281916290350?text=Hi, I'm interested in your tour package" target="_blank" class="btn bg-amber-600 hover:bg-amber-700 border-amber-600 hover:border-green-700 text-white rounded-md">
                                Call Me On Whatsapp
                            </a>
                        </div>
                    </div>

                    <div class="lg:col-span-6">
                        <div class="lg:ml-8">
                            <div class="flex">
                                <div class="icons text-center mx-auto">
                                    <i class="uil uil-phone block rounded text-2xl dark:text-white mb-0"></i>
                                </div>

                                <div class="flex-1 ml-6">
                                    <h5 class="text-lg dark:text-white mb-2 font-medium">Phone</h5>
                                    <a href="tel:6281916290350" class="text-slate-400">+6281 916 290 350</a>
                                </div>
                            </div>

                            <div class="flex mt-4">
                                <div class="icons text-center mx-auto">
                                    <i class="uil uil-envelope block rounded text-2xl dark:text-white mb-0"></i>
                                </div>

                                <div class="flex-1 ml-6">
                                    <h5 class="text-lg dark:text-white mb-2 font-medium">Email</h5>
                                    <a href="mailto:contact@example.com" class="text-slate-400">contact@example.com</a>
                                </div>
                            </div>

                            <div class="flex mt-4">
                                <div class="icons text-center mx-auto">
                                    <i class="uil uil-map-marker block rounded text-2xl dark:text-white mb-0"></i>
                                </div>

                                <div class="flex-1 ml-6">
                                    <h5 class="text-lg dark:text-white mb-2 font-medium">Location</h5>
                                    <p class="text-slate-400 mb-2">Ubud Regency, Bali, Indonesia</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!--end grid-->
            </div><!--end container-->
        </section><!--end section-->
        <!-- End -->

@stop