@extends('admin.layouts.layout')
@section('title', 'Edit Data Dusun | Skripsi 2024')
@section('nav', 'Edit Data Dusun')
@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('dusun.index')}}" class="text-decoration-none text-black">Dusun</a></li>
            <li class="breadcrumb-item active">Edit Data Dusun</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">Lengkapi Data Desa di bawah ini</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>

                        <form action="{{route('dusun.update', $dusun->id)}}" method="post" autocomplete="off">
                            @csrf
                            @method('PUT')
                            <div class="row">
                                <div class="col-md-6 mt-2">
                                    <label for="desa_id" class="form-label">*Desa</label>
                                    <select name="desa_id" id="desa_id" class="form-select">
                                        @foreach ($desa as $item)
                                            <option value="{{ $item->id }}" {{ $dusun->desa_id == $item->id ? 'selected' : '' }}>
                                                {{ $item->nama }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-6 mt-2">
                                    <label for="nama" class="form-label">*Nama</label>
                                    <input type="text" class="form-control"id="nama"  name="nama" value="{{$dusun->nama}}" />
                                    @error('nama')
                                    <strong class="fw-bold d-block text-danger mt-2">
                                        <small>&nbsp;* {{ $message }}</small>
                                    </strong>
                                    @enderror
                                </div>

                                <div class="col-md-6 mt-2">
                                    <label for="latitude" class="form-label">*latitude</label>
                                    <input type="text" class="form-control"id="latitude"  name="latitude" value="{{$dusun->latitude}}" readonly />
                                    @error('latitude')
                                    <strong class="fw-bold d-block text-danger mt-2">
                                        <small>&nbsp;* {{ $message }}</small>
                                    </strong>
                                    @enderror
                                </div>

                                <div class="col-md-6 mt-2">
                                    <label for="longitude" class="form-label">*longitude</label>
                                    <input type="text" class="form-control"id="longitude"  name="longitude" value="{{$dusun->longitude}}" readonly/>
                                    @error('longitude')
                                    <strong class="fw-bold d-block text-danger mt-2">
                                        <small>&nbsp;* {{ $message }}</small>
                                    </strong>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-12 mt-4 text-end">
                                <button type="submit" class="btn btn-success">
                                    Simpan
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    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'
    });

    const map = L.map('map', {
        center: [{!! $dusun->latitude !!}, {!! $dusun->longitude !!}], // Menggunakan koordinat yang telah ditetapkan sebelumnya
        zoom: 17, // Tingkat zoom yang diinginkan
        layers: [peta2]
    });

    const baseLayers = {
        "Streets": peta2
    };

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

    // FeatureGroup is to store editable layers
    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

    var latInput = document.querySelector("[name=latitude]");
    var lngInput = document.querySelector("[name=longitude]");

    var marker = new L.marker([{!! $dusun->latitude !!}, {!! $dusun->longitude !!}], { // Menambahkan marker pada posisi yang telah ditetapkan sebelumnya
        draggable: 'true'
    }).addTo(map);

    marker.on('dragend', function (event) {
        var position = marker.getLatLng();
        marker.setLatLng(position, {
            draggable: 'true',
        }).bindPopup(position).update();
        latInput.value = position.lat;
        lngInput.value = position.lng;
    });

    map.on("click", function (e) {
        var lat = e.latlng.lat;
        var lng = e.latlng.lng;
        if (!marker) {
            marker = L.marker(e.latlng).addTo(map);
        } else {
            marker.setLatLng(e.latlng);
        }
        latInput.value = lat;
        lngInput.value = lng;
    });
</script>
@endpush