@extends('admin.template.layout')

@section('css')
@endsection

@section('page-title')
@endsection

@section('content')
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <!--begin::Content wrapper-->
        <div class="d-flex flex-column flex-column-fluid">
            <div class="app-main flex-column flex-row-fluid dashboard">
                <!--begin::Content wrapper-->
                <div class="d-flex flex-column flex-column-fluid">

                    <div id="kt_app_content" class="app-content flex-column-fluid">
                        <!--begin::Content container-->
                        <div id="kt_app_content_container" class="app-container container-fluid">
                            <div class="d-flex flex-column flex-lg-row">
                                <!--begin::Sidebar-->
                                <div class="d-none d-lg-flex flex-column flex-lg-row-auto w-100 w-lg-275px"
                                    data-kt-drawer="true" data-kt-drawer-name="inbox-aside"
                                    data-kt-drawer-activate="{default: true, lg: false}" data-kt-drawer-overlay="true"
                                    data-kt-drawer-width="225px" data-kt-drawer-direction="start"
                                    data-kt-drawer-toggle="#kt_inbox_aside_toggle">
                                    <!--begin::Sticky aside-->
                                    <div class="card card-flush mb-0" data-kt-sticky="false"
                                        data-kt-sticky-name="inbox-aside-sticky"
                                        data-kt-sticky-offset="{default: false, xl: '100px'}"
                                        data-kt-sticky-width="{lg: '275px'}" data-kt-sticky-left="auto"
                                        data-kt-sticky-top="100px" data-kt-sticky-animation="false"
                                        data-kt-sticky-zindex="95">
                                        <!--begin::Aside content-->
                                        <div class="card-body">
                                            <!--begin::Button-->
                                            <a href="{{ route('inbox.index') }}"
                                                class="btn btn-secondary fw-bold w-100 mb-8">Kembali</a>
                                            <!--end::Button-->
                                            <!--begin::Menu-->
                                            <div
                                                class="menu menu-column menu-rounded menu-state-bg menu-state-title-primary menu-state-icon-primary menu-state-bullet-primary mb-10">
                                                <!--begin::Menu item-->
                                                <div class="menu-item mb-3">
                                                    <!--begin::Inbox-->
                                                    <span class="menu-link active">
                                                        <span class="menu-icon">
                                                            <i class="ki-duotone ki-sms fs-2 me-3">
                                                                <span class="path1"></span>
                                                                <span class="path2"></span>
                                                            </i>
                                                        </span>
                                                        <span class="menu-title fw-bold">Kotak Masuk</span>
                                                    </span>
                                                    <!--end::Inbox-->
                                                </div>
                                                <!--end::Menu item-->
                                                <!--begin::Menu item-->
                                                <div class="menu-item mb-3">
                                                    <!--begin::Marked-->
                                                    <span class="menu-link">
                                                        <span class="menu-icon">
                                                            <i class="ki-duotone ki-message-notif fs-2 me-3">
                                                                <span class="path1"></span>
                                                                <span class="path2"></span>
                                                                <span class="path3"></span>
                                                                <span class="path4"></span>
                                                                <span class="path5"></span>
                                                            </i>
                                                        </span>
                                                        <span class="menu-title fw-bold">Belum Dibaca</span>
                                                    </span>
                                                    <!--end::Marked-->
                                                </div>
                                                <!--end::Menu item-->
                                            </div>
                                            <!--end::Menu-->
                                        </div>
                                        <!--end::Aside content-->
                                    </div>
                                    <!--end::Sticky aside-->
                                </div>
                                <!--end::Sidebar-->
                                <!--begin::Content-->
                                <div class="flex-lg-row-fluid ms-lg-7 ms-xl-10">
                                    <!--begin::Card-->
                                    <div class="card">
                                        <div class="card-header d-flex align-items-center justify-content-between py-3">
                                            <h2 class="card-title m-0">Buat Pesan</h2>
                                            <!--begin::Toggle-->
                                            <a href="#"
                                                class="btn btn-sm btn-icon btn-color-primary btn-light btn-active-light-primary d-lg-none"
                                                data-bs-toggle="tooltip" data-bs-dismiss="click" data-bs-placement="top"
                                                title="Toggle inbox menu" id="kt_inbox_aside_toggle">
                                                <i class="ki-duotone ki-burger-menu-2 fs-3 m-0">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                    <span class="path3"></span>
                                                    <span class="path4"></span>
                                                    <span class="path5"></span>
                                                    <span class="path6"></span>
                                                    <span class="path7"></span>
                                                    <span class="path8"></span>
                                                    <span class="path9"></span>
                                                    <span class="path10"></span>
                                                </i>
                                            </a>
                                            <!--end::Toggle-->
                                        </div>
                                        <div class="card-body p-0">
                                            <!--begin::Form-->
                                            <form id="form_buat_pesan" class="form" method="POST">
                                                @csrf
                                                <!--begin::Body-->
                                                <div class="d-block">
                                                    <!--begin::To-->
                                                    <div class="d-flex align-items-center border-bottom px-8 min-h-50px">
                                                        <!--begin::Label-->
                                                        <div class="text-gray-900 fw-bold w-75px">Kepada:</div>
                                                        <!--end::Label-->
                                                        <!--begin::Input-->
                                                        <!-- Blade HTML Input -->
                                                        <!-- Blade HTML Input -->
                                                        <input type="text" id="kt_tagify_users"
                                                            class="form-control form-control-transparent border-0"
                                                            name="compose_to" value="" placeholder="Nama Siswa / NIS"
                                                            data-kt-inbox-form="tagify" />
                                                        <!--end::Input-->
                                                    </div>
                                                    <!--end::To-->
                                                    <!--begin::Subject-->
                                                    <div class="border-bottom">
                                                        <input
                                                            class="form-control form-control-transparent border-0 px-8 min-h-45px"
                                                            name="compose_subject"
                                                            placeholder="Catatan (tidak tampil di siswa)" />
                                                    </div>
                                                    <!--end::Subject-->
                                                    <!--begin::Message-->
                                                    <div id="kt_inbox_form_editor"
                                                        class="bg-transparent border-0 h-350px px-3"></div>
                                                    <!--end::Message-->
                                                    <!--begin::Attachments-->
                                                    <div class="dropzone dropzone-queue px-8 py-4"
                                                        id="kt_inbox_reply_attachments" data-kt-inbox-form="dropzone">
                                                        <div class="dropzone-items">
                                                            <div class="dropzone-item" style="display:none">
                                                                <!--begin::Dropzone filename-->
                                                                <div class="dropzone-file">
                                                                    <div class="dropzone-filename"
                                                                        title="some_image_file_name.jpg">
                                                                        <span
                                                                            data-dz-name="">some_image_file_name.jpg</span>
                                                                        <strong>(
                                                                            <span data-dz-size="">340kb</span>)</strong>
                                                                    </div>
                                                                    <div class="dropzone-error" data-dz-errormessage="">
                                                                    </div>
                                                                </div>
                                                                <!--end::Dropzone filename-->
                                                                <!--begin::Dropzone progress-->
                                                                <div class="dropzone-progress">
                                                                    <div class="progress bg-gray-300">
                                                                        <div class="progress-bar bg-primary"
                                                                            role="progressbar" aria-valuemin="0"
                                                                            aria-valuemax="100" aria-valuenow="0"
                                                                            data-dz-uploadprogress=""></div>
                                                                    </div>
                                                                </div>
                                                                <!--end::Dropzone progress-->
                                                                <!--begin::Dropzone toolbar-->
                                                                <div class="dropzone-toolbar">
                                                                    <span class="dropzone-delete" data-dz-remove="">
                                                                        <i class="ki-duotone ki-cross fs-2">
                                                                            <span class="path1"></span>
                                                                            <span class="path2"></span>
                                                                        </i>
                                                                    </span>
                                                                </div>
                                                                <!--end::Dropzone toolbar-->
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--end::Attachments-->
                                                </div>
                                                <!--end::Body-->
                                                <!--begin::Footer-->
                                                <div class="d-flex flex-stack flex-wrap gap-2 py-5 ps-8 pe-5 border-top">
                                                    <!--begin::Actions-->
                                                    <div class="d-flex align-items-center me-3">

                                                    </div>
                                                    <!--end::Actions-->
                                                    <!--begin::Toolbar-->
                                                    <div class="d-flex align-items-center">
                                                        <!--begin::Send-->
                                                        <div class="btn-group me-4">
                                                            <!--begin::Submit-->
                                                            <span class="btn btn-primary fs-bold px-6" id="kt_inbox_form_submit"
                                                                data-kt-inbox-form="send">
                                                                <span class="indicator-label">Send</span>
                                                                <span class="indicator-progress">Please wait...
                                                                    <span
                                                                        class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                                            </span>
                                                            <!--end::Submit-->
                                                            <!--begin::Send options-->
                                                            <span class="btn btn-primary btn-icon fs-bold w-30px pe-0"
                                                                role="button" data-kt-menu-trigger="click"
                                                                data-kt-menu-placement="top-start">
                                                                <span class="lh-0">
                                                                    <i class="ki-duotone ki-down fs-4 m-0"></i>
                                                                </span>
                                                                <!--begin::Menu-->
                                                                <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-150px py-4"
                                                                    data-kt-menu="true">
                                                                    <!--begin::Menu item-->
                                                                    <div class="menu-item px-3">
                                                                        <a href="#" class="menu-link px-3">Save as draft</a>
                                                                    </div>
                                                                    <!--end::Menu item-->
                                                                </div>
                                                                <!--end::Menu-->
                                                            </span>
                                                            <!--end::Send options-->
                                                        </div>
                                                        <!--end::Send-->
                                                    </div>
                                                    <!--end::Toolbar-->
                                                </div>
                                                <!--end::Footer-->
                                            </form>
                                            <!--end::Form-->
                                        </div>
                                    </div>
                                    <!--end::Card-->
                                </div>
                                <!--end::Content-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true">
            <i class="ki-duotone ki-arrow-up">
                <span class="path1"></span>
                <span class="path2"></span>
            </i>
        </div>
    </div>
