{% comment %} {% extends 'basic.html' %} {% endcomment %}
{% load humanize i18n static %}
{% block head %}
<style>
    label {
        display: block;
        text-align: right;
    }

    button:focus {
        box-shadow: none !important;
    }

    .tablinks {
        cursor: pointer;
        padding: 10px;
    }

    .scrollX {
        overflow: auto;
    }

    .button-container {
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    
    .button-container button {
        flex-basis: calc(33.33% - 10px); 
        margin: 2px; 
    }
    
    @media (max-width: 768px) {
        .button-container button {
            flex-basis: calc(50% - 10px);
        }
    }

    .select2-container {
        width: 100%;
    }

    .form-control {
        border-color: #aaa !important;
        border-radius: 5px !important;
    }

    .select2-selection__rendered {
        line-height: 31px !important;
    }
    .select2-container .select2-selection--single {
        height: 35px !important;
    }
    .select2-selection__arrow {
        height: 34px !important;
    }

    .dataTables_paginate {
        text-align: center;
    }

    .dataTables_paginate {
        margin-top: 10px;
    }

    .page-item:not(:first-child) .page-link {
        margin-left: 0px !important;
    }

    .page-link {
        border: none !important;
        padding: 0px !important;
    }

    .paginate_button {
        display: inline-block;
        margin: 2px;
        border: 1px solid #007bff;
        background-color: #fff;
        color: #007bff;
        cursor: pointer;
        border-radius: 3px;
        padding: 0.375rem 0.75rem;
    }

    #item-table_info {
        margin-top: 5px;
    }

    #item-table_paginate {
        margin-top: 10px;
    }

    .paginate_button.active, .paginate_button.current {
        background-color: #007bff;
        color: #fff;
        padding: 0.375rem 0.75rem;
    }

    .paginate_button.active:hover, .paginate_button.current:hover {
        background-color: #007bff;
        color: #fff;
        padding: 0.375rem 0.75rem;
    }
    

    .ellipsis {
        display: none;
    }

    #item-table_ellipsis {
        display: none;
    }

    #item-table_previous,
    #item-table_next {
        margin: 2px;
        border: 1px solid #007bff;
        background-color: #fff;
        color: #007bff;
        cursor: pointer;
        border-radius: 3px;
        background-color: #aaa !important;
        color: #fff !important;
    }

    #item-table_previous a,
    #item-table_next a {
        background-color: #aaa !important;
        color: #fff !important;
    }

    #item-table_info {
        position: absolute;
    }

    .paginate_button:hover {
        background-color: transparent;
        color: #007bff;
        text-decoration: none;
    }

    input[type="search"] {
        padding: 0.25rem 0.5rem;
        display: block;
        width: 100%;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    input[type="search"]:focus {
        border-color: #007bff; /* Change border color on focus */
        border: none !important;
        outline: none !important;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Add box shadow on focus */
    }

    #item-table_length {
        position: absolute;
    }

    #item-table_filter {
        float: right;
    }

    #item-detail_filter {
        float: right;
    }

    select[name="item-all_length"] {
        background-color: #f1f1f1; /* Background color */
        color: #333; /* Text color */
        border: 1px solid #ccc; /* Border */
        border-radius: 5px; /* Border radius */
        padding: 5px; /* Padding */
        -webkit-appearance: none; /* Remove arrow for Webkit browsers (Safari, Chrome) */
        -moz-appearance: none; /* Remove arrow for Mozilla Firefox */
        appearance: none; 
        font-size: 0.875rem;
        width: 50px;
    }

    select[name="item-all_length"]:focus {
        border-color: #007bff; /* Change border color on focus */
        border: none !important;
        outline: none !important;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Add box shadow on focus */
    }

    select[name="item-detail_length"] {
        background-color: #f1f1f1; /* Background color */
        color: #333; /* Text color */
        border: 1px solid #ccc; /* Border */
        border-radius: 5px; /* Border radius */
        padding: 5px; /* Padding */
        -webkit-appearance: none; /* Remove arrow for Webkit browsers (Safari, Chrome) */
        -moz-appearance: none; /* Remove arrow for Mozilla Firefox */
        appearance: none; 
        font-size: 0.875rem;
        width: 50px;
    }

    select[name="item-detail_length"]:focus {
        border-color: #007bff; /* Change border color on focus */
        border: none !important;
        outline: none !important;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Add box shadow on focus */
    }

    .page-link:hover {
        outline: none;
    }
    .custom-swal-icon {
        border: 2px solid #d33;
        border-radius: 50%; 
        background-color: #fff;
    }
    .custom-popover {
        position: relative;
        display: inline-block;
        cursor: pointer;
    }

    .popover-content {
        display: none;
        position: absolute;
        bottom: calc(100% - 5px); /* Position on the top */
        left: 50%; /* Center horizontally */
        transform: translateX(-50%);
        background-color: #3ac79b;
        padding: 10px;
        border-radius: 10px;
        z-index: 1000; /* Adjust the z-index as needed */
        opacity: 0;
        transition: opacity 0.3s;
    }

    .custom-popover:hover .popover-content {
        display: block;
        opacity: 1;
    }

    .btn-container {
        display: flex;
        gap: 5px;
    }

    .btn-container button {
        padding: 5px;
    }

    .btn-secondary .active {
        background-color: #6c757d;
        color: #fff;
        border-color: #6c757d;
    }

