@extends('admin.layouts.layout')
@section('title', 'Informasi Peta | Skripsi 2024')
@section('nav', 'Informasi Peta')
@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">Peta</li>
        <li class="breadcrumb-item active">Informasi Peta</li>
        </ol>
    </nav>
</div>

<div class="container-fluid mb-3">
    <div class="card">
        <div class="card-body">
            <div id="map" style="height: 600px; z-index : 0;"></div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    var peta1 = L.tileLayer('http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', {
        attribution: 'google'
    });

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

    var map = L.map('map', {
        layers: [peta2],  // Default layer
    }).setView([-7.257221472743715, 112.75834095184003], 14);

    var baseLayers = {
        "Satelite": peta1,
        "Streets": peta2
    };

    L.control.layers(baseLayers).addTo(map);

    @foreach($dusun as $marker)
    var marker = L.marker([{{ $marker->latitude }}, {{ $marker->longitude }}]).addTo(map);
    marker.bindPopup("<b>Nama Dusun:</b> {{ $marker->nama }}").openPopup();
    @endforeach
</script>

@endpush