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

{% block title %}
SATUSEHAT RECORDS
{% endblock %}

{% block head %}
<style>
    label {
        display: block;
        text-align: right;
    }
    .tabcontent {
        display: none;
    }

    .tablinks {
        cursor: pointer;
        padding: 10px;
    }
    .scrollX {
        overflow: auto;
    } 

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

    .paginate_button.active, .paginate_button.current {
        padding: 0.375rem 0.75rem !important;
    }

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

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

</style>
<script>
        function openTab(evt, tabName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(tabName).style.display = "block";
            evt.currentTarget.className += " active";
        }

</script>
{{ block.super }}
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script> -->
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
{% endblock %}

{% block content %}
{% language 'id' %}
<main class="h-100">

    {% include "header.html" %}
    <!-- main page content -->
    <div class="main-container container">
        <!--card pelayanan-->
        <div class="row mb-2">
            {% for x in messages %}
            <button class="btn btn-primary col-lg-12">{{ x }}</button>
            {% endfor %}
        </div>

        <script>
    // Display the first tab by default
    document.getElementsByClassName("tablinks")[0].click();

        </script>
        <div class="row mb-3 m-2">
            <nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
                <div style="position: absolute;"><i>Last refreshed calculation time:</i> <b>15 April 2024 12:56</b></div>
                <ol class="breadcrumb" style="background-color: transparent;display: flex;justify-content: flex-end;">
                  <li class="breadcrumb-item"><a href="/">Dashboard</a></li>
                  <li class="breadcrumb-item active" aria-current="page">Satusehat</li>
                </ol>
            </nav>
            <div class="col-md-12" style="padding: 0px;">
                <div class="row mb-2">
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">Data Terkirim</h5>
                                <p class="card-text" style="font-size:50px; font-weight: bold">{{terkirim}}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4" style="padding: 0px;">
                        <div class="card">
                            <div class="card-body">
                                <div style="display: flex;justify-content: space-between;align-items: center;">
                                    <h5 class="card-title">Data Belum Terkirim</h5>
                                    <button class="btn btn-sm btn-success text-light" onclick="window.open('/satusehat/checklist_stream','mywindow','location=1,status=1,scrollbars=1,width=300px,height=380px');">Recalculate &nbsp;<i class="bi bi-arrow-repeat"></i></button>
                                </div>
                                <p class="card-text" style="font-size:50px; font-weight: bold">{{pending}}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Data Anomali</h5>
                            <p class="card-text" style="font-size:50px; font-weight: bold">{{anomali}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-vital-sign" role="tabpanel" aria-labelledby="pills-vital-sign-tab" tabindex="0">
                            <div style="display: flex; justify-content: space-between;border-bottom: 1px solid;padding-bottom: 10px;align-items: center;">
                                <h5 class="h5">Satusehat Anomali Records</h5>
                            </div>
                            <div id="collapseOneVitalSign" class="accordion-collapse collapse show collapse show"
                                aria-labelledby="headingOneVitalSign" data-bs-parent="#accordionVitalSign">
                                <div class="accordion-body">
                                    {%csrf_token%}
                                    <!-- <h5 class="mt-3 h5">Semua Pasien</h5> -->
                                    <div class="row gy-3">
                                        <table width="100%" style="width:100% !important; cursor: pointer;" class="table dataTable table-striped table-bordered" id="table-satusehat-history">
                                            {% if is_duplicate|striptags != 'duplicate_nik' %}
                                                <thead>
                                                    <th>#</th>
                                                    <th>Pasien</th>
                                                    <th class="text-center">NO.RME</th>
                                                    <th class="text-center">NIK</th>
                                                    <th class="text-center">NOKA BPJS</th>
                                                    <th class="text-center">DOKTER</th>
                                                    <th class="text-center">POLI</th>
                                                    <th class="text-center">DIAGNOSA</th>
                                                    <th class="text-center">STATUS</th>
                                                </thead>
                                                <tbody>
                                                    {% for data in anomalilist %}
                                                        {% if data.is_diagnosa != 1 %}
                                                            <tr>
                                                                <td class="text-center">{{forloop.counter}}</td>
                                                                <td class="text-center">{{data.nama_pasien}}</td>
                                                                <td class="text-center">{{data.nomor_rekam_medis}}</td>
                                                                <td class="text-center">{{data.nomor_induk_kependudukan}}</td>
                                                                <td class="text-center">{{data.nomor_kartu_bpjs}}</td>
                                                                <td class="text-center">{{data.nama_dokter}}</td>
                                                                <td class="text-center">{{data.poli_nama}}</td>
                                                                <td class="text-center">
                                                                    <div style="display:flex;justify-content:center;">
                                                                        <button class="btn btn-sm btn-info text-light" data-target="#mdDiagnosa" data-toggle="modal" onclick="getDiagnosa({{data.id}})"><i class="bi bi-search"></i></button>
                                                                        <!--<a href="/pemeriksaan/hapuspendaftaran/{{data.id}}" style="margin-left: 5px;" class="btn btn-sm btn-danger text-light"><i class="bi bi-trash"></i>-->
                                                                        <button style="margin-left: 5px;" class="btn btn-sm btn-danger text-light" onclick="hapusPendaftaran({{data.id}})"><i class="bi bi-trash"></i></button></a>
                                                                    </div>
                                                                </td>
                                                                <td class="text-center"><span style="color: orange;">{% if data.is_diagnosa == 1 %}<span style="color:green">Completed</span>{%else%}<span style="color:orange">Waiting</span>{%endif%}</span></td>
                                                            </tr>
                                                        {%endif%}
                                                    {%endfor%}
                                                </tbody>
                                            {% else %}
                                            <thead>
                                                <th>#</th>
                                                <th class="text-center">NIK</th>
                                                <th class="text-center">DATA REKAM MEDIS</th>
                                                <th class="text-center">TOTAL DUPLIKASI</th>
                                                <th class="text-center">STATUS SATUSEHAT</th>
                                                <th class="text-center">DETAIL</th>
                                            </thead>
                                            <tbody>
                                                {% for data in anomalilist %}
                                                    <tr>
                                                        <td class="text-center">{{forloop.counter}}</td>
                                                        <td class="text-center">{{data.nomor_induk_kependudukan}}</td>
                                                        <td class="text-center">{{data.count}}</td>
                                                        <td class="text-center">{{data.distinct_no_rm}}</td>
                                                        <td class="text-center"><span style="color: orange;">menunggu</span></td>
                                                        <td class="text-center"><button class="btn btn-sm btn-info text-light" data-target="#mdDuplicate" data-toggle="modal" onclick="get_historical({{data.nomor_induk_kependudukan}})">DETAIL</button></td>
                                                    </tr>
                                                {%endfor%}
                                            </tbody>
                                            {% endif %} 
                                        </table>
                                    </div>
                                    <!-- Modal Asesmen Dokter-->
                                    <div style="z-index: 9999;" class="modal fade" id="mdDiagnosa" 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">
                                                    <h5 class="modal-title" id="mdAsesDokterAllLabel">Asesmen Dokter </h5>
                                                    <button style="border: none;background: none;" type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">

                                                </div>
                                                <!-- Modal Footer -->
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary btn-sm">Print</button>
                                                    <button type="button" class="btn btn-primary btn-sm" id="submitDiagnosa">Submit</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- DUPLICATE -->
                                    <div class="modal fade" id="mdDuplicate" tabindex="-1" role="dialog" aria-labelledby="mdDuplicateLabel" 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="mdDuplicateLabel">REKAM MEDIS</h5>
                                                    <button style="border: none;background: none;" type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="row gy-3" style="display: contents;" id="table-detail">
                                                        <div id="data-search-history" style="display: flex;justify-content: space-between;padding:0px">
                                                            <div id="length-container"></div>
                                                            <div id="filter-container"></div>
                                                        </div>
                                                        <div id="data-table-history" style="display: flex;padding-left: 0px;padding-right: 0px;overflow-x: scroll;margin-top: 0px"></div>
                                                        <table width="100%" style="width:100% !important; cursor: pointer;" id="item-detail" class="table dataTable table-striped table-bordered">
                                                            <thead>
                                                                <tr>
                                                                    <th>#</th>
                                                                    <th>NO RME</th>
                                                                    <th>Nama Pasien</th>
                                                                    <th>Waktu Berobat</th>
                                                                    <th>Status</th>
                                                                    <th>Dokter</th>
                                                                    <th>Act</th>
                                                                </tr>
                                                            </thead>
                                                        </table>
                                                        <div id="data-pagination-history" style="display: flex;margin-bottom: 10px;justify-content: space-between;"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% include "footer.html" %}