</style>
{% comment %} {{ block.super }} {% endcomment %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
<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" />
<!-- datatables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/4.3.0/css/fixedColumns.dataTables.min.css">
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/4.3.0/js/dataTables.fixedColumns.min.js"></script>
<!-- end datatables -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragscroll/0.0.8/dragscroll.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>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></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' %}
    <!-- main page content -->
        <div class="accordion-body" style="padding: 1rem 0.25rem;">
            <div style="display: flex; justify-content: space-between;border-bottom: 1px solid;padding-bottom: 10px;align-items: center;">
                <h5 class="h5">Semua Pasien</h5>
                <button type="button" id="daftarkan-pasien" data-toggle="modal" data-target="#mdTambahPasien" class="btn btn-info btn-sm text-light" onclick="tambahPasien()"><i class="fas fa-plus"></i> Daftarkan Pasien</button>
            </div>
            {% for x in request.user.groups.all %}
                <input type="hidden" id="access_role" value="{{ x }}">
            {% endfor %}
            <input type="hidden" id="access_role_user" value="{{request.user.username}}">
            <div id="collapseOneVitalSign" class="accordion-collapse collapse show collapse show"
            aria-labelledby="headingOneVitalSign" data-bs-parent="#accordionVitalSign">
               <p class="mt-3 h5"></p>
               <div class="row gy-3" style="display: contents;" id="table-pasien">
                    <div id="data-search-all" style="display: flex;justify-content: space-between;padding:0px">
                        <div id="length-container"></div>
                        <div id="filter-container" style="display: flex;">
                            <div style="margin-right: 5px;width: 200px">
                                <select style="width: 100%" id="select-ruang_rawat_pasien">
                                    <option value="">Semua Instalasi..</option>
                                    <option value="Rawat Jalan">Rawat Jalan</option>
                                    <option value="Rawat Inap">Rawat Inap</option>
                                    <option value="IGD">IGD</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div id="data-table-all" 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-all" class="table dataTable table-striped table-bordered">
                       <thead>
                           <tr>
                               <th>#</th>
                               <th>Nama Pasien</th>
                               <th>Kode Booking</th>
                               <th>No. RM</th>
                               <th>Layanan</th>
                               <th>Status</th>
                               <th>Waktu Berobat</th>
                               <th>Dokter</th>
                               <th style="z-index: 0;">ACT</th>
                           </tr>
                       </thead>
                    </table>
                   <div id="data-pagination-all" style="display: flex;margin-bottom: 10px;justify-content: space-between;"></div>
               </div>
       </div>

            <!-- Modal Asesmen Dokter-->
            <div class="modal fade" id="mdAsesDokterAll" tabindex="-1" role="dialog" aria-labelledby="mdAsesDokterAllLabel" aria-hidden="true">
                <div class="modal-dialog" style="max-width: 80%" role="document">
                    <div class="modal-content">
                        <div class="modal-header" style="display: flex;align-items: center;justify-content: space-between;">
                            <div>
                                <span><h5 class="modal-title" id="mdAsesDokterAllLabel">Asesmen Dokter </h5></span>
                            </div>
                            <div style="display: flex;align-items:center">
                                <div id="is-lab" style="display: none;align-items:center">
                                    <span><h5>&nbsp; Laboratorium &rarr; &nbsp;</h5></span>
                                    <span id="lab-pdf"><button class="btn btn-success btn-sm" onclick="showModal('#mdLabPdfShow')">PDF <span id="labPDF" class="badge badge-light" style="background-color: orange;position: absolute;left: -10px;top: -5px;border-radius: 100%;">0</span></button>&nbsp;</span>
                                    <span id="lab-umum"><button class="btn btn-success btn-sm" onclick="showModal('#mdLabUmumShow')">UMUM <span id="labUmum" class="badge badge-light" style="background-color: orange;position: absolute;left: -10px;top: -5px;border-radius: 100%;">0</span></button>&nbsp;</span>
                                    <span id="lab-triplee"><button class="btn btn-success btn-sm" onclick="showModal('#mdLabTripleEShow')">TRIPLE-E <span id="labTriplee" class="badge badge-light" style="background-color: orange;position: absolute;left: -10px;top: -5px;border-radius: 100%;">0</span></button> &nbsp;</span>
                                </div>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    &nbsp;<span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        </div>
                        <div class="modal-body">

                        </div>
                        <!-- Modal Footer -->
                    </div>
                </div>
            </div>  

            <!-- Modal Asesmen Bidan-->
            <div class="modal fade" id="mdAsesBidanAll" tabindex="-1" role="dialog" aria-labelledby="mdAsesBidanAllLabel" 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="mdAsesBidanAllLabel">Asesmen Bidan</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" onclick="cetak()">Print</button>
                            <button type="button" class="btn btn-primary btn-sm" id="submitAsesmenBidan">Submit</button>
                        </div>
                    </div>
                </div>
            </div>  

            <!-- Modal Asesmen Perawat-->
            <div class="modal fade" id="mdAsesPerawatAll" tabindex="-1" role="dialog" aria-labelledby="mdAsesPerawatAllLabel" 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="mdAsesPerawatAllLabel">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" id="printAsesmenPerawat">

                        </div>
                        <!-- Modal Footer -->
                    </div>
                </div>
            </div>  

            <!-- Modal Refusal-->
            <div class="modal fade" id="mdRefusalAll" tabindex="-1" role="dialog" aria-labelledby="mdRefusalAllLabel" 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="mdRefusalAllLabel">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 Consent-->
            <div class="modal fade" id="mdConsentAll" tabindex="-1" role="dialog" aria-labelledby="mdConsentAllLabel" 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="mdConsentAllLabel">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 Informed-->
            <div class="modal fade" id="mdInformedAll" tabindex="-1" role="dialog" aria-labelledby="mdInformedAllLabel" 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="mdInformedAllLabel">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>
                        <!-- Modal Footer -->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn-sm">Print</button>
                        </div>
                    </div>
                </div>
            </div>  

            <!-- Modal Lembar Pertama-->
            <div class="modal fade" id="mdLembarpertamaAll" tabindex="-1" role="dialog" aria-labelledby="mdLembarpertamaAllLabel" 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="mdLembarpertamaAllLabel">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" onclick="cetak()">Print</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Modal Rekam Medis/Resume Medis-->
            <div class="modal fade" id="mdRekammedisAll" tabindex="-1" role="dialog" aria-labelledby="mdRekammedisAllLabel" 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="mdRekammedisAllLabel">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" onclick="cetak()">Print</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Surat Keterangan -->
            <div class="modal fade" id="mdSuratKeteranganAll" tabindex="-1" role="dialog" aria-labelledby="mdSuratKeteranganAllLabel" 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="mdSuratKeteranganAllLabel">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" onclick="cetak()">Print</button>
                        </div>
                    </div>
                </div>
            </div>  
            <!-- Modal Surat Rujukan -->
            <div class="modal fade" id="mdSuratRujukanAll" tabindex="-1" role="dialog" aria-labelledby="mdSuratRujukanAllLabel" 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="mdSuratRujukanAllLabel">Surat Rujukan</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" onclick="cetak()">Print</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Modal Surat Rujukan -->
            <div class="modal fade" id="mdKwitansiAll" tabindex="-1" role="dialog" aria-labelledby="mdKwitansiAllLabel" 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="mdKwitansiAllLabel">Kwitansi</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>
                </div>
            </div>
            <!-- Modal Kontrol Dokter -->
            <div class="modal fade" id="mdSuratKontrolAll" tabindex="-1" role="dialog" aria-labelledby="mdSuratKontrolAllLabel" aria-hidden="true">
                <div class="modal-dialog" style="max-width: 60%" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                        <h5 class="modal-title" id="mdSuratKontrolAllLabel">Surat Kontrol 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>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Modal Surat Keterangan Sehat -->
            <div class="modal fade" id="mdSuratSehatAll" tabindex="-1" role="dialog" aria-labelledby="mdSuratSehatAllLabel" aria-hidden="true">
                <div class="modal-dialog" style="max-width: 60%" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                        <h5 class="modal-title" id="mdSuratSehatAllLabel">Surat Keterangan Sehat</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 Tambah Pasien -->
            <div class="modal fade" id="mdTambahPasien" role="dialog" aria-labelledby="mdTambahPasienLabel" 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="mdTambahPasienLabel">Form Pendaftaran</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>
                </div>
            </div>  
            <div id="form-pemulangan">{% csrf_token %}</div>

            <!-- MODAL LAB -->
            <!-- Modal LAB PDF-->
            <div class="modal fade" id="mdLabPdfShow" tabindex="-1" role="dialog" aria-labelledby="mdLabPdfShowLabel" aria-hidden="true">
                <div class="modal-dialog" style="max-width: 80%;margin-bottom: 0px;" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                        <h5 class="modal-title" id="mdLabPDFLabel">HASIL LABORATORIUM</h5>
                        <button type="button" class="close" onclick="hideModal('#mdLabPdfShow')">
                            <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 text-light" data-dismiss="modal">CLOSE</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Modal FORM UMUM-->
            <div class="modal fade" id="mdLabUmumShow" tabindex="-1" role="dialog" aria-labelledby="mdLabUmumShowLabel" aria-hidden="true">
                <div class="modal-dialog" style="max-width: 80%;margin-bottom: 0px;" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                        <h5 class="modal-title" id="mdLabUmumShowLabel">HASIL PEMERIKSAAN LABORATORIUM UMUM</h5>
                        <button type="button" class="close" onclick="hideModal('#mdLabUmumShow')">
                            <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 text-light" data-dismiss="modal">CLOSE</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Modal FORM TRIPLE E-->
            <div class="modal fade" id="mdLabTripleEShow" tabindex="-1" role="dialog" aria-labelledby="mdLabTripleEShowLabel" aria-hidden="true">
                <div class="modal-dialog" style="max-width: 80%;margin-bottom: 0px;" role="document">
                    <div class="modal-content">
                        <div class="  modal-header">
                        <h5 class="modal-title" id="mdLabTripleEShowLabel">HASIL PEMERIKSAAN LABORATORIUM TRIPLE-E</h5>
                        <button type="button" class="close" onclick="hideModal('#mdLabTripleEShow')">
                            <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 text-light" data-dismiss="modal">CLOSE</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% include "footer.html" %}

<script>
    $(document).ready(function () {
        //load pasien
        get_pasien("")
    })
        var backdrop = true;
    $(document).click('#mdAsesPerawatAll .modal-backdrop', function(e) {
        $('#mdAsesPerawatAll').modal('hide');
        // Check if the modal is visible and the click originated from outside the modal content
        // if (backdrop && modal.hasClass('show') && !modal.has(e.target).length) {
            // Swal.fire({
            //     title: "Data belum tersimpan!",
            //     text: "Simpan data untuk menutup halaman ini?",
            //     icon: "warning",
            //     showCancelButton: true,
            //     confirmButtonColor: "#3085d6",
            //     cancelButtonColor: "#d33",
            //     confirmButtonText: "Simpan",
            //     cancelButtonText: "Batal",
            // }).then((result) => {
            //     if (result.isConfirmed && result.dismiss != 'backdrop') {
            //         document.getElementById('submitAsesmenPerawat').click();
            //     } else if(!result.isConfirmed && result.dismiss == 'cancel') {
            //         backdrop = false
            //         setTimeout(function() {
            //             backdrop = true;
            //         }, 500); 
            //     }
            // });
        // }
    });
    function reinitializeSelect2(value){
        $('#table-pasien').empty()
            var html = `<div id="data-search-all" style="display: flex;justify-content: space-between;padding:0px">
                <div id="length-container"></div>
                <div id="filter-container" style="display: flex;">
                    <div style="margin-right: 5px;width: 200px">
                        <select style="width: 100%" id="select-ruang_rawat_pasien">
                            <option value="">Semua Instalasi..</option>
                            <option value="Rawat Jalan">Rawat Jalan</option>
                            <option value="Rawat Inap">Rawat Inap</option>
                            <option value="IGD">IGD</option>
                        </select>
                    </div>
                </div>
            </div>
            <div id="data-table-all" 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-all" class="table dataTable table-striped table-bordered">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Nama Pasien</th>
                    <th>Kode Booking</th>
                    <th>No. RM</th>
                    <th>Layanan</th>
                    <th>Status</th>
                    <th>Waktu Berobat</th>
                    <th>Dokter</th>
                    <th style="z-index: 0;">ACT</th>
                </tr>
            </thead>
            </table>
        <div id="data-pagination-all" style="display: flex;margin-bottom: 10px;justify-content: space-between;"></div>`;
        $('#table-pasien').html(html)
        $('#select-ruang_rawat_pasien').val(value).trigger('change');
        $('#select-ruang_rawat_pasien').select2().on('change', function(e) {
            var value = $(this).val();
            reinitializeSelect2(value)
            get_pasien(value)
        });
    }
    $('#select-ruang_rawat_pasien').select2().on('change', function(e) {
        var value = $(this).val();
        reinitializeSelect2(value)
        get_pasien(value)
    });
    function get_pasien(ruang_rawat_pasien){
        $.ajax({
            url: '/pemeriksaan/get_pendaftaran_views/',
            data: {
                ruang_rawat_pasien: ruang_rawat_pasien
            },
            method: 'GET',
            success: function(data) {
                var table = $('#item-all').DataTable({
                        "responsive":true,
                        "data": data, 
                        "dom": 'lifBtp',
                        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                        "initComplete": function(settings, json) {
                            $('#item-all_length').appendTo('#data-search-all #length-container');
                            $('#item-all_filter').appendTo('#data-search-all #filter-container');
                            $('#item-all_wrapper').appendTo('#data-table-all');
                            $('#item-all_info').appendTo('#data-pagination-all');
                            $('#item-all_paginate').appendTo('#data-pagination-all');
                        },
                        "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 `<span style="color: red;" onclick="confirmDelete(${row.id})">${meta.row + 1}</span>`;
                                }
                            },
                            {
                            "data": "nama_pasien",
                            "render": function (data, type, row, meta) {
                                // console.log(row)
                                // Use the 'meta.row' to get the row index and add 1 to start counting from 1
                                    if(row.cara_bayar == 1){
                                        var status_pasien = '<span class="badge badge-success" style="background-color:#3ac79b;position: absolute;left: -5px;top: -8px;">BPJS</span>'
                                    } else {
                                        var status_pasien = '<span class="badge badge-secondary" style="background-color:#7c848b;position: absolute;left: -5px;top: -8px;">UMUM</span>'
                                    }
                                    return `
                                        <div style="display: flex;flex-direction:row;align-items:center">
                                            <div style="margin-right: 5px;max-width: 35px;z-index: 999;">
                                                <button style="margin-right: 5px;height: fit-content;" class="btn btn-warning btn-sm expandable-button" onmouseover="panggilAddText(${row.id})" onmouseout="panggilRemoveText(${row.id})" onclick="panggilPasien('${row.id}','${row.nama_pasien}')">${status_pasien}<i class="bi bi-megaphone"></i><span class="loket-panggil-text_${row.id}"></span></button>
                                            </div>
                                            <div>${data}</div>
                                        </div>    
                                    `;
                                }
                            },
                            { "data": "kode_booking"},
                            {
                                "data": "nomor_rekam_medis",
                                "render": function(data, type, row) {
                                    return 'PS'+data;
                                }
                            },
                            { "data": "ruang_rawat_pasien"},
                            { "data": "status"},
                            {
                                "data": "created_at",
                                "render": function(data, type, row) {
                                    return formatDate(data);
                                }
                            },
                            { 
                                "data": "nama_dokter",
                                "render": function (data, type, row, meta) {
                                // console.log(row.cara_bayar)
                                // Use the 'meta.row' to get the row index and add 1 to start counting from 1
                                    if(row.cara_bayar == '1'){
                                        var status_pasien = '<span class="badge badge-success" style="position: absolute;left: -5px;top: -8px;">BPJS</span>'
                                    } else {
                                        var status_pasien = '<span class="badge badge-secondary" style="position: absolute;left: -5px;top: -8px;">UMUM</span>'
                                    }
                                    return `${data} | ${row.poli_nama}`;
                                }
                            },
                            {
                            "data": null,
                            "render": function (data, type, row) {
                                var check_role = $('#access_role').val()
                                var role_user = $('#access_role_user').val()
                                // Create a custom button within the cell
                                var nama_pasien = row.nama_pasien;
                                nama_pasien = nama_pasien.replace(/'/g, '');
                                if(check_role == 'DOKTER' || check_role == 'SUPERADMIN' || check_role == 'ADMIN'){
                                    var showDokter = `<button style="" class="btn btn-success text-light btn-sm" onclick="getAsesmenDokterAll(${row.id}, '${nama_pasien}')">Asesmen Dokter</button>`;
                                } else {
                                    var showDokter = '';
                                }
                                if(role_user == 'bidan_sri' || check_role == 'PERAWAT' || check_role == 'SUPERADMIN' || check_role == 'ADMIN'){
                                    var showPerawat = `<button style="" class="btn btn-success text-light btn-sm" data-target="#mdAsesPerawatAll" data-toggle="modal" onclick="getAsesmenPerawatAll(${row.id})">Asesmen Perawat</button>`;
                                } else {
                                    var showPerawat = '';
                                }
                                if(row.ruang_rawat_pasien == 'KIA'){
                                    var showBidan = `<button style="" class="btn btn-success text-light btn-sm" data-target="#mdAsesBidanAll" data-toggle="modal" onclick="getAsesmenBidanAll(${row.id})">USG & ANC</button>`;
                                } else {
                                    var showBidan = '';
                                }
                                return `
                                <div style="display: flex;flex-direction: row;">
                                <div class="custom-popover" style="z-index: 3;">
                                    <button style="margin-right: 5px;height: fit-content;" class="btn btn-success btn-sm"><i class="bi bi-envelope-paper"></i></button>
                                    <div class="popover-content">
                                        <div style="border-bottom: 1px solid #fff;margin-bottom: 5px"><b>BUAT SURAT</b></div>
                                        <div class="btn-container">
                                            <button style="background-color: white;" class="btn btn-sm" data-target="#mdSuratKeteranganAll" data-toggle="modal" onclick="getSuratKeteranganAll(${row.id})">Sakit</button>
                                            <button style="background-color: white;" class="btn btn-sm" data-target="#mdSuratRujukanAll" data-toggle="modal" onclick="getSuratRujukanAll(${row.id})">Rujukan</button>
                                            <button style="background-color: white;" class="btn btn-sm" data-target="#mdSuratKontrolAll" data-toggle="modal" onclick="getSuratKontrolAll(${row.id})">Kontrol</button>
                                        </div>
                                    </div>
                                </div>
                                <div style="margin-right: 5px;max-width: 35px;z-index: 2;">
                                    <a href="/pemeriksaan/pembiayaanlayanan/${row.id}/" style="margin-right: 5px;height: fit-content;" class="btn btn-info btn-sm" onmouseover="layananAddText(${row.id})" onmouseout="layananRemoveText(${row.id})"><i class="bi bi-person-gear"></i><span class="layanan-text_${row.id}"></span></a>
                                </div>
                                <div style="margin-right: 5px;max-width: 35px;z-index: 1;">
                                    <button style="margin-right: 5px;height: fit-content;" class="btn btn-warning btn-sm expandable-button" onmouseover="pulangkanAddText(${row.id})" onmouseout="pulangkanRemoveText(${row.id})" onclick="pulangkanPasien('${row.id}', '${nama_pasien}', '${row.status}', '${row.nama_dokter}', '${row.status_plan}', '${row.cara_bayar}')"><i class="bi bi-door-open"></i><span class="pulangkan-text_${row.id}"></span></button>
                                </div>
                                <div style="width:250px; overflow-x: auto; white-space: nowrap;" class="button-container">
                                    ${showPerawat}
                                    ${showBidan}
                                    ${showDokter}
                                    <button style="" class="btn btn-success text-light btn-sm" data-target="#mdInformedAll" data-toggle="modal" onclick="getInformedAll(${row.id})">Informed</button>
                                    <button style="" class="btn btn-success text-light btn-sm" data-target="#mdConsentAll" data-toggle="modal" onclick="getConsentAll(${row.id})">Consent</button>
                                    <button style="" class="btn btn-success text-light btn-sm" data-target="#mdRefusalAll" data-toggle="modal" onclick="getRefusalAll(${row.id})">Refusal</button>
                                    <button style="" class="btn btn-success text-light btn-sm" data-target="#mdLembarpertamaAll" data-toggle="modal" onclick="getLembarpertamaAll(${row.id})">Lembar CPPT</button>
                                    <button style="" class="btn btn-success text-light btn-sm" data-target="#mdRekammedisAll" data-toggle="modal" onclick="getRekammedisAll(${row.id})">Rekam Medis</button>
                                </div></div>`
                                ;
                            },
                            "class": "text-center",
                        }
                    ],
                    "createdRow": function(row, data, dataIndex) {
                        // Apply nowrap to each row
                        $(row).css("white-space", "nowrap");
                    },
                });
                if ($(window).width() < 768) {
                    $('.dataTables_length').remove();
                    $('.dataTables_info').remove();
                    $('#data-pagination-all').css("justify-content", "center");
                    $('.dataTables_filter').css("width", "100%");
                    $('#daftarkan-pasien').html('<i class="bi bi-person-plus"></i>');
                }
                if ($(window).width() > 768) { // Adjust the breakpoint as needed
                    $('#data-pagination-all').css("align-items", "center");
                    $('#data-pagination-all').css("padding", "0px");
                    new $.fn.dataTable.FixedColumns(table, {
                        leftColumns: 2,
                        rightColumns: 1
                    });
                }
            },
        });
    }
