@extends('master')
@section('title', 'PSU Perumahan')
@section('header-konten')
    <div class="page-header page-header-light shadow">
        <div class="page-header-content d-lg-flex">
            <div class="d-flex">
                <h4 class="page-title mb-0">
                    Halaman - <span class="fw-normal">PSU Perumahan</span>
                </h4>

                <a href="#page_header"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>

        <div class="page-header-content d-lg-flex border-top">
            <div class="d-flex">
                <div class="breadcrumb py-2">
                    <a href="index.html" class="breadcrumb-item"><i class="ph-house"></i></a>
                    <a href="{{ url('/perumahan') }}" class="breadcrumb-item">Perumahan</a>
                    <span class="breadcrumb-item active">PSU Perumahan</span>
                </div>

                <a href="#breadcrumb_elements"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>
    </div>
    @include('perumahan.detail.head')
@endsection

@section('konten')
    <div class="card">
        <div class="card-header d-sm-flex">
            <h5 class="mb-0">PSU Perumahan</h5>
            <div class="mt-2 mt-sm-0 ms-auto">
                @php
                    $tambah = explode(',', Auth::user()->role->tambah);
                @endphp
                @if (in_array('26', $tambah))
                    <button onclick="openModalTambah();" class="btn btn-primary">
                        <i class="ph-plus"></i>&nbsp;Tambah PSU
                    </button>
                @endif
            </div>
        </div>

        <table class="table datatable-basic table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Jenis PSU</th>
                    <th>Detail PSU</th>
                    <th>Luasan PSU</th>
                    <th>Status Serah</th>
                    @php
                        $ubah = explode(',', Auth::user()->role->ubah);
                        $hapus = explode(',', Auth::user()->role->hapus);
                    @endphp
                    @if (in_array('26', $ubah) | in_array('26', $hapus))
                        <th class="text-center">Aksi</th>
                    @endif
                </tr>
            </thead>
            <tbody>
                @php
                    $i = 1;
                @endphp
                @foreach ($psu as $ps)
                    <tr>
                        <td>{{ $i }}</td>
                        <td>{{ $ps->jenis_psu }}</td>
                        <td>{{ $ps->detail_psu }}</td>
                        <td>{{ $ps->jumlah_psu }}</td>
                        <td>
                            @if ($ps->status_serah == 'Belum')
                                <span class="badge bg-danger bg-opacity-10 text-danger">{{ $ps->status_serah }}</span>
                            @elseif ($ps->status_serah == 'Proses')
                                <span class="badge bg-warning bg-opacity-10 text-warning">{{ $ps->status_serah }}</span>
                            @elseif ($ps->status_serah == 'Telah Diserahkan')
                                <span class="badge bg-success bg-opacity-10 text-success">{{ $ps->status_serah }}</span>
                            @else
                                <span class="badge bg-danger bg-opacity-10 text-danger">{{ $ps->status_serah }}</span>
                            @endif
                        </td>
                        @if (in_array('26', $ubah) | in_array('26', $hapus))
                            <td class="text-center">
                                <div class="d-inline-flex">
                                    <div class="dropdown">
                                        <a href="#" class="text-body" data-bs-toggle="dropdown">
                                            <i class="ph-list"></i>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-end">
                                            {{-- @if ($ps->dokumen_psu != null)
                                                <a href="{{ url('perumahan/psu_download/' . $ps->id_perumahan . '/' . $ps->dokumen_psu . '/' . $data->perumahan) }}"
                                                    class="dropdown-item">
                                                    <i class="ph-file-arrow-down me-2"></i>
                                                    Download
                                                </a>
                                            @endif --}}
                                            @if (in_array('26', $ubah))
                                                <button data-bs-toggle="modal" onclick="edit({{ $ps->id_perumahan }}, {{ $ps->id_psu }}, '{{ $ps->jenis_psu }}', '{{ $ps->detail_psu }}', {{ $ps->jumlah_psu }}, '{{ $ps->geojson_text }}', '{{ $data->perumahan }}')"
                                                    class="dropdown-item">
                                                    <i class="ph-note-pencil me-2"></i>
                                                    Edit
                                                </button>
                                            @endif
                                            @if (in_array('26', $hapus))
                                                <button
                                                    onclick="hapus({{ $ps->id_perumahan }}, {{ $ps->id_psu }}, '{{ $ps->jenis_psu }}', '{{ $ps->detail_psu }}', '{{ $data->perumahan }}')"
                                                    class="dropdown-item">
                                                    <i class="ph-trash me-2"></i>
                                                    Hapus
                                                </button>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </td>
                        @endif
                    </tr>
                    @php
                        $i++;
                    @endphp
                @endforeach
            </tbody>
        </table>
    </div>
