{% comment %} {% extends 'basic.html' %} {% endcomment %}
{% load humanize i18n static %}

{% comment %} {% block title %}
History
{% endblock %} {% endcomment %}

{% block head %}
<link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://unpkg.com/gijgo@1.9.14/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/4.3.0/js/dataTables.fixedColumns.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragscroll/0.0.8/dragscroll.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://unpkg.com/gijgo@1.9.14/js/gijgo.min.js" type="text/javascript"></script>
<!-- Add FontAwesome CDN link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

{% endblock %}

{% block content %}
{% language 'id' %}
    {% include "header.html" %}
    <!-- main page content -->
        <div class="accordion-body" style="padding: 1rem 0.25rem;">
            <div style="display: flex; justify-content: space-between;">
                <h5 class="h5">History</h5>
                <div style="display:flex">
                    <button class="btn btn-success btn-sm mr-2" id="export_excel">
                        <span style="color:#fff">Export</span>
                    </button>
                </div>
            </div>
            <p style="border-bottom: 1px solid grey;" class="mt-2 mb-3 h5"></p>
            <div class="row gy-3" id="table-laporan">
                <table width="100%" style="width:100% !important; cursor: pointer;" id="item-table" class="table dataTable table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>No. RM</th>
                            <th>Nama Pasien</th>
                            <th>Domisili</th>
                            <th>Usia</th>
                            <th>History</th>
                        </tr>
                    </thead>
                </table>
            </div> 
            <!-- Modal -->
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" style="max-width: 80%" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">History</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        </div>
                        <div class="modal-body">
                            <div class="row gy-3" style="display: contents;" id="table-detail">
                                <div id="data-search-history" style="display: flex;justify-content: space-between;padding:0px">
                                    <div id="length-container"></div>
                                    <div id="filter-container"></div>
                                </div>
                                <div id="data-table-history" style="display: flex;padding-left: 0px;padding-right: 0px;overflow-x: scroll;margin-top: 0px"></div>
                                <table width="100%" style="width:100% !important; cursor: pointer;" id="item-detail" class="table dataTable table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Kode Booking</th>
                                            <th>Nama Pasien</th>
                                            <th>Waktu Berobat</th>
                                            <th>Waktu Pulang</th>
                                            <th>Layanan</th>
                                            <th>Status</th>
                                            <th>Dokter</th>
                                            <th>Biaya</th>
                                            <th>Act</th>
                                        </tr>
                                    </thead>
                                </table>
                                <div id="data-pagination-history" style="display: flex;margin-bottom: 10px;justify-content: space-between;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> 
            <!-- Modal Informed-->
            <div class="modal fade" id="mdInformedHistory" tabindex="-1" role="dialog" aria-labelledby="mdInformedHistoryLabel" aria-hidden="true">
                <div class="modal-dialog" style="max-width: 80%" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                        <h5 class="modal-title" id="mdInformedHistoryLabel">Informed</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        </div>
                        <div class="modal-body">
                            
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn-sm">Print</button>
                        </div>
                    </div>
                </div>
            </div>  

            <!-- Modal Consent-->
            <div class="modal fade" id="mdConsentHistory" tabindex="-1" role="dialog" aria-labelledby="mdConsentHistoryLabel" aria-hidden="true">
                <div class="modal-dialog" style="max-width: 80%" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                        <h5 class="modal-title" id="mdConsentHistoryLabel">Consent</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        </div>
                        <div class="modal-body">

                        </div>
                        <!-- Modal Footer -->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn-sm">Print</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Modal Refusal-->
            <div class="modal fade" id="mdRefusalHistory" tabindex="-1" role="dialog" aria-labelledby="mdRefusalHistoryLabel" aria-hidden="true">
                <div class="modal-dialog" style="max-width: 80%" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                        <h5 class="modal-title" id="mdRefusalHistoryLabel">Refusal</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        </div>
                        <div class="modal-body">

                        </div>
                        <!-- Modal Footer -->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn-sm">Print</button>
                        </div>
                    </div>
                </div>
            </div>  
            <!-- Modal Refusal-->
            <div class="modal fade" id="mdRefusalHistory" tabindex="-1" role="dialog" aria-labelledby="mdRefusalHistoryLabel" aria-hidden="true">
                <div class="modal-dialog" style="max-width: 80%" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                        <h5 class="modal-title" id="mdRefusalHistoryLabel">Refusal</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        </div>
                        <div class="modal-body">

                        </div>
                        <!-- Modal Footer -->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn-sm">Print</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Modal Asesmen Perawat-->
            <div class="modal fade" id="mdAsesPerawatHistory" tabindex="-1" role="dialog" aria-labelledby="mdAsesPerawatHistoryLabel" aria-hidden="true">
                <div class="modal-dialog" style="max-width: 80%" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                        <h5 class="modal-title" id="mdAsesPerawatHistoryLabel">Asesmen Perawat</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        </div>
                        <div class="modal-body" style="padding: 2rem 10rem;">

                        </div>
                        <!-- Modal Footer -->
                        <!--<div class="modal-footer">-->
                        <!--    <button type="button" class="btn btn-secondary btn-sm">Print</button>-->
                        <!--    <button type="button" class="btn btn-primary btn-sm" id="submitAsesmenPerawat">Submit</button>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
            <!-- Modal Asesmen Dokter-->
            <div class="modal fade" id="mdAsesDokterHistory" tabindex="-1" role="dialog" aria-labelledby="mdAsesDokterHistoryLabel" aria-hidden="true">
                <div class="modal-dialog" style="max-width: 80%" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                        <h5 class="modal-title" id="mdAsesDokterHistoryLabel">Asesmen Dokter</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        </div>
                        <div class="modal-body">

                        </div>
                        <!-- Modal Footer -->
                        <!--<div class="modal-footer">-->
                        <!--    <button type="button" class="btn btn-secondary btn-sm">Print</button>-->
                        <!--    <button type="button" class="btn btn-primary btn-sm" id="submitAsesmenDokterHistory">Submit</button>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
            <!-- Modal Lembar Pertama-->
            <div class="modal fade" id="mdLembarpertamaHistory" tabindex="-1" role="dialog" aria-labelledby="mdLembarpertamaHistoryLabel" aria-hidden="true">
                <div class="modal-dialog" style="max-width: 80%" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                        <h5 class="modal-title" id="mdLembarpertamaHistoryLabel">Lembar CPPT</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        </div>
                        <div class="modal-body">

                        </div>
                        <!-- Modal Footer -->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn-sm">Print</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Modal Rekam Medis/Resume Medis-->
            <div class="modal fade" id="mdRekammedisHistory" tabindex="-1" role="dialog" aria-labelledby="mdRekammedisHistoryLabel" aria-hidden="true">
                <div class="modal-dialog" style="max-width: 80%" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                        <h5 class="modal-title" id="mdRekammedisHistoryLabel">Rekam Medis</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        </div>
                        <div class="modal-body">

                        </div>
                        <!-- Modal Footer -->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn-sm">Print</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Modal Keterangan Sakit-->
            <div class="modal fade" id="mdSuratKeteranganHistory" tabindex="-1" role="dialog" aria-labelledby="mdSuratKeteranganHistoryLabel" aria-hidden="true">
                <div class="modal-dialog" style="max-width: 80%" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="mdSuratKeteranganHistoryLabel">Surat Keterangan SAkit</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">

                        </div>
                        <!-- Modal Footer -->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn-sm">Print</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% include "footer.html" %}