</script>

<script>
    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.getUTCHours();
        const minutes = date.getUTCMinutes();
        // 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 pulangkanAddText(id) {
        $('.pulangkan-text_' + id).html("Pulangkan");
    }
    
    function pulangkanRemoveText(id) {
        $('.pulangkan-text_'+ id).html("");
    }
    function layananAddText(id) {
        $('.layanan-text_' + id).html("Tambah Layanan");
    }
    
    function layananRemoveText(id) {
        $('.layanan-text_'+ id).html("");
    }

    function panggilAddText(id) {
        $('.loket-panggil-text_' + id).html("&nbsp;&nbsp;Panggil");
    }
    
    function panggilRemoveText(id) {
        $('.loket-panggil-text_'+ id).html("");
    }

    function panggilPasien(id, nama) {
        let name = nama.split(',')[0].trim();
        speak(`pasien atas nama ${name} silahkan masuk ke ruang dokter`)
        var csrftoken = $("[name=csrfmiddlewaretoken]").val();
        $.ajax({
            url: '/pemeriksaan/panggil_pasien/'+ id + '/',
            type: 'POST',
            headers: {
                'X-CSRFToken': csrftoken  // Get the CSRF token from a cookie
            },
            success: function(data) {
                window.location.reload()
            },
            error: function(error) {
                console.error('Error:', error);
            }
        });
    }

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

