@extends('layout.front.main')
@section('title')
    @lang('reservasi.title')
@endsection
@section('content')
    <!-- About Banner Section Start -->
    {{-- <section class="d2c_entro_launch_bg">
        <div class="px-4 py-5 my-5 text-center">
            <img class="" src="{{ asset('') }}template/assets/img/logo.png" alt="" style="width: 5%">
            <h1 class="display-5 fw-bold">Merjay</h1>
            <div class="col-lg-6 mx-auto">
            </div>
        </div>
    </section> --}}
    <!-- About Banner Section End -->

    <!-- About Me Section Start -->
    <section class="d2c_about_me_wrapper">
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-lg-8 offset-md-1 offset-lg-2 text-center">
                    {{-- <h4>Tentang</h4> --}}
                    <h2>@lang('reservasi.h2reservasi') {{ $p->nama }}</h2>
                </div>
                <div class="col-lg-10 offset-lg-1 text-center mb-3">
                    <p class="mb-0">@lang('reservasi.preservasi')</p>
                </div>
            </div>
            <div class="row justify-content-center">
                @foreach ($p->detailPaket as $pk)
                    <div class="col-12 col-md-6 col-lg-3 mb-2">
                        <div class="price-card">
                            <div class="text-center">
                                <h3>{{ $pk->nama }}</h3>
                                {{-- <p>Pilihan terbaik untuk pengalaman pertama Anda!</p> --}}
                                <div class="text-start">
                                    <ul class="feature-list">
                                        @foreach ($pk->destinasi as $d)
                                            <li>{{ $d->nama }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                                <div id="carouselDestinasi{{ $pk->id }}" class="carousel slide"
                                    data-bs-ride="carousel">
                                    <div class="carousel-inner">
                                        @foreach ($pk->destinasi as $index => $d)
                                            <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                                                <img src="{{ asset('images/' . $d->gambar) }}" class="d-block w-100"
                                                    alt="{{ $d->nama }}" style="height: 150px; object-fit: cover;">
                                            </div>
                                        @endforeach
                                    </div>
                                    <button class="carousel-control-prev" type="button"
                                        data-bs-target="#carouselDestinasi{{ $pk->id }}" data-bs-slide="prev">
                                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                        <span class="visually-hidden">Previous</span>
                                    </button>
                                    <button class="carousel-control-next" type="button"
                                        data-bs-target="#carouselDestinasi{{ $pk->id }}" data-bs-slide="next">
                                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                        <span class="visually-hidden">Next</span>
                                    </button>
                                </div>
                            </div>
                            <div class="text-center mb-3">
                                <a href="{{ url(App::getLocale() . '/reservasi/' . Crypt::encryptString($p->nama, 'merapinihbos') . '?tipe=' . $pk->nama) }}"
                                    class="btn-select">@lang('reservasi.breservasi')</a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

        </div>
    </section>
    <!-- About Me Section End -->

    <!-- Counter Section Start -->
    {{-- <section class="d2c_counter_wrapper">
        <div class="container">
            <div class="row">
                <div class="col-6 col-lg-3 text-center mb-4 mb-lg-0">
                    <div class="d2c_counter">
                        <h2><span class="count">15</span></h2>
                        <h4 class="mb-0">Years of experience</h4>
                    </div>
                </div>
                <div class="col-6 col-lg-3 text-center mb-4 mb-md-0">
                    <div class="d2c_counter d2c_border">
                        <h2><span class="count">1250</span>+</h2>
                        <h4 class="mb-0">Happy Clients</h4>
                    </div>
                </div>
                <div class="col-6 col-lg-3 text-center">
                    <div class="d2c_counter">
                        <h2><span class="count">1</span>k+</h2>
                        <h4 class="mb-0">Project Done</h4>
                    </div>
                </div>
                <div class="col-6 col-lg-3 text-center">
                    <div class="d2c_counter">
                        <h2><span class="count">100</span>+</h2>
                        <h4 class="mb-0">Giving Consultancy</h4>
                    </div>
                </div>
            </div>
        </div>
    </section> --}}
    <!-- Counter Section End -->
@endsection