@extends('admin.layouts.layout')
@section('title', 'Edit Data Desa | Skripsi 2024')
@section('nav', 'Edit Data Desa')
@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">Desa</a></li>
            <li class="breadcrumb-item active">Edit Data Desa</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;"></div> --}}

                        <form action="{{route('desa.update', $desa->id)}}" method="post" autocomplete="off" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="nama" class="form-label">*Nama</label>
                                    <input type="text" class="form-control"id="nama"  name="nama" value="{{$desa->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">
                                    <label for="kode_wilayah" class="form-label">*Kode Wilayah</label>
                                    <input type="text" class="form-control" id="kode_wilayah" name="kode_wilayah" oninput="this.value=this.value.replace(/[^\d.]/g, '')" value="{{$desa->kode_wilayah}}"/>
                                    @error('kode_wilayah')
                                    <strong class="fw-bold d-block text-danger mt-2">
                                        <small>&nbsp;* {{ $message }}</small>
                                    </strong>
                                    @enderror
                                </div>
                                {{-- <div class="col-md-12">
                                    <label for="titik_koordinat" class="form-label">*Titik Koordinat</label>
                                    <textarea class="form-control" name="titik_koordinat" cols="30" rows="10" readonly>{{$desa->titik_koordinat}}</textarea>

                                    @error('titik_koordinat')
                                    <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 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'
});

const map = L.map('map', {
center: [-7.582472795110048, 112.72471990234797],
zoom:13,
layers: [peta2]
});

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

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


// FeatureGroup is to store editable layers
var drawnItems =  new L.geoJSON({!! $desa->titik_koordinat !!});
map.addLayer(drawnItems);

var drawControl = new L.Control.Draw({
draw: {
 polygon: true,
 marker: false,
 circle: false,
 rectangle: false,
 circlemarker: false,
 polyline: false,
},
edit: {
 featureGroup: drawnItems
}
});
map.addControl(drawControl);

//  create Coordinate Polygone
map.on('draw:created', function (event) {
var layer = event.layer;
var feature = layer.feature = layer.feature || {};
feature.type = feature.type || "Feature";
var props = feature.properties = feature.properties || {};
drawnItems.addLayer(layer);
$("[name=titik_koordinat]").val(JSON.stringify(drawnItems.toGeoJSON()));
});

// edit draw
map.on('draw:edited', function (e) {
$("[name=titik_koordinat]").val(JSON.stringify(drawnItems.toGeoJSON()));
});

// edit draw
map.on('draw:deleted', function (e) {
$("[name=titik_koordinat]").val(JSON.stringify(drawnItems.toGeoJSON()));
});

L.Control.geocoder().addTo(map);

map.fitBounds(drawnItems.getBounds());
</script>
@endpush