@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">{{ $inbox->user->siswa->nama }} - {{$inbox->user->siswa->nis}}</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">
                                            <div class="card-body card-scroll h-600px">
                                                <div id="message-container">
                                                    @include('partials.inbox_messages_admin', ['inbox' => $inbox])
                                                </div>
                                            </div>

                                            <!--begin::Message accordion-->

                                        </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 -->
                                                        <div class=' d-flex align-items-center' >
                                                            <img src="{{ asset($inbox->user->siswa ? $inbox->user->siswa->foto : $inbox->user->avatar) }}" alt="">
                                                            <div class="d-flex flex-column">
                                                                <strong>{{ $inbox->user->siswa ? $inbox->user->siswa->nama . ' | ' . $inbox->user->siswa->nis : $inbox->user->name }}</strong>
                                                                <span>{{ $inbox->user->siswa ? $inbox->user->siswa->email : $inbox->user->email }}</span>
                                                            </div>
                                                        </div>
                                                        <!--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" value="{{ $inbox->note }}"
                                                            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"
            });
        }

        let inboxId = '{{ $inbox->id }}'; // dynamically use current inbox ID
        let fetchUrl = '{{ route('inbox.getMessages', $inbox->id) }}';

        function fetchMessages() {
            $.ajax({
                url: fetchUrl,
                method: 'POST',
                headers: {
                    'X-CSRF-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.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',
                                });
                            }
                        });
                    }
                });
            });
        });
    </script>
@endsection