@push('script')
@include('admin.settings.permission.includes.table_js')
<script>
    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="id"], input[name="nama_grup"], select[name="guard"]')
            .val('')
            .trigger('change');
    });

    modalEdit.on('hidden.bs.modal', function() {
        $(this).find('input[name="id"], input[name="nama_grup"], select[name="guard"]')
            .val('')
            .trigger('change');
    });

    $('.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();
            notifier.show('Sukses!', `${response.message} <a href="">Refresh</a>`, 'success', '', 0);
        } catch (xhr) {
            Swal.close();
            console.log(xhr.responseJSON?.errors);
            generateErrorResponse(xhr.responseJSON?.errors);
        }
    })

    function generateErrorResponse(error) {
        if (error) {
            let errorMessages = ''
            for (let key in error) {
                if (error.hasOwnProperty(key)) {
                    errorMessages += ``
                    if (Array.isArray(error[key])) {
                        errorMessages += error[key].join('<br>') + '<br>';
                    } else {
                        errorMessages += error[key] + '<br>';
                    }
                } else {
                    errorMessages = `${error} <br>`
                }
            }
            Swal.fire({
                title: "Gagal!",
                icon: 'warning',
                html: `<span class="text-warning">${errorMessages}</span>`,
                type: "warning",
            })
        } else {
            Swal.fire({
                title: "Error!",
                icon: 'error',
                html: `<span class="text-warning">${error?.message || 'An error occurred'}</span>`,
                type: "error",
            })
        }
    }

    // edit data
    table.on('click', 'tr .edit-data', function(e) {
        e.preventDefault();
        var row = table.row($(this).closest('tr')).data();
        const url = `/permission/${row.id}`;
        modalEdit.modal('show');
        modalEdit.find('input[name="id"]').val(row.id);
        modalEdit.find('input[name="nama_grup"]').val(row.name);
        modalEdit.find('select[name="guard"]').val(row.guard_name);

        // 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');
            }
        })
    })

    // detail data
    table.on('click', 'tr .modal-detail', function(e) {
        e.preventDefault();
        var row = table.row($(this).closest('tr')).data();
        const url = `/permission/${row.id}`;
        modalView.modal('show');
        modalView.find('#name').html(row.name);
        modalView.find('#guard_name').html(row.guard_name);
        modalView.find('#pengguna').html(row.users_count);
        modalView.find('#role').html(row.roles_count);
        var html = '';
        html = generateHtmlDetail(row.roles)
        modalView.find('#roles').html(html)

        // 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 permissions 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>`;
    }

    table.on('click', 'tr .delete-data', async function(e) {
        e.preventDefault();
        var row = table.row($(this).closest('tr')).data();
        const url = `/permission/${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, '/permission/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');
        }
    }
</script>
@endpush