@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">
            <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>
                        <span id="validation-dropzone" class="text-muted fst-italic mt-0" style="font-size: 14px"><span
                                class="text-danger fst-italic">*</span> Format: JPEG,
                            JPG, PNG, WEBP. Maximum Size : 2MB.</span>
                        <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="nama_jalan" 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
                            {{ $trueCode }}</label>
                        <select id="jenis_jalan" name="jenis_jalan" class="form-select animation-dropdown select2">
                            <option value="">Pilih Jenis</option>
                            <option value="{{ $trueCode }} Nasional">{{ $trueCode }} Nasional</option>
                            <option value="{{ $trueCode }} Provinsi">{{ $trueCode }} Provinsi</option>
                            <option value="{{ $trueCode }} Daerah">{{ $trueCode }} Daerah</option>
                        </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="alamat" rows="1" placeholder="Masukkan 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="latitude" class="form-control"
                            placeholder="Pilih Titik di Peta" />
                    </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="longitude" class="form-control"
                            placeholder="Pilih Titik di Peta" />
                    </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="panjang_jalan" class="form-control"
                            placeholder="Panjang {{ $trueCode }}" />
                    </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="fungsi_jalan" class="form-control"
                            placeholder="{{ $code == 'TP004' ? 'Tinggi' : 'Fungsi' }} {{ $trueCode }}" />
                    </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="perkerasan_jalan"
                            class="select2 form-select animation-dropdown">
                            <option value="">Pilih Perkerasan</option>
                            <option value="Aspal">Aspal</option>
                            <option value="Beton">Beton</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="kondisi_jalan"><span class="text-danger fst-italic">*</span>
                            Kondisi {{ $trueCode }}</label>
                        <select id="kondisi_jalan" name="kondisi_jalan" class="select2 form-select animation-dropdown">
                            <option value="">Pilih Kondisi</option>
                            <option value="Baik">Baik</option>
                            <option value="Sedang">Sedang</option>
                            <option value="Rusak">Rusak</option>
                        </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
                            {{ $trueCode }}</label>
                        <select id="tipe_jalan" name="tipe_jalan" class="form-select animation-dropdown select2">
                            <option value="">Pilih Tipe</option>
                            <option value="Lingkungan">Lingkungan</option>
                            <option value="Non-Lingkungan">Non-lingkungan</option>
                        </select>
                    </div>

                    <div class="col-md-6" id="tahunDiv">
                        <label class="form-label" for="tahun"><span class="text-danger fst-italic">*</span>
                            Tahun</label>
                        <input type="text" class="form-control" placeholder="Tahun" name="tahun" id="tahun" />
                    </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 style="width:100%;height:330px;" id="map"></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        <label class="form-label" for="collapsible-address">Konten / Isi</label>
                        <div id="summernote-1">
                        </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="add_place" type="button"
                            class="btn btn-primary waves-effect waves-light m-2 {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}">Simpan</button>
                        <input type="hidden" id="formsubmitted" value="">
                    </div>
                </div>

            </div>

        </div>
    </div>
@endsection
@section('page-scripts')
    <script>
        $(document).ready(function() {
            let kd_kota = "{{ Config::get('app.kd_kota') }}";

            kecamatan(kd_kota);

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

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

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

        let typeData = "{{ $typeData }}";
        let codeMenu = "{{ $code }}";

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

        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: [(-6.405520639406466), (106.8184080719948)],
            zoom: 13,
            showAttribution: false,
            layers: [googleStreets]
        });

        let results = new L.LayerGroup().addTo(map);
        results.clearLayers();
        results.addLayer(L.marker([-6.405520639406466, 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;
                dropzone.on("sending", function(file, xhr, formData) {
                    formData.append("id", dropzone.id_attachment);
                });
                dropzone.on("processing", function() {
                    this.options.autoProcessQueue = true;
                });
                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();
                        }
                    }
                });
            }
        });

        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;
                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("complete", function(file, response) {
                    if (bucket_sesudah.getUploadingFiles().length === 0 && bucket_sesudah
                        .getQueuedFiles().length === 0 && formSubmitted[0] == "yes") {
                        uploadSuccess();
                    }
                });
            }
        });

        $('#add_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";
                add_place();
            }
        });

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

            Swal.fire({
                title: "Berhasil",
                icon: "success",
                text: "Data Berhasil Di Tambah",
                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 add_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('nama_jalan', $('#nama_jalan').val())
            form_data.append('alamat', $('#alamat').val())
            form_data.append('latitude', $('#lat').val())
            form_data.append('longitude', $('#lng').val())
            form_data.append('panjang_jalan', $('#panjang_jalan').val())
            form_data.append('fungsi_jalan', $('#fungsi_jalan').val())
            form_data.append('perkerasan_jalan', $('#perkerasan_jalan').val())
            form_data.append('kondisi_jalan', $('#kondisi_jalan').val())
            form_data.append('jenis_jalan', $('#jenis_jalan').val())
            form_data.append('tipe_jalan', $('#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/_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 = d.id;
                        bucket_sesudah.id_attachment = d.id;

                        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 = d.id;

                        if (bucket.getQueuedFiles().length != 0) {
                            bucket.processQueue();
                        }
                    }
                }
            });
        }
    </script>
@endsection