<script>
    $(document).ready(function(){
        $('#filter-btn').click(function(){
            var dokter_id = $('#select-dokter').val()
            var pasien_id = $('#select-pasien').val()
            var rm_no = $('#rm_no').val()
            var waktu_berobat = $('#waktu_berobat').val()
            var start_date = $('#start_date').val()
            var finish_date = $('#finish_date').val()
    
            var csrftoken = $("[name=csrfmiddlewaretoken]").val();
            $.ajax({
                url: '{% url "get_history" %}',  // Replace with the actual URL
                method: 'POST',
                headers: {
                    'X-CSRFToken': csrftoken  // Get the CSRF token from a cookie
                },
                data: {
                    dokter_id : dokter_id,
                    pasien_id : pasien_id,
                    rm_no : rm_no,
                    waktu_berobat : waktu_berobat,
                    start_date : start_date,
                    finish_date : finish_date
                },
                success: function(data) {
                    $('#table-laporan').empty();
                    var html = `<table width="100%" style="width:100% !important; cursor: pointer;" id="item-table" class="table dataTable table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>No. RM</th>
                                <th>Nama Pasien</th>
                                <th>Domisili</th>
                                <th>Usia</th>
                                <th>Detail</th>
                            </tr>
                        </thead>
                    </table>`;
                    $('#table-laporan').html(html)
                    $('#item-table').DataTable({
                        "responsive":true,
                        "scrollX": true,
                        "data": data, 
                        "language": {
                            "search": "", // Remove the search label
                            "searchPlaceholder": "Search..." // Set the placeholder text
                        },
                        "columns": [
                            {
                            "data": null,
                            "render": function (data, type, row, meta) {
                                // Use the 'meta.row' to get the row index and add 1 to start counting from 1
                                return meta.row + 1;
                            }
                            },
                            { "data": "nomor_rekam_medis" },
                            { "data": "nama_pasien", "width" : "30%",},
                            { "data": "alamat"},
                            {
                                "data": "tanggal_lahir",
                                "width" : "20%",
                                "render": function(data, type, row) {
                                    return getUsia(data);
                                }
                            },
                            {
                                "data": "id",
                                "render": function (data, type, row) {
                                    // Create a custom button within the cell
                                    return `<button style="color:#fff" id="detail-pasien" data-toggle="modal" data-target="#exampleModal" class="btn btn-info btn-sm" data-id="${row.id}" onclick="get_historical(${row.id})">Detail</button>`;
                                },
                                "class": "text-center",
                            },
                        ],
                    });
                },
                error: function(error) {
                    console.log(error);
                }
            });
        })
    })
    $('#reset-filter').click(function(){
        $('#select-dokter').val("").trigger('change');
        $('#select2-select-dokter-container').text("All..")
        $('#select-pasien').val(null).trigger('change');
        $('#select2-select-pasien-container').text("All..")
        $('.select2-results li.select2-results__option--highlighted').removeClass('select2-results__option--highlighted');
        $('#rm_no').val('');
        $('#start_date').val('');
        $('#finish_date').val('');
    })
