@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">Profil Wisata</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">
                                        <h2>AYO LIBURAN KE {{ $data->nama }}</h2>
                                        <div class="rating-start-wrap">
                                            <div class="rating-start">
                                                <span style="width: 80%"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{ $data->alamat }}
                                <div class="package-meta">
                                    <ul>
                                        <li>
                                            <i class="fas fa-clock"></i>
                                            Buka 24 jam
                                        </li>
                                        <li>
                                            <i class="fas fa-user-friends"></i>
                                            Maksimal Pengunjung : -
                                        </li>
                                        <li>
                                            <i class="fas fa-swimmer"></i>
                                            Category : {{ $data->kategori }}
                                        </li>
                                    </ul>
                                </div>
                                <figure class="single-package-image">
                                    <img src="{{ url("storage/".$data->foto) }}" alt="">
                                </figure>
                                <div class="package-content-detail">
                                    <article class="package-overview">
                                        <h3>OVERVIEW :</h3>
                                        {!! $data->deskripsi !!}
                                    </article>
                                    <article class="package-include bg-light-grey">
                                        <h3>Fasilitas di lokasi wisata :</h3>
                                        {!! $data->fasilitas !!}
                                    </article>
{{--                                    {{ $data }}--}}
                                    @if( $data->dikelola_pemerintah == "Y")
                                        <article class="package-ininerary">
                                            <h3>Cara booking wisata :</h3>
                                            <p>Berikut adalah tata cara booking untuk masuk ke tempat wisata 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>
                                    @endif

                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="sidebar">
                                <div class="booking-form-wrap">
                                    <div class="booking-form-inner primary-bg text-center">
                                        <aside class="widget widget_text text-left">
                                            <h3 class="widget-title">Detail Informasi</h3>
                                            <div class="textwidget widget-text" style="color: white">
                                                <ul>
                                                    <li>
                                                        <a href="tel: +62 335 428367" target="_blank" style="color: white">
                                                            <i aria-hidden="true" class="icon icon-phone1"></i>
                                                            {{ $data->whatsapp }}
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="mailtop:budpar.kabprob@gmail.com" target="_blank" style="color: white">
                                                            <i aria-hidden="true" class="icon icon-envelope1"></i>
                                                            {{ $data->email }}
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="https://www.instagram.com/pariwisatakabupatenprobolinggo/" target="_blank" style="color: white">
                                                            <i aria-hidden="true" class="fab fa-instagram"></i>
                                                            {{ $data->instagram }}
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="https://www.instagram.com/pariwisatakabupatenprobolinggo/" target="_blank" style="color: white">
                                                            <i aria-hidden="true" class="fab fa-facebook"></i>
                                                            {{ $data->facebook }}
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="https://www.instagram.com/pariwisatakabupatenprobolinggo/" target="_blank" style="color: white">
                                                            <i aria-hidden="true" class="fab fa-twitter"></i>
                                                            {{ $data->twitter }}
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <i aria-hidden="true" class="icon icon-map-marker1"></i>
                                                        {{ $data->alamat }}
                                                    </li>
                                                    <li>
                                                        <i aria-hidden="true" class="icon icon-arrow-right-circle"></i>
                                                        Pintu Masuk belum terdaftar
                                                    </li>
                                                    <li>
                                                        <i aria-hidden="true" class="icon icon-arrow-right-circle"></i>
                                                        tidak ada situs
                                                    </li>
                                                </ul>
                                                <br>
                                                <p>
                                                    @if($data->dikelola_pemerintah == "Y")
                                                        <a href="{{ route('web.destinasi.peraturan',$data->slug) }}" target="_blank"
                                                          style="display: inline-block; padding: 10px 20px; background-color: #022758; color: white; text-decoration: none; border-radius: 25px;">
                                                            Booking sekarang yukk
                                                        </a>
                                                    @endif
                                                </p>
                                            </div>
                                        </aside>
                                    </div>
                                </div>
                                <aside class="widget widget_category">
                                    <h3 class="widget-title">Informasi tambahan</h3>
                                    <ul >
                                        <li>
                                            <i aria-hidden="true" class="fas fa-dot-circle"></i>
                                            <a href="#" style="color: #3A78C9">Tarif Masuk :</a>
                                            <span style="color: #3A78C9">WNI Rp. {{ number_format($data->tarif_wni, 0, ',', '.') }} WNA Rp. {{ number_format($data->tarif_wna, 0, ',', '.') }}</span>
                                        </li>
                                        <li>
                                            <i aria-hidden="true" class="fas fa-dot-circle"></i>
                                            <a href="#" style="color: #3A78C9">jam buka :</a>
                                            <span style="color: #3A78C9">{{ $data->jam_buka }} - {{ $data->jam_tutup }}</span>
                                        </li>
                                        <li>
                                            <i aria-hidden="true" class="fas fa-dot-circle"></i>
                                            <a href="#" style="color: #3A78C9">Tarif parkir :</a>
{{--                                            <span style="color: #3A78C9">Rp. {{ number_format($data->tarif_parkir, 0, ',', '.') }}</span>--}}
                                            <span style="color: #3A78C9">{!! $data->tarif_parkir !!}</span>
                                        </li>
                                    </ul>
                                </aside>

                                <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->nama }}!</b>.").openPopup();
    </script>
@endpush