@extends('web.layout')


@section('content')
    <style>
        #map {
            width: 100%;       /* atau misalnya 600px */
            height: 500px;     /* atur tinggi sesuai kebutuhan */
        }
    </style>
    <main id="content" class="site-main">
        <section class="contact-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">Peta Wisata</h1>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ***Inner Banner html end here*** -->
            <!-- ***contact section html start form here*** -->
            <div class="inner-contact-wrap">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="section-heading">
                                <h5 class="sub-title">Kunjungi peta wisata</h5>
                                <h2 class="section-title">PETA WISATA YANG ADA DI KAB. PROBOLINGGO</h2>
                                <p>Kunjungi dan nikmati pengalaman - pengalaman healing anda yang baru, jelajahi semua wisata yang ada di kabupaten probolinggo ini, dijamin anda mendapatkan pengalaman baru.</p>
                                <div class="social-icon">
                                    <ul>
                                        <li>
                                            <a href="https://www.facebook.com/pariwisata.probolinggo.7" target="_blank">
                                                <i class="fab fa-facebook-f" aria-hidden="true"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="https://www.instagram.com/pariwisatakabupatenprobolinggo/" target="_blank">
                                                <i class="fab fa-instagram" aria-hidden="true"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="https://www.youtube.com/watch?v=nxGOfXS_qkM&t=4s" target="_blank">
                                                <i class="fab fa-youtube" aria-hidden="true"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="contact-map">
                                <div id="map"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ***contact section html start form here*** -->
            <!-- ***iconbox section html start form here*** -->
            <div class="contact-details-section bg-light-grey">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-lg-4">
                            <div class="icon-box border-icon-box">
                                <div class="box-icon">
                                    <i aria-hidden="true" class="fas fa-envelope-open-text"></i>
                                </div>
                                <div class="icon-box-content">
                                    <h4>Alamat email disporabudpar kab. probolinggo</h4>
                                    <ul>
                                        <li>
                                            <a href="mailto:support@gmail.com">support@gmail.com</a>
                                        </li>
                                        <li>
                                            <a href="mailto:name@comapny.com">name@comapny.com</a>
                                        </li>
                                        <li>
                                            <a href="mailto:info@domain.com">info@domain.com</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="icon-box border-icon-box">
                                <div class="box-icon">
                                    <i aria-hidden="true" class="fas fa-phone-alt"></i>
                                </div>
                                <div class="icon-box-content">
                                    <h4>No. Telp Disporabudpar kab. probolinggo</h4>
                                    <ul>
                                        <li>
                                            <a href="tell:+132599254669">(0335) 428367</a>
                                        </li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="icon-box border-icon-box">
                                <div class="box-icon">
                                    <i aria-hidden="true" class="fas fa-map-marker-alt"></i>
                                </div>
                                <div class="icon-box-content">
                                    <h4>Alamat disporabudpar kab. probolinggo</h4>
                                    <ul>
                                        <li>
                                            Krajan, Pabean,
                                        </li>
                                        <li>
                                            Kec. Dringu, Probolinggo,
                                        </li>
                                        <li>
                                            Jawa Timur (67216)
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ***iconbox section html end here*** -->
        </section>
    </main>
@endsection
@push('scripts')
    <script>
        var map = L.map('map').setView([-7.754, 113.216], 10); // 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);

        const locations = @json($locations);

        locations.forEach(loc => {
            L.marker([loc.lat, loc.lng])
                .addTo(map)
                .bindPopup("<b>" + loc.name + "</b><br>" + loc.address + "<br>" + "<img src='" + loc.image + "' width='100%'>");
        });
    </script>
@endpush