@push('script')
    @include('admin.apps.hipertensi.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 modalView = $('#viewModal')
        modalView.on('hidden.bs.modal', function() {
            $('#table-riwayat').DataTable().columns.adjust().draw();
        })

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

            modalView.modal('show');
            modalView.find('#nama').html(row.name);
            modalView.find('#phone').html(row.phone);
            modalView.find('#alamat').html(row.alamat);
            modalView.find('#pekerjaan').html(row.pekerjaan);
            modalView.find('#nik').html(row.nik);
            modalView.find('#bpjs').html(row.bpjs);
            modalView.find('#kelamin').html(row.kelamin == 'P' ? 'Perempuan' : 'Laki-Laki');
            modalView.find('#umur').html(row.umur);
            modalView.find('#tempat_lahir').html(row.tempat_lahir);
            modalView.find('#tgl_lahir').html(row.tgl_lahir);
            modalView.find('#agama').html(row.agama);
            modalView.find('.btn-tambah').attr('href', `/hipertensi/${row.id}/tambah-data`);
            modalView.find('.kostum-notifikasi').attr('href', `/notifikasi/user?search=${row?.user?.id}`);

            var status = row.status_perkawinan == 1 ? 'Menikah' : 'Belum Menikah';
            modalView.find('#status_perkawinan').html(status);
            modalView.find('#kelurahan').html(row.village ? row.village.name + ', ' + row.village.sub_district
                .name + ', ' + row.village.district.name : '-');
            loadRiwayat(row.id)

            modalView.find('.btn-notifikasi').on('click', async function(e) {
                e.preventDefault();
                const url = `/penduduk/notification`;
                modalView.modal('hide');
                try {
                    swalWithBootstrapButtons.fire({
                        title: 'Mengirim Nontifikasi',
                        text: `Sedang mengirim nontifikasi untuk ${row.name}...`,
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                    const response = await fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        body: JSON.stringify({
                            name: row.name,
                            nik: `${row.nik}`,
                            id: row.id,
                        })
                    });

                    if (!response.ok) {
                        throw new Error('Gagal mengirim nontifikasi');
                    }

                    const data = await response.json();
                    swalWithBootstrapButtons.fire('Terkirim!', data.message, 'success');
                } catch (error) {
                    Swal.close();
                    console.error('Terjadi kesalahan:', error);
                    if (error.responseJSON?.errors) {
                        generateErrorResponse(error.responseJSON.errors);
                    } else {
                        swalWithBootstrapButtons.fire('Gagal!', error.message, 'error');

                    }
                }
            })

        })

        function loadRiwayat(penduduk) {

            if ($.fn.DataTable.isDataTable('#table-riwayat')) {
                $('#table-riwayat').DataTable().clear().destroy();
            }

            var tblRiwayat = $('#table-riwayat').DataTable({
                dom: 'Bfrtip',
                buttons: [{
                        extend: 'copyHtml5',
                        exportOptions: {
                            columns: [0, ':visible']
                        }
                    },
                    {
                        extend: 'excelHtml5',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'pdfHtml5',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    'colvis',
                ],
                language: {
                    processing: '<div class="m-2 spinner-border text-success" role="status"></div>'
                },
                "aLengthMenu": [
                    [10, 25, 50, 100, 200, -1],
                    [10, 25, 50, 100, 200, "All"]
                ],
                processing: true,
                serverSide: true,
                searching: false,
                ajax: {
                    url: "{{ route('hipertensi.datatables') }}",
                    cache: false,
                    data: function(d) {
                        d.penduduk_id = penduduk;
                    }
                },
                search: {
                    "regex": true
                },
                columns: [{
                        data: 'id',
                        name: 'id',
                        className: 'text-center w-10',
                        searchable: false,
                    },
                    {
                        data: 'sistol',
                        name: 'sistol',
                    },
                    {
                        data: 'distol',
                        name: 'distol',
                    },
                    {
                        data: 'tempat_berobat',
                        name: 'tempat_berobat',
                    },
                    {
                        data: 'status_berobat',
                        name: 'status_berobat',
                        render: function(data, type, row) {
                            var status = '';
                            if (data == true) {
                                status = `<span class="badge bg-success">Sudah</span>`;
                            } else {
                                status = `<span class="badge bg-warning">Belum</span>`;

                            }
                            return status;
                        }
                    },
                    {
                        data: 'keterangan',
                        name: 'keterangan',
                        render: function(data, type, row) {
                            return data ?? '-';
                        }
                    },
                    {
                        data: 'jadwal',
                        name: 'jadwal',
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                        orderable: false,
                        render: function(data, type, row) {
                            let date = new Date(data);
                            let day = ('0' + date.getDate()).slice(-2);
                            let month = ('0' + (date.getMonth() + 1)).slice(-2);
                            let year = date.getFullYear();
                            return day + '/' + month + '/' + year;
                        }
                    },
                    {
                        data: null,
                        className: 'text-center',
                        orderable: false,
                        searchable: false,
                        mRender: function(data, index, row) {
                            return `
                            <div class="btn btn-group">
                                <a href="/hipertensi/${row.id}/edit" class="avtar avtar-xs btn-link-secondary edit-data">
                                    <i class="ti ti-edit f-20"></i>
                                </a>
                                <a href="#" class="avtar avtar-xs btn-link-secondary delete-data">
                                    <i class="ti ti-trash f-20"></i>
                                </a>
                            </div>
                        `;
                        }
                    },
                ]
            });

            tblRiwayat.on('draw', function(e, obj) {
                var start = obj.oAjaxData.start;
                var no = start + 1;
                tblRiwayat.column(0).nodes().each(function(cell, i) {
                    cell.innerHTML = i + no;
                })
            });

            tblRiwayat.on('click', 'tr .delete-data', async function(e) {
                e.preventDefault();
                var row = tblRiwayat.row($(this).closest('tr')).data();
                const url = `/hipertensi/${row.id}`;
                modalView.modal('hide');

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

                    if (!result.isConfirmed) return;
                    await deleteData(url);

                    swalWithBootstrapButtons.fire('Dihapus!', 'Data berhasil dihapus.', 'success');
                    tblRiwayat.ajax.reload();

                } catch (error) {
                    console.error('Terjadi kesalahan:', error);
                    swalWithBootstrapButtons.fire('Error', 'Terjadi kesalahan saat menghapus data.', 'error');
                }
            })
        }


        @if (session('success'))
            swalWithBootstrapButtons.fire('Berhasil!', '{{ session('success') }}', 'success');
        @endif
    </script>
@endpush