@extends('layouts/page')
@section('page-styles')
    <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>
                </div>

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

                    <form action="" method="post" id="dropzone_bucket_edit" 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 class="col-md-6">
                        <label class="form-label" for="nama_jalan">Nama Jalan</label>
                        <input type="text" id="nama_jalan" name="edit_nama_jalan" value="{{ $place['Nama'] }}"
                            class="form-control" placeholder="Nama Jalan" />
                    </div>

                    <div class="col-md-4">
                        <label class="form-label" for="category_place">Kategori</label>
                        <select id="category_place" name="edit_category_place"
                            class="form-select animation-dropdown select2" data-placeholder="Pilih Kategori" disabled>
                            <option value="" selected>Pilih Kategori</option>
                        </select>
                    </div>
                    <div class="col-md-1 mt-4 pt-3">
                        <button type="button" class="btn btn-primary" data-bs-toggle=   "modal"
                            data-bs-target="#modalAddCategory">
                            <i class='bx bxs-user-plus'></i>
                        </button>
                    </div>
                    <div class="col-md-1 mt-4 pt-3">
                        <button type="button" class="btn btn-danger" data-bs-toggle="modal"
                            data-bs-target="#modalDeleteCategory">
                            <i class='bx bxs-trash'></i>
                        </button>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label" for="penanggung_jawab">Penanggung Jawab</label>
                        <input type="text" id="penanggung_jawab" name="edit_penanggung_jawab" class="form-control"
                            placeholder="Masukkan Nama Penanggung Jawab Jalan" value="{{ $place['PJ'] }}" />
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="no_telp">No. Telp / Handphone</label>
                        <input type="number" id="no_telp" name="edit_no_telp" class="form-control"
                            placeholder="Masukkan No Telpon" value="{{ $place['Telp'] }}" />
                    </div>

                    <div class="col-md-6">
                        <label class="form-label" for="email">Email</label>
                        <input type="text" id="email" name="edit_email" class="form-control"
                            placeholder="Alamat Email" value="{{ $place['Email'] }}" />
                    </div>

                    <div class="col-md-6">
                        <label class="form-label" for="website">Website</label>
                        <input type="text" id="website" name="edit_website" class="form-control"
                            placeholder="Masukkan URL Website" value="{{ $place['Web'] }}" />
                    </div>

                    <div class="col-md-6">
                        <label class="form-label" for="facebook">Facebook</label>
                        <input type="text" id="facebook" name="edit_facebook" class="form-control"
                            placeholder="Facebook" value="{{ $place['Facebook'] }}" />
                    </div>

                    <div class="col-md-6">
                        <label class="form-label" for="instagram">Instagram</label>
                        <input type="text" id="instagram" name="edit_instagram" class="form-control"
                            placeholder="Instagram" value="{{ $place['Instagram'] }}" />
                    </div>

                    <div class="col-md-12">
                        <label class="form-label" for="alamat">Alamat</label>
                        <textarea class="form-control" id="alamat" name="edit_alamat" rows="2"
                            placeholder="Masukkan Alamat Jalan">{{ $place['Alamat'] }}</textarea>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label" for="latitude">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">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-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>


                    <!-- Modal categori -->
                    <div class="modal-onboarding modal fade animate__animated" id="modalAddCategory" tabindex="-1"
                        aria-hidden="true">
                        <div class="modal-dialog  modal-dialog-centered" role="document">
                            <div class="modal-content text-center">
                                <div class="modal-header border-0">

                                    <button id="add_category_place_close" type="button" class="btn-close"
                                        data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body  p-0">
                                    <div class="onboarding-content mb-0">
                                        <h4 class="onboarding-title text-body text-left">Kategori Baru</h4>
                                        <hr>
                                        <form id="add_category_place" methode="POST">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="nama_kategori" class="form-label">Nama
                                                            Kategori</label>
                                                        <input class="form-control" placeholder="Nama Kategori"
                                                            type="text" name="edit_nama_kategori"
                                                            id="nama_kategori" />
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="parent_kategori" class="form-label">Parent
                                                            (Optional)</label>
                                                        <select class="form-select animation-dropdown select2"
                                                            data-placeholder="Pilih Parent Kategori" tabindex="0"
                                                            name="edit_parent_kategori" id="parent_kategori" disabled>
                                                            <option value="">Parent Kategori</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                    </div>
                                </div>
                                <div class="modal-footer border-0">
                                    <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">
                                        Close
                                    </button>
                                    <button type="submit" class="btn btn-primary">Save</button>
                                </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="modal-onboarding modal fade animate__animated" id="modalDeleteCategory" tabindex="-1"
                        aria-hidden="true">
                        <div class="modal-dialog  modal-dialog-centered" role="document">
                            <div class="modal-content text-center">
                                <div class="modal-header border-0">

                                    <button id="add_category_place_close" type="button" class="btn-close"
                                        data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body  p-0">
                                    <div class="card-datatable table-responsive">
                                        <table id="tablelistkategori" class="datatables-users table border-top">
                                            <thead>
                                                <tr>
                                                    <th>No</th>
                                                    <th>Kategori</th>
                                                    <th>Parent</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="modal-footer border-0">
                                        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">
                                            Close
                                        </button>
                                        <button type="submit" class="btn btn-primary">Save</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/ Modal categori -->

                    </div>
                    <div class="d-flex mt-2">
                        <a href="{{ url('place/list') }}">
                            <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">Simpan</button>
                    </div>
                </div>

            </div>

        </div>
    </div>