</script>

<script>
    $(document).ready(function () {
        $('#item-table').dataTable({
            serverSide: true,
            sAjaxSource: "https://assyifa.aklik.id/pemeriksaan/daftarpasien/data",  // new url
            order: [[5, 'desc']],
            columns: [
                {
                    "data": null,
                    "render": function (data, type, row, meta) {
                        return `<span>${meta.settings._iDisplayStart + meta.row + 1}</span>`;
                    }
                },
                {name: "nomor_rekam_medis", data: 1},
                {name: "nama_pasien", data: 2},
                {name: "alamat", data: 3},
                {
                    "data": "4",
                    "width" : "20%",
                    "render": function(data, type, row) {
                        return getUsia(data);
                    }
                },
                {
                    "data": "0",
                    "render": function (data, type, row) {
                        // Create a custom button within the cell
                        return `<button style="color:#fff" id="detail-pasien" data-toggle="modal" data-target="#exampleModal" class="btn btn-info btn-sm" data-id="${data}" onclick="get_historical(${data})">Detail</button>`;
                    },
                    "class": "text-center",
                },
            ],
        });
    });
      
    function downloadExcelFile(dokter_id,pasien_id,rm_no,start_date,finish_date) {
        var downloadUrl = `/pemeriksaan/export_excel/?dokter_id=${dokter_id}&pasien_id=${pasien_id}&rm_no=${rm_no}&start_date=${start_date}&finish_date=${finish_date}`;

        // Create a hidden anchor element
        var downloadLink = document.createElement('a');
        downloadLink.style.display = 'none';
        document.body.appendChild(downloadLink);

        // Set the anchor's href to the download URL
        downloadLink.href = downloadUrl;

        // Trigger a click event on the anchor to initiate the download
        downloadLink.click();

        // Clean up the anchor element
        document.body.removeChild(downloadLink);
    }
    $('#start_date').datepicker({
        uiLibrary: 'bootstrap4',
        format: 'yyyy-mm-dd'
    });
    $('#finish_date').datepicker({
        uiLibrary: 'bootstrap4',
        format: 'yyyy-mm-dd'
    });
    $('#waktu_berobat').select2();
    $('#select-dokter').select2();
    $('#select-dokter').select2({placeholder: "Nama Dokter"}).on('change', function(e) {
        // console.log("Hello")
    });
    $('#select-pasien').select2();

    $('#export_excel').on('click',function() {
        var dokter_id = $('#select-dokter').val()
        var pasien_id = $('#select-pasien').val()
        var rm_no = $('#rm_no').val()
        var start_date = $('#start_date').val()
        var finish_date = $('#finish_date').val()
        downloadExcelFile(dokter_id,pasien_id,rm_no,start_date,finish_date)
    })
    
    // $.ajax({
    //     url: '{% url "get_history" %}',  // Replace with the actual URL
    //     method: 'GET',
    //     success: function(data) {
    //         const selectPasien = $('#select-pasien');

    //         selectPasien.empty();

    //         // Add the default "Choose.." option
    //         selectPasien.append($('<option>', {
    //             value: '',
    //             text: 'All..'
    //         }));

    //         // Add unique pasien data to the <select> element
    //         data.forEach(function(pasien) {
    //             selectPasien.append($('<option>', {
    //                 value: pasien.pasien_id,
    //                 text: pasien.nama_pasien
    //             }));
    //         });
    //     },
    //     error: function(error) {
    //         console.log(error);
    //     }
    // });

    function getUsia(tanggal_lahir){
        var tanggalLahir = new Date(tanggal_lahir);
        var tanggalSekarang = new Date();

        // Hitung selisih tahun dan bulan
        var selisihTahun = tanggalSekarang.getFullYear() - tanggalLahir.getFullYear();
        var selisihBulan = tanggalSekarang.getMonth() - tanggalLahir.getMonth();

        // Koreksi jika selisih bulan negatif
        if (selisihBulan < 0) {
            selisihTahun--;
            selisihBulan += 12;
        }

        return selisihTahun + ' tahun ' + selisihBulan + ' bulan';
    }

    function formatDate(dateString) {
        const months = [
            "Jan.", "Feb.", "Mar.", "Apr.", "Mei", "Jun.", "Jul.", "Ags.", "Sep.", "Okt.", "Nov.", "Des."
        ];
    
        const date = new Date(dateString);
    
        const day = date.getDate();
        const month = months[date.getMonth()];
        const year = date.getFullYear();
        const hours = date.getHours();
        const minutes = date.getMinutes();
    
        // Format the time to include leading zero for single-digit minutes
        const formattedMinutes = (minutes < 10) ? `0${minutes}` : minutes;
    
        // Format the time to use 12-hour clock with "AM" or "PM"
        const ampm = (hours < 12) ? "AM" : "PM";
        const formattedHours = (hours > 12) ? hours - 12 : hours;
    
        return `${day} ${month} ${year}, ${formattedHours}.${formattedMinutes} ${ampm}`;
    }

    function openInfoPembiayaan(id) {
        const url = "/pemeriksaan/pembiayaanlayanan/" + id;
        window.open(url, "_blank");
    }

    function isRupiah(num) {
        // Check if num is a valid number
        if (typeof num !== 'number' || isNaN(num)) {
            return 'Rp 0 BPJS';
        }
    
        // Format the number as Rupiah
        const rupiah = new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' }).format(num);
    
        return rupiah + " Umum";
    }