@endsection

@section('modal')
    @php
        $tambah = explode(',', Auth::user()->role->tambah);
        $ubah = explode(',', Auth::user()->role->ubah);
        $hapus = explode(',', Auth::user()->role->hapus);
    @endphp
    @if (in_array('26', $tambah))
        <div id="modal_form_tambah" class="modal fade" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Form Tambah PSU</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <form action="{{ route('SimpanPsu') }}" method="POST" class="form-horizontal"
                        enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="perumahan_lama" value="{{ $data->perumahan }}">
                        <input type="hidden" id="id_perumahan" name="id_perumahan" value="{{ $data->id_perumahan }}">
                        <div class="modal-body">
                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Jenis PSU</label>
                                <div class="col-sm-9">
                                    <select data-placeholder="Pilih jenis PSU..." class="form-control select"
                                        data-dropdown-parent="#modal_form_tambah" id="jenis_psu" name="jenis_psu">
                                        <option></option>
                                        {{-- <option value="Sarana Pendidikan">Sarana Pendidikan</option>
                                        <option value="Fasilitas Sosial">Fasilitas Sosial</option> --}}
                                        <option value="Jalan">Jalan</option>
                                        <option value="Drainase">Drainase</option>
                                        <option value="RTH">RTH</option>
                                        <option value="Hydrant">Hydrant</option>
                                        <option value="PJU">PJU</option>
                                        <option value="Pos Keamanan/satpam">Pos Keamanan/satpam</option>
                                        <option value="Biopori / sumur resapan">Biopori / sumur resapan</option>
                                        <option value="Gardu listrik">Gardu listrik</option>
                                        <option value="TPS">TPS</option>
                                        <option value="Sarana parker">Sarana parkir</option>
                                        <option value="Balai RW">Balai RW</option>
                                        <option value="Convention Hall dan Club House">Convention Hall dan Club House
                                        </option>
                                        <option value="Tandon Air">Tandon Air</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Detail PSU</label>
                                <div class="col-sm-9">
                                    <input type="text" id="detail_psu" name="detail_psu" placeholder=""
                                        class="form-control" required>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Luasan PSU</label>
                                <div class="col-sm-9">
                                    <input type="number" id="jumlah_psu" name="jumlah_psu" placeholder=""
                                        class="form-control" required>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">File Geojson</label>
                                <div class="col-sm-9">
                                    <input type="file" id="file_geojson" name="file_geojson" placeholder=""
                                        class="form-control" accept=".geojson" onchange="previewFile(this, 'tambah');">
                                    <div class="form-text text-muted">Silahkan upload file dengan format (.geojson)</div>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <textarea name="geojson_txt" id="geojson_txt" style="display: none;"></textarea>
                                <div id="mapAdd" style="height: 500px;"></div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-link" data-bs-dismiss="modal">Tutup</button>
                                <button type="submit" class="btn btn-primary">Simpan</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif
    @if (in_array('26', $ubah))
        <div id="modal_form_update" class="modal fade" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Form Update PSU</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <form action="{{ url('/perumahan/psu/update') }}" method="POST" class="form-horizontal"
                        enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="perumahan_lama" value="{{ $data->perumahan }}">
                        <input type="hidden" id="idperumahan" name="id_perumahan">
                        <input type="hidden" id="idpsu" name="id_psu">
                        <div class="modal-body">
                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Jenis PSU</label>
                                <div class="col-sm-9">
                                    <select data-placeholder="Pilih jenis PSU..." class="form-control select"
                                        data-dropdown-parent="#modal_form_update" id="jenis_psu_ubah" name="jenis_psu">
                                        <option></option>
                                        {{-- <option value="Sarana Pendidikan">Sarana Pendidikan</option>
                                        <option value="Fasilitas Sosial">Fasilitas Sosial</option> --}}
                                        <option value="Jalan">Jalan</option>
                                        <option value="Drainase">Drainase</option>
                                        <option value="RTH">RTH</option>
                                        <option value="Hydrant">Hydrant</option>
                                        <option value="PJU">PJU</option>
                                        <option value="Pos Keamanan/satpam">Pos Keamanan/satpam</option>
                                        <option value="Biopori / sumur resapan">Biopori / sumur resapan</option>
                                        <option value="Gardu listrik">Gardu listrik</option>
                                        <option value="TPS">TPS</option>
                                        <option value="Sarana parker">Sarana parkir</option>
                                        <option value="Balai RW">Balai RW</option>
                                        <option value="Convention Hall dan Club House">Convention Hall dan Club House
                                        </option>
                                        <option value="Tandon Air">Tandon Air</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Detail PSU</label>
                                <div class="col-sm-9">
                                    <input type="text" id="detail_psu_ubah" name="detail_psu" placeholder=""
                                        class="form-control" required>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Luasan PSU</label>
                                <div class="col-sm-9">
                                    <input type="number" id="jumlah_psu_ubah" name="jumlah_psu" placeholder=""
                                        class="form-control" required>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">File Geojson</label>
                                <div class="col-sm-9">
                                    <input type="file" id="file_geojson_ubah" name="file_geojson" placeholder=""
                                        class="form-control" accept=".geojson" onchange="previewFile(this, 'ubah');">
                                    <div class="form-text text-muted">Silahkan upload file dengan format (.geojson)</div>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <textarea name="geojson_txt" id="geojson_txt_edit" style="display: none;"></textarea>
                                <div id="mapEdit" style="height: 500px;"></div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-link" data-bs-dismiss="modal">Tutup</button>
                                <button type="submit" class="btn btn-primary">Simpan</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif
    @if (in_array('26', $hapus))
        <div id="modal_form_hapus" class="modal fade" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-danger text-white border-0">
                        <h6 class="modal-title">Hapus PSU</h6>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <h6 class="fw-semibold">
                            Apakah anda yakin untuk menghapus PSU <strong><span id="namadelete"></strong></span>?
                        </h6>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Batal</button>
                        <form id="form_hapus">
                            <input type="hidden" id="perumahan_lama" name="perumahan_lama">
                            <input type="hidden" id="psu_lama" name="detail_psu">
                            <button type="submit" class="btn btn-danger">Iya</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection

