@push('script')
@include('admin.settings.keywordlog.includes.table_js')
<script>
    const swalWithBootstrapButtons = Swal.mixin({
        customClass: {
            confirmButton: 'btn btn-danger',
            cancelButton: 'btn btn-secondary'
        },
        buttonsStyling: false
    });

    var modalView = $('#viewModal')
    // detail data
    table.on('click', 'tr .modal-detail', function(e) {
        e.preventDefault();
        var row = table.row($(this).closest('tr')).data();

        const url = `/keywords-data/${row.id}`;
        modalView.modal('show');

        var htmlDetailAktifitas = '';
        htmlDetailAktifitas = generateDetailAktifitas(row)
        $('#detail-aktivitas').html(htmlDetailAktifitas)
        // 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');
            }
        })
    })

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

    function generateDetailAktifitas(data) {
        return `
            <li class="px-0 pt-0 list-group-item">
                <div class="row">
                    <div class="col-md-6">
                    <p class="mb-1 text-muted">Keyword</p>
                    <h6 class="mb-0">${data.keyword}</h6>
                    </div>
                    <div class="col-md-6">
                        <p class="mb-1 text-muted">IP Address</p>
                        <h6 class="mb-0">${data.created_at}</h6>
                    </div>
                </div>
            </li>
        `;
    }
</script>
@endpush