@extends('admin.layouts.layout')
@section('title', 'Tambah Data Desa | Skripsi 2024')
@section('nav', 'Tambah 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">Tambah 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.store')}}" method="post" autocomplete="off" enctype="multipart/form-data">
                        @csrf
                        <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="{{old('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="{{old('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-6">
                                <label for="warna" class="form-label">*Kode Wilayah</label>
                                <input type="color" class="form-control" id="warna" name="warna"  value="{{old('warna')}}"/>
                                @error('warna')
                                    <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>{{old('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.FeatureGroup();
     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);
    </script>

@endpush