@extends('web.layout')


@section('content')
    <style>
        #map {
            width: 100%;
            /* atau misalnya 600px */
            height: 200px;
            /* atur tinggi sesuai kebutuhan */
        }
    </style>
        <main id="content" class="site-main">
            <section class="package-inner-page">
                <!-- ***Inner Banner html start form here*** -->
                <div class="inner-banner-wrap">
                    <div class="inner-baner-container" style="background-image: url( {{ url("landing/assets/images/img7a.jpg") }} );">
                        <div class="container">
                            <div class="inner-banner-content">
                                <h1 class="page-title">Info events</h1>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- ***Inner Banner html end here*** -->
                <!-- ***career section html start form here*** -->
                <div class="inner-package-detail-wrap">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-8 primary right-sidebar">
                                <div class="single-packge-wrap">
                                    <div class="single-package-head d-flex align-items-center">
                                        <div class="package-title">
                                            {{-- {{ $data }} --}}
                                            <h2>{{ $data->judul }}</h2>
                                            <div class="rating-start-wrap">
                                                <div class="rating-start">
                                                    <span style="width: 80%"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="package-meta">
                                        <ul>
                                            <li>
                                                <i class="fas fa-clock"></i>
                                                1N
                                            </li>
                                            <li>
                                                <i class="fas fa-user-friends"></i>
                                                pax: {{ $data->kapasitas }}
                                            </li>
                                            <li>
                                                <i class="fas fa-swimmer"></i>
                                                Category : Music
                                            </li>

                                            <li>
                                                <i class="fas fa-map-marker-alt"></i>
                                                Gn. {{ $data->lokasi }}
                                            </li>
                                        </ul>
                                    </div>
                                    <figure class="single-package-image">
                                        <img src="assets/images/img8.jpg" alt="">
                                    </figure>
                                    <div class="package-content-detail">
                                        <article class="package-overview">
                                            {!! $data->informasi !!}
                                        </article>
                                        <article class="package-ininerary">
                                            <h3>Cara booking ticket :</h3>
                                            <p>Berikut adalah tata cara booking untuk masuk ke lokasi events tersebut</p>
                                            <ul>
                                                <li>
                                                    <i aria-hidden="true" class="fas fa-dot-circle"></i>
                                                    <span>akses ke website smart tourism kabupaten probolinggo</span>
                                                </li>
                                                <li>
                                                    <i aria-hidden="true" class="fas fa-dot-circle"></i>
                                                    <span>silahkan cari, pilih destinasi wisata kemudian klik booking
                                                        tiket</span>
                                                </li>
                                                <li>
                                                    <i aria-hidden="true" class="fas fa-dot-circle"></i>
                                                    <span>Atau klik tombol booking wisata yukk, kemudian cari dan pilih wisata
                                                        tujuan</span>
                                                </li>
                                                <li>
                                                    <i aria-hidden="true" class="fas fa-dot-circle"></i>
                                                    <span>Silahkan mengisi data diri anda, dan data booking</span>
                                                </li>
                                                <li>
                                                    <i aria-hidden="true" class="fas fa-dot-circle"></i>
                                                    <span>klik booking dan silahkan pembayaran melalui payment online bank
                                                        jatim</span>
                                                </li>
                                                <li>
                                                    <i aria-hidden="true" class="fas fa-dot-circle"></i>
                                                    <span>sudah selesai membayar kemudian klik cetak eticket</span>
                                                </li>
                                            </ul>
                                        </article>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="sidebar">
                                    <div class="booking-form-wrap">
                                        <div class="booking-form-inner primary-bg">
                                            <h3>Jadwal dan tempat</h3>
                                            <div class="textwidget widget-text" style="color: white">
                                                <ul>
                                                    <li>
                                                        <a style="color: white">
                                                            No. PIC acara : {{ $data->pic }}
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a style="color: white">
                                                            <b>Lokasi :</b> {{ $data->lokasi }}
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a style="color: white">
                                                            <b>waktu mulai : </b>{{ $data->tanggal_awal }}
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a style="color: white">
                                                            <i></i>
                                                            <b>waktu berakhir :</b> {{ $data->tanggal_akhir }}
                                                            </b>
                                                    </li>

                                                </ul>
                                                <br>
{{--                                                <p><a href="aturan.html" target="_blank"--}}
{{--                                                        style="display: inline-block; padding: 10px 20px; background-color: #022758; color: white; text-decoration: none; border-radius: 25px;">--}}
{{--                                                        Booking sekarang yukk--}}
{{--                                                    </a></p>--}}
                                            </div>
                                        </div>
                                    </div>

                                    {{-- <div class="package-map">
                                        <!-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2483.540423056448!2d-0.12174238402827448!3d51.50330061882345!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604b900d26973%3A0x4291f3172409ea92!2slastminute.com%20London%20Eye!5e0!3m2!1sen!2snp!4v1646314586610!5m2!1sen!2snp" width="600" height="320" style="border:0;" allowfullscreen="" loading="lazy"></iframe> -->
                                        <iframe
                                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d63230.54098821756!2d112.87486553192139!3d-7.9045949597859515!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd6368054021fa9%3A0x85d9dcf251e334ca!2sPenanjakan%20Bromo!5e0!3m2!1sen!2sid!4v1743952327302!5m2!1sen!2sid"
                                            width="600" height="320" style="border:0;" allowfullscreen=""
                                            loading="lazy"></iframe>
                                    </div> --}}
                                    <div id="map"></div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- ***career section html start form here*** -->
            </section>
        </main>
@endsection
@push('scripts')
    <script>
        var map = L.map('map').setView([ {{$data->titik_lokasi}}  ], 13); // Contoh: Jakarta

        // 2. Tambahkan tile layer (background map dari OpenStreetMap)
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap contributors'
        }).addTo(map);
        var marker = L.marker([{{$data->titik_lokasi}} ]).addTo(map);

        // 4. Tambahkan popup ke marker
        marker.bindPopup("<b>{{ $data->judul }}!</b>.").openPopup();
    </script>
@endpush