@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::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">Kirim Pesan untuk Admin </h2>
                                            <!--begin::Toggle-->
                                            <a id="reloadData"
                                                class="btn btn-sm btn-icon btn-color-primary btn-light btn-active-light-primary"
                                                title="Reload Data">
                                                <i class="ki-duotone ki-arrows-circle fs-3 m-0">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                </i>
                                            </a>
                                            <!--end::Toggle-->
                                        </div>
                                        <div class="card-body card-scroll">
                                            @if ($siswa->status_keberangkatan == 1)
                                                <div id="message-container">
                                                    @include('partials.inbox_messages', [
                                                        'messages' => $inbox->messages,
                                                    ])
                                                </div>
                                            @else
                                                <div class="alert alert-danger">
                                                    Kamu belum bisa menggunakan fitur ini
                                                </div>
                                            @endif
                                        </div>
                                        <div class="card-body p-0">
                                            @if ($siswa->status_keberangkatan == 1)
                                                <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 -->
                                                            <div class=' d-flex align-items-center'>
                                                                <strong>Admin</strong>
                                                            </div>
                                                            <!--end::Input-->
                                                        </div>
                                                        <!--end::To-->
                                                        <!--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-->
                                            @else
                                                <div class="alert alert-danger">
                                                    Kamu belum bisa menggunakan fitur ini
                                                </div>
                                            @endif

                                        </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>
    <style>
        p {
            margin-top: 0;
            margin-bottom: 2px;
        }
    </style>
@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"
            });
        }

        const inboxId = "{{ $inbox->id }}";

        function fetchMessages() {
            $.ajax({
                url: `/inbox-siswa/${inboxId}/getMessages`,
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    $('#message-container').html(responseHtmlFromMessages(response.messages));
                },
                error: function(xhr) {
                    console.error('Failed to fetch messages:', xhr);
                }
            });
        }

        function responseHtmlFromMessages(messages) {
            let html = ``;
            let currentSenderId = null;
            let currentGroupMessages = [];
            let groupIndex = 0;

            messages.forEach((item, index) => {
                const senderId = item.sender_by?.siswa ? `siswa_${item.sender_by.siswa.nama}` :
                    `admin_${item.sender_by?.name}`;

                // If this is a new sender or first message
                if (senderId !== currentSenderId) {
                    // Output the previous group if it exists
                    if (currentGroupMessages.length > 0) {
                        html += createMessageGroup(currentGroupMessages, groupIndex);
                        groupIndex++;
                    }

                    // Start a new group
                    currentSenderId = senderId;
                    currentGroupMessages = [item];
                } else {
                    // Add to current group
                    currentGroupMessages.push(item);
                }

                // Handle the last message
                if (index === messages.length - 1) {
                    html += createMessageGroup(currentGroupMessages, groupIndex);
                }
            });

            return html;
        }

        function createMessageGroup(messages, groupIndex) {
            if (!messages.length) return '';

            const firstMessage = messages[0];
            const createdAt = new Date('2025-05-16T02:37:44.000000Z').toLocaleDateString('id-ID', {
                weekday: 'long', // Jumat
                year: 'numeric', // 2025
                month: 'long', // Mei
                day: 'numeric' // 16
            });

            const isSiswa = firstMessage.sender_by?.siswa !== null;
            const nama = isSiswa ? firstMessage.sender_by?.siswa?.nama : firstMessage.sender_by?.name;
            const badge = isSiswa ? 'Siswa' : 'Admin';
            const badgeClass = isSiswa ? 'badge-light-success' : 'badge-light-danger';

            // Header with user info and timestamp
            let groupHtml = `
                <div class="mb-4">
                    <div class="d-flex align-items-center bg-light-secondary bg-opacity-50 p-3 rounded">
                        <div class="symbol symbol-45px me-3">
                            <span class="symbol-label" style="background-image:url('/metronic8/demo8/assets/media/avatars/300-6.jpg');"></span>
                        </div>
                        <div>
                            <span class="fw-bold text-gray-900 me-2">${nama}</span>
                            <span class="badge ${badgeClass} me-2">${badge}</span>
                        </div>
                        <div class="ms-auto text-muted">
                            ${createdAt}
                        </div>
                    </div>`;

            // Add all messages from this group
            messages.forEach((msg, msgIndex) => {
                const msgTime = new Date(msg.created_at).toLocaleTimeString('id-ID', {
                    hour: '2-digit',
                    minute: '2-digit'
                });
                groupHtml += `
                    <div class="d-flex justify-content-between py-2 px-4">
                        <div class="text-gray-800">${msg.message}</div>
                        <div class="d-flex align-items-center">
                            ${msg.role && msg.role.code == 'SISWA' ? `
                                    <i class="ki-duotone ki-double-check fs-2 me-2 ${msg.is_read == 1 ? 'text-success' : ''}">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                    </i>` : ''}
                            <div class="text-muted">${msgTime}</div>
                        </div>
                    </div>`;
            });

            groupHtml += `</div>`;
            return groupHtml;
        }
        // Start polling every 5 seconds
        // setInterval(fetchMessages, 5000);
        fetchMessages();

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

            Swal.fire({
                title: "Memuat Ulang Data...",
                html: "Tunggu sebentar...",
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                    fetchMessages();
                    Swal.close();
                },
            });
        });

        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 formData = new FormData($('#form_buat_pesan')[0]);

                        // ✅ Append IDs from {{ $inbox->user_id }}
                        formData.append('compose_to[]', '{{ $inbox->user->siswa->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-siswa.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();
                    }
                });
            });

            $(document).on('click', '.btn-delete-message', function() {
                var id = $(this).attr('data-id');
                Swal.fire({
                    title: 'Konfirmasi',
                    text: 'Apakah Anda yakin ingin menghapus pesan ini?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya',
                    cancelButtonText: 'Tidak'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '{{ route('inbox.destroy', ':id') }}'.replace(':id', id),
                            method: 'DELETE',
                            data: {
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(response) {
                                if (response.status == true) {
                                    Swal.fire({
                                        text: "Data berhasil dihapus",
                                        icon: "success",
                                    }).then(() => {
                                        location.reload();
                                    });
                                } else {
                                    Swal.fire({
                                        text: "Data gagal dihapus",
                                        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',
                                });
                            }
                        });
                    }
                });
            });

            $(document).on('click', '.chat-item', function() {
                // Get the text from the .message-chat div inside the clicked element
                var message = $(this).find('.message-chat').text().trim();

                // Copy to clipboard using modern API
                navigator.clipboard.writeText(message).then(function() {
                    toastr.options = {
                        "closeButton": false,
                        "debug": false,
                        "newestOnTop": false,
                        "progressBar": false,
                        "positionClass": "toastr-bottom-right",
                        "preventDuplicates": false,
                        "onclick": null,
                        "showDuration": "300",
                        "hideDuration": "1000",
                        "timeOut": "5000",
                        "extendedTimeOut": "1000",
                        "showEasing": "swing",
                        "hideEasing": "linear",
                        "showMethod": "fadeIn",
                        "hideMethod": "fadeOut"
                    };

                    toastr.success("Teks disalin ke clipboard");

                }).catch(function(err) {
                    console.error('Copy failed', err);
                });
            });
        });
    </script>
@endsection