@extends('admin.template.layout')
@section('css')
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>

<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

<!-- ESRI Leaflet JS -->
<script src="https://unpkg.com/esri-leaflet@3.0.11/dist/esri-leaflet.js"></script>

<!-- ESRI Leaflet Geocoder CSS & JS -->
<link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@3.1.3/dist/esri-leaflet-geocoder.css" />
<script src="https://unpkg.com/esri-leaflet-geocoder@3.1.3/dist/esri-leaflet-geocoder.js"></script>
@endsection
@section('content')
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <!--begin::Content wrapper-->
        <div class="d-flex flex-column flex-column-fluid">

            <div id="kt_app_content" class="app-content flex-column-fluid">
                <!--begin::Content container-->
                <div id="kt_app_content_container" class="app-container container-fluid">

                    <!--begin::Tables Widget 13-->
                    <div class="card mb-5 mb-xl-8">
                        <!--begin::Header-->

                        <div class="card-body ps-10 mt-1">
                            <form method="POST" id="form">
                                @csrf
                                @method('PUT')
                                <div class="col-xxl-12">
                                    <div class="row g-8">
                                        <div class="col-lg-6">
                                            <div class="form-group row">
                                                <label class="form-label">Nama</label>
                                                <div class="col-sm-10">
                                                    <input type="text" name="name" class="form-control"
                                                        aria-describedby="name" placeholder="Masukkan Nama" value="{{ $asrama->name }}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group row">
                                                <label class="form-label">Alamat</label>
                                                <div class="col-sm-10">
                                                    <textarea name="address" id="address" class="form-control">{{$asrama->address}}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="form-group row">
                                                <label class="form-label">Lokasi</label>
                                                <div id="map" style="height: 400px"></div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group row">
                                                <label class="form-label">Latitude</label>
                                                <div class="col-sm-10">
                                                    <input type="text" class="form-control" name="longitude" value="{{ $asrama->longtitude }}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group row">
                                                <label class="form-label">Longtitude</label>
                                                <div class="col-sm-10">
                                                    <input type="text" class="form-control" name="latitude" value="{{ $asrama->latitude }}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group row">
                                                <label class="form-label">Status</label>
                                                <div class="col-sm-10">
                                                    <select name="status" id="status" class="form-control"
                                                        data-placeholder="Pilih Status">
                                                        <option value="">Pilih Status</option>
                                                        <option value="1" {{ $asrama->status == 1 ? 'selected' : null }}>Aktif</option>
                                                        <option value="0" {{ $asrama->status == 0 ? 'selected' : null }}>Tidak Aktif</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="col d-flex flex-column">
                            <div class="card-footer">
                                <button type="submit" id="btn-submit" class="btn btn-primary btn-simpan">Simpan</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            // init leaflet
            var lat = {{ $asrama->latitude ?? 0 }};
            var lng = {{ $asrama->longtitude ?? 0 }};

            // Initialize the map
            var map = L.map('map').setView([lat, lng], 19);

            // Add tile layer
            L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);

            // Marker layer
            var marker = L.circle([lat, lng], {
                color: 'blue',
                fillColor: '#00a2e9',
                fillOpacity: 0.5,
                radius: 10
            }).addTo(map);

            // ESRI Geosearch Control
            var searchControl = L.esri.Geocoding.geosearch().addTo(map);
            var results = L.layerGroup().addTo(map);

            // Search results
            searchControl.on('results', function(data){
                results.clearLayers();
                for (var i = 0; i < data.results.length; i++) {
                    var resultLatLng = data.results[i].latlng;

                    results.addLayer(L.marker(resultLatLng));
                    map.setView(resultLatLng, 20);

                    // Update circle marker
                    map.removeLayer(marker);
                    marker = L.circle(resultLatLng, {
                        color: 'blue',
                        fillColor: '#00a2e9',
                        fillOpacity: 0.5,
                        radius: 10
                    }).addTo(map);

                    // Update input values
                    $('input[name="latitude"]').val(resultLatLng.lat);
                    $('input[name="longitude"]').val(resultLatLng.lng);
                }
            });

            // Manual click on map
            map.on('click', function(e) {
                map.removeLayer(marker);
                marker = L.circle([e.latlng.lat, e.latlng.lng], {
                    color: 'blue',
                    fillColor: '#00a2e9',
                    fillOpacity: 0.5,
                    radius: 10
                }).addTo(map);

                map.setView([e.latlng.lat, e.latlng.lng], 20);

                $('input[name="latitude"]').val(e.latlng.lat);
                $('input[name="longitude"]').val(e.latlng.lng);
            });
            $('#status').select2();
            $('.btn-simpan').on('click', function() {
                $.ajax({
                    type: 'POST',
                    url: '{{ route('master-asrama.update', $asrama->id) }}',
                    data: $('#form').serialize(),
                    dataType: 'json',
                    success: function(response) {
                        if (response.status == true) {
                            Swal.fire({
                                title: "Success!",
                                text: "Berhasil Menyimpan Data",
                                icon: "success"
                            }).then(function() {
                                document.location = "{{ route('master-asrama.index') }}";
                            });
                        } else {
                            if (response.email) {
                                Swal.fire("Error!", response.email, "error");
                            } else {
                                var pesan = "";
                                jQuery.each(response.pesan, function(key, value) {
                                    pesan += value + '. ';
                                });
                                Swal.fire("Error!", pesan, "error");
                            }
                        }
                    },
                    error: function(xhr) {
                        var pesan = "Proses Gagal";
                        if (xhr.responseJSON && xhr.responseJSON.error) {
                            pesan = xhr.responseJSON.error;
                        } else if (xhr.responseJSON && xhr.responseJSON.pesan) {
                            pesan = xhr.responseJSON.pesan;
                        }
                        Swal.fire("Error!", pesan, "error");
                    }
                });
            });
        });
    </script>
@endsection