@extends('layouts.frontend.master')
@section('content')
<div class="leaflet-route-container"
     data-mode="{{ $mode ?? 'route' }}"
     data-location="{{ json_encode($location ?? null) }}"
     data-default-coords="[1.3286065, 124.8150435]">
    <!-- Map Container -->
    <div id="leaflet-map" class="leaflet-route-map"></div>
    <!-- Dynamic Header Berdasarkan Mode -->
    <div class="route-header">
        @if(($mode ?? 'route') === 'route')
            <h3><i class="fas fa-route"></i> Petunjuk Arah</h3>
        @else
            <h3><i class="fas fa-map-marker-alt"></i> Detail Lokasi</h3>
        @endif
    </div>
    <!-- Input Container (Hanya Tampil di Mode Rute) -->
    <div class="route-input-container" @if(($mode ?? 'route') !== 'route') style="display:none" @endif>
        <div class="route-input-group">
            <label for="route-start"><i class="fas fa-map-marker-alt"></i> Start:</label>
            <input type="text" id="route-start" placeholder="Lokasi awal">
        </div>
        <div class="route-input-group">
            <label for="route-end"><i class="fas fa-flag-checkered"></i> End:</label>
            <input type="text" id="route-end"
                   value="{{ $location->name ?? '' }}"
                   placeholder="Lokasi tujuan"
                   @if(isset($location)) readonly @endif>
        </div>
        <button id="btn-calculate-route" class="btn-route-primary">
            <i class="fas fa-route"></i> Hitung Rute
        </button>
    </div>
    <!-- Informasi Lokasi (Hanya Tampil di Mode Show) -->
    @if(($mode ?? 'route') === 'show' && isset($location))
    <div class="location-info-box">
        <div class="location-meta">
            <p><i class="fas fa-address-card"></i> {{ $location->address }}</p>
            <p><i class="fas fa-clock"></i> {{ $location->opening_hours }}</p>
        </div>
    </div>
    @endif
    <!-- Hasil Rute/Instruksi -->
    <div class="route-instructions" id="route-instructions"></div>
</div>
@endsection
@section('javascript')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const container = document.querySelector('.leaflet-route-container');
    const mode = container.dataset.mode;
    const defaultCoords = JSON.parse(container.dataset.defaultCoords);
    const location = container.dataset.location ? JSON.parse(container.dataset.location) : null;
    // Inisialisasi Peta
    const map = L.map('leaflet-map').setView(
        location ? [location.lat, location.lng] : defaultCoords,
        location ? 15 : 13
    );
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
    // Mode Spesifik Logic
    if (mode === 'route') {
        initRouting(map);
    } else if (mode === 'show' && location) {
        showLocationMarker(map, location);
    }
    // Fungsi Shared
    function showLocationMarker(map, location) {
        L.marker([location.lat, location.lng])
            .addTo(map)
            .bindPopup(`<b>${location.name}</b><br>${location.address}`)
            .openPopup();
    }
    function initRouting(map) {
        const routeControl = L.Routing.control({
            waypoints: [],
            routeWhileDragging: true,
            collapsible: true
        }).addTo(map);
        document.getElementById('btn-calculate-route').addEventListener('click', function() {
            const start = document.getElementById('route-start').value;
            const end = document.getElementById('route-end').value;
            if (!start || !end) {
                alert('Mohon isi lokasi awal dan tujuan');
                return;
            }
            Promise.all([
                fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${start}`),
                fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${end}`)
            ]).then(responses => Promise.all(responses.map(res => res.json())))
              .then(results => {
                  const startCoords = L.latLng(results[0][0].lat, results[0][0].lon);
                  const endCoords = L.latLng(results[1][0].lat, results[1][0].lon);
                  routeControl.setWaypoints([startCoords, endCoords]);
              });
        });
    }
});
</script>
@endsection