@extends('backend.template-admin')
@section('content')
    <section>
        <div class="flex">
            <button onclick="location.href='/admin/kempen/pengaturan/peta-lokasi/store'"
                class="bg-orange-400 py-1 text-white rounded-md shadow-md mb-5 hover:bg-orange-500 hover:scale-105 hover:-rotate-1 transition px-5">CREATE</button>
        </div>
        <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
            <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                    <tr>
                        <th scope="col" class="px-6 py-3">
                            Geoloc
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Daerah
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Negara
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Negeri
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Aksi
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($data as $item)
                        <tr
                            class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                            <td scope="row"
                                class="px-3 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                                {"longitude1":"0.00","latitude1":"0.00","longitude2":"0.00","latitude2":"0.00"}                            </td>
                            <td class="px-6 py-4">
                                {{ $item->daerah->name }}
                            </td>
                            <td class="px-6 py-4">
                                {{ $item->negara->name }}
                            </td>
                            <td class="px-6 py-4">
                                {{ $item->negeri->name }}
                            </td>
                            <td class="px-1 py-4">
                                <div class="flex gap-5">
                                    <a onclick="return confirm('yakin di hapus ? ')"
                                        href="/admin/kempen/pengaturan/peta-lokasi/delete/{{ $item->id }}">
                                        <i class="fa fa-trash"></i>
                                    </a>
                                    <a href="">
                                        <i class="fa fa-pencil"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </section>
    {{-- <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script>
        $(document).ready(function() {
            var map = L.map('map').setView([5.085, 115.280], 7);
            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            }).addTo(map);

            $('#create-modal').on('shown.bs.modal', function() {
                setTimeout(function() {
                    map.invalidateSize();
                }, 1);
            });

            var marker = null;

            // Add a click event listener to the map
            map.on('click', function(e) {
                var lat = e.latlng.lat;
                var lng = e.latlng.lng;

                // Remove existing marker
                if (marker) {
                    map.removeLayer(marker);
                }

                // Add a marker at the clicked location
                marker = L.marker([lat, lng]).addTo(map);

                // Update the input fields with the longitude and latitude
                $('#longitude').val(lng);
                $('#latitude').val(lat);
            });
        });
    </script> --}}
@endsection