@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">
                    <h4 class="fw-bold">{{ $title }}</h4>
                </div>
                <div class="row g-3 p-4">
                    <div class="col-12 col-sm-6 mb-1">
                        <label class="form-label" for="name">Nama Lengkap</label>
                        <input type="text" class="form-control" id="name" name="name"
                            placeholder="Masukkan Nama Lengkap"
                            value="{{ !empty($contact['Name']) ? $contact['Name'] : '' }}" required />
                    </div>
                    <div class="col-12 col-sm-6 mb-1">
                        <label class="form-label" for="nickname">Nama Panggilan</label>
                        <input type="text" class="form-control" id="nickname" name="nickname"
                            placeholder="Masukkan Nama Panggilan"
                            value="{{ !empty($contact['Nickname']) ? $contact['Nickname'] : '' }}" />
                    </div>
                    <div class="col-12 col-sm-6 mb-1">
                        <label class="form-label" for="phone">No. Telp</label>
                        <input type="number" class="form-control" id="phone" name="phone"
                            placeholder="Masukkan No. Telp"
                            value="{{ !empty($contact['Phone']) ? $contact['Phone'] : '' }}" />
                    </div>
                    <div class="col-12 col-sm-6 mb-1">
                        <label class="form-label" for="email">Email</label>
                        <input type="email" class="form-control" id="email" name="email"
                            placeholder="Masukkan Email" value="{{ !empty($contact['Email']) ? $contact['Email'] : '' }}"
                            required />
                    </div>
                    <div class="col-12 col-sm-6 mb-1">
                        <label class="form-label" for="mobile">No. Handphone</label>
                        <input type="number" class="form-control" id="mobile" name="mobile"
                            placeholder="Masukkan No. Handphone"
                            value="{{ !empty($contact['Mobile']) ? $contact['Mobile'] : '' }}" required />
                    </div>

                    <div class="col-12 col-sm-6 mb-1">
                        <label class="form-label" for="organizationid">Organisasi</label>
                        <select id="organizationid" name="organizationid" class="select2 form-select"
                            data-placeholder="Pilih Organisasi">
                            <option value="" selected></option>
                            @if (!empty($organization['Organizations']))
                                @foreach ($organization['Organizations'] as $org)
                                    @if ($contact['OrganizationId'] == $org['Id'])
                                        <option value="{{ $contact['OrganizationId'] }}" selected>{{ $org['Name'] }}
                                        </option>
                                    @else
                                        <option value="{{ $org['Id'] }}">{{ $org['Name'] }}</option>
                                    @endif
                                @endforeach
                            @endif
                        </select>
                    </div>

                    <div class="col-12 col-sm-6 mb-1">
                        <label class="form-label" for="occupation">Jabatan</label>
                        <select id="occupation" name="occupation" class="select2 form-select"
                            data-placeholder="Pilih Jabatan">
                            <option value="" selected></option>
                            @if (!empty($jabatan['Jabatans']))
                                @foreach ($jabatan['Jabatans'] as $jbt)
                                    @if ($contact['Occupation'] == $jbt['Id'])
                                        <option value="{{ $contact['Occupation'] }}" selected>{{ $jbt['Jabatan'] }}
                                        </option>
                                    @else
                                        <option value="{{ $jbt['Id'] }}">{{ $jbt['Jabatan'] }}</option>
                                    @endif
                                @endforeach
                            @endif
                        </select>
                    </div>

                    <div class="col-sm-12 col-md-6 mb-4">
                        <label class="form-label" for="image_name">Upload Image</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="image_name" name="image_name"
                                placeholder="Upload Image" aria-describedby="inputGroupFileAddon04" aria-label="Upload"
                                readonly value="{{ !empty($contact['Image']) ? $contact['Image'] : '' }}" />
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" id="dokumen_popup"
                                data-bs-target="#image_contact" style="border-radius: 0 5px 5px 0;">Upload</button>

                            <div class="modal fade" id="image_contact" 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">Upload Icon</p>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body" id="modal_image">
                                            <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"
                                                data-bs-dismiss="modal">Save</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="col-12 col-sm-6 mb-1">
                        <label class="form-label" for="facebook">Facebook</label>
                        <input type="text" class="form-control" id="facebook" name="facebook"
                            placeholder="Masukkan Username FB"
                            value="{{ !empty($contact['Facebook']) ? $contact['Facebook'] : '' }}" />
                    </div>
                    <div class="col-12 col-sm-6 mb-1">
                        <label class="form-label" for="instagram">Instagram</label>
                        <input type="text" class="form-control" id="instagram" name="instagram"
                            placeholder="Masukkan Username IG"
                            value="{{ !empty($contact['Instagram']) ? $contact['Instagram'] : '' }}" />
                    </div>
                    <div class="col-12 col-sm-6 mb-1">
                        <label class="form-label" for="rt">Rt</label>
                        <input type="number" class="form-control" id="rt" name="rt"
                            placeholder="Masukan Rt" value="{{ !empty($contact['Rt']) ? $contact['Rt'] : '' }}" />
                    </div>
                    <div class="col-12 col-sm-6 mb-1">
                        <label class="form-label" for="rw">Rw</label>
                        <input type="number" class="form-control" id="rw" name="rw"
                            placeholder="Masukan Rw" value="{{ !empty($contact['Rw']) ? $contact['Rw'] : '' }}" />
                    </div>

                    <div class="col-md-6">
                        <label class="form-label" for="kecamatan">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">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 mb-3 ">
                        <label class="form-label" for="address">Alamat</label>
                        <textarea class="form-control" type="text" id="address" name="address" style="height: 130px" placeholder=""
                            value="">{!! isset($contact['Address']) ? $contact['Address'] : '' !!}</textarea>
                    </div>

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

                    <div class="d-flex mt-4">
                        <a href="{{ url('contact/list') }}">
                            <button type="button"
                                class="btn btn-label-secondary waves-effect waves-light m-2">Kembali</button>
                        </a>
                        <button type="button" class="btn btn-primary waves-effect waves-light m-2"
                            data-bs-toggle="modal" id="addContact">Simpan</button>
                    </div>
                </div>
                </form>
            </div>

        </div>
    </div>
