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

                    <div class="col-12 col-sm-6 mb-1 {{ Session::get('SiteId') == 171 ? 'd-none' : '' }}">
                        <label class="form-label" for="nama">Nama Lengkap</label>
                        <input type="text" class="form-control" id="nama" name="nama"
                            placeholder="Masukkan Nama Lengkap"
                            value="{{ !empty($strukturorganisasi['Nama']) ? $strukturorganisasi['Nama'] : '' }}" required />
                    </div>

                    <div class="col-12 col-sm-6 mb-1 {{ Session::get('SiteId') == 171 ? 'd-none' : '' }}">
                        <label class="form-label" for="jabatanid">Jabatan</label>
                        <select class="select2 form-select" id="jabatanid" name="jabatanid"
                            data-placeholder="Pilih Jabatan">
                            <option value="0">Pilih Jabatan</option>
                            @if (!empty($jabatan['Jabatans']))
                                @foreach ($jabatan['Jabatans'] as $jbt)
                                    @if ($strukturorganisasi['JabatanId'] == $jbt['Id'])
                                        <option value="{{ $jbt['Id'] }}" selected>{{ $jbt['Jabatan'] }} </option>
                                    @else
                                        <option value="{{ $jbt['Id'] }}">{{ $jbt['Jabatan'] }}</option>
                                    @endif
                                @endforeach
                            @endif
                        </select>
                    </div>

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

                    <div class="d-flex mt-4">
                        <a href="{{ url('strukturorganisasi/list') }}">
                            <button type="button"
                                class="btn btn-label-secondary waves-effect waves-light m-2">Kembali</button>
                        </a>
                        <button id="editStrukturorganisasi" 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>
        Dropzone.autoDiscover = false;
        let formSubmitted = false;
        let isEksekutif = `{{ Session::get('TypeRole') != 'eksekutif' }}`;
        let maxFilesValue = isEksekutif ? 1 : 0;

        let bucket = new Dropzone('#dropzone_bucket', {
            url: "{{ url('strukturorganisasi/_edit_strukturorganisasi') }}",
            autoProcessQueue: false,
            addRemoveLinks: isEksekutif,
            maxFiles: maxFilesValue,
            maxFilesize: 5,
            acceptedFiles: ".jpeg, .jpg, .png, .webp",
            init: function() {
                let dropzone = this;
                let defaultFiles = [];


                @if (isset($ImageConvert[0]['Name'][0]) && isset($ImageConvert[0]['Type']) && isset($ImageConvert[0]['Path']))
                    defaultFiles.push({
                        name: "{{ $ImageConvert[0]['Name'][0] }}",
                        size: 2000,
                        type: "{{ $ImageConvert[0]['Type'] }}",
                        path: "{{ $ImageConvert[0]['Path'] }}"
                    });
                @endif

                defaultFiles.forEach(function(file) {
                    var mockFile = {
                        name: file.name,
                        size: file.size,
                        type: file.type
                    };
                    mockFile.status = Dropzone.SUCCESS;
                    dropzone.emit('addedfile', mockFile);
                    dropzone.emit('thumbnail', mockFile, file.path);
                    dropzone.emit('complete', mockFile);
                    dropzone.files.push(mockFile);
                });

                dropzone.on("sending", function(file, xhr, formData) {
                    formData.append('id', `{{ $strukturorganisasi['Id'] }}`)
                    formData.append("nama", $('#nama').val());
                    formData.append("jabatanid", $('#jabatanid').val());
                    formData.append("deskripsi", $('#summernote-1').summernote('code'));
                    $(".spinnerloader").show();
                });


                $("#editStrukturorganisasi").click(function(e) {
                    let isErrorFound = false;

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

                    if (dropzone.files.length == 0) {
                        custom_alert('warning', 'Peringatan', 'Harap unggah gambar!');
                    } else if (isErrorFound) {
                        custom_alert('warning', 'Peringatan',
                            'Format file tidak sesuai. Hanya file JPEG, JPG, PNG, WEBP yang diperbolehkan, dengan batasan maksimum ukuran file 2MB.'
                        )
                    } else if (!isErrorFound) {
                        e.preventDefault();
                        formSubmitted = true;
                        if (dropzone.getQueuedFiles().length > 0) {
                            dropzone.processQueue();
                        } else {
                            sendData();
                        }
                    }
                });

                dropzone.on("success", function(file, response) {
                    let responseData = JSON.parse(response);
                    if (responseData.Status === 200 && formSubmitted) {
                        $(".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(function() {
                            var redirectUrl = "{{ url('strukturorganisasi/list') }}";
                            window.location.href = redirectUrl;
                        });
                    } else {
                        Swal.fire({
                            title: 'Error',
                            text: 'An error occurred while updating the content. Please try again.',
                            icon: 'error',
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            buttonsStyling: false
                        });
                    }
                });
            }
        });

        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();

        function sendData() {
            let formData = new FormData();
            formData.append('id', `{{ $strukturorganisasi['Id'] }}`)
            formData.append("nama", $('#nama').val());
            formData.append("jabatanid", $('#jabatanid').val());
            formData.append("deskripsi", $('#summernote-1').summernote('code'));

            $.ajax({
                url: "{{ url('strukturorganisasi/_edit_strukturorganisasi') }}",
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".spinnerloader").show()
                },
                success: function(response) {
                    let responseData = JSON.parse(response);
                    if (responseData.Status === 200) {
                        $(".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(function() {
                            var redirectUrl = "{{ url('strukturorganisasi/list') }}";
                            window.location.href = redirectUrl;
                        });
                    } else {
                        Swal.fire({
                            title: 'Error',
                            text: 'An error occurred while updating the content. Please try again.',
                            icon: 'error',
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            buttonsStyling: false
                        });
                    }
                },
                error: function() {
                    Swal.fire({
                        title: 'Error',
                        text: 'An error occurred while updating the content. Please try again.',
                        icon: 'error',
                        customClass: {
                            confirmButton: 'btn btn-primary'
                        },
                        buttonsStyling: false
                    });
                }
            });
        }
    </script>


    {{-- </script> --}}
@endsection