@extends('layouts/page')
@section('page-styles')
    <link rel="stylesheet" href="{{ asset(mix('assets/css/dropify.css')) }}" />
@endsection
@section('content')
    <div class="content-wrapper">
        <input type="hidden" name="type_menu" id="type_menu" value="Gallery">
        <input type="hidden" name="categoryid-edit" id="categoryid-edit">

        <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">

                    <div class="col-md-6">
                        <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>
                        <span id="validation-dropzone" class="text-muted fst-italic" style="font-size: 14px"><span
                                class="text-danger fst-italic">*</span> Format: JPEG,
                            JPG, PNG, WEBP, MP4. Maximum Size : 2MB(foto), 10MB(video).</span>
                    </div>


                    <div class="col-md-6">
                        <label class="form-label" for="title"><span class="text-danger fst-italic">*</span> Judul</label>
                        <input type="text" id="title" name="title" class="form-control" placeholder="Judul"
                            value="{{ !empty($gallery[0]['Title']) ? $gallery[0]['Title'] : '' }}" />

                        <input type="hidden" id="mediatype" name="mediatype" class="form-control"
                            value="{{ !empty($gallery[0]['MediaType']) ? $gallery[0]['MediaType'] : '' }}" />

                        <div style="display: flex;">
                            <div class="{{ Session::get('TypeRole') == 'eksekutif' ? ' col-md-12' : 'col-md-8' }}"
                                style="margin-right: 15px;">
                                <label class="form-label" for="selectAnimation">Kategori</label>
                                <select id="categoryid" name="categoryid" class="select2 form-select animation-dropdown"
                                    data-placeholder="Pilih Kategori">
                                </select>
                            </div>

                            <div class="col-md-4 {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}"
                                style="padding-top: 25px;">
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                    data-bs-target="#addCategoryModal">
                                    <i class='bx bxs-user-plus'></i>
                                </button>
                                <button type="button" class="btn btn-warning" data-bs-toggle="modal"
                                    data-bs-target="#editCategoryModal">
                                    <i class='bx bxs-edit'></i>
                                </button>
                            </div>
                        </div>

                        <div class="urlmenu">
                            <label class="form-label" for="urlmenu">URL/Link</label>
                            <input type="text" id="url" name="url" class="form-control" placeholder="URL/Link"
                                value="{{ !empty($gallery[0]['URL']) ? $gallery[0]['URL'] : '' }}" />
                        </div>
                    </div>

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


                    <div class="d-flex mt-2">
                        <a href="{{ url('gallery/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 {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}"
                            data-bs-toggle="modal" id="edit_gallery">Simpan</button>
                    </div>

                </div>
            </div>

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

                            <button 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-center">New Category</h4>
                                <hr>
                                <div class="row">
                                    <div class="col-md-6">

                                        <div class="mb-3">
                                            <label for="nameEx7" class="form-label">Nama Kategori</label>
                                            <select class="select2 form-select" id="description" name="description"
                                                data-placeholder="Pilih Kategori">
                                            </select>
                                        </div>
                                        <div id="lainnya-container-add" class="mb-3" style="display: none;">
                                            <input type="text" id="lainnya-description" name="lainnya_description"
                                                class="form-control">
                                        </div>


                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="roleEx7" class="form-label">Parent
                                                (Optional)</label>
                                            <select class="select2 form-select" tabindex="0" id="parent_id"
                                                name="parent_id" data-placeholder="Pilih Parent">
                                            </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="button" id="createCategory"
                                class="btn btn-primary {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}">Save</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-onboarding modal fade animate__animated" id="editCategoryModal" 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 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">Edit Category</h4>
                                <hr>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label for="nameEx7" class="form-label">Nama Kategori</label>
                                            <div id="lainnya-container-edit" class="mb-3">
                                                <input type="text" id="lainnya-description-edit"
                                                    name="description-edit" class="form-control">
                                            </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="button" id="editCategory"
                                    class="btn btn-primary {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}">Save</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>


        </div>
    </div>

    <style>
        .hidden {
            display: none;
        }
    </style>
@endsection

