@push('link_script')
    <script src="{{ asset('assets/js/plugins/choices.min.js') }}"></script>
@endpush

@push('script')
    @include('admin.settings.user.inlcudes.table_js')
    <script>
        var choiceAdd = new Choices('#role', {
            placeholder: true,
            searchEnabled: true,
            removeItemButton: true
        })

        function choiseRoleAdd() {
            choiceAdd.setChoices(function() {
                var data = @json($role);
                return data.map(function(role) {
                    return {
                        value: role.name,
                        label: formatRoleName(role.name)
                    };
                });
            });
        }

        var choiceEdit = new Choices('#role2', {
            placeholder: true,
            removeItemButton: true,
            searchEnabled: false,
        })

        const swalWithBootstrapButtons = Swal.mixin({
            customClass: {
                confirmButton: 'btn btn-danger',
                cancelButton: 'btn btn-secondary'
            },
            buttonsStyling: false
        });

        var modalAdd = $('#addModal');
        var modalEdit = $('#editModal');
        var modalView = $('#viewModal')

        modalAdd.on('hidden.bs.modal', function() {
            $(this).find(
                    'input[name="first_name"], input[name="last_name"], input[name="email"], input[name="phone"],input[name="username"], select'
                )
                .val('')
                .trigger('change');
            choiceAdd.clearStore();
        });

        modalEdit.on('hidden.bs.modal', function() {
            $(this).find(
                    'input[name="first_name"], input[name="last_name"], input[name="email"], input[name="phone"], input[name="username"], select'
                )
                .val('')
                .trigger('change');
            choiceEdit.clearStore();
        });

        $('.formSubmit').on('submit', async function(e) {
            e.preventDefault()

            modalAdd.modal('hide');
            modalEdit.modal('hide');

            var formData = new FormData(this)
            var formUrl = $(this).attr('action')

            try {
                Swal.showLoading();

                const response = await $.ajax({
                    url: formUrl,
                    type: 'POST',
                    dataType: "JSON",
                    processData: false,
                    contentType: false,
                    cache: false,
                    data: formData,
                })
                Swal.close();
                table.ajax.reload();
                if (response.code === 200) {
                    notifier.show('Sukses!', `${response.message} <a href="">Refresh</a>`, 'success', '', 0);
                }
            } catch (xhr) {
                Swal.close();
                console.log(xhr.responseJSON.errors);
                generateErrorResponse(xhr.responseJSON.errors);
            }
        })

        // edit data
        table.on('click', 'tr .edit-data', function(e) {
            e.preventDefault();
            var row = table.row($(this).closest('tr')).data();
            const url = `/user/${row.id}`;

            modalEdit.modal('show');
            modalEdit.find('input[name="id"]').val(row.id);
            modalEdit.find('input[name="first_name"]').val(row.first_name);
            modalEdit.find('input[name="last_name"]').val(row.last_name);
            modalEdit.find('input[name="username"]').val(row.username);
            modalEdit.find('input[name="phone"]').val(row.phone);
            modalEdit.find('input[name="email"]').val(row.email);

            choiceEdit.setChoices(function() {
                var data = @json($role);
                return data.map(function(role) {
                    return {
                        value: role.name,
                        label: role.name
                    };
                });
            });
            const roleIds = row.roles.map(p => p.name);
            choiceEdit.setChoiceByValue(roleIds)

            // hapus data
            modalEdit.find('.delete-data').on('click', async function() {
                modalEdit.modal('hide')
                try {
                    const result = await swalWithBootstrapButtons.fire({
                        title: 'Apakah anda yakin?',
                        text: "Data akan secara permanen dihapus!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Iya, hapus saja!',
                        cancelButtonText: 'Tidak, batalkan saja!',
                        reverseButtons: true
                    });

                    if (!result.isConfirmed) return;
                    await deleteData(url);
                    swalWithBootstrapButtons.fire('Dihapus!', 'Data berhasil dihapus.', 'success');
                    table.ajax.reload();
                } catch (error) {
                    console.error('Terjadi kesalahan:', error);
                    swalWithBootstrapButtons.fire('Error', 'Terjadi kesalahan saat menghapus data.',
                        'error');
                }
            })

        })

        // detail data
        table.on('click', 'tr .modal-detail', function(e) {
            e.preventDefault();
            var row = table.row($(this).closest('tr')).data();
            const url = `/user/${row.id}`;

            modalView.modal('show');
            modalView.find('#name').html(`${row.first_name} ${row.last_name}`);
            modalView.find('#username').html(row.username);
            modalView.find('#email').html(row.email);
            modalView.find('#phone').html(row.phone ?? '-');
            modalView.find('#country').html(row.country ?? '-');
            modalView.find('#berita').html(row.posts_count ?? '-');
            modalView.find('#dokumen').html(row.documents_count ?? '-');

            var html = '';
            var htmlPermission = '';

            html = generateHtmlDetail(row.roles)
            row.roles.map(role => {
                htmlPermission = generateHtmlDetailPermission(role.permissions);
                return htmlPermission;
            })
            modalView.find('#roles').html(html)
            modalView.find('#permissions').html(htmlPermission)

            // hapus data
            modalView.find('.delete-data').on('click', async function() {
                modalView.modal('hide')
                try {
                    const result = await swalWithBootstrapButtons.fire({
                        title: 'Apakah anda yakin?',
                        text: "Data akan secara permanen dihapus!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Iya, hapus saja!',
                        cancelButtonText: 'Tidak, batalkan saja!',
                        reverseButtons: true
                    });

                    if (!result.isConfirmed) return;
                    await deleteData(url);
                    swalWithBootstrapButtons.fire('Dihapus!', 'Data berhasil dihapus.', 'success');
                    table.ajax.reload();
                } catch (error) {
                    console.error('Terjadi kesalahan:', error);
                    swalWithBootstrapButtons.fire('Error', 'Terjadi kesalahan saat menghapus data.',
                        'error');
                }
            })
        })

        function generateHtmlDetail(roles) {
            // Membagi roles menjadi dua bagian
            var mid = Math.ceil(roles.length / 2);
            var firstHalf = roles.slice(0, mid); // Bagian pertama
            var secondHalf = roles.slice(mid); // Bagian kedua

            // Membuat HTML untuk dua bagian
            var firstHtml = '<ul>';
            firstHalf.forEach(role => {
                firstHtml += `<li><h6>${role.name}</h6></li>`;
            });
            firstHtml += '</ul>';

            var secondHtml = '<ul>';
            secondHalf.forEach(role => {
                secondHtml += `<li><h6>${role.name}</h6></li>`;
            });
            secondHtml += '</ul>';

            // Menggabungkan kedua bagian
            return `<div class="row">
            <div class="col-md-6">${firstHtml}</div>
            <div class="col-md-6">${secondHtml}</div>
        </div>`;
        }

        function generateHtmlDetailPermission(permissions) {
            // Membagi permissions menjadi dua bagian
            var mid = Math.ceil(permissions.length / 2);
            var firstHalf = permissions.slice(0, mid); // Bagian pertama
            var secondHalf = permissions.slice(mid); // Bagian kedua
            var html = '';

            // Membuat HTML untuk dua bagian
            var firstHtml = '<ul>';
            firstHalf.forEach(permission => {
                firstHtml += `<li><h6>${permission.name}</h6></li>`;
            });
            firstHtml += '</ul>';

            var secondHtml = '<ul>';
            secondHalf.forEach(permission => {
                secondHtml += `<li><h6>${permission.name}</h6></li>`;
            });
            secondHtml += '</ul>';

            // Menggabungkan kedua bagian
            return `<div class="row">
            <div class="col-md-6">${firstHtml}</div>
            <div class="col-md-6">${secondHtml}</div>
        </div>`;
        }

        table.on('click', 'tr .delete-data', async function(e) {
            e.preventDefault();
            var row = table.row($(this).closest('tr')).data();
            const url = `/user/${row.id}`;

            try {
                const result = await swalWithBootstrapButtons.fire({
                    title: 'Apakah anda yakin?',
                    text: "Data akan secara permanen dihapus!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Iya, hapus saja!',
                    cancelButtonText: 'Tidak, batalkan saja!',
                    reverseButtons: true
                });

                if (!result.isConfirmed) return;
                await deleteData(url);
                swalWithBootstrapButtons.fire('Dihapus!', 'Data berhasil dihapus.', 'success');
                table.ajax.reload();
            } catch (error) {
                console.error('Terjadi kesalahan:', error);
                swalWithBootstrapButtons.fire('Error', 'Terjadi kesalahan saat menghapus data.', 'error');
            }
        })

        async function deleteAll(rowSelect) {
            if (rowSelect.length > 0) {

                var selectedIds = [];
                rowSelect.each(function(value, index) {
                    selectedIds.push(value.id);
                });

                const result = await swalWithBootstrapButtons.fire({
                    title: 'Apakah Anda yakin?',
                    text: 'Data yang dipilih akan dihapus secara permanen!',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Hapus!',
                    cancelButtonText: 'Tidak, Batalkan!',
                    reverseButtons: true
                });

                if (!result.isConfirmed) return;
                await deleteAllData(selectedIds, '/user/hapus/all');
                table.rows({
                    selected: true
                }).remove().draw();
                swalWithBootstrapButtons.fire('Dihapus!', 'Data berhasil dihapus.', 'success');
            } else {
                swalWithBootstrapButtons.fire('Gagal', 'Tidak ada data yang terpilih!', 'info');
            }
        }

        $('.formFilter').on('submit', async function(e) {
            e.preventDefault();
            var formData = {
                filterroleId: $('#filterroleId').val(),
            };

            $(this).prop('disabled', true);
            $('#filterButton').prop('disabled', true);
            $('#loading-search').removeClass('d-none');
            $('#text-cari').addClass('d-none');

            try {
                const response = await $.ajax({
                    url: '/user/get',
                    type: 'GET',
                    data: formData,
                });

                table.ajax.reload();
                $('#text-cari').removeClass('d-none');
                $('#loading-search').addClass('d-none');
                $(this).prop('disabled', false);
                $('#filterButton').prop('disabled', false);
            } catch (xhr) {
                $(this).prop('disabled', true);
                $('#text-cari').removeClass('d-none');
                $('#loading-search').addClass('d-none');
                $('#filterButton').prop('disabled', true);
                Swal.fire({
                    title: "Gagal!",
                    text: xhr.responseJSON?.message || xhr.message ||
                        'An error occurred',
                    type: "error",
                })
            }
        });

        function formatRoleName(roleName) {
            return roleName
                .split('_') // pisahkan berdasarkan underscore
                .map(word => word.charAt(0).toUpperCase() + word.slice(1)) // kapitalisasi tiap kata
                .join(' '); // gabungkan dengan spasi
        }
    </script>
@endpush