@extends('layouts/page')
@section('page-styles')
    <link rel="stylesheet" href="{{ asset(mix('assets/css/dropify.css')) }}" />
    <script async defer src="https://maps.googleapis.com/maps/api/js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script src="https://cdn-geoweb.s3.amazonaws.com/esri-leaflet/0.0.1-beta.5/esri-leaflet.js"></script>
    <script src="{{ asset(mix('assets/js/peta.js')) }}"></script>
    <link rel="stylesheet" type="text/css"
        href="https://cdn-geoweb.s3.amazonaws.com/esri-leaflet-geocoder/0.0.1-beta.5/esri-leaflet-geocoder.css">
@endsection
@section('content')
    <div class="content-wrapper">
        <div class="container-xxl flex-grow-1 container-p-y bg-grey">
            @csrf
            <div class="card">

                <div class="px-3 pt-3 border-bottom d-flex justify-content-between">
                    <h4 class="fw-bold">{{ $title }}</h4>
                    <input type="hidden" id="code" value="{{ $code }}">
                    <input type="hidden" id="type_data" value="{{ $typeData }}">
                </div>

                <div class="row g-3 p-4">

                    @if ($typeData == 'perbaikan')
                        <div class="col-sm-12 col-md-6">
                            <label class="form-label" for="sebelum_name"><span class="text-danger fst-italic">*</span>
                                Sebelum Perbaikan</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="sebelum_name" name="sebelum_name"
                                    placeholder="Foto Sebelum Perbaikan" aria-describedby="inputGroupFileAddon04"
                                    aria-label="Upload" readonly />
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal" id="sebelum_popup"
                                    data-bs-target="#UploadSebelum" style="border-radius: 0 5px 5px 0;">Upload</button>

                                <div class="modal fade" id="UploadSebelum" tabindex="-1" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <p style="font-size: 25px" class="modal-title">Sebelum Perbaikan</p>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body" id="modal_uploadsebelum">
                                                <form action="" method="post" id="dropzone_bucket"
                                                    class="dropzone needsclick" enctype="multipart/form-data">
                                                    @csrf
                                                    <div class="dz-message needsclick">
                                                        Drop files here or click to upload
                                                    </div>

                                                    <div class="fallback">
                                                        <input type="file" id="file" name="file">
                                                    </div>
                                                </form>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button"
                                                    class="btn btn-primary {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}"
                                                    data-bs-dismiss="modal">Save</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <span id="validation-dropzone" class="text-muted fst-italic mt-0" style="font-size: 14px"><span
                                    class="text-muted fst-italic">*</span> Format: JPEG,
                                JPG, PNG, WEBP. Maximum Size : 2MB.</span>
                        </div>

                        <div class="col-sm-12 col-md-6">
                            <label class="form-label" for="sesudah_name"><span class="text-danger fst-italic">*</span>
                                Sesudah Perbaikan</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="sesudah_name" name="sesudah_name"
                                    placeholder="Foto Sesudah Perbaikan" aria-describedby="inputGroupFileAddon04"
                                    aria-label="Upload" readonly />
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal" id="sesudah_popup"
                                    data-bs-target="#UploadSesudah" style="border-radius: 0 5px 5px 0;">Upload</button>

                                <div class="modal fade" id="UploadSesudah" tabindex="-1" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <p style="font-size: 25px" class="modal-title">Sesudah Perbaikan</p>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body" id="modal_uploadsesudah">
                                                <form action="" method="post" id="dropzone_bucket_sesudah"
                                                    class="dropzone needsclick" enctype="multipart/form-data">
                                                    @csrf
                                                    <div class="dz-message needsclick">
                                                        Drop files here or click to upload
                                                    </div>

                                                    <div class="fallback">
                                                        <input type="file" id="fileSesudah" name="fileSesudah">
                                                    </div>
                                                </form>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button"
                                                    class="btn btn-primary {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}"
                                                    data-bs-dismiss="modal">Save</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <span id="validation-dropzone" class="text-muted fst-italic mt-0"
                                style="font-size: 14px"><span class="text-muted fst-italic">*</span> Format: JPEG,
                                JPG, PNG, WEBP. Maximum Size : 2MB.</span>
                        </div>
                    @else
                        <form action="" method="post" id="dropzone_bucket" class="dropzone needsclick"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="dz-message needsclick">
                                Drop files here or click to upload
                            </div>

                            <div class="fallback">
                                <input type="file" id="file" name="file">
                            </div>
                        </form>
                        <form action="" method="post" id="dropzone_bucket_sesudah"></form>
                    @endif

                    <div class="col-md-6 {{ $code == 'TP003' ? ' d-none' : '' }}">
                        <label class="form-label" for="nama_jalan"><span class="text-danger fst-italic">*</span> Nama
                            {{ $trueCode }}</label>
                        <input type="text" id="nama_jalan" name="edit_nama_jalan" value="{{ $place['Nama'] }}"
                            class="form-control" placeholder="Nama {{ $trueCode }}" />
                    </div>

                    <div class="col-md-6">
                        <label class="form-label" for="jenis_jalan"><span class="text-danger fst-italic">*</span>
                            Jenis</label>
                        <select id="jenis_jalan" name="edit_jenis_jalan" class="form-select animation-dropdown select2">
                            <option>Pilih Jenis</option>
                            @foreach ($jenis_jalan as $j)
                                <option value="{{ $j }}" {{ $j == $place['JenisJalan'] ? 'selected' : '' }}>
                                    {{ $j }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-6 {{ $code == 'TP001' ? ' d-none' : '' }}">
                        <label class="form-label" for="alamat"><span class="text-danger fst-italic">*</span>
                            Alamat</label>
                        <textarea class="form-control" id="alamat" name="edit_alamat" rows="1"
                            placeholder="Masukkan Alamat Jalan">{{ $place['Alamat'] }}</textarea>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label" for="latitude"><span class="text-danger fst-italic">*</span> Koordinat
                            Lintang</label>
                        <input type="text" id="lat" name="edit_latitude" class="form-control"
                            placeholder="Pilih Titik di Peta"value="{{ $place['Lat'] }}" />
                    </div>

                    <div class="col-md-6">
                        <label class="form-label" for="longitude"><span class="text-danger fst-italic">*</span> Koordinat
                            Bujur</label>
                        <input type="text" id="lng" name="edit_longitude" class="form-control"
                            placeholder="Pilih Titik di Peta" value="{{ $place['Lng'] }}" />
                    </div>

                    <div class="col-md-6">
                        <label class="form-label" for="panjang_jalan"><span class="text-danger fst-italic">*</span>
                            Panjang {{ $trueCode }} (m)</label>
                        <input type="number" id="panjang_jalan" name="edit_panjang_jalan" class="form-control"
                            placeholder="Panjang {{ $trueCode }}" value="{{ $place['PanjangJalan'] }}" />
                    </div>

                    <div class="col-md-6 {{ $code == 'TP002' || $code == 'TP003' ? ' d-none' : '' }}">
                        <label class="form-label" for="fungsi_jalan"><span class="text-danger fst-italic">*</span>
                            {{ $code == 'TP004' ? 'Tinggi ' . $trueCode . '(m)' : 'Fungsi ' . $trueCode }}</label>
                        @php
                            $inputType = $code == 'TP004' ? 'number' : 'text';
                        @endphp
                        <input type="{{ $inputType }}" id="fungsi_jalan" name="edit_fungsi_jalan"
                            class="form-control"
                            placeholder="{{ $code == 'TP004' ? 'Tinggi' : 'Fungsi' }} {{ $trueCode }}"
                            value="{{ $place['FungsiJalan'] }}" />
                    </div>

                    <div class="col-md-6 {{ $code == 'TP002' || $code == 'TP003' ? ' d-none' : '' }}">
                        <label class="form-label" for="perkerasan_jalan"><span class="text-danger fst-italic">*</span>
                            Perkerasan {{ $trueCode }}</label>
                        <select id="perkerasan_jalan" name="edit_perkerasan_jalan"
                            class="form-select animation-dropdown select2">
                            <option value="">Pilih Perkerasan</option>
                            @foreach ($perkerasan_jalan as $p)
                                <option value="{{ $p }}"
                                    {{ $p == $place['PerkerasanJalan'] ? 'selected' : '' }}>{{ $p }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="kondisi_jalan"><span class="text-danger fst-italic">*</span>
                            Kondisi</label>
                        <select id="kondisi_jalan" name="edit_kondisi_jalan"
                            class="form-select animation-dropdown select2">
                            <option value="">Pilih Kondisi</option>
                            @foreach ($kondisi_jalan as $k)
                                <option value="{{ $k }}" {{ $k == $place['KondisiJalan'] ? 'selected' : '' }}>
                                    {{ $k }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-6 {{ $code == 'TP002' || $code == 'TP003' || $code == 'TP004' ? ' d-none' : '' }}">
                        <label class="form-label" for="tipe_jalan"><span class="text-danger fst-italic">*</span>
                            Tipe</label>
                        <select id="tipe_jalan" name="edit_tipe_jalan" class="form-select animation-dropdown select2">
                            <option value="">Pilih Tipe</option>
                            @foreach ($tipe_jalan as $t)
                                <option value="{{ $t }}" {{ $t == $place['TipeJalan'] ? 'selected' : '' }}>
                                    {{ $t }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-6" id="tahunDiv">
                        <div class="col-md-12">
                            <label class="form-label" for="selectAnimation"><span class="text-danger fst-italic">*</span>
                                Tahun</label>
                            <input type="text" class="form-control" placeholder="YYYY-MM-DD" name="tahun"
                                id="tahun" value="{{ !empty($place['Tahun']) ? $place['Tahun'] : '' }}" />
                        </div>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label" for="kecamatan"><span class="text-danger fst-italic">*</span>
                            Kecamatan</label>
                        <select class="select2 form-select kecamatan" id="kecamatan" name="kecamatan"
                            data-placeholder="Pilih Kecamatan">
                            <option value=""></option>

                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="kelurahan"><span class="text-danger fst-italic">*</span>
                            Kelurahan</label>
                        <select class="select2 form-select kelurahan" id="kelurahan" name="kelurahan"
                            data-placeholder="Pilih Kelurahan">
                            <option value=""></option>

                        </select>
                    </div>

                    <div class="col-12">
                        <div class="card mb-4">
                            <h5 class="card-header">Peta</h5>
                            <div class="card-body">
                                <div id="map" style="width:100%;height:330px;"></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        <label class="form-label" for="collapsible-address">Konten / Isi</label>
                        <div id="summernote-1">
                            {!! isset($place['Deskripsi']) ? $place['Deskripsi'] : '' !!}
                        </div>
                    </div>

                    <div class="d-flex mt-2">
                        <a href="{{ url('placepupr/list/' . $code . '/' . $typeData) }}">
                            <button type="button"
                                class="btn btn-label-secondary waves-effect waves-light m-2">Kembali</button>
                        </a>
                        <button id="edit_place" type="button"
                            class="btn btn-primary waves-effect waves-light m-2 {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}">Simpan</button>
                    </div>
                </div>

            </div>

        </div>
    </div>
@endsection
@section('page-scripts')
    <script>
        let latitudeInstansi = `{{ empty($place['Lat']) ? '' : $place['Lat'] }}`
        let longitudeInstansi = `{{ empty($place['Lng']) ? '' : $place['Lng'] }}`
        let typeData = "{{ $typeData }}";
        let codeMenu = "{{ $code }}";

        $(document).ready(function() {
            let kd_kota = "{{ Config::get('app.kd_kota') }}";
            let kd_kecamatan = "{{ !empty($place['KdKecamatan']) ? $place['KdKecamatan'] : '' }}"
            let kd_kelurahan = "{{ !empty($place['KdKelurahan']) ? $place['KdKelurahan'] : '' }}"

            kecamatan(kd_kota, kd_kecamatan);
            if (kd_kecamatan !== '') {
                kelurahan(kd_kecamatan, kd_kelurahan);
                $('#kelurahan').prop("disabled", false);
            } else {
                $('#kelurahan').prop("disabled", true);
            }

            $('#kecamatan').change(function() {
                let selected_kecamatan = $(this).val();

                if (selected_kecamatan !== '') {
                    kelurahan(selected_kecamatan, kd_kelurahan);
                    $('#kelurahan').prop("disabled", false);
                } else {
                    $('#kelurahan').prop("disabled", true);
                }
            });

            $('input.geocode-control-input').attr('placeholder', 'Masukkan Alamat');
        })

        let googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
            maxZoom: 20,
            subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
        });

        let googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
            maxZoom: 20,
            subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
        });

        let googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
            maxZoom: 20,
            subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
        });

        let googleTerrain = L.tileLayer('http://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}', {
            maxZoom: 20,
            subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
        });

        let map = L.map('map', {
            center: [(latitudeInstansi != '' ? latitudeInstansi : -6.405520639406466), (longitudeInstansi != '' ?
                longitudeInstansi : 106.8184080719948)],
            zoom: 13,
            showAttribution: false,
            layers: [googleStreets]
        });

        let results = new L.LayerGroup().addTo(map);

        results.clearLayers();
        results.addLayer(L.marker([latitudeInstansi != '' ? latitudeInstansi : -6.405520639406466, longitudeInstansi != '' ?
            longitudeInstansi : 106.8184080719948
        ]))

        let baseMaps = {
            "Google Street": googleStreets,
            "Google Hybrid": googleHybrid,
            "Google Satellite": googleSat,
            "Google Terrain": googleTerrain,
        };

        let searchControl = new L.esri.Controls.Geosearch({
            pleceholder: 'Masukkan Alamat',
            position: "topright",
            showAttribution: false
        }).addTo(map);

        map.attributionControl.setPrefix()

        map.on('click', function(e) {
            results.clearLayers();
            results.addLayer(L.marker(e.latlng))
            $('#lat').val(`${e.latlng.lat}`);
            $('#lng').val(`${e.latlng.lng}`);
        });

        let layerControl = L.control.layers(baseMaps, '', {
            position: "bottomright"
        }).addTo(map);


        searchControl.on('results', function(data) {
            results.clearLayers();
            results.addLayer(L.marker(data.results[0].latlng));
            $('#lat').val(`${data.results[0].latlng.lat}`);
            $('#lng').val(`${data.results[0].latlng.lng}`);
        });

        Dropzone.autoDiscover = false;
        let formSubmitted = ["No"];
        let isEksekutif = `{{ Session::get('TypeRole') != 'eksekutif' }}`;
        let maxFilesValue = isEksekutif ? 100 : 0;
        let uploadCounter = 0;

        let bucket = new Dropzone('#dropzone_bucket', {
            id_attachment: ``,
            autoProcessQueue: false,
            addRemoveLinks: isEksekutif,
            maxFiles: maxFilesValue,
            maxFilesize: 2,
            acceptedFiles: ".jpeg, .jpg, .png, .webp",
            url: "{{ url('placepupr/_add_attachment') }}",
            init: function() {

                let dropzone = this;
                var defaultFiles = [
                    @if (!empty($attachment))
                        @foreach ($attachment as $att)
                            {
                                referenceid: "{{ $att['ReferenceId'] }}",
                                attachmentid: "{{ $att['AttachmentId'] }}",
                                name: "{{ $att['Name'] }}",
                                size: 2000,
                                type: "{{ $att['Type'] }}",
                                path: "{{ $att['Path'] }}"
                            },
                        @endforeach
                    @endif
                ];

                for (var i = 0; i < defaultFiles.length; i++) {
                    var file = defaultFiles[i];
                    var mockFile = new File([file.path], file.name, {
                        type: `image/${file.type}`
                    });
                    mockFile.upload = {
                        progress: 100,
                        total: file.size,
                        bytesSent: file.size
                    };
                    mockFile.status = Dropzone.SUCCESS;
                    dropzone.emit('addedfile', mockFile, file.path);
                    dropzone.emit('thumbnail', mockFile, file.path);
                    dropzone.emit('complete', mockFile);
                    dropzone.files.push(mockFile);
                    $(mockFile.previewElement).attr('data-id-attachment', file.attachmentid);
                    $(mockFile.previewElement).attr('data-id-referenceid', file.referenceid);
                }

                dropzone.on("sending", function(file, xhr, formData) {
                    formData.append("id", dropzone.id_attachment);
                });
                dropzone.on("processing", function() {
                    this.options.autoProcessQueue = true;
                });
                dropzone.on("removedfile", function(file) {
                    let id_attachment = $(file.previewElement).data("id-attachment")
                    let id_reference = $(file.previewElement).data("id-referenceid")
                    delete_attachment(id_attachment, id_reference)
                });
                dropzone.on("complete", function(file, response) {
                    if (bucket.getUploadingFiles().length === 0 && bucket.getQueuedFiles().length ===
                        0 && formSubmitted[0] == "yes") {
                        if (typeData == "perbaikan") {
                            if (bucket_sesudah.getQueuedFiles().length != 0) {
                                bucket_sesudah.processQueue();
                            } else {
                                uploadSuccess();
                            }
                        } else {
                            uploadSuccess();
                        }
                    }
                });
            }
        });

        function adjustThumbnailSize() {
            var thumbnails = document.querySelectorAll("#dropzone_bucket .dz-preview .dz-image img");
            thumbnails.forEach(function(thumbnail) {
                thumbnail.addEventListener("load", function() {
                    if (thumbnail.naturalWidth > thumbnail.naturalHeight) {
                        thumbnail.style.width = "100%";
                        thumbnail.style.height = "auto";
                    } else {
                        thumbnail.style.width = "auto";
                        thumbnail.style.height = "100%";
                    }
                });
            });
        }
        adjustThumbnailSize();

        let bucket_sesudah = new Dropzone('#dropzone_bucket_sesudah', {
            id_attachment: ``,
            autoProcessQueue: false,
            addRemoveLinks: isEksekutif,
            maxFiles: maxFilesValue,
            maxFilesize: 2,
            acceptedFiles: ".jpeg, .jpg, .png, .webp",
            url: "{{ url('placepupr/_add_attachment') }}",
            init: function() {

                let dropzone = this;
                var defaultFiles = [
                    @if (!empty($attachmentTypeSesudah))
                        @foreach ($attachmentTypeSesudah as $attSesudah)
                            {
                                referenceid: "{{ $attSesudah['ReferenceId'] }}",
                                attachmentid: "{{ $attSesudah['AttachmentId'] }}",
                                name: "{{ $attSesudah['Name'] }}",
                                size: 2000,
                                type: "{{ $attSesudah['Type'] }}",
                                path: "{{ $attSesudah['Path'] }}"
                            },
                        @endforeach
                    @endif
                ];

                for (var i = 0; i < defaultFiles.length; i++) {
                    var file = defaultFiles[i];
                    var mockFile = new File([file.path], file.name, {
                        type: `image/${file.type}`
                    });
                    mockFile.upload = {
                        progress: 100,
                        total: file.size,
                        bytesSent: file.size
                    };
                    mockFile.status = Dropzone.SUCCESS;
                    dropzone.emit('addedfile', mockFile, file.path);
                    dropzone.emit('thumbnail', mockFile, file.path);
                    dropzone.emit('complete', mockFile);
                    dropzone.files.push(mockFile);
                    $(mockFile.previewElement).attr('data-id-attachment', file.attachmentid);
                    $(mockFile.previewElement).attr('data-id-referenceid', file.referenceid);
                }

                dropzone.on("sending", function(file, xhr, formData) {
                    formData.append("id", dropzone.id_attachment);
                    formData.append("type", "sesudah_perbaikan");
                });
                dropzone.on("processing", function() {
                    this.options.autoProcessQueue = true;
                });
                dropzone.on("removedfile", function(file) {
                    let id_attachment = $(file.previewElement).data("id-attachment")
                    let id_reference = $(file.previewElement).data("id-referenceid")
                    delete_attachment(id_attachment, id_reference)
                });
                dropzone.on("complete", function(file, response) {
                    if (bucket_sesudah.getUploadingFiles().length === 0 && bucket_sesudah
                        .getQueuedFiles().length === 0 && formSubmitted[0] == "yes") {
                        uploadSuccess();
                    }
                });
            }
        });

        $('#edit_place').on('click', function(event) {
            let isValid = true;
            let isErrorBucketFound = false;
            let isErrorBucketSesudahFound = false;

            if (bucket.files.length != 0) {
                for (var i = 0; i < bucket.files.length; i++) {
                    if (bucket.files[i].status === "error") {
                        isErrorBucketFound = true;
                        break;
                    }
                }
            }

            if (bucket_sesudah.files.length != 0) {
                for (var i = 0; i < bucket_sesudah.files.length; i++) {
                    if (bucket_sesudah.files[i].status === "error") {
                        isErrorBucketSesudahFound = true;
                        break;
                    }
                }
            }

            if (typeData == "pencatatan") {
                if (codeMenu == "TP001") {
                    if (isErrorBucketFound) {
                        custom_alert('warning', 'Peringatan',
                            'Format file tidak sesuai. Hanya file JPEG, JPG, PNG, WEBP yang diperbolehkan, dengan batasan maksimum ukuran file 2MB.'
                        )
                        isValid = false;
                    } else if (bucket.files.length == 0 && !isErrorBucketFound && $("#nama_jalan").val() == "" || $(
                            "#jenis_jalan").val() == "" || $(
                            '#lat').val() == "" || $(
                            '#lng').val() == "" || $('#panjang_jalan').val() == "" || $('#perkerasan_jalan')
                        .val() == "" || $('#fungsi_jalan').val() == "" || $('#kondisi_jalan').val() == "" || $(
                            '#jenis_jalan').val() == "" || $('#tipe_jalan').val() == "" || $('#kecamatan').val() ==
                        "" || $('#kelurahan').val() == "") {
                        custom_alert('warning', 'Peringatan',
                            'Pastikan Semua Form kecuali Konten/Isi Sudah Terisi!');
                        isValid = false;
                    }
                } else if (codeMenu == "TP002") {
                    if (isErrorBucketFound) {
                        custom_alert('warning', 'Peringatan',
                            'Format file tidak sesuai. Hanya file JPEG, JPG, PNG, WEBP yang diperbolehkan, dengan batasan maksimum ukuran file 2MB.'
                        )
                        isValid = false;
                    } else if (bucket.files.length == 0 && !isErrorBucketFound && $("#alamat").val() == "" || $(
                            "#nama_jalan").val() == "" || $("#jenis_jalan").val() == "" ||
                        $('#lat').val() == "" || $('#lng').val() == "" || $('#panjang_jalan').val() == "" || $(
                            '#kondisi_jalan').val() == "" || $('#jenis_jalan').val() == "" || $('#kecamatan')
                        .val() == "" || $('#kelurahan').val() == "") {
                        custom_alert('warning', 'Peringatan',
                            'Pastikan Semua Form kecuali Konten/Isi Sudah Terisi!');
                        isValid = false;
                    }
                } else if (codeMenu == "TP003") {
                    if (isErrorBucketFound) {
                        custom_alert('warning', 'Peringatan',
                            'Format file tidak sesuai. Hanya file JPEG, JPG, PNG, WEBP yang diperbolehkan, dengan batasan maksimum ukuran file 2MB.'
                        )
                        isValid = false;
                    } else if (bucket.files.length == 0 && !isErrorBucketFound && $("#alamat").val() == "" || $(
                            "#jenis_jalan").val() == "" || $('#lat').val() == "" || $(
                            '#lng').val() == "" || $('#panjang_jalan').val() == "" || $('#kondisi_jalan').val() ==
                        "" || $('#jenis_jalan').val() == "" || $('#kecamatan').val() == "" || $('#kelurahan')
                        .val() == "") {
                        custom_alert('warning', 'Peringatan',
                            'Pastikan Semua Form kecuali Konten/Isi Sudah Terisi!');
                        isValid = false;
                    }
                } else if (codeMenu == "TP004") {
                    if (isErrorBucketFound) {
                        custom_alert('warning', 'Peringatan',
                            'Format file tidak sesuai. Hanya file JPEG, JPG, PNG, WEBP yang diperbolehkan, dengan batasan maksimum ukuran file 2MB.'
                        )
                        isValid = false;
                    } else if (bucket.files.length == 0 && !isErrorBucketFound && $("#alamat").val() == "" || $(
                            "#nama_jalan").val() == "" || $("#jenis_jalan").val() == "" ||
                        $('#lat').val() == "" || $('#lng').val() == "" || $('#panjang_jalan').val() == "" || $(
                            '#perkerasan_jalan').val() == "" || $('#fungsi_jalan').val() == "" || $(
                            '#kondisi_jalan').val() == "" || $('#jenis_jalan').val() == "" || $('#kecamatan')
                        .val() == "" || $('#kelurahan').val() == "") {
                        custom_alert('warning', 'Peringatan',
                            'Pastikan Semua Form kecuali Konten/Isi Sudah Terisi!');
                        isValid = false;
                    }
                }
            } else {
                if (codeMenu == "TP001") {
                    if (isErrorBucketFound || isErrorBucketSesudahFound) {
                        custom_alert('warning', 'Peringatan',
                            'Format file tidak sesuai. Hanya file JPEG, JPG, PNG, WEBP yang diperbolehkan, dengan batasan maksimum ukuran file 2MB.'
                        )
                        isValid = false;
                    } else if (bucket_sesudah.files.length == 0 && bucket.files.length == 0 && !
                        isErrorBucketFound && $("#tahun").val() == "" || $(
                            "#nama_jalan").val() == "" || $("#jenis_jalan").val() == "" ||
                        $('#lat').val() == "" || $(
                            '#lng').val() == "" || $('#panjang_jalan').val() == "" || $('#perkerasan_jalan')
                        .val() == "" || $('#fungsi_jalan').val() == "" || $('#kondisi_jalan').val() == "" || $(
                            '#jenis_jalan').val() == "" || $('#tipe_jalan').val() == "" || $('#kecamatan').val() ==
                        "" || $('#kelurahan').val() == "") {
                        custom_alert('warning', 'Peringatan',
                            'Pastikan Semua Form kecuali Konten/Isi Sudah Terisi!');
                        isValid = false;
                    }
                } else if (codeMenu == "TP002") {
                    if (isErrorBucketFound || isErrorBucketSesudahFound) {
                        custom_alert('warning', 'Peringatan',
                            'Format file tidak sesuai. Hanya file JPEG, JPG, PNG, WEBP yang diperbolehkan, dengan batasan maksimum ukuran file 2MB.'
                        )
                        isValid = false;
                    } else if (bucket_sesudah.files.length == 0 && bucket.files.length == 0 && !
                        isErrorBucketFound && $("#tahun").val() == "" || $(
                            "#alamat").val() == "" || $("#nama_jalan").val() == "" || $(
                            "#jenis_jalan").val() == "" ||
                        $('#lat').val() == "" || $('#lng').val() == "" || $('#panjang_jalan').val() == "" || $(
                            '#kondisi_jalan').val() == "" || $('#jenis_jalan').val() == "" || $('#kecamatan')
                        .val() == "" || $('#kelurahan').val() == "") {
                        custom_alert('warning', 'Peringatan',
                            'Pastikan Semua Form kecuali Konten/Isi Sudah Terisi!');
                        isValid = false;
                    }
                } else if (codeMenu == "TP003") {
                    if (isErrorBucketFound || isErrorBucketSesudahFound) {
                        custom_alert('warning', 'Peringatan',
                            'Format file tidak sesuai. Hanya file JPEG, JPG, PNG, WEBP yang diperbolehkan, dengan batasan maksimum ukuran file 2MB.'
                        )
                        isValid = false;
                    } else if (bucket_sesudah.files.length == 0 && bucket.files.length == 0 && !
                        isErrorBucketFound && $("#tahun").val() == "" || $(
                            "#alamat").val() == "" || $("#jenis_jalan").val() == "" || $(
                            '#lat').val() == "" || $(
                            '#lng').val() == "" || $('#panjang_jalan').val() == "" || $('#kondisi_jalan').val() ==
                        "" || $('#jenis_jalan').val() == "" || $('#kecamatan').val() == "" || $('#kelurahan')
                        .val() == "") {
                        custom_alert('warning', 'Peringatan',
                            'Pastikan Semua Form kecuali Konten/Isi Sudah Terisi!');
                        isValid = false;
                    }
                } else if (codeMenu == "TP004") {
                    if (isErrorBucketFound || isErrorBucketSesudahFound) {
                        custom_alert('warning', 'Peringatan',
                            'Format file tidak sesuai. Hanya file JPEG, JPG, PNG, WEBP yang diperbolehkan, dengan batasan maksimum ukuran file 2MB.'
                        )
                        isValid = false;
                    } else if (bucket_sesudah.files.length == 0 && bucket.files.length == 0 && !
                        isErrorBucketFound && $("#tahun").val() == "" || $(
                            "#alamat").val() == "" || $("#nama_jalan").val() == "" || $(
                            "#jenis_jalan").val() == "" ||
                        $('#lat').val() == "" || $('#lng').val() == "" || $('#panjang_jalan').val() == "" || $(
                            '#perkerasan_jalan').val() == "" || $('#fungsi_jalan').val() == "" || $(
                            '#kondisi_jalan').val() == "" || $('#jenis_jalan').val() == "" || $('#kecamatan')
                        .val() == "" || $('#kelurahan').val() == "") {
                        custom_alert('warning', 'Peringatan',
                            'Pastikan Semua Form kecuali Konten/Isi Sudah Terisi!');
                        isValid = false;
                    }
                }
            }

            if (isValid) {
                formSubmitted[0] = "yes";
                edit_place();
            }
            
        });

        if (typeData == "pencatatan") {
            $('#tahunDiv').hide();
        } else {
            $('#tahunDiv').show();
        }

        function uploadSuccess() {
            $("#edit_place").prop("disabled", true);
            $(".spinnerloader").hide();

            Swal.fire({
                title: "Berhasil",
                icon: "success",
                text: "Data Berhasil Di Ubah",
                showClass: {
                    popup: 'animate__animated animate__bounceIn'
                },
                customClass: {
                    confirmButton: 'btn btn-primary'
                },
                allowOutsideClick: false,
                buttonsStyling: false
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = "{{ url('placepupr/list/' . $code . '/' . $typeData) }}";
                }
            });
        }

        function edit_place() {
            let form_data = new FormData();
            form_data.append('code', $('#code').val())
            form_data.append('type_data', $('#type_data').val())
            form_data.append('tahun', $('#tahun').val())
            form_data.append('id_place', `{{ $place['TempatPentingId'] }}`)
            form_data.append('nama_jalan', $('input[name="edit_nama_jalan"]').val())
            form_data.append('alamat', $('textarea#alamat').val())
            form_data.append('latitude', $('input[name="edit_latitude"]').val())
            form_data.append('longitude', $('input[name="edit_longitude"]').val())
            form_data.append('panjang_jalan', $('input[name="edit_panjang_jalan"]').val())
            form_data.append('fungsi_jalan', $('input[name="edit_fungsi_jalan"]').val())
            form_data.append('perkerasan_jalan', $('select[name="edit_perkerasan_jalan"]').val())
            form_data.append('kondisi_jalan', $('select[name="edit_kondisi_jalan"]').val())
            form_data.append('jenis_jalan', $('select[name="edit_jenis_jalan"]').val())
            form_data.append('tipe_jalan', $('select[name="edit_tipe_jalan"]').val())
            form_data.append('isi', $('#summernote-1').summernote('code'))
            form_data.append('kd_kecamatan', $('#kecamatan').val())
            form_data.append('kd_kelurahan', $('#kelurahan').val())

            $.ajax({
                url: "{{ url('placepupr/_edit_place') }}",
                method: "POST",
                data: form_data,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".spinnerloader").show()
                },
                success: function(data) {
                    let d = JSON.parse(data)

                    if (typeData == "perbaikan") {
                        if (bucket.getQueuedFiles().length == 0 && bucket_sesudah.getQueuedFiles().length ==
                            0) {
                            uploadSuccess();
                        }

                        bucket.id_attachment = {{ $place['TempatPentingId'] }};
                        bucket_sesudah.id_attachment = {{ $place['TempatPentingId'] }};

                        if (bucket.getQueuedFiles().length != 0) {
                            bucket.processQueue();
                        } else if (bucket_sesudah.getQueuedFiles().length != 0) {
                            bucket_sesudah.processQueue();
                        }
                    } else {
                        if (bucket.getQueuedFiles().length == 0) {
                            uploadSuccess();
                        }

                        bucket.id_attachment = {{ $place['TempatPentingId'] }};

                        if (bucket.getQueuedFiles().length != 0) {
                            bucket.processQueue();
                        }
                    }
                }
            });
        }

        function delete_attachment(idatt, idreff) {
            let form_data = new FormData()
            form_data.append("id_attachment", idatt);
            $.ajax({
                url: "{{ url('placepupr/_delete_attachment') }}",
                method: "POST",
                data: form_data,
                processData: false,
                contentType: false,
                success: function(data) {}
            });
        }

        if (typeData == "perbaikan") {
            function adjustThumbnailSizeSesudah() {
                var thumbnails = document.querySelectorAll("#dropzone_bucket_sesudah .dz-preview .dz-image img");
                thumbnails.forEach(function(thumbnail) {
                    thumbnail.addEventListener("load", function() {
                        if (thumbnail.naturalWidth > thumbnail.naturalHeight) {
                            thumbnail.style.width = "100%";
                            thumbnail.style.height = "auto";
                        } else {
                            thumbnail.style.width = "auto";
                            thumbnail.style.height = "100%";
                        }
                    });
                });
            }
            adjustThumbnailSizeSesudah();
        }
    </script>
@endsection