<script>
    function conv(key){
        var value = ''
        switch (key) {
            case 'tdg-caries':
                value = 'Karies (CAR)'
            break;
            case 'tdg-tblogam':
                value = 'Tambalan Logam'
            break;
            case 'tdg-tbnon':
                value = 'Tambalan Non Logam'
            break;
            case 'tdg-mklogam':
                value = 'Mahkota Logam'
            break;
            case 'tdg-mknon':
                value = 'Mahkota Non Logam'
            break;
            case 'tdg-tblogam':
                value = 'Tambalan Logam'
            break;
        }
        return value;
    }
    function getData(id){
        $.ajax({
            url: '/pemeriksaan/odontogram/'+ id + '/',
            type: 'GET',
            success: function(data) {
                if(data.length != 0){
                    $('#table_odontogram').empty();
                }
                $.each(data, function(index, value){
                    // console.log(data)
                    var kerusakan = '';
                    switch (value.ext) {
                        case 'UNE':
                            kerusakan = 'Belum Erupsi (UNE)'
                            break;
                        case 'PRE':
                            kerusakan = 'Erupsi Sebagian (PRE)'
                            break;
                        case 'ANO':
                            kerusakan = 'Anomali Bentuk (ANO)'
                            break;
                        case 'NVT':
                            kerusakan = 'Non Vital (NVT)'
                            break;
                    }
                    $('.pid-odontogram-' + value.no_gigi + '-ext').html(value.ext)
                    $('.pid-odontogram-' + value.no_gigi + '-base').addClass(value.base)
                    $('.pid-odontogram-' + value.no_gigi + '-center').addClass(value.center)
                    if(value.center !== ''){
                        kerusakan = conv(value.center)
                    }
                    $('.pid-odontogram-' + value.no_gigi + '-left').addClass(value.left)
                    if(value.left !== ''){
                        kerusakan = conv(value.left)
                    }
                    $('.pid-odontogram-' + value.no_gigi + '-right').addClass(value.right)
                    if(value.right !== ''){
                        kerusakan = conv(value.right)
                    }
                    $('.pid-odontogram-' + value.no_gigi + '-bottom').addClass(value.bottom)
                    if(value.bottom !== ''){
                        kerusakan = conv(value.bottom)
                    }
                    $('.pid-odontogram-' + value.no_gigi + '-top').addClass(value.top)
                    if(value.top !== ''){
                        kerusakan = conv(value.top)
                    }
                    if(value.status !== ''){
                        $('.pid-odontogram-' + value.no_gigi + '-status').attr('fill', value.status);
                        switch (value.status) {
                        case 'url(#img-akar)':
                            kerusakan = 'Sisa Akar'
                            break;
                        case 'url(#img-hilang)':
                            kerusakan = 'Gigi Hilang'
                            break;
                        case 'url(#img-jembatan)':
                            kerusakan = 'Jembatan'
                            break;
                        case 'url(#img-tiruan)':
                            kerusakan = 'Gigi Tiruan Lepas'
                            break;
                    }
                    }
                    var html = `
                        <tr><th colspan="2" style="border: 1px solid;text-align: center;font-weight: 400;">${index+1}</th>
                        <th colspan="2" style="border: 1px solid;text-align: center;font-weight: 400;">${value.no_gigi}</th>
                        <th colspan="5" style="border: 1px solid;text-align: center;font-weight: 400;">${kerusakan}</th></tr>`;
                    $('#table_odontogram').append(html)
                })
            },
            error: function(error) {
                console.error('Error:', error);
            }
        });
    }
    function fakeProgressBarAnimation() {
        var progressBar = document.getElementById('progress-bar');
        var currentValue = parseInt(progressBar.getAttribute('aria-valuenow'), 10);

        // Increment the progress value
        if (currentValue < 100) {
            currentValue += 10; // You can adjust the increment value as needed
            progressBar.setAttribute('aria-valuenow', currentValue);
            progressBar.style.width = currentValue + '%';
            progressBar.textContent = currentValue + '%';

            // Call the function again after a delay (simulating animation frames)
            setTimeout(fakeProgressBarAnimation, 500); // Adjust the delay as needed
        }
    }

    function showModal(elementname){
        $(elementname).modal('show');
    }

    function hideModal(elementname){
        $(elementname).modal('hide');
    }

    function getAsesmenDokterAll(id, nama_pasien) {
        $.ajax({
            type: "GET",
            url: `/pemeriksaan/check_asesmenperawat?pendaftaran_id=${id}`,
            success: function(response) {
                if (response.status_code == 200) {
                    $('#mdAsesDokterAll').modal('show');
                    $('#mdAsesDokterAll .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/check_layanan_lab/' + id,
                        type: 'GET',
                        success: function(data) {
                            // console.log(data)
                            if(data.is_lab){
                                $('#is-lab').css('display', 'flex')
                                if(data.lab_objects.pdf_total > 0){
                                    $('#lab-pdf').css('display', 'block')
                                    $('#mdAsesDokterAll #labPDF').html(data.lab_objects.pdf_total)
                                    $.each(data.lab_objects.pdf, function(i, x){
                                        elementId = "pdfCanvas_" + x.id
                                        $('#mdLabPdfShow .modal-body').append(`
                                            <div style="margin-bottom: 10px"><h4><b>${i+1} . ${x.nama_lab}<b></h4></div>
                                            <canvas id="${elementId}" style="width: 100%;"></canvas>
                                        `);
                                        showPDF(x.doc, elementId)
                                    })
                                } else {
                                    $('#lab-pdf').css('display', 'none')
                                }
                                if(data.lab_objects.umum_total > 0){
                                    $('#lab-umum').css('display', 'block')
                                    $('#mdAsesDokterAll #labUmum').html(data.lab_objects.umum_total)
                                    $.each(data.lab_objects.umum, function(i, x){
                                        $.ajax({
                                            url: '/pemeriksaan/dokumen_lab_umum_history/' + id + '/' + x,
                                            type: 'GET',
                                            success: function(data) {
                                                $('#mdLabUmumShow .modal-body').html(data);
                                            },
                                            error: function(error) {
                                                console.error('Error:', error);
                                            }
                                        });
                                    })
                                } else {
                                    $('#lab-umum').css('display', 'none')
                                }
                                if(data.lab_objects.triplee_total > 0){
                                    $('#lab-triplee').css('display', 'block')
                                    $('#mdAsesDokterAll #labTriplee').html(data.lab_objects.triplee_total)
                                    $.each(data.lab_objects.triplee, function(i, x){
                                        $.ajax({
                                            url: '/pemeriksaan/dokumen_lab_triple_e_history/' + id + '/' + x,
                                            type: 'GET',
                                            success: function(data) {
                                                $('#mdLabTripleEShow .modal-body').html(data);
                                            },
                                            error: function(error) {
                                            console.error('Error:', error);
                                            }
                                        });
                                    })
                                } else {
                                    $('#lab-triplee').css('display', 'none')
                                }
                            } else {
                                $('#is-lab').css('display', 'none')
                            }
                        },
                        error: function(error) {
                            console.error('Error:', error);
                        }
                    });

                    $.ajax({
                        url: '/pemeriksaan/asesmendokter/' + id,
                        type: 'GET',
                        success: function(data) {
                            // Display the HTML content in the modal
                            $('#mdAsesDokterAll .modal-body').html(data);
                            getData(id); // This seems to load or process additional data
                            
                            // Find the form and button elements
                            var myForm = document.getElementById('formAsesmen');
                            var submitButton = document.getElementById('submitAsesmenDokter');
                            submitButton.addEventListener('click', function(event) {
                                // Prevent form from submitting if validation fails
                                event.preventDefault();

                                // Get the value of the field with id icdx1
                                var icdx1Value = document.getElementById('icdx1').value.trim();

                                // Check if icdx1Value is empty
                                if (icdx1Value === "") {
                                    // Show Swal warning
                                    Swal.fire({
                                        title: 'Diagnosa kosong!',
                                        icon: 'warning',
                                        text: 'Minimal mengisi diagnosa primer.',
                                        confirmButtonText: 'Ok'
                                    });
                                } else {
                                    // Call getDataOdontogram before sending the form
                                    getDataOdontogram(id);
                                }
                            });
                        },
                        error: function(error) {
                            console.error('Error:', error);
                        }
                    });
                } else {
                    Swal.fire({
                        title: response.msg,
                        icon: 'error'
                    });
                }
            }
        });
    }
    
    function submitAsesDokter(xid){
        // Collect form data
        var myForm = document.getElementById('formAsesmen');
        var checkicdx1 = $('#mdAsesDokterAll .modal-body #icdx1').val();
        var check_icd10 = $('#mdAsesDokterAll .modal-body #icd10_primer').val();
        if(checkicdx1 || check_icd10){
            getDataOdontogram(xid)
            // // Collect form data
            var formData = new FormData(myForm);
            $.ajax({
                url: '/pemeriksaan/postasesmendokter/' + xid,  // Specify your endpoint URL here
                type: 'POST',
                data: formData,
                processData: false,  // Prevent jQuery from processing the data
                contentType: false,   // Prevent jQuery from setting contentType
                success: function(response) {
                    Swal.fire({
                        title: 'Asesmen telah ditambahkan.',
                        text: 'Terimakasih.',
                        icon: 'success',
                        customClass: {
                            icon: 'custom-swal-icon', // Add a custom class for the icon
                        },
                        timer: 3000,
                    })
                    location.reload()
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                    // Handle error here
                }
            });
        } else {
            Swal.fire({
                title: 'Diagnosa primer wajib di inputkan!',
                icon: 'warning',
                confirmButtonColor: '#3085d6',
                confirmButtonText: 'OK'
            });
        }
    }


    $('#mdAsesDokterAll .close').click(function() {
        modalClose('mdAsesDokterAll')
    })

    function modalClose(elementname){
        $('#'+ elementname).modal('hide');
    }
    
    function getAsesmenBidanAll(id){
        $('#mdAsesBidanAll .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/asesmenbidan/' + id,
            type: 'GET',
            success: function(data) {
                // Display the HTML content in the modal
                $('#mdAsesBidanAll .modal-body').html(data);
                // Find the form and button elements
                var myForm = document.getElementById('formAsesmenBidan');
                var submitButton = document.getElementById('submitAsesmenBidan');
                submitButton.addEventListener('click', function() {
                    // // 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/asesmenbidan/' + 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 getAsesmenPerawatAll(id){
        $('#mdAsesPerawatAll .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
                $('#mdAsesPerawatAll .modal-body').html(data);
                // Find the form and button elements
            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    } 
    
    function submitAsesPerawat(xid) {
        var myForm = document.getElementById('formAsesmenPerawat');
        var submitButton = document.getElementById('submitAsesmenPerawat');
        var check_keluhan = $("input[name='keluhan_utama']").val();
        if (check_keluhan == '' || !check_keluhan){
            Swal.fire({
                title: 'Keluhan utama wajib di inputkan!',
                icon: 'warning',
                confirmButtonColor: '#3085d6',
                confirmButtonText: 'OK'
            });
            return;
        }
        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,
        });
        // // Collect form data
        var formData = new FormData(myForm);
        $.ajax({
            url: '/pemeriksaan/postasesmenperawat/' + xid,  // Specify your endpoint URL here
            type: 'POST',
            data: formData,
            processData: false,  // Prevent jQuery from processing the data
            contentType: false,   // Prevent jQuery from setting contentType
            success: function(response) {
                if(response.code == 200){
                    Swal.fire({
                        title: 'Asesmen telah ditambahkan.',
                        text: 'Terimakasih.',
                        icon: 'success',
                        customClass: {
                            icon: 'custom-swal-icon', // Add a custom class for the icon
                        },
                        timer: 3000,
                    })
                    location.reload()
                } else {
                    Swal.fire({
                        title: 'Error!',
                        icon: 'error',
                        text: response.error,
                    })
                }
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
                // Handle error here
            }
        });
    }
    
    function getRefusalAll(id){
        $('#mdRefusalAll .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
                $('#mdRefusalAll .modal-body').html(data);
            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    } 

    function getConsentAll(id){
        $('#mdConsentAll .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
                $('#mdConsentAll .modal-body').html(data);
            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    }

    function getInformedAll(id){
        $('#mdInformedAll .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
                $('#mdInformedAll .modal-body').html(data);
            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    }

    function getLembarpertamaAll(id){
        $('#mdLembarpertamaAll .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
                $('#mdLembarpertamaAll .modal-body').html(data);
            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    }

    function getRekammedisAll(id){
        $('#mdRekammedisAll .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
                $('#mdRekammedisAll .modal-body').html(data);
            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    }


    function getSuratKeteranganAll(id){
        $('#mdSuratKeteranganAll .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
                $('#mdSuratKeteranganAll .modal-body').html(data);
            },
            error: function(error) {
            console.error('Error:', error);
            } 
        });
    } 
    function getSuratRujukanAll(id){
        $('#mdSuratRujukanAll .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/suratrujukan/' + id,
            type: 'GET',
            success: function(data) {
                // Display the HTML content in the modal
                $('#mdSuratRujukanAll .modal-body').html(data);
            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    } 
    function getSuratKontrolAll(id){
        $('#mdSuratKontrolAll .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/suratkontroldokter/' + id,
            type: 'GET',
            success: function(data) {
                // Display the HTML content in the modal
                $('#mdSuratKontrolAll .modal-body').html(data);
            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    } 

    function getSuratSehatAll(id){
        $('#mdSuratSehatAll .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/suratketerangansehat/' + id,
            type: 'GET',
            success: function(data) {
                // Display the HTML content in the modal
                $('#mdSuratSehatAll .modal-body').html(data);
            },
            error: function(error) {
            console.error('Error:', error);
            } 
        });
    }
    function getKwitansiAll(id){
        $('#mdKwitansiAll .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/kwitansi/' + id,
            type: 'GET',
            success: function(data) {
                // Display the HTML content in the modal
                $('#mdKwitansiAll .modal-body').html(data);
            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    } 
    function tambahPasien(){
        $('#mdTambahPasien .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/modalpendaftaran',
            type: 'GET',
            success: function(data) {
              // Display the HTML content in the modal
              $('#mdTambahPasien .modal-body').html(data);
            //   $('#mdTambahPasien').modal('show');
            },
            error: function(error) {
              console.error('Error:', error);
            }
        });
    }
    
    function opsiPemulanganClick(input){
        $('.btn-outline-secondary').removeClass('active'); // Remove active class from all buttons
        $('#'+input).addClass('active'); // Add active class to clicked button
        const selectedValue = $(this).data('value');
        $('#selectedValue').val(selectedValue);
        if(input == 'pemulangan-rujuk'){
            $('#form-pemulangan-swal').html('<br>{% csrf_token %}<input type="hidden" id="cara_keluar" name="cara_keluar" value="Dirujuk"><input id="catatan_dirujuk" oninput="updateValue(this)" name="catatan_dirujuk" class="form-control" placeholder="Rujuk Ke: ">')
            $('#form-pemulangan').html('<br>{% csrf_token %}<input type="hidden" id="cara_keluar" name="cara_keluar" value="Dirujuk"><input type="hidden" id="catatan_dirujuk" name="catatan_dirujuk" class="form-control" value="" placeholder="Rujuk Ke: ">')
        } else if (input == 'pemulangan-kontrol'){
            $('#form-pemulangan-swal').html('<br>{% csrf_token %}<input type="hidden" id="cara_keluar" name="cara_keluar" value="Kontrol"><input type="date" id="waktu_kontrol" oninput="updateValue(this)" name="waktu_kontrol" class="form-control" placeholder="Tanggal Kontrol">')
            $('#form-pemulangan').html('<br>{% csrf_token %}<input type="hidden" id="cara_keluar" name="cara_keluar" value="Kontrol"><input type="hidden" id="waktu_kontrol" name="waktu_kontrol" class="form-control" value="" placeholder="Tanggal Kontrol">')
        } else {
            $('#form-pemulangan-swal').html('{% csrf_token %}<input type="hidden" id="cara_keluar" name="cara_keluar" value="Tidak Kontrol">');
            $('#form-pemulangan').html('{% csrf_token %}<input type="hidden" id="cara_keluar" name="cara_keluar" value="Tidak Kontrol">');
        }
    }

    function pulangkanPasien(id, nama, status, dokter, status_plan, cara_bayar) {
        
        Swal.fire({
            title: `Pulangkan pasien atas nama ${nama}?`,
            icon: 'warning',
            html:
                `<label style="text-align:center">Silahkan pilih opsi pemulangan pasien: </label><input type="hidden" id="selectedValue"><div style="display: flex;justify-content:center;"><button id="pemulangan-rujuk" style="margin-right: 5px;" type="button" class="btn btn-outline-secondary" onclick="opsiPemulanganClick('pemulangan-rujuk')" data-value="Dirujuk">Di Rujuk</button>
                <button id="pemulangan-kontrol" style="margin-right: 5px;" type="button" onclick="opsiPemulanganClick('pemulangan-kontrol')" class="btn btn-outline-secondary" data-value="Kontrol">Kontrol</button>
                <button id="pemulangan-nokontrol" type="button" class="btn btn-outline-secondary active" onclick="opsiPemulanganClick('pemulangan-nokontrol')" data-value="Tidak Kontrol">Tidak Kontrol</button></div><div id="form-pemulangan-swal">{% csrf_token %}<input type="hidden" id="cara_keluar" name="cara_keluar" value="Tidak Kontrol"></div>`,
            focusConfirm: false,
            showCancelButton: true,
            didRender: () => {
                const elements = document.querySelectorAll('#form-pemulangan-swal *');
                $('#form-pemulangan').html(elements);
            },
        }).then((result) => {
            if (result.isConfirmed) {
                const cara_keluar = $('#cara_keluar').val();
                const catatan_dirujuk = $('#catatan_dirujuk').val();
                const waktu_kontrol = $('#waktu_kontrol').val();
                var csrftoken = $("[name=csrfmiddlewaretoken]").val();
                $.ajax({
                    type: 'POST',
                    url: '/pemeriksaan/cek_pembayaran/' + id + '/',
                    headers: {
                        'X-CSRFToken': csrftoken  // Get the CSRF token from a cookie
                    },
                    success: function (data) {
                        if(data.cek_pembayaran == false && cara_bayar == '2' && data.is_dp == false){
                            Swal.fire({
                                title: 'Pasien belum dapat dipulangkan!',
                                text: `Menunggu pembayaran atau Dokter ${dokter} belum menyelesaikan asesmen!`,
                                showConfirmButton: false,
                                icon: 'error',
                                // customClass: {
                                //     icon: 'custom-swal-icon', // Add a custom class for the icon
                                // },
                                // imageUrl: 'https://skm.pn-pontianak.go.id/img/gedek.png', // Your custom image URL
                                // imageWidth: 135, // Set the width of the image
                                // imageHeight: 100, // Set the height of the image
                            })
                        } else {
                            var formData = $('#form-pemulangan').serialize();
                            var csrftoken = $("[name=csrfmiddlewaretoken]").val();
                            $.ajax({
                                type: 'POST',
                                url: '/pemeriksaan/postkeluarpendaftaran/' + id,
                                data: {
                                    cara_keluar: cara_keluar,
                                    catatan_dirujuk: catatan_dirujuk,
                                    waktu_kontrol: waktu_kontrol
                                },
                                headers: {
                                    'X-CSRFToken': csrftoken
                                },
                                success: function (data) {
                                    // Handle the response, if needed
                                    Swal.fire({
                                        title: 'Pasien sudah dipulangkan!',
                                        text: 'Terimakasih.',
                                        icon: 'success',
                                        // customClass: {
                                        //     icon: 'custom-swal-icon', // Add a custom class for the icon
                                        // },
                                        // 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
                                    })
                                    setTimeout(function() {
                                        window.location.reload();
                                    }, 3000);
                                },
                                error: function (error) {
                                    console.error('Error:', error);
                                    Swal.fire('Error!', 'Something went wrong.', 'error');
                                }
                            });
                        }
                    },
                    error: function (error) {
                        console.error('Error:', error);
                        Swal.fire('Error!', 'Something went wrong.', 'error');
                    }
                });
            }
        });
    }
</script>

<script>    
    function getDataOdontogram(id){
        var uniqueNumbers = [];
        var arrayObj = [];
        // Check Empty
        var emptyObj = { 
            base: '',
            center: '',
            left: '',
            right: '',
            bottom: '',
            top: '',
            status: '',
            ext: ''   
        };

        $("g").each(function() {
            var classListArray = Array.from(this.classList);
            var numberMatch = classListArray.find(className => className.match(/^pid-odontogram-(\d+)-grp$/));
            if (numberMatch) {
                var matches = numberMatch.match(/pid-odontogram-(\d+)-grp/);
                var number = matches[1];

                objToPush = { 
                    base: '',
                    center: '',
                    left: '',
                    right: '',
                    bottom: '',
                    top: '',
                    status: '',
                    ext: ''   
                };
                // Check if the number is not already in the uniqueNumbers array
                if (uniqueNumbers.indexOf(number) === -1) {
                    uniqueNumbers.push(number);
                    //base odontogram check
                    let checkBase = '.pid-odontogram-'+ number +'-base.tdg-sign';
                    if ($(this).find(checkBase).length > 0) {
                        objToPush.base = 'tdg-sign';
                        var extElement = $(this).find('.pid-odontogram-'+ number +'-ext');
                        if (extElement.length > 0) {
                            objToPush.ext = extElement.text();
                          }
                    }
                    // Array of element types to check
                    var elementTypes = ['center', 'left', 'right', 'bottom', 'top'];

                    // Loop through each element type
                    for (var i = 0; i < elementTypes.length; i++) {
                        var elementType = elementTypes[i];
                        var checkElement = '.pid-odontogram-' + number + '-' + elementType;
                        var element = $(this).find(checkElement);

                        if (element.length > 0) {
                            // Check classes for the current element type
                            if (element.attr('class').trim().split(/\s+/).includes('tdg-tbnon')) {
                                objToPush[elementType] = 'tdg-tbnon';
                            } else if (element.attr('class').trim().split(/\s+/).includes('tdg-caries')) {
                                objToPush[elementType] = 'tdg-caries';
                            } else if (element.attr('class').trim().split(/\s+/).includes('tdg-tblogam')) {
                                objToPush[elementType] = 'tdg-tblogam';
                            } else if (element.attr('class').trim().split(/\s+/).includes('tdg-mklogam')) {
                                objToPush[elementType] = 'tdg-mklogam';
                            } else if (element.attr('class').trim().split(/\s+/).includes('tdg-mknon')) {
                                objToPush[elementType] = 'tdg-mknon';
                            }
                        }
                    }
                    //status odontogram check
                    let checkStatus = '.pid-odontogram-'+ number +'-status';
                    if ($(this).find(checkStatus).length > 0) {
                        var fillAttributeValue = $(this).find(checkStatus).attr('fill');
                    
                        if (fillAttributeValue === 'url(#img-akar)' || fillAttributeValue === 'url(#img-hilang)' || fillAttributeValue === 'url(#img-jembatan)' || fillAttributeValue === 'url(#img-tiruan)') {
                        objToPush.status = fillAttributeValue;
                        }
                    }
                }
                var isObjectChanged = JSON.stringify(objToPush) !== JSON.stringify(emptyObj);
                if (isObjectChanged) {
                    objToPush.t_number = number;
                    arrayObj.push(objToPush)
                }
            }
        })
        //Post Odontogram
        var jsonBody = JSON.stringify(arrayObj);
        var csrftoken = $("[name=csrfmiddlewaretoken]").val();
        $.ajax({
            url: '/pemeriksaan/odontogram/'+ id + '/',
            type: 'POST',
            headers: {
                'X-CSRFToken': csrftoken  // Get the CSRF token from a cookie
            },
            contentType: 'application/json',
            data: jsonBody,
            success: function(data) {
            },
            error: function(error) {
                console.error('Error:', error);
            }
        });
    }
    
</script>

{% comment %} RYDEV {% endcomment %}

<script>
    function updateValue(inputElement) {
        inputElement.setAttribute('value', inputElement.value);
        document.querySelector('#form-pemulangan #'+inputElement.id).setAttribute('value', inputElement.value);
    }
    lastVal = 0;
    function updateTerapi(inputElement) {
        var name = inputElement.name
        var initialValue; 
        var changedValue = 0;
        var words = inputElement.value;
        if(inputElement.value.length > 0){
            initialValue = inputElement.value;
        }
        inputElement.setAttribute('value', inputElement.value);
        inputElement.addEventListener('focus', function(event) {
            changedValue = this.value;
        });

        inputElement.addEventListener('blur', function(event) {
            var inputValue = inputElement.value;
            
            if (initialValue == inputElement.value && initialValue != changedValue && changedValue == 0) {
                var idPendaftaran = this.getAttribute('id-pendaftaran');
                var value = inputElement.value
                
                postTerapi(value, name, idPendaftaran)
            }
        });

        inputElement.addEventListener('keypress', function(event) {
            if (event.which === 13) {
                if (initialValue == inputElement.value && initialValue != changedValue && changedValue == 0 && initialValue != lastVal) {
                    var idPendaftaran = this.getAttribute('id-pendaftaran');
                    var value = inputElement.value

                    lastVal = initialValue
                    postTerapi(value, name, idPendaftaran)
                }
            }
        });
    }   

    function postTerapi(value, name, idPendaftaran){
        var csrftoken = $("[name=csrfmiddlewaretoken]").val();
        var data = {};
        data['pendaftaran_id'] = idPendaftaran;
        data[name] = value;
        $.ajax({
            url: '/pemeriksaan/post_terapi_obat/'+ idPendaftaran,
            type: 'POST',
            headers: {
                'X-CSRFToken': csrftoken  // Get the CSRF token from a cookie
            },
            data: data,
            success: function(data) {
                // console.log(data)
            },
            error: function(error) {
                console.error('Error:', error);
            }
        });
    }
    function getDataOdontHistory(id){
        $.ajax({
            url: '/pemeriksaan/odontogram/'+ id + '/',
            type: 'GET',
            success: function(data) {
                if(data.length == 0){
                    $('#table_odontogram_history').html('<th colspan="9" style="border: 1px solid;font-weight: 400;text-align: center;"> Data tidak ditemukan. </th>');
                }
                $('#odn').html(`{% include 'pemeriksaan/isian/odontogram-history.html' %}`);
                $.each(data, function(index, value){
                    var kerusakan = '';
                    switch (value.ext) {
                        case 'UNE':
                            kerusakan = 'Belum Erupsi (UNE)'
                            break;
                        case 'PRE':
                            kerusakan = 'Erupsi Sebagian (PRE)'
                            break;
                        case 'ANO':
                            kerusakan = 'Anomali Bentuk (ANO)'
                            break;
                        case 'NVT':
                            kerusakan = 'Non Vital (NVT)'
                            break;
                    }
                    $('.pid-odont-history-' + value.no_gigi + '-ext').html(value.ext)
                    $('.pid-odont-history-' + value.no_gigi + '-base').addClass(value.base)
                    $('.pid-odont-history-' + value.no_gigi + '-center').addClass(value.center)
                    if(value.center !== ''){
                        kerusakan = conv(value.center)
                    }
                    $('.pid-odont-history-' + value.no_gigi + '-left').addClass(value.left)
                    if(value.left !== ''){
                        kerusakan = conv(value.left)
                    }
                    $('.pid-odont-history-' + value.no_gigi + '-right').addClass(value.right)
                    if(value.right !== ''){
                        kerusakan = conv(value.right)
                    }
                    $('.pid-odont-history-' + value.no_gigi + '-bottom').addClass(value.bottom)
                    if(value.bottom !== ''){
                        kerusakan = conv(value.bottom)
                    }
                    $('.pid-odont-history-' + value.no_gigi + '-top').addClass(value.top)
                    if(value.top !== ''){
                        kerusakan = conv(value.top)
                    }
                    if(value.status !== ''){
                        $('.pid-odont-history-' + value.no_gigi + '-status').attr('fill', value.status);
                        switch (value.status) {
                        case 'url(#img-akar)':
                            kerusakan = 'Sisa Akar'
                            break;
                        case 'url(#img-hilang)':
                            kerusakan = 'Gigi Hilang'
                            break;
                        case 'url(#img-jembatan)':
                            kerusakan = 'Jembatan'
                            break;
                        case 'url(#img-tiruan)':
                            kerusakan = 'Gigi Tiruan Lepas'
                            break;
                    }
                    }
                    var html = `
                        <tr><th colspan="2" style="border: 1px solid;text-align: center;font-weight: 400;">${index+1}</th>
                        <th colspan="3" style="border: 1px solid;text-align: center;font-weight: 400;">${value.no_gigi}</th>
                        <th colspan="4" style="border: 1px solid;text-align: center;font-weight: 400;">${kerusakan}</th></tr>`;
                    $('#table_odontogram_history').html(html)
                })
            },
            error: function(error) {
                console.error('Error:', error);
            }
        });
    }
    function historyGigiClick(id){
        if($('.odont-history').hasClass('odont-opened')){
            $('.odont-history').removeClass('odont-opened')
        } else {
            getDataOdontHistory(id)
            $('.odont-history').addClass('odont-opened')
        }
    }
    function speak(text) {
        var speech = new SpeechSynthesisUtterance();
        speech.text = text
        speech.lang = 'id'
        speech.rate = 0.7
        window.speechSynthesis.speak(speech)
    }
    function showPDF(url, elementId){
        var pdfUrl = `/media/filelab/${url}`;
    
        var pdfWorkerUrl = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';
    
        // Asynchronous download PDF
        pdfjsLib.getDocument(pdfUrl).promise.then(function(pdf) {
          // Fetch the first page
          pdf.getPage(1).then(function(page) {
            var scale = 1.5;
            var viewport = page.getViewport({ scale: scale });
    
            // Prepare canvas using PDF page dimensions
            var canvas = document.getElementById(elementId);
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;
    
            // Render PDF page into canvas context
            var renderContext = {
              canvasContext: context,
              viewport: viewport
            };
            page.render(renderContext);
          });
        });
    }

    function confirmDelete(id) {
        Swal.fire({
            title: "Apa anda yakin ingin menghapus?",
            text: "Data pendaftaran pasien yang sudah dihapus tidak dapat di kembalikan",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Yes"
        }).then((result) => {
            if (result.isConfirmed) {
                // Redirect to the delete URL
                window.location.href = "/pemeriksaan/hapuspendaftaran/" + id;
            }
        });
    }
</script>
{% endlanguage %}
{% endblock %}