@section('script')
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/Leaflet.draw.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/Leaflet.Draw.Event.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/leaflet.draw.css') }}" />
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/Toolbar.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/Tooltip.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/ext/GeometryUtil.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/ext/LatLngUtil.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/ext/LineUtil.Intersect.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/ext/Polygon.Intersect.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/ext/Polyline.Intersect.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/ext/TouchEvents.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/draw/DrawToolbar.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/draw/handler/Draw.Feature.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/draw/handler/Draw.SimpleShape.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/draw/handler/Draw.Polyline.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/draw/handler/Draw.Marker.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/draw/handler/Draw.Circle.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/draw/handler/Draw.CircleMarker.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/draw/handler/Draw.Polygon.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/draw/handler/Draw.Rectangle.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/edit/EditToolbar.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/edit/handler/EditToolbar.Edit.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/edit/handler/EditToolbar.Delete.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/Control.Draw.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/edit/handler/Edit.Poly.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/edit/handler/Edit.SimpleShape.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/edit/handler/Edit.Rectangle.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/edit/handler/Edit.Marker.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/edit/handler/Edit.CircleMarker.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/leafletdraw-04-14/src/edit/handler/Edit.Circle.js') }}"></script>

    <script>
        // $( document ).ready(function() {
        //     mapAdd.invalidateSize(true);
        // });
        const openModalTambah = () => {
            $('#modal_form_tambah').modal('show');
        };

        $('#modal_form_tambah').on('shown.bs.modal', function() {
            mapAdd.invalidateSize(true);
        });

        function edit(id_perumahan, id_psu, jenis_psu, detail_psu, jumlah_psu, geojson_text, perumahan) {
            $('#idperumahan').val(id_perumahan);
            $('#idpsu').val(id_psu);
            // $('#jenis_psu_ubah').val(jenis_psu).trigger('change');
            $('#jenis_psu_ubah').val(jenis_psu).change();
            $('#detail_psu_ubah').val(detail_psu);
            $('#jumlah_psu_ubah').val(jumlah_psu);
            $('#geojson_txt_edit').val(geojson_text);
            drawnItemsEdt.clearLayers();
            $('#geojson_txt_edit').val('');
            $.ajax({
                beforeSend: function(xhr) {
                    if (xhr && xhr.overrideMimeType) {
                        xhr.overrideMimeType('application/json;charset=utf-8');
                    }
                },
                dataType: "json",
                url: "{{ url('perumahan/psu/detail/') }}/" + id_psu,
                success: function(data) {
                // ERROR Data Tidak Masuk, sementara pakai line 372 - 378
                // $('#idperumahan').val(data.psu.id_perumahan);
                // $('#idpsu').val(data.psu.id_psu);
                // $('#jenis_psu_ubah').val(data.psu.jenis_psu).trigger('change');
                // $('#detail_psu_ubah').val(data.psu.detail_psu);
                // $('#jumlah_psu_ubah').val(data.psu.jumlah_psu);
                // $('#geojson_txt_edit').val(data.psu.geojson_text);

                    if (data.psu.file_geojson != null) {
                        $.ajax({
                            beforeSend: function(xhr) {
                                if (xhr && xhr.overrideMimeType) {
                                    xhr.overrideMimeType('application/json;charset=utf-8');
                                }
                            },
                            dataType: "json",
                            url: "{{ url('storage/files/perumahan/') }}/" + data.psu.id_perumahan +
                                "/psu/geojson/" + data.psu.file_geojson,
                            success: function(data) {
                                var geone = L.geoJSON(data, {
                                    onEachFeature: function(feature, layer) {
                                        drawnItemsEdt.addLayer(layer);
                                    }
                                }).addTo(mapEdit);
                                // mapEdit.fitBounds(geone.getBounds());
                                mapEdit.invalidateSize(true);
                            },
                            error: function(err) {
                                drawnItemsEdt.clearLayers();
                                $('#geojson_txt_edit').val('');
                            }
                        });
                    } else {
                        drawnItemsEdt.clearLayers();
                        $('#geojson_txt_edit').val('');
                    }
                }

            });
            $('#modal_form_update').modal('show');
        }

        $('#modal_form_update').on('shown.bs.modal', function() {
            mapEdit.invalidateSize(true);
        })
    </script>

    <script>
        function hapus(id_perumahan, id_psu, jenis_psu, detail_psu, perumahan) {
            $('#form_hapus').attr('action', {!! json_encode(url('perumahan/psu/hapus/')) !!} + '/' + id_psu);
            $('#psu_lama').val(detail_psu);
            $('#perumahan_lama').val(perumahan);
            $('#namadelete').text(detail_psu);
            $('#modal_form_hapus').modal('show');
        }
    </script>

    <script>
        var lat = "{!! $data->koordinat_y !!}";
        var longi = "{!! $data->koordinat_x !!}";
        var zoome = "{!! $data->zoom_peta !!}";
        var mapAdd = L.map('mapAdd', {
            center: [(lat != "") ? lat : "-7.96163688433671", (longi != "") ? longi : "112.63383852447227"],
            zoom: (zoome != "") ? zoome : 18,
        });
        var lokal = L.tileLayer('http://siperkasa.ngodingyuks.com/storage/tiled/{z}/{x}/{y}.jpg', {
            maxZoom: 22,
        }).addTo(mapAdd);

        var esriWSM = L.tileLayer(
            'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
                maxZoom: 19,
            });

        var Esri_WorldImagery = L.tileLayer(
            'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
                maxZoom: 19,
            });


        var drawnItems = L.featureGroup().addTo(mapAdd);

        mapAdd.addControl(new L.Control.Draw({
            edit: {
                featureGroup: drawnItems,
                poly: {
                    allowIntersection: false,
                    shapeOptions: {
                        weight: 2,
                    },
                }
            },
            draw: {
                polyline: {
                    allowIntersection: false,
                    shapeOptions: {
                        weight: 2,
                    },
                },
                polygon: {
                    allowIntersection: false,
                    showArea: true,
                    shapeOptions: {
                        weight: 2,
                    },
                },

                rectangle: {
                    shapeOptions: {
                        weight: 2,
                    },
                },

                circle: false,
                circlemarker: false,
                marker: false
            }
        }));

        mapAdd.on(L.Draw.Event.CREATED, function(event) {
            $('#geojson_txt').val('');
            var layer = event.layer;
            var shape = layer.toGeoJSON();
            var shape_for_db = JSON.stringify(shape);
            $('#geojson_txt').val(shape_for_db);
            drawnItems.addLayer(layer);
        })

        mapAdd.on(L.Draw.Event.EDITED, function(e) {
            $('#geojson_txt').val('');
            var layer = e.layers;
            var shape = layer.toGeoJSON();
            var shape_for_db = JSON.stringify(shape);
            $('#geojson_txt').val(shape_for_db);
        });

        mapAdd.on(L.Draw.Event.DELETED, function(e) {
            $('#geojson_txt').val('');
        });

        var warnaBatas = {
            weight: 1,
            color: '#fcd703',
        };
        var warnaPersil = {
            weight: 1,
            color: '#8bff42',
        };

        var route1 = @json($batas);
        var route2 = @json($persil_eks);

        var batas = L.geoJSON(route1, {
            style: warnaBatas
        }).addTo(mapAdd);
        var persil_eks = L.geoJSON(route2, {
            style: warnaPersil,
            onEachFeature: function(feature, layer) {
                var baseurl = '{!! asset('storage/images/perumahan/' . $data->id_perumahan . '/gambar/') !!}/';
                var imgUrl = baseurl + feature.properties.FOTO;
                var strRp = imgUrl.replace(/ /g, '%20');
                layer.bindPopup('<div> Luas Bangunan Eksisting: ' + feature.properties.L_B_EKS +
                    '<br> Luas Bangunan Rencana: ' + feature.properties.L_B_RCN +
                    '<br> Foto: <br> <img src="' + strRp + '" width="300" /> </div>'
                );
            }
        }).addTo(mapAdd);

        var baseLayers = {
            'Drone': lokal,
            'ESRi WSM': esriWSM,
            'ESRI WI': Esri_WorldImagery,
        };

        var overlays = {
            'Batas': batas,
            'Persil Eksisting': persil_eks,
            'PSU': drawnItems,
        };

        var layerControl = L.control.layers(baseLayers, overlays).addTo(mapAdd);
    </script>

    <script>
        var mapEdit = L.map('mapEdit', {
            center: [(lat != "") ? lat : "-7.96163688433671", (longi != "") ? longi : "112.63383852447227"],
            zoom: (zoome != "") ? zoome : 18,
        });

        var lokalEdt = L.tileLayer('http://siperkasa.ngodingyuks.com/storage/tiled/{z}/{x}/{y}.jpg', {
            maxZoom: 22,
        }).addTo(mapEdit);

        var esriWSMEdt = L.tileLayer(
            'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
                maxZoom: 19,
            });

        var Esri_WorldImageryEdt = L.tileLayer(
            'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
                maxZoom: 19,
            });

        var drawnItemsEdt = L.featureGroup().addTo(mapEdit);

        mapEdit.addControl(new L.Control.Draw({
            edit: {
                featureGroup: drawnItemsEdt,
                poly: {
                    allowIntersection: false,
                    shapeOptions: {
                        weight: 2,
                    },
                }
            },
            draw: {
                polyline: {
                    allowIntersection: false,
                    shapeOptions: {
                        weight: 2,
                    },
                },
                polygon: {
                    allowIntersection: false,
                    showArea: true,
                    shapeOptions: {
                        weight: 2,
                    },
                },

                rectangle: {
                    shapeOptions: {
                        weight: 2,
                    },
                },

                circle: false,
                circlemarker: false,
                marker: false
            }
        }));

        mapEdit.on(L.Draw.Event.CREATED, function(event) {
            $('#geojson_txt_edit').val('');
            var layer = event.layer;
            var shape = layer.toGeoJSON();
            var shape_for_db = JSON.stringify(shape);
            $('#geojson_txt_edit').val(shape_for_db);
            drawnItemsEdt.addLayer(layer);
        })

        mapEdit.on(L.Draw.Event.EDITED, function(e) {
            $('#geojson_txt_edit').val('');
            var layer = e.layers;
            var shape = layer.toGeoJSON();
            var shape_for_db = JSON.stringify(shape);
            $('#geojson_txt_edit').val(shape_for_db);
        });

        mapEdit.on(L.Draw.Event.DELETED, function(e) {
            $('#geojson_txt_edit').val('');
        });


        var route1 = @json($batas);
        var route2 = @json($persil_eks);

        var batas = L.geoJSON(route1, {
            style: warnaBatas
        }).addTo(mapEdit);
        var persil_eks = L.geoJSON(route2, {
            style: warnaPersil,
            onEachFeature: function(feature, layer) {
                var baseurl = '{!! asset('storage/images/perumahan/' . $data->id_perumahan . '/gambar/') !!}/';
                var imgUrl = baseurl + feature.properties.FOTO;
                var strRp = imgUrl.replace(/ /g, '%20');
                layer.bindPopup('<div> Luas Bangunan Eksisting: ' + feature.properties.L_B_EKS +
                    '<br> Luas Bangunan Rencana: ' + feature.properties.L_B_RCN +
                    '<br> Foto: <br> <img src="' + strRp + '" width="300" /> </div>'
                );
            }
        }).addTo(mapEdit);

        var baseLayersEdt = {
            'Drone': lokalEdt,
            'ESRi WSM': esriWSMEdt,
            'ESRI WI': Esri_WorldImageryEdt,
        };
        var overlaysEdit = {
            'Batas': batas,
            'Persil Eksisting': persil_eks,
            'PSU': drawnItemsEdt
        };

        L.control.layers(baseLayersEdt, overlaysEdit).addTo(mapEdit);
    </script>

    <script>
        function previewFile(inpt, target) {
            var file = inpt.files[0];
            var reader = new FileReader();
            reader.addEventListener("load", function() {
                fetch(reader.result)
                    .then(function(response) {
                        return response.text();
                    })
                    .then(function(xml) {
                        if (target == 'tambah') {
                            $('#geojson_txt').val(JSON.stringify(xml));
                            drawnItems.clearLayers();
                            var geon = L.geoJson(JSON.parse(xml), {
                                onEachFeature: function(feature, layer) {
                                    var geom = feature.geometry;
                                    var props = feature.properties;
                                    if (geom.type === 'MultiPolygon') {
                                        for (var i = 0; i < geom.coordinates.length; i++) {
                                            var polygon = {
                                                'type': 'Polygon',
                                                'coordinates': geom.coordinates[i],
                                                'properties': props
                                            };
                                            L.geoJson(polygon, {
                                                onEachFeature: function(feature, layer) {
                                                    drawnItems.addLayer(layer);
                                                }
                                            });
                                        }
                                        alert(
                                            'Layer ber Type MultiPolygon tidak dapat dilakukan pengeditan, anda tetap bisa melanjutkan atau mengganti dengan layer ber Type Polygon');
                                    } else {
                                        drawnItems.addLayer(layer);
                                    }
                                }
                            });
                            // mapAdd.fitBounds(geon.getBounds());
                        } else if (target == 'ubah') {
                            $('#geojson_txt_edit').val(JSON.parse(JSON.stringify(xml)));
                            drawnItemsEdt.clearLayers();
                            var geon = L.geoJson(JSON.parse(xml), {
                                onEachFeature: function(feature, layer) {
                                    var geom = feature.geometry;
                                    var props = feature.properties;
                                    if (geom.type === 'MultiPolygon') {
                                        for (var i = 0; i < geom.coordinates.length; i++) {
                                            var polygon = {
                                                'type': 'Polygon',
                                                'coordinates': geom.coordinates[i],
                                                'properties': props
                                            };
                                            L.geoJson(polygon, {
                                                onEachFeature: function(feature, layer) {
                                                    drawnItemsEdt.addLayer(layer);
                                                }
                                            });
                                        }
                                        alert(
                                            'Layer ber Type MultiPolygon tidak dapat dilakukan pengeditan, anda tetap bisa melanjutkan atau mengganti dengan layer ber Type Polygon');
                                    } else {
                                        drawnItemsEdt.addLayer(layer);
                                    }
                                }
                            });
                            // mapEdit.fitBounds(geon.getBounds());
                        } else {
                            console.log('Tidak Diketahui');
                        }
                    });
            }, false);
            if (file) {
                reader.readAsDataURL(file);
            }
        }
    </script>

    <script>
        $('.datatable-basic').DataTable({
            autoWidth: false,
            dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
            language: {
                search: '<span class="me-3">Pencarian:</span> <div class="form-control-feedback form-control-feedback-end flex-fill">_INPUT_<div class="form-control-feedback-icon"><i class="ph-magnifying-glass opacity-50"></i></div></div>',
                searchPlaceholder: 'Kata kunci...',
                emptyTable: 'Tidak ada data yang tersedia di tabel',
                zeroRecords: 'Tidak ada data yang cocok untuk ditemukan',
                lengthMenu: '<span class="me-3">Tunjukkan:</span> _MENU_',
                paginate: {
                    'first': 'First',
                    'last': 'Last',
                    'next': document.dir == "rtl" ? '&larr;' : '&rarr;',
                    'previous': document.dir == "rtl" ? '&rarr;' : '&larr;'
                }
            }
        });
    </script>

    @include('my_components.alertToast')
@endsection