@extends('admin.layouts.layout')
@section('title', 'Show Data Pengiriman | Skripsi 2024')
@section('nav', 'Detail Data Pengiriman')
@section('content')

<div class="pagetitle">
    <nav>
        <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-decoration-none text-black">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{{route('desa.index')}}" class="text-decoration-none text-black">Pengiriman</a></li>
        <li class="breadcrumb-item active">Data Pengiriman {{$kode}}</li>
        </ol>
    </nav>
</div>

<div class="content">
    <div class="row">
        <div class="col-lg-11 mb-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-center">Data Pengiriman {{$kode}}</h5>
                    @if (Session::has('error'))
                    <div class="alert alert-warning alert-dismissible fade show" role="alert">
                        <i class="bi bi-exclamation-triangle me-1"></i> {{ Session::get('error') }}.
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    @endif

                    <div id="map" style="width: 100%; height: 450px; z-index : 0;"></div>
                    @if (Auth::user()->role == 'Admin')

                    <h5 class="card-title text-center p-3">Perhitungan Metode</h5>
                    <div class="table-responsive" id="perbandingan-container">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Perbandingan</th>
                                    <th>Rute</th>
                                    <th>Jarak Total</th>
                                </tr>
                            </thead>
                            <tbody id="perbandingan-body">
                                <!-- Data perbandingan akan ditampilkan di sini -->
                            </tbody>
                        </table>
                        <div id="hasil-akhir">
                            <!-- Jarak terdekat dari semua perbandingan akan ditampilkan di sini -->
                        </div>
                    </div>
                    @elseif (Auth::user()->role == 'Kurir')
                    <div class="table-responsive" id="perbandingan-container">
                        <table class="table" hidden>
                            <thead>
                                <tr>
                                    <th>Perbandingan</th>
                                    <th>Rute</th>
                                    <th>Jarak Total</th>
                                </tr>
                            </thead>
                            <tbody id="perbandingan-body">
                                <!-- Data perbandingan akan ditampilkan di sini -->
                            </tbody>
                        </table>
                        <div id="hasil-akhir" class="mt-3">
                            <!-- Jarak terdekat dari semua perbandingan akan ditampilkan di sini -->
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection



