@push('script')
    @include('admin.apps.report.hipertensi.includes.table_js')
    <script>
        $('.formFilter').on('submit', function(e) {
            e.preventDefault();
            table.ajax.reload();
        });

        $('#btnReset').on('click', function(e) {
            e.preventDefault();
            $('.formFilter')[0].reset();
            table.ajax.reload();
        })

        $('.ekspor-data').on('click', async function(e) {
            e.preventDefault();
            let tahun = $('#tahun').val();
            let search = $('#search').val();
            table.ajax.reload();

            let progress = 0;
            let interval;

            Swal.fire({
                title: 'Mengunduh data...',
                html: `
                    <div class="my-3">
                        <div class="progress" style="height: 20px;">
                            <div class="progress-bar progress-bar-striped progress-bar-animated"
                                role="progressbar" style="width: 0%" id="download-progress">
                                0%
                            </div>
                        </div>
                    </div>
                `,
                allowOutsideClick: false,
                showConfirmButton: false,
                didOpen: () => {
                    interval = setInterval(() => {
                        if (progress >= 90) return;
                        progress += 10;
                        const bar = document.getElementById('download-progress');
                        if (bar) {
                            bar.style.width = progress + '%';
                            bar.textContent = progress + '%';
                        }
                    }, 300);
                }
            });

            try {
                const response = await fetch('/laporan/hipertensi/export-excel', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        tahun: tahun,
                        search: search
                    })
                })

                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }

                const blob = await response.blob();
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = `laporan-hipertensi-${tahun}.xlsx`;
                document.body.appendChild(a);
                a.click();
                a.remove();
                window.URL.revokeObjectURL(url);

                clearInterval(interval);
                const bar = document.getElementById('download-progress');
                if (bar) {
                    bar.style.width = '100%';
                    bar.textContent = '100%';
                }
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil!',
                    text: 'Data berhasil diunduh.'
                });
            } catch (error) {
                console.error('Error:', error);
                clearInterval(interval);

                Swal.fire({
                    icon: 'error',
                    title: 'Gagal',
                    text: 'Terjadi kesalahan saat mengunduh data.'
                });
            }
        })
    </script>
@endpush