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

{% block title %}
Laporan
{% endblock %}

{% block head %}

{{ block.super }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://unpkg.com/gijgo@1.9.14/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragscroll/0.0.8/dragscroll.min.js" integrity="sha512-/ncZdOhQm5pgj5KHy720Ck7XF5RzYK6rtUsLNnGcitXrKT3wUYzTrPlOSG7SdL2kDzkuLEOFvrQRyllcZkeAlg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragscroll/0.0.8/dragscroll.js" integrity="sha512-av9OFV3TfDf07Bx0qGVXV+9oNYMjIpzb/QO/LvVFWr2sgMutARKm998SDdRbYiGQtm/8yl4Ob94eHEWRUTI4tQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></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" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></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/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://unpkg.com/gijgo@1.9.14/js/gijgo.min.js" type="text/javascript"></script>
<!-- Add FontAwesome CDN link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha384-rHyoN1iiz4BywXFF6z9vxCpIH1a5zXYjRTm86aK5r5Pm5Pd1PfFqW1uSjJlWtJf6" crossorigin="anonymous">

{% 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>

        <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">
                <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">Laporan</li>
                </ol>
            </nav>
            <div class="card">
                <div class="card-body">
                    <form method="POST" action="">
                        {% csrf_token %}
                    </form>
                    <div class="accordion-body" style="padding: 1rem 0.25rem;">
                        <div style="display: flex; justify-content: space-between;">
                            <h5 class="h5">Pasien Kontrol</h5>
                        </div>
                        <p style="border-bottom: 1px solid grey;" class="mt-2 mb-3 h5"></p>
                        <div class="row gy-3" id="table-laporan">
                            <table width="100%" style="width:100% !important; cursor: pointer;" id="item-table" class="table dataTable table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>No. RM</th>
                                        <th>Nama Pasien</th>
                                        <th>Domisili</th>
                                        <th>Usia</th>
                                        <th>History</th>
                                    </tr>
                                </thead>
                            </table>
                        </div> 
                        <!-- Modal -->
                        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog" style="max-width: 80%" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">History</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="row gy-3" style="display: contents;" id="table-detail">
                                            <div id="data-search-history" style="display: flex;justify-content: space-between;padding:0px">
                                                <div id="length-container"></div>
                                                <div id="filter-container"></div>
                                            </div>
                                            <div id="data-table-history" style="display: flex;padding-left: 0px;padding-right: 0px;overflow-x: scroll;margin-top: 0px"></div>
                                            <table width="100%" style="width:100% !important; cursor: pointer;" id="item-detail" class="table dataTable table-striped table-bordered">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Kode Booking</th>
                                                        <th>Nama Pasien</th>
                                                        <th>Waktu Berobat</th>
                                                        <th>Waktu Pulang</th>
                                                        <th id="kontrol">Waktu Kontrol</th>
                                                        <th>Layanan</th>
                                                        <th>Status</th>
                                                        <th>Dokter</th>
                                                        <th>Biaya</th>
                                                        <th>Act</th>
                                                    </tr>
                                                </thead>
                                            </table>
                                            <div id="data-pagination-history" style="display: flex;margin-bottom: 10px;justify-content: space-between;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% include "footer.html" %}
</main>

<script>
    $(document).ready(function(){
        $('#item-table').DataTable({
            "responsive":true,
            "ajax": {
                "url": "{% url 'get_kontrol' %}",
                "dataSrc": ""  // Specify that the data source is at the root level
            },
            "language": {
                "search": "", // Remove the search label
                "searchPlaceholder": "Search..." // Set the placeholder text
            },
            "columns": [
                {
                "data": null,
                "render": function (data, type, row, meta) {
                    // Use the 'meta.row' to get the row index and add 1 to start counting from 1
                    return meta.row + 1;
                }
                },
                { "data": "nomor_rekam_medis" },
                { "data": "nama_pasien", "width" : "30%",},
                { "data": "alamat"},
                {
                    "data": "tanggal_lahir",
                    "width" : "20%",
                    "render": function(data, type, row) {
                        return getUsia(data);
                    }
                },
                {
                    "data": "id",
                    "render": function (data, type, row) {
                        // Create a custom button within the cell
                        return `<button style="color:#fff" id="detail-pasien" data-toggle="modal" data-target="#exampleModal" class="btn btn-info btn-sm" data-id="${row.pasine_id}" onclick="get_historical(${row.pasien_id})">Detail</button>`;
                    },
                    "class": "text-center",
                },
            ],
        });
        $('.dataTable').parent('div').addClass('scrollX');
    })

</script>

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

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

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

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

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

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

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

</script>

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

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

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

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

</script>
<script>
    function kirimpesan(kontak_pasien, kontrol, nama_pasien, nama_dokter) {
        var nomorTelepon = '+62' + kontak_pasien;
        var tanggalKontrol = new Date(kontrol);
        var namaPasien = nama_pasien;
        var namaDokter = nama_dokter;

        var day = tanggalKontrol.getDate();
        var month = tanggalKontrol.getMonth() + 1; // Bulan dimulai dari 0, sehingga perlu ditambah 1
        var year = tanggalKontrol.getFullYear();
        
        var pesan = 'Halo selamat pagi Kak ' + namaPasien + ', untuk besok tanggal ' + day + '/' + month + '/' + year + ' adalah jadwal kontrol melanjutkan perawatan ke NDC dengan ' + namaDokter + '. Apakah mau kami bantu untuk jadwal kunjungannya kak?';
        // var pesan = 'Kepada yang terhormat, kami ingin memberitahukan bahwa Anda dijadwalkan untuk melakukan kunjungan kontrol dokter ke klinik pada tanggal ' + day + '/' + month + '/' + year + '.';
        
        // URL untuk aplikasi WhatsApp desktop
        var urlWhatsApp = 'https://api.whatsapp.com/send?phone=' + nomorTelepon + '&text=' + encodeURIComponent(pesan);
        
        // Buka URL di tab atau jendela baru
        window.open(urlWhatsApp, '_blank');
    }
</script>
{% endlanguage %}
{% endblock %}