@push('scripts')
<script>
    // Mendapatkan data perbandingan dari server
    let perbandingan = @json($perbandingan);
    let perbandinganBody = document.getElementById('perbandingan-body');
    let hasilAkhirDiv = document.getElementById('hasil-akhir');
    let allDistances = []; // Array untuk menyimpan jarak terdekat dari setiap perbandingan
    let allMarkers = [];
    let shortestDistance = Infinity;
    let shortestDusunNames = null; // Variable untuk menyimpan nama dusun dengan jarak terdekat

    // Inisialisasi peta Leaflet
    let map = L.map('map').setView([-7.582472795110048, 112.72471990234797], 14);

    // Tambahkan tile layer OpenStreetMap
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

   function showComparisonWithDelay(index) {
    if (index >= perbandingan.length) {
        let minDistanceDiv = document.createElement('div');
        minDistanceDiv.innerHTML = `
                <p>Dari ${perbandingan.length} perbandingan. Didapati urutan jalur terpendek yaitu : ${shortestDusunNames.map(dusun => dusun.nama).join(' - ')} Jarak Terdekat : <strong>${shortestDistance.toFixed(2)} km</strong></p>
            `;
            hasilAkhirDiv.appendChild(minDistanceDiv);

            let waypoints = shortestDusunNames.map(dusun => {
                return L.latLng(dusun.latitude, dusun.longitude);
            });

            waypoints.push(L.latLng(shortestDusunNames[0].latitude, shortestDusunNames[0].longitude));

            let control = L.Routing.control({
                waypoints: waypoints,
                createMarker: function(i, wp, nWps) {  // Customize marker creation function
                    if (i === 0) { // Start marker
                        return L.marker(wp.latLng, {
                            icon: L.divIcon({
                                className: 'my-start-icon',
                                html: '<div class="card" style="width: 100px;"><div class="card-body text-center">Mulai</div></div>',
                                iconSize: [150, 150],
                                iconAnchor: [50, 90] // Posisi card di tengah marker
                            }),
                            draggable: false
                        });
                    } else if (i === nWps - 1) { // End marker (same as start marker)
                        return L.marker(wp.latLng, {
                            icon: L.divIcon({
                                className: 'my-end-icon',
                                html: '<div class="card" style="width: 100px;"><div class="card-body text-center">Mulai & Selesai</div></div>',
                                iconSize: [150, 150],
                                iconAnchor: [50, 90] // Posisi card di tengah marker
                            }),
                            draggable: false
                        });
                    } else { // Waypoint marker
                        return L.marker(wp.latLng, {
                            icon: L.divIcon({
                                className: 'my-waypoint-icon',
                                html: '<div class="card" style="width: 100px;"><div class="card-body text-center">Titik ' + i + '</div></div>',
                                iconSize: [150, 150], // Sesuaikan dengan ukuran card
                                iconAnchor: [50, 90] // Posisi card di tengah marker
                            }),
                            draggable: false
                        });
                    }
                }

            }).addTo(map);

            let markers = shortestDusunNames.map((dusun, index) => {
                let marker = L.marker(L.latLng(dusun.latitude, dusun.longitude))
                                .bindPopup(`Dusun ${dusun.nama}`); // Menggunakan nama dusun sebagai teks popup
                return marker;
            });

            // Tambahkan marker kembali ke titik awal
            let startMarker = L.marker(L.latLng(shortestDusunNames[0].latitude, shortestDusunNames[0].longitude))
                                .bindPopup(`Dusun ${shortestDusunNames[0].nama}`);
            markers.push(startMarker);

            // Tambahkan semua marker ke peta
            markers.forEach(marker => {
                marker.addTo(map);
            });

            // Tambahkan semua marker ke dalam array allMarkers
            allMarkers.push(markers);

            return;
    }

        const banding = perbandingan[index];
        const dusunA = L.latLng(banding.dusun_a.latitude, banding.dusun_a.longitude);
        const dusunB = L.latLng(banding.dusun_b.latitude, banding.dusun_b.longitude);
        const dusunC = L.latLng(banding.dusun_c.latitude, banding.dusun_c.longitude);
        const dusunD = L.latLng(banding.dusun_d.latitude, banding.dusun_d.longitude);

        let wp1 = new L.Routing.Waypoint(dusunA);
        let wp2 = new L.Routing.Waypoint(dusunB);
        let wp3 = new L.Routing.Waypoint(dusunC);
        let wp4 = new L.Routing.Waypoint(dusunD);
        let wp5 = new L.Routing.Waypoint(dusunA);

        let routeUs = L.Routing.osrmv1();
        routeUs.route([wp1, wp2, wp3, wp4, wp5], (err, routes) => {
            if (!err) {
                let bestDistance = Infinity;
                let bestRoute = null;

                // Mencari rute terpendek
                routes.forEach((route, i) => {
                    if (route.summary.totalDistance < bestDistance) {
                        bestDistance = route.summary.totalDistance;
                        bestRoute = route;
                    }
                });

                // Konversi jarak dari meter menjadi kilometer
                let distanceInKm = bestDistance / 1000;

                // Menambahkan jarak terdekat dari perbandingan ini ke dalam array
                allDistances.push(distanceInKm);

                // Membuat elemen HTML untuk menampilkan jarak terpendek dan nama dusun
                let tr = document.createElement('tr');
                tr.innerHTML = `
                    <td>Perbandingan ${index + 1}</td>
                    <td>${banding.dusun_a.nama} - ${banding.dusun_b.nama} - ${banding.dusun_c.nama}- ${banding.dusun_d.nama}   - ${banding.dusun_a.nama}</td>
                    <td>${distanceInKm.toFixed(2)} km</td>
                `;
                perbandinganBody.appendChild(tr);

                // Jika jarak terdekat dari perbandingan ini lebih kecil dari jarak terdekat sebelumnya
                if (distanceInKm < shortestDistance) {
                    shortestDistance = distanceInKm;
                    shortestDusunNames = [banding.dusun_a, banding.dusun_b, banding.dusun_c,banding.dusun_d ]; // simpan nama dusun terpendek
                }
            }
        });
        setTimeout(() => {
            showComparisonWithDelay(index + 1);
        }, 1000);
   }
   showComparisonWithDelay(0);

</script>
@endpush