</script>

{% comment %} RYDEV {% endcomment %}
<script>
    // Function to open the modal
    function openModal() {
        var modal = document.getElementById("myModal");
        modal.style.display = "block";
    }

    // Function to close the modal
    function closeModal() {
        var modal = document.getElementById("myModal");
        modal.style.display = "none";
    }
</script>

<script>
    function speak(text) {
        var speech = new SpeechSynthesisUtterance();
        speech.text = text
        speech.lang = 'id'
        speech.rate = 0.7
        window.speechSynthesis.speak(speech)
    }

    function get_historical(id){
            var csrftoken = $("[name=csrfmiddlewaretoken]").val();
            // Make an AJAX request to load content into the modal
            $.ajax({
                url: '/pemeriksaan/history_detail/',  // URL for your Django view
                data: {
                    id : id
                },
                method: 'POST',
                headers: {
                    'X-CSRFToken': csrftoken  // Get the CSRF token from a cookie
                },
                success: function(data) {
                    // console.log(data)
                    $('#table-detail').empty();
                    var html = `<div id="data-search-history" style="display: flex;justify-content: space-between;padding:0px">
                        <div id="length-container"></div>
                        <div id="filter-container"></div>
                    </div>
                    <div id="data-table-history" style="display: flex;padding-left: 0px;padding-right: 0px;overflow-x: scroll;margin-top: 0px"></div>
                    <table width="100%" style="width:100% !important; cursor: pointer;" id="item-detail" class="table dataTable table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Kode Booking</th>
                                <th>Nama Pasien</th>
                                <th>Waktu Berobat</th>
                                <th>Waktu Pulang</th>
                                <th>Layanan</th>
                                <th>Status</th>
                                <th>Dokter</th>
                                <th>Biaya</th>
                                <th>Act</th>
                            </tr>
                        </thead>
                    </table>
                    <div id="data-pagination-history" style="display: flex;margin-bottom: 10px;justify-content: space-between;"></div>`;
                    $('#table-detail').html(html)
                    $('#item-detail').DataTable({
                        "responsive":true,
                        "data": data, 
                        "fixedColumns": {
                            rightColumns: 1
                        },
                        "dom": 'lifBtp',
                        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                        "initComplete": function(settings, json) {
                            $('#item-detail_length').appendTo('#data-search-history #length-container');
                            $('#item-detail_filter').appendTo('#data-search-history #filter-container');
                            $('#item-detail_wrapper').appendTo('#data-table-history');
                            $('#item-detail_info').appendTo('#data-pagination-history');
                            $('#item-detail_paginate').appendTo('#data-pagination-history');
                        },
                        "language": {
                            "search": "", // Remove the search label
                            "searchPlaceholder": "Search...", // Set the placeholder text
                            "paginate": {
                                "previous": "Prev"
                            }
                        },
                        "columns": [
                            {
                            "data": null,
                            "render": function (data, type, row, meta) {
                                // Use the 'meta.row' to get the row index and add 1 to start counting from 1
                                return meta.row + 1;
                            }
                            },
                            { "data": "kode_booking", "width" : "20%" },
                            { "data": "nama_pasien", "width" : "30%",},
                            {
                                "data": "created_at",
                                "width" : "20%",
                                "render": function(data, type, row) {
                                    return formatDate(data);
                                }
                            },
                            {
                                "data": "waktu_keluar",
                                "width" : "20%",
                                "render": function(data, type, row) {
                                    return formatDate(data);
                                }
                            },
                            { "data": "ruang_rawat_pasien" },
                            {
                                "data": "status",
                                "render": function (data, type, row) {
                                    // Create a custom button within the cell
                                    return `<button style="color:#fff" class="btn btn-info btn-sm">${data}</button>`;
                                },
                                "class": "text-center",
                            },
                            {
                                "data": "nama_dokter",
                                "width" : "40%",
                                "render": function(data, type, row) {
                                    return data + " | KLINIK " + row.polinama;
                                }
                            },
                            {
                                "data": "biaya",
                                "width" : "40%",
                                "render": function(data, type, row) {
                                    var statusPasienStyle = data == null ? "btn-warning" : "btn-info"
                                    return `<button style="color:#fff" onclick="openInfoPembiayaan(${row.id})" class="btn ${statusPasienStyle} btn-sm">${isRupiah(data)}</button>`;
                                }
                            },
                            {
                                "data": null,
                                "render": function (data, type, row) {
                                    // Create a custom button within the cell
                                    return `
                                    <div style="width:250px; overflow-x: auto; white-space: nowrap;" class="button-container">
                                        <button style="" class="btn btn-success text-light btn-sm" data-target="#mdAsesPerawatHistory" data-toggle="modal" onclick="getAsesmenPerawatHistory(${row.id})">Asesmen Perawat</button>
                                        <button style="" class="btn btn-success text-light btn-sm" data-target="#mdAsesDokterHistory" data-toggle="modal" onclick="getAsesmenDokterHistory(${row.id})">Asesmen Dokter</button>
                                        <button style="" class="btn btn-success text-light btn-sm" data-target="#mdInformedHistory" data-toggle="modal" onclick="getInformedHistory(${row.id})">Informed</button>
                                        <button style="" class="btn btn-success text-light btn-sm" data-target="#mdConsentHistory" data-toggle="modal" onclick="getConsentHistory(${row.id})">Consent</button>
                                        <button style="" class="btn btn-success text-light btn-sm" data-target="#mdRefusalHistory" data-toggle="modal" onclick="getRefusalHistory(${row.id})">Refusal</button>
                                        <button style="" class="btn btn-success text-light btn-sm" data-target="#mdLembarpertamaHistory" data-toggle="modal" onclick="getLembarpertamaHistory(${row.id})">Lembar CPPT</button>
                                        <button style="" class="btn btn-success text-light btn-sm" data-target="#mdRekammedisHistory" data-toggle="modal" onclick="getRekammedisHistory(${row.id})">Rekam Medis</button>
                                        <button style="color:#fff" type="button" class="btn btn-success btn-sm text-light" onclick="window.open('/pemeriksaan/suratketerangansakit/${ row.id }','mywindow','location=1,status=1,scrollbars=1,width=1000px,height=800px');">Buat Surat</button>
                                        </div>
                                    `;
                                },
                                "class": "text-center",
                            },
                        ],
                        "createdRow": function(row, data, dataIndex) {
                            // Apply nowrap to each row
                            $(row).css("white-space", "nowrap");
                        }
                    });
                },
            });
        } 

