@extends('admin.layouts.layout')
@section('title', 'Tambah Data Dusun | Skripsi 2024')
@section('nav', 'Tambah 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">Tambah 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.store')}}" method="post" autocomplete="off" enctype="multipart/form-data">
                            @csrf
                        <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 }}" {{ old('desa') == $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="{{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 mt-2">
                                <label for="latitude" class="form-label">*latitude</label>
                                <input type="text" class="form-control"id="latitude"  name="latitude" value="{{old('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="{{old('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: [-7.582472795110048, 112.72471990234797],
        zoom: 13,
        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 curLocation = [-7.582472795110048, 112.72471990234797];

    map.attributionControl.setPrefix(false);

    var marker = new L.marker(curLocation, {
        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