@extends('layout')

@section('container')

 <!-- 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">
            <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">Our Packages</h4>

                </div>
            </div>
        </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 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>
</section>
@stop