</script>
<script>
    function getInformedHistory(id){
        $('#mdInformedHistory .modal-body').html(`<div class="progress">
        <div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar"
            aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
            0%
        </div>
        </div>`)
        fakeProgressBarAnimation();
        $.ajax({
            url: '/pemeriksaan/informed/' + id,
            type: 'GET',
            success: function(data) {
                // Display the HTML content in the modal
                $('#mdInformedHistory .modal-body').html(data);
            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    }

    function getConsentHistory(id){
        $('#mdConsentHistory .modal-body').html(`<div class="progress">
        <div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar"
            aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
            0%
        </div>
        </div>`)
        fakeProgressBarAnimation();
        $.ajax({
            url: '/pemeriksaan/consent/' + id,
            type: 'GET',
            success: function(data) {
                // Display the HTML content in the modal
                $('#mdConsentHistory .modal-body').html(data);
            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    }

    function getRefusalHistory(id){
        $('#mdRefusalHistory .modal-body').html(`<div class="progress">
        <div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar"
            aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
            0%
        </div>
        </div>`)
        fakeProgressBarAnimation();
        $.ajax({
            url: '/pemeriksaan/refusal/' + id,
            type: 'GET',
            success: function(data) {
                // Display the HTML content in the modal
                $('#mdRefusalHistory .modal-body').html(data);
            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    }

    function getAsesmenPerawatHistory(id){
        $('#mdAsesPerawatHistory .modal-body').html(`<div class="progress">
        <div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar"
            aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
            0%
        </div>
        </div>`)
        fakeProgressBarAnimation();
        $.ajax({
            url: '/pemeriksaan/asesmenperawat/' + id,
            type: 'GET',
            success: function(data) {
                // Display the HTML content in the modal
                $('#mdAsesPerawatHistory .modal-body').html(data);
            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    }
    
    function getAsesmenDokterHistory(id){
        $('#mdAsesDokterHistory .modal-body').html(`<div class="progress">
        <div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar"
            aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
            0%
        </div>
        </div>`)
        fakeProgressBarAnimation();
        $.ajax({
            url: '/pemeriksaan/asesmendokter/' + id,
            type: 'GET',
            success: function(data) {
                // Display the HTML content in the modal
                $('#mdAsesDokterHistory .modal-body').html(data);
                getData(id)
                // Find the form and button elements
                var myForm = document.getElementById('formAsesmen');
                var submitButton = document.getElementById('submitAsesmenDokterHistory');
                submitButton.addEventListener('click', function() {
                    getDataOdontogram(id)
                    // // Collect form data
                    var formData = new FormData(myForm);
    
                    Swal.fire({
                        title: 'Loading',
                        html: '<div class="lds-dual-ring"></div>', // You can use a custom loading spinner here
                        icon: 'warning',
                        allowOutsideClick: false,
                        showCancelButton: false,
                        showConfirmButton: false,
                    });

                    // Perform Ajax request
                    var xhr = new XMLHttpRequest();
                    xhr.open('POST', '/pemeriksaan/asesmendokter/' + id + '/', true);

                    // Set up the callback
                    xhr.onload = function() {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            Swal.fire({
                                title: 'Asesmen telah ditambahkan.',
                                text: 'Terimakasih.',
                                customClass: {
                                    icon: 'custom-swal-icon', // Add a custom class for the icon
                                },
                                timer: 3000,
                                imageUrl: 'https://wavahusada.com/pendaftaran/public/images/Puas.png', // Your custom image URL
                                imageWidth: 135, // Set the width of the image
                                imageHeight: 100, // Set the height of the image
                            })
                            location.reload()
                        } else {
                            console.error('Request failed with status:', xhr.status);
                        }
                    };

                    // Send the form data as the request payload
                    xhr.send(formData);
                });
            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    }
    
    function getLembarpertamaHistory(id){
        $('#mdLembarpertamaHistory .modal-body').html(`<div class="progress">
        <div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar"
            aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
            0%
        </div>
        </div>`)
        fakeProgressBarAnimation();
        $.ajax({
            url: '/pemeriksaan/lembarpertama/' + id,
            type: 'GET',
            success: function(data) {
                // Display the HTML content in the modal
                $('#mdLembarpertamaHistory .modal-body').html(data);
            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    }

    function getRekammedisHistory(id){
        $('#mdRekammedisHistory .modal-body').html(`<div class="progress">
        <div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar"
            aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
            0%
        </div>
        </div>`)
        fakeProgressBarAnimation();
        $.ajax({
            url: '/pemeriksaan/rekammedis/' + id,
            type: 'GET',
            success: function(data) {
                // Display the HTML content in the modal
                $('#mdRekammedisHistory .modal-body').html(data);
            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    }
    function getSuratKeteranganHistory(id){
        $('#mdSuratKeteranganHistory .modal-body').html(`<div class="progress">
        <div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar"
            aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
            0%
        </div>
        </div>`)
        fakeProgressBarAnimation();
        $.ajax({
            url: '/pemeriksaan/suratketerangansakit/' + id,
            type: 'GET',
            success: function(data) {
                // Display the HTML content in the modal
                $('#mdSuratKeteranganHistory .modal-body').html(data);
            },
            error: function(error) {
            console.error('Error:', error);
            } 
        });
    }  
</script>
{% endlanguage %}
{% endblock %}