@endsection
@section('script')
    <link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />
    <script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}"></script>
    <script src="https://npmcdn.com/flatpickr/dist/l10n/id.js"></script>

    <script>
        function resetErrors() {
            $('.is-invalid').removeClass('is-invalid');
            $('.invalid-feedback').remove();
        }

        function setErrors(errors) {

            resetErrors();
            $.each(errors, function(index, value) {
                $("#" + index + "-form").addClass('is-invalid');
                $("#" + index + "-form").after(`<div class="invalid-feedback">` + value + `</div>`);
            });

            Swal.fire({
                title: "Error!",
                text: "Terdapat kesalahan dalam pengisian form",
                icon: "error"
            });
        }

        function initSelect2(route, selectElement, params = null) {
            var id = null
            if (params != null) {
                id = params
            }
            $(selectElement).select2({
                ajax: {
                    url: route,
                    dataType: 'json',
                    data: function(params) {
                        return {
                            q: params.term,
                            id: id
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: data.results
                        };
                    },
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                            'content')
                    },
                    allowClear: true
                }
            });
        }

        function formatAndValidateInput(input) {
            input.value = input.value.replace(/[^0-9]/g, '');
        }

        $(document).ready(function() {
            $(".tanggal").flatpickr({
                locale: "id", // format date indonesia
            });

            function clearError() {
                $('.invalid-feedback').remove();
                $('.is-invalid').removeClass('is-invalid');
            }

            function errorForm(errors) {
                clearError();
                jQuery.each(errors, function(key, value) {
                    $('#' + key).addClass('is-invalid');
                    $('#' + key).after('<span style="color:red" class="invalid-feedback">' + value +
                        '</span>');
                });
            }

            var form = $('#form');
            // Select the input element by ID using jQuery
            const inputElm = $('#kt_tagify_users')[0]; // Convert jQuery object to raw DOM element

            // Initialize Tagify
            const tagify = new Tagify(inputElm, {
                tagTextProp: 'name',
                enforceWhitelist: true, // Enforce the selection from whitelist
                tagValueProp: 'id',
                skipInvalid: true,
                dropdown: {
                    closeOnSelect: false,
                    enabled: 1,
                    classname: 'users-list',
                    searchKeys: ['name', 'email'], // Searchable fields
                },
                templates: {
                    tag: function(tagData) {
                        return `
                            <tag title="${(tagData.title || tagData.email)}"
                                contenteditable='false'
                                spellcheck='false'
                                tabIndex="-1"
                                class="${this.settings.classNames.tag} ${tagData.class || ""}"
                                ${this.getAttributes(tagData)}>
                                <x title='' class='tagify__tag__removeBtn' role='button' aria-label='remove tag'></x>
                                <div class="d-flex align-items-center">
                                    <div class='tagify__tag__avatar-wrap ps-0'>
                                        <img onerror="this.style.visibility='hidden'" class="rounded-circle w-25px me-2" src="${tagData.avatar}">
                                    </div>
                                    <span class='tagify__tag-text'>${tagData.name}</span>
                                </div>
                            </tag>
                            `;
                                    },
                                    dropdownItem: function(tagData) {
                                        return `
                            <div ${this.getAttributes(tagData)}
                                class='tagify__dropdown__item d-flex align-items-center ${tagData.class || ""}'
                                tabindex="0" role="option">
                                ${tagData.avatar ? `
                                                            <div class='tagify__dropdown__item__avatar-wrap me-2'>
                                                                <img onerror="this.style.visibility='hidden'" class="rounded-circle w-50px me-2" src="${tagData.avatar}">
                                                            </div>` : ''}
                                <div class="d-flex flex-column">
                                    <strong>${tagData.name}</strong>
                                    <span>${tagData.email}</span>
                                </div>
                            </div>
                            `;
                    }
                },
                whitelist: [] // initially empty, will be updated via AJAX
            });

            // Debounce function to limit the number of requests
            let debounceTimer;
            tagify.on('input', function(e) {
                const searchTerm = e.detail.value;

                // Clear the previous timer if it's still running
                clearTimeout(debounceTimer);

                // Set a new timer
                debounceTimer = setTimeout(function() {
                    // Make the AJAX request after a delay of 500ms (you can change this value)
                    $.ajax({
                        url: '{{ route('inbox.tagifySiswa') }}',
                        type: 'GET',
                        data: {
                            term: searchTerm // Send the typed term to the server
                        },
                        success: function(data) {
                            tagify.settings.whitelist =
                                data; // Update whitelist with server data
                            tagify.dropdown.show.call(tagify,
                                searchTerm); // Show the dropdown
                        }
                    });
                }, 500); // Adjust the delay (in milliseconds) to control how frequently requests are sent
            });

            // "Add all" suggestion (optional)
            let addAllSuggestionsElm;

            tagify.on('dropdown:show dropdown:updated', function(e) {
                let dropdownContentElm = e.detail.tagify.DOM.dropdown.content;
                if (tagify.suggestedListItems.length > 1) {
                    addAllSuggestionsElm = getAddAllSuggestionsElm();
                    dropdownContentElm.insertBefore(addAllSuggestionsElm, dropdownContentElm.firstChild);
                }
            });

            tagify.on('dropdown:select', function(e) {
                if (e.detail.elm === addAllSuggestionsElm) {
                    tagify.dropdown.selectAll.call(tagify); // Select all suggestions
                }
            });

            function getAddAllSuggestionsElm() {
                return tagify.parseTemplate('dropdownItem', [{
                    class: "addAll",
                    name: "Add all",
                    email: tagify.settings.whitelist.reduce(function(remaining, item) {
                        return tagify.isTagDuplicate(item.value) ? remaining : remaining + 1;
                    }, 0) + " Members"
                }]);
            }

            const quill = new Quill("#kt_inbox_form_editor", {
                theme: "snow",
                placeholder: "Type your text here...",
                modules: {
                    toolbar: {
                        container: [
                            [{ header: [1, 2, false] }],
                            ["bold", "italic", "underline"],
                            ["image", "code-block"]
                        ],
                        handlers: {
                            image: imageHandler
                        }
                    }
                }
            });

            function imageHandler() {
                const input = document.createElement('input');
                input.setAttribute('type', 'file');
                input.setAttribute('accept', 'image/*');
                input.click();

                input.onchange = function() {
                    const file = input.files[0];
                    if (file) {
                        const formData = new FormData();
                        formData.append('_token', $('input[name="_token"]').val());
                        formData.append('image', file);

                        // Send to your Laravel route
                        $.ajax({
                            url: '{{ route("quill.image.upload") }}', // create this route
                            type: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function(response) {
                                const range = quill.getSelection();
                                quill.insertEmbed(range.index, 'image', response.url); // insert image with returned URL
                            },
                            error: function(err) {
                                Swal.fire("Error", "Gagal mengunggah gambar", "error");
                            }
                        });
                    }
                };
            }

            $('#kt_inbox_form_submit').click(function(e) {
                e.preventDefault();

                Swal.fire({
                    title: 'Konfirmasi',
                    text: 'Apakah Anda yakin ingin menyimpan?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya',
                    cancelButtonText: 'Tidak'
                }).then((result) => {
                    if (result.isConfirmed) {
                        const selectedIDs = tagify.value.map(tag => tag.value); // array of IDs
                        const formData = new FormData($('#form_buat_pesan')[0]);

                        // ✅ Append selected Tagify IDs
                        selectedIDs.forEach((id, index) => {
                            formData.append(`compose_to[${index}]`, id);
                        });

                        // ✅ Append Quill content
                        let message = quill.root.innerHTML; // Get the content of the editor

                        // Check if the content is just an empty paragraph (<p><br></p>)
                        if (message === '<p><br></p>') {
                            message = null; // Set it to null if empty
                        }
                        formData.append('message', message); // Append to FormData

                        // ✅ Send AJAX
                        $.ajax({
                            url: '{{ route('inbox.store') }}',
                            method: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function(response) {
                                if (response.status == true) {
                                    Swal.fire({
                                        text: "Data berhasil disimpan",
                                        icon: "success",
                                    }).then(() => {
                                        location.reload();
                                    });
                                } else {
                                    Swal.fire({
                                        text: "Data gagal disimpan",
                                        icon: "error",
                                    });
                                }
                            },
                            error: function(xhr) {
                                var errors = xhr.responseJSON.errors;
                                var message = "";
                                $.each(errors, function(key, value) {
                                    message += value[0] + "<br>";
                                });
                                Swal.fire({
                                    title: 'Error!',
                                    html: message,
                                    icon: 'error',
                                });
                            }
                        });
                    }
                });
            });

            $('#btn-cancel').click(function() {
                Swal.fire({
                    title: 'Konfirmasi',
                    text: 'Apakah Anda yakin ingin membatalkan?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya',
                    cancelButtonText: 'Tidak'
                }).then((result) => {
                    if (result.isConfirmed) {
                        location.reload();
                    }
                });
            });
        });
    </script>
@endsection