</main>
    <script>
        function get_historical(id){
            var csrftoken = $("[name=csrfmiddlewaretoken]").val();
            // Make an AJAX request to load content into the modal
            $.ajax({
                url: '/satusehat/history_detail',  // URL for your Django view
                data: {
                    id : id
                },
                method: 'POST',
                headers: {
                    'X-CSRFToken': csrftoken  // Get the CSRF token from a cookie
                },
                success: function(data) {
                    var no_rm = [];
                    var countMap = {};

                    $.each(data, function(index, value){
                        var nomor_rekam_medis = value.nomor_rekam_medis;
                        no_rm.push(nomor_rekam_medis);

                        // Increment count for the current nomor_rekam_medis
                        if (countMap[nomor_rekam_medis]) {
                            countMap[nomor_rekam_medis]++;
                        } else {
                            countMap[nomor_rekam_medis] = 1;
                        }
                    });
                    $('#table-detail').empty();
                    var html = `<div id="data-search-history" style="display: flex;justify-content: space-between;padding:0px">
                        <div id="length-container"></div>
                        <div id="filter-container"></div>
                    </div>
                    <div id="data-table-history" style="display: flex;padding-left: 0px;padding-right: 0px;overflow-x: scroll;margin-top: 0px"></div>
                    <table width="100%" style="width:100% !important; cursor: pointer;" id="item-detail" class="table dataTable table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>NO RME</th>
                                <th>Nama Pasien</th>
                                <th>Waktu Berobat</th>
                                <th>Status</th>
                                <th>Dokter</th>
                                <th>Act</th>
                            </tr>
                        </thead>
                    </table>
                    <div id="data-pagination-history" style="display: flex;margin-bottom: 10px;justify-content: space-between;"></div>`;
                    $('#table-detail').html(html)
                    $('#item-detail').DataTable({
                        "responsive":true,
                        "data": data, 
                        "fixedColumns": {
                            rightColumns: 1
                        },
                        "dom": 'lifBtp',
                        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                        "initComplete": function(settings, json) {
                            $('#item-detail_length').appendTo('#data-search-history #length-container');
                            $('#item-detail_filter').appendTo('#data-search-history #filter-container');
                            $('#item-detail_wrapper').appendTo('#data-table-history');
                            $('#item-detail_info').appendTo('#data-pagination-history');
                            $('#item-detail_paginate').appendTo('#data-pagination-history');
                        },
                        "language": {
                            "search": "", // Remove the search label
                            "searchPlaceholder": "Search...", // Set the placeholder text
                            "paginate": {
                                "previous": "Prev"
                            }
                        },
                        "columns": [
                            {
                            "data": null,
                            "render": function (data, type, row, meta) {
                                // Use the 'meta.row' to get the row index and add 1 to start counting from 1
                                return meta.row + 1;
                            }
                            },
                            {
                                "data": "nomor_rekam_medis",
                                "width" : "20%",
                                "render": function(data, type, row) {
                                    var firstKey = Object.keys(countMap)[0];
                                    var secondKey = Object.keys(countMap)[1];
                                    if(data == firstKey){
                                        reverse_rm = secondKey
                                    } else {
                                        reverse_rm = firstKey
                                    }
                                    return `${data} <button class="btn btn-sm btn-warning" onclick="changeRM('${data}', '${reverse_rm}')">UBAH KE ${reverse_rm}</button>`;
                                }
                            },
                            { "data": "nama_pasien", "width" : "30%",},
                            {
                                "data": "created_at",
                                "width" : "20%",
                                "render": function(data, type, row) {
                                    return formatDate(data);
                                }
                            },
                            {
                                "data": "status",
                                "render": function (data, type, row) {
                                    // Create a custom button within the cell
                                    return `<button style="color:#fff" class="btn btn-info btn-sm">${data}</button>`;
                                },
                                "class": "text-center",
                            },
                            {
                                "data": "nama_dokter",
                                "width" : "40%",
                                "render": function(data, type, row) {
                                    return data + " | KLINIK " + row.polinama;
                                }
                            },
                            {
                                "data": null,
                                "render": function (data, type, row) {
                                    // Create a custom button within the cell
                                    return `
                                    <div style="width:250px; overflow-x: auto; white-space: nowrap;" class="button-container">
                                        <button class="btn btn-sm btn-info text-light" data-target="#mdDiagnosa" data-toggle="modal" onclick="getDiagnosa(${row.id})">DIAGNOSA</button>
                                    </div>
                                    `;
                                },
                                "class": "text-center",
                            },
                        ],
                        "createdRow": function(row, data, dataIndex) {
                            // Apply nowrap to each row
                            $(row).css("white-space", "nowrap");
                        }
                    });
                },
            });
        } 
        function speak(text) {
            var speech = new SpeechSynthesisUtterance();
            speech.text = text
            speech.lang = 'id'
            speech.rate = 0.7
            window.speechSynthesis.speak(speech)
        }

        function addLayanan(){
            $('#select-layanan').append('<option value="G">Layanan G</option>');
            // $('#select-layanan').trigger('change');
        }

        $(document).ready(function() {
            $('#table-satusehat-history').DataTable({
                "scrollX": true,
                "responsive": true,
            })
        })

        function changeRM(firstrm, secondrm){
            var csrftoken = $("[name=csrfmiddlewaretoken]").val();
            Swal.fire({
                title: 'Hi, Admin!',
                text: `Apakah kamu yakin akan mengubah RM ke #${secondrm}?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '/satusehat/change_rm',
                        data: {
                            firstrm : firstrm,
                            secondrm : secondrm
                        },
                        method: 'POST',
                        headers: {
                            'X-CSRFToken': csrftoken  // Get the CSRF token from a cookie
                        },
                        success: function(data) {
                            if(data.code == 200){
                                Swal.fire({
                                    title: 'Success!',
                                    text: `NO. REKAM MEDIS BERHASIL DIUBAH!`,
                                    icon: 'success',
                                    confirmButtonText: 'OK'
                                });
                                window.location.reload()
                            } else {
                                Swal.fire({
                                    title: 'Error!',
                                    text: `NO. REKAM MEDIS GAGAL DIUBAH!`,
                                    icon: 'error',
                                    confirmButtonText: 'OK'
                                });
                            }
                        },
                        error: function(error) {
                            console.error('Error:', error);
                        }
                    });
                }
            });
        }

        function getDiagnosa(id){
        $.ajax({
            url: '/pemeriksaan/asesmendokter/' + id  + '?filter=diagnosa',
            type: 'GET',
            success: function(data) {
                // Display the HTML content in the modal
                $('#mdDiagnosa .modal-body').html(data);
                // getData(id)
                // Find the form and button elements
                var myForm = document.getElementById('formAsesmen');
                var submitButton = document.getElementById('submitDiagnosa');
                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/asesmendokter/' + id + '/', true);
                    

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

                    // Send the form data as the request payload
                    xhr.send(formData);
                });

            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    } 

    function formatDate(dateString) {
        const months = [
            "Jan.", "Feb.", "Mar.", "Apr.", "Mei", "Jun.", "Jul.", "Ags.", "Sep.", "Okt.", "Nov.", "Des."
        ];
    
        const date = new Date(dateString);
    
        const day = date.getDate();
        const month = months[date.getMonth()];
        const year = date.getFullYear();
        const hours = date.getHours();
        const minutes = date.getMinutes();
    
        // Format the time to include leading zero for single-digit minutes
        const formattedMinutes = (minutes < 10) ? `0${minutes}` : minutes;
    
        // Format the time to use 12-hour clock with "AM" or "PM"
        const ampm = (hours < 12) ? "AM" : "PM";
        const formattedHours = (hours > 12) ? hours - 12 : hours;
    
        return `${day} ${month} ${year}, ${formattedHours}.${formattedMinutes} ${ampm}`;
    }
    
    function hapusPendaftaran(idDaftar){
        Swal.fire({
            title: 'Holaa, Fitriiii!',
            text: 'Apakah kamu yakin untuk hapus kenangan ini?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '/pemeriksaan/hapuspendaftaran/'+idDaftar,
                    success: function(data) {
                        Swal.fire({
                            title: 'Success!',
                            text: 'Kenangan berhasil dihapus!',
                            icon: 'success',
                            confirmButtonText: 'OK'
                        });
                        // window.location.reload()
                    },
                    error: function(error) {
                        console.error('Error:', error);
                    }
                });
            }
        });
    }

    </script>
{% endlanguage %}
{% endblock %}