@section('page-scripts')
    <script>
        $(document).ready(function() {
            category_option();
        });

        let galleryId = "{{ $gallery[0]['GalleryId'] }}";

        function _edit_gallery() {
            let form_data = new FormData();
            let token = $("meta[name='csrf-token']").attr("content");

            form_data.append('id_gallery', `{{ $gallery[0]['GalleryId'] }}`)
            form_data.append('title', $('#title').val())
            form_data.append('type_menu', $('#type_menu').val())
            form_data.append('mediatype', $('#mediatype').val())
            form_data.append('url', $('#url').val())
            form_data.append('categoryid', $('#categoryid').val())
            form_data.append('description', $('#summernote-1').summernote('code'))

            $.ajax({
                url: "{{ url('gallery/_edit_gallery') }}",
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': token
                },
                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_gallery").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('gallery/list') }}";
                            }
                        })
                    } else {
                        bucket_edit.id_attachment = d.Data.galleryid
                        bucket_edit.processQueue();
                    }
                }
            });
        }

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

        Dropzone.autoDiscover = false;
        let formSubmitted = 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, .mp4, .webp",
            url: "{{ url('gallery/_add_attachment') }}",
            init: function() {
                let dropzone = this;
                var defaultFiles = [
                    @foreach ($attachment as $att)
                        {
                            referenceid: "{{ $att['ReferenceId'] }}",
                            attachmentid: "{{ $att['AttachmentId'] }}",
                            name: "{{ $att['Name'] }}",
                            size: 2000,
                            type: "{{ $att['Type'] }}",
                            path: "{{ $att['Path'] }}"
                        },
                    @endforeach
                ];

                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_gallery").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 atau video!');
                    } else if (isErrorFound) {
                        custom_alert('warning', 'Peringatan',
                            'Format file tidak sesuai. Hanya file JPEG, JPG, PNG, WEBP, MP4 yang diperbolehkan, dengan batasan maksimum ukuran file 2MB untuk foto dan 10MB untuk video.'
                        )
                    } else if (!isErrorFound && $("#title").val() == "") {
                        custom_alert('warning', 'Peringatan', 'Judul wajib diisi!');
                    } else if (!isErrorFound) {
                        e.preventDefault();
                        _edit_gallery()
                        formSubmitted = true;
                        dropzone.on("sending", function(file, xhr, formData) {
                            formData.append("galleryid", dropzone.id_attachment);
                        });
                    }

                });

                dropzone.on("processing", function() {
                    this.options.autoProcessQueue = true;
                });

                dropzone.on("addedfile", function(file) {
                    let fileType = file.type.split("/")[0];
                    if (fileType === "image") {
                        dropzone.options.maxFilesize = 2;
                    } else if (fileType === "video") {
                        dropzone.options.maxFilesize = 10;
                    }

                    updateDescriptionAndMenuVisibility();
                });

                function updateDescriptionAndMenuVisibility() {
                    let allFiles = dropzone.files;
                    let hasImage = false;
                    let hasVideo = false;

                    for (let i = 0; i < allFiles.length; i++) {
                        let fileType = allFiles[i].type.split("/")[0];
                        if (fileType === "image") {
                            hasImage = true;
                        } else if (fileType === "video") {
                            hasVideo = true;
                        }
                    }

                    let inputDescription = "";
                    if (hasImage && hasVideo) {
                        inputDescription = "FL03";
                    } else if (hasImage) {
                        inputDescription = "FL02";
                    } else if (hasVideo) {
                        inputDescription = "FL01";
                    }

                    $("#mediatype").val(inputDescription);
                }

                dropzone.on("complete", function(file, response) {
                    if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length ===
                        0 && formSubmitted) {
                        $("#edit_gallery").prop("disabled", true)
                        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('gallery/list') }}";
                            }
                        })
                    }
                });

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

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

        {{-- //! ------------------------ Category ------------------------------ !//  --}}

        $("#createCategory").click(function() {
            create_category();
        });

        function create_category() {
            var selectedOption = $('#description').val();
            var descriptionValue = '';

            if (selectedOption === 'lainnya') {
                descriptionValue = $('#lainnya-description').val();
            } else {
                descriptionValue = selectedOption;
            }

            var form_data = new FormData();
            form_data.append('description', descriptionValue);
            form_data.append('parent_id', $('#parent_id').val());
            form_data.append('_token', "{{ csrf_token() }}");

            $.ajax({
                url: "{{ url('gallery/_add_category') }}",
                method: "POST",
                data: form_data,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".spinnerloader").show()
                },
                success: function(data) {
                    var responseData = JSON.parse(data);

                    if (responseData.Status === 200) {
                        $(".spinnerloader").hide()
                        Swal.fire({
                            title: "Berhasil",
                            icon: "success",
                            text: "Data Berhasil Di Tambahkan",
                            showClass: {
                                popup: 'animate__animated animate__bounceIn'
                            },
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            allowOutsideClick: false,
                            buttonsStyling: false
                        });

                        category_option();
                        tablelistkategori.ajax.reload();

                    } 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 category_option() {
            $.ajax({
                url: "{{ url('gallery/_category_list') }}",
                method: "POST",
                data: {
                    kanal: $('#kanalUrl').val()
                },
                success: function(data) {
                    let d = JSON.parse(data);
                    let typeId = `{{ !empty($gallery[0]['CategoryId']) ? $gallery[0]['CategoryId'] : '' }}`

                    let categoryHtml = '<option value="0">Pilih Kategori..</option>';
                    let parentHtml = '<option value="">Pilih Parent..</option>';
                    let descriptionHtml = '<option value="">Pilih Kategori..</option>';

                    if (d.data === null || d.data.length === 0) {
                        descriptionHtml +=
                            '<option value="lainnya" style="color: grey !important;">Lainnya</option>';
                    } else {
                        for (let i = 0; i < d.data.length; i++) {
                            categoryHtml += '<option value="' + d.data[i].Id + '"' +
                                `${d.data[i].Id == typeId?'selected':''}>` + d.data[i].Description +
                                '</option>';
                            parentHtml += '<option value="' + d.data[i].Id + '">' + d.data[i].Description +
                                '</option>';
                            descriptionHtml += '<option value="' + d.data[i].Description + '">' + d.data[i]
                                .Description +
                                '</option>';
                        }
                        descriptionHtml +=
                            '<option value="lainnya" style="color: grey !important;">Lainnya</option>';
                    }

                    $("#categoryid").prop("disabled", false);
                    $("#categoryid").html(categoryHtml);

                    $("#parent_id").prop("disabled", false);
                    $("#parent_id").html(parentHtml);

                    $("#description").prop("disabled", false);
                    $("#description").html(descriptionHtml);

                    $('#description').on('change', function() {
                        var selectedOption = $(this).val();

                        if (selectedOption === 'lainnya') {
                            $('#lainnya-container-add').show();
                        } else {
                            $('#lainnya-container-add').hide();
                        }
                    });

                    if ($('#description').val() === 'lainnya') {
                        $('#lainnya-container-add').show();
                    } else {
                        $('#lainnya-container-add').hide();
                    }
                },

                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        }

        function _edit_category(editedCategoryDescription, categoryId) {
            let form_data = new FormData();
            let token = $("meta[name='csrf-token']").attr("content");

            form_data.append('description', editedCategoryDescription);

            $.ajax({
                url: "{{ url('gallery/_edit_category') }}/" + categoryId,
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': token
                },
                data: form_data,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".spinnerloader").show()
                },
                success: function(response) {
                    if (response.Status === 200) {
                        $(".spinnerloader").hide()
                        Swal.fire({
                            title: "Berhasil",
                            icon: "success",
                            text: "Data Berhasil Di Edit",
                            showClass: {
                                popup: 'animate__animated animate__bounceIn'
                            },
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            allowOutsideClick: false,
                            buttonsStyling: false
                        })
                        category_option();
                    } 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
                        });
                    }
                },
            });
        }

        $('#editCategoryModal').on('show.bs.modal', function() {
            var selectedCategoryId = $('#categoryid').val();
            var selectedCategoryDescription = $('#categoryid option:selected').text();
            $('#editCategoryModal #lainnya-description-edit').val(selectedCategoryDescription);
            $('input[name="description-edit"]').val(selectedCategoryDescription);
        });

        $('#editCategory').on('click', function() {
            var editedCategoryDescription = $('#lainnya-description-edit').val();
            var selectedCategoryId = $('#categoryid').val();
            _edit_category(editedCategoryDescription, selectedCategoryId);
        });
        {{-- //! ------------------------ End Category --------------------------- !//  --}}
    </script>
@endsection