@endsection
@section('page-scripts')
    <script>
        $(document).ready(function() {
            let kd_kota = "{{ Config::get('app.kd_kota') }}";
            let kd_kecamatan = "{{ !empty($contact['Kecamatan']) ? $contact['Kecamatan'] : '' }}"
            let kd_kelurahan = "{{ !empty($contact['Kelurahan']) ? $contact['Kelurahan'] : '' }}"

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

        Dropzone.autoDiscover = false;
        let bucket = new Dropzone('#dropzone_bucket', {
            url: "{{ url('contact/_edit_contact') }}",
            autoProcessQueue: false,
            addRemoveLinks: true,
            maxFiles: 1,
            maxFilesize: 9999999999,
            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_contact', `{{ $contact['ContactId'] }}`)
                    formData.append("name", $('#name').val());
                    formData.append("nickname", $('#nickname').val());
                    formData.append("phone", $('#phone').val());
                    formData.append("email", $('#email').val());
                    formData.append("mobile", $('#mobile').val());
                    formData.append("address", $('#address').val());
                    formData.append("description", $('#summernote-1').summernote('code'));
                    formData.append("organizationid", $('#organizationid').val());
                    formData.append("facebook", $('#facebook').val());
                    formData.append("instagram", $('#instagram').val());
                    formData.append("kecamatan", $('#kecamatan').val());
                    formData.append("kelurahan", $('#kelurahan').val());
                    formData.append("occupation", $('#occupation').val());
                    formData.append("rt", $('#rt').val());
                    formData.append("rw", $('#rw').val());

                    $(".spinnerloader").show();
                });

                dropzone.on("addedfile", function(file) {
                    $("#image_name").val(file.name);
                });

                $("#addContact").click(function(e) {
                    e.preventDefault();
                    if (dropzone.getQueuedFiles().length > 0) {
                        dropzone.processQueue();
                    } else {
                        sendData();
                    }
                });

                dropzone.on("success", function(file, 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('contact/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
                        });
                    }
                });

                // Menangani error saat pengiriman data form
                dropzone.on("error", function(file, errorMessage) {
                    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_contact', `{{ $contact['ContactId'] }}`)
            formData.append("name", $('#name').val());
            formData.append("nickname", $('#nickname').val());
            formData.append("phone", $('#phone').val());
            formData.append("email", $('#email').val());
            formData.append("mobile", $('#mobile').val());
            formData.append("address", $('#address').val());
            formData.append("description", $('#summernote-1').summernote('code'));
            formData.append("organizationid", $('#organizationid').val());
            formData.append("facebook", $('#facebook').val());
            formData.append("instagram", $('#instagram').val());
            formData.append("kecamatan", $('#kecamatan').val());
            formData.append("kelurahan", $('#kelurahan').val());
            formData.append("occupation", $('#occupation').val());
            formData.append("rt", $('#rt').val());
            formData.append("rw", $('#rw').val());

            $.ajax({
                url: "{{ url('contact/_edit_contact') }}",
                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('contact/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>
@endsection