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

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

    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 modalAdd = $('#addModal');
    var modalEdit = $('#editModal');
    var modalSync = $('#syncModal');
    var modalImport = $('#import');

    var cDistrict = new Choices('#district', {
        searchPlaceholderValue: 'Cari Kab/Kota',
        placeholder: true,
        placeholderValue: 'Pilih Kab/Kota',
        removeItemButton: true,
    })

    var cDistrictEdit = new Choices('#districtEdit', {
        searchPlaceholderValue: 'Cari Kab/Kota',
        placeholder: true,
        placeholderValue: 'Pilih Kab/Kota',
        removeItemButton: true,
    })

    var cDistrictSync = new Choices('#district-sync', {
        searchPlaceholderValue: 'Cari Kab/Kota',
        placeholder: true,
        placeholderValue: 'Pilih Kab/Kota',
        removeItemButton: true,
    })

    var cDistrictImport = new Choices('#district-import', {
        searchPlaceholderValue: 'Cari Kab/Kota',
        placeholder: true,
        placeholderValue: 'Pilih Kab/Kota',
        removeItemButton: true,
    })

    modalAdd.on('hidden.bs.modal', function() {
        $(this).find('input[name="code"],input[name="name"]').val('').trigger('change');
        cDistrict.clearStore();
    });

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

    modalSync.on('hidden.bs.modal', function() {
        cDistrictSync.clearStore();
    });

    modalSync.on('show.bs.modal', function() {
        loadDistrictSync();
    });

    modalImport.on('hidden.bs.modal', function() {
        cDistrictImport.clearStore();
    });

    modalImport.on('show.bs.modal', function() {
        loadDistrictImport();
    });

    $('.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);
        }
    })

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

        loadDistrictEdit(row.code_district);

        // hapus data
        modalEdit.find('.delete-data').on('click', async function() {
            modalEdit.modal('hide')
            try {
                const result = await swalWithBootstrapButtons.fire(optionInfoDelete);

                if (!result.isConfirmed) return;
                Swal.showLoading();
                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 = `/sub-district/${row.id}`;

        try {
            const result = await swalWithBootstrapButtons.fire(optionInfoDelete);

            if (!result.isConfirmed) return;
            Swal.showLoading();
            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;
            Swal.showLoading();
            await deleteAllData(selectedIds, '/sub-district/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');
        }
    }

    // Proses syncronisasi data
    document.getElementById('syncDataForm').addEventListener('submit', async function (e) {
        e.preventDefault();
        const selectedDistrict = $(this).find('select[name="code_district"]').val()
        modalSync.modal('hide');
        const result = await swalWithBootstrapButtons.fire({
            title: 'Apakah Anda yakin?',
            text: 'Data yang disinkronkan, akan menimpa data yang sudah ada!',
            icon: 'info',
            showCancelButton: true,
            confirmButtonText: 'Ya, Lanjut!',
            cancelButtonText: 'Tidak, Batalkan!',
            reverseButtons: true,
            confirmButtonClass: 'btn btn-success',
            cancelButtonClass: 'btn btn-secondary',
            buttonsStyling: true
        });

        if (!result.isConfirmed) return;
        Swal.fire({
            title: 'Sinkronisasi Data...',
            html: `
                <div id="sync-progress-text">Menghubungkan ke server...</div>
                <div class="mt-3 progress" style="height: 20px;">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" id="sync-progress-bar"
                        role="progressbar" style="width: 0%">0%</div>
                </div>
            `,
            allowOutsideClick: false,
            showConfirmButton: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        let progress = 10;
        const progressBar = () => {
            if (progress >= 90) return;
            progress += 5;
            document.getElementById('sync-progress-bar').style.width = `${progress}%`;
            document.getElementById('sync-progress-bar').textContent = `${progress}%`;
            document.getElementById('sync-progress-text').textContent = `Mengambil data... (${progress}%)`;
        };
        const progressInterval = setInterval(progressBar, 300); // naikkan progress setiap 300ms

        fetch('/api/sub-district/sync', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                regency_id: selectedDistrict // contoh kode kabupaten Palopo
            })
        }).then(res => res.json())
        .then(data => {
            clearInterval(progressInterval); // stop pseudo-progress
            if (data.success) {
                document.getElementById('sync-progress-bar').style.width = `100%`;
                document.getElementById('sync-progress-bar').textContent = `100%`;
                document.getElementById('sync-progress-text').textContent = `Sinkronisasi selesai`;
                setTimeout(() => {
                    Swal.close();
                    swalWithBootstrapButtons.fire('Sukses!', 'Data berhasil disinkronkan.', 'success');
                    table.ajax.reload();
                }, 800);
            } else {
                Swal.close();
                swalWithBootstrapButtons.fire('Gagal!', 'Terjadi kesalahan saat sinkronisasi.', 'error');
            }
        })
        .catch(err => {
            clearInterval(progressInterval);
            Swal.close();
            swalWithBootstrapButtons.fire('Error!', 'Terjadi kesalahan saat sinkronisasi.','error')
        });
    });
</script>
@include('admin.apps.master.sub-district.includes.choices_js')
@endpush