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

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

    var choiceEdit = new Choices('#permission2', {
        searchPlaceholderValue: 'Pilih',
        removeItemButton: true,
    })

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

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

    function choisePermission() {
        choiceAdd.setChoices(function() {
            return fetch('/permission')
                .then(function(response) {
                    return response.json();
                })
                .then(function(data) {
                    if (!data || !data.data) {
                        throw new Error('Data tidak valid.');
                    }
                    return data.data.map(function(release) {
                        return {
                            label: release.name,
                            value: release.idPermission
                        };
                    });
                })
                .catch(function(error) {
                    console.error('Error fetching data:', error.message);
                    generateErrorResponse(error.responseJSON.errors);
                });
        });
    }

    modalAdd.on('hidden.bs.modal', function() {
        $(this).find('input[name="id"], input[name="nama_grup"], select[name="guard"]')
            .val('')
            .trigger('change');
        choiceAdd.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 = `/role/${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);

        choiceEdit.setChoices(function() {
            return fetch(
                    '/permission'
                )
                .then(function(response) {
                    return response.json();
                })
                .then(function(data) {
                    if (!data || !data.data) {
                        throw new Error('Data tidak valid.');
                    }
                    return data.data.map(function(permission) {
                        return {
                            label: permission.name,
                            value: permission.idPermission
                        };
                    });
                })
                .catch(function(error) {
                    console.error('Error fetching data:', error.message);
                    generateErrorResponse(error.responseJSON.errors);
                });
        }).then(function(instance) {
            const permissionIds = row.permissions.map(p => p.id);
            instance.setChoiceByValue(permissionIds)
        });

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

    })

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

    // detail data
    table.on('click', 'tr .modal-detail', function(e) {
        e.preventDefault();
        var row = table.row($(this).closest('tr')).data();
        const url = `/role/${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('#izin-pengguna').html(row.permissions_count);

        var html = '';
        html = generateHtmlDetail(row.permissions)
        modalView.find('#permissions').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(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

        // 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 = `/role/${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 deleteAllRole(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, '/role/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