@push('link_script')
    <script src="{{ asset('assets/js/plugins/choices.min.js') }}"></script>
@endpush
@push('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js"></script>

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

        var tags = @json($tags);
        var inputElement = $('#tagId');
        var $tagInput = inputElement.selectize({
            maxItems: 5, // Batasi maksimal 5 item
            persist: false, // Jangan simpan item yang sudah dipilih
            create: true, // Nonaktifkan penambahan item baru
            allowEmptyOption: true,
            plugins: ['remove_button'],
            options: tags.map(tag => ({
                value: tag,
                text: tag
            })),
            render: {
                option: function(data, escape) {
                    return '<div class="option">' + escape(data.text) + '</div>';
                }
            }
        });

        var selectize = $tagInput[0].selectize;
        $(selectize.$control).addClass('form-control');

        var ckategori = new Choices('#category_id', {
            searchPlaceholderValue: 'Cari nama kategori',
            placeholder: true,
            placeholderValue: 'Pilih kategori',
            removeItemButton: true,
        })

        const optionInfoDelete = {
            title: 'Apakah anda yakin?',
            text: "Data akan secara permanen dihapus!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Iya, hapus saja!',
            cancelButtonText: 'Tidak, batalkan saja!',
            reverseButtons: true
        }

        var modalView = $('#viewModal')
        var modalImpor = $('#import')

        $('.formSubmit').on('submit', async function(e) {
            e.preventDefault()
            modalImpor.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();

                swalWithBootstrapButtons.fire('Sukses!', response.message,
                    'success');
                window.location.href = response.redirect;
            } catch (xhr) {
                Swal.close();
                console.log(xhr.responseJSON?.errors);
                generateErrorResponse(xhr.responseJSON?.errors);
            }
        })

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

            modalView.modal('show');
            modalView.find('#judul').html(row.title);
            modalView.find('#gambar').html(`
        <img src="${row.image}" class="img-fluid w-50 ">
        `);

            var tags = row.tag.map(tag => `<span class="badge text-bg-primary">${tag.title}</span>`).join(' ');
            var categories = row.categories.map(category =>
                `<span class="badge text-bg-primary">${category.title}</span>`).join(' ');

            modalView.find('#deskripsi').html(row.content +
                `
        <ul class="my-2 list-group list-group-flush">
            <li class="px-0 py-2 list-group-item">
            <div class="d-flex align-items-center">
                <div class="flex-grow-1 me-2">
                <p class="mb-0">Tanggal Terbit</p>
                </div>
                <div class="flex-shrink-0">
                <p class="mb-0 text-muted">${row.published_at}</p>
                </div>
            </div>
            </li>
            <li class="px-0 py-2 list-group-item">
            <div class="d-flex align-items-center">
                <div class="flex-grow-1 me-2">
                <p class="mb-0">Editor</p>
                </div>
                <div class="flex-shrink-0">
                <p class="mb-0 text-muted">${row.user.first_name} ${row.user.last_name}</p>
                </div>
            </div>
            </li>
            <li class="px-0 py-2 list-group-item">
            <div class="d-flex align-items-center">
                <div class="flex-grow-1 me-2">
                <p class="mb-0">Views</p>
                </div>
                <div class="flex-shrink-0">
                <p class="mb-0 text-muted">${row.views}</p>
                </div>
            </div>
            </li>
            <li class="px-0 py-2 list-group-item">
            <div class="d-flex align-items-center">
                <div class="flex-grow-1 me-2">
                <p class="mb-0">Kategori</p>
                </div>
                <div class="flex-shrink-0">
                ${categories}
                </div>
            </div>
            </li>
            <li class="px-0 py-2 list-group-item">
            <div class="d-flex align-items-center">
                <div class="flex-grow-1 me-2">
                <p class="mb-0">Tagar</p>
                </div>
                <div class="flex-shrink-0">
                ${tags}
                </div>
            </div>
            </li>
            <li class="px-0 py-2 list-group-item">
            <div class="d-flex align-items-center">
                <div class="flex-grow-1 me-2">
                <p class="mb-0">Share</p>
                </div>
                <div class="flex-shrink-0">
                    <div class="a2a_kit a2a_kit_size_32 a2a_default_style" data-a2a-url="{{ url('/post') }}/${row.slug}" data-a2a-title="${row.title}">
                        <a class="a2a_button_facebook"></a>
                        <a class="a2a_button_x"></a>
                        <a class="a2a_button_whatsapp"></a>
                        <a class="a2a_button_copy_link"></a>
                        <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
                    </div>
                </div>
            </div>
            </li>
        </ul>`);

            window.a2a.init('page');

            // hapus data
            modalView.find('.delete-data').on('click', async function() {
                modalView.modal('hide')
                try {
                    const result = await swalWithBootstrapButtons.fire(optionInfoDelete);
                    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 = `/berita/${row.id}`;

            try {
                const result = await swalWithBootstrapButtons.fire(optionInfoDelete);
                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');
            }
        })

        // hapus semua data
        var deleteButton = $('#delete-selected');

        table.on('select', function(e, dt, type, indexes) {
            // Jika ada baris yang dipilih, tampilkan tombol hapus
            if (table.rows({
                    selected: true
                }).count() > 0) {
                deleteButton.show();
            } else {
                deleteButton.hide();
            }
        });

        table.on('deselect', function(e, dt, type, indexes) {
            if (table.rows({
                    selected: true
                }).count() === 0) {
                deleteButton.hide();
            }
        });

        $('#delete-selected').on('click', async function() {
            var selectedRows = table.rows({
                selected: true
            }).data();
            var selectedIds = [];
            selectedRows.each(function(row) {
                selectedIds.push(row.id);
            });

            if (selectedIds.length === 0) {
                alert('Tidak ada data yang dipilih!');
                return;
            }

            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, '/berita/hapus/all');
            table.ajax.reload();
            deleteButton.hide();
            swalWithBootstrapButtons.fire('Sukses!', 'Data yang dipilih berhasil dihapus.', 'success');
        });
    </script>

    <script defer src="https://static.addtoany.com/menu/page.js"></script>
@endpush