@endsection
@section('page-scripts')
    <script>
        function edit_place() {
            let form_data = new FormData();
            form_data.append('id_place', `{{ $place['TempatPentingId'] }}`)
            form_data.append('nama_jalan', $('input[name="edit_nama_jalan"]').val())
            form_data.append('category_place', $('select[name="edit_category_place"]').val())
            form_data.append('penanggung_jawab', $('input[name="edit_penanggung_jawab"]').val())
            form_data.append('no_telp', $('input[name="edit_no_telp"]').val())
            form_data.append('email', $('input[name="edit_email"]').val())
            form_data.append('website', $('input[name="edit_website"]').val())
            form_data.append('facebook', $('input[name="edit_facebook"]').val())
            form_data.append('instagram', $('input[name="edit_instagram"]').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'))
            $.ajax({
                url: "{{ url('place/_edit_place') }}",
                method: "POST",
                data: form_data,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".spinnerloader").show()
                },
                success: function(data) {
                    let d = JSON.parse(data)
                    if (bucket_edit.getUploadingFiles().length === 0 && bucket_edit.getQueuedFiles().length ===
                        0) {
                        $("#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('place/list') }}";
                            }
                        })
                    } else {
                        bucket_edit.id_attachment = {{ $place['TempatPentingId'] }}
                        bucket_edit.processQueue();
                    }

                }
            });
        }

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

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

        let bucket_edit = new Dropzone('#dropzone_bucket_edit', {
            id_attachment: ``,
            autoProcessQueue: false,
            addRemoveLinks: isEksekutif,
            maxFiles: maxFilesValue,
            maxFilesize: 2,
            acceptedFiles: ".jpeg, .jpg, .png, .webp",
            url: "{{ url('place/_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);
                }

                $("#edit_place").click(function(e) {
                    edit_place()
                    e.preventDefault();
                    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 (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length ===
                        0) {
                        $("#add_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('place/list') }}";
                            }
                        })
                    }
                });
            }
        });

        function adjustThumbnailSize() {
            var thumbnails = document.querySelectorAll("#dropzone_bucket_edit .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();
    </script>
    @include('page/place/place_main_js')

    <script>
        $(document).ready(function() {
            $('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: [(-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}`);
        });
    </script>
@endsection