{% load humanize i18n static %}

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

    .tabcontent {
        display: none;
    }

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

    /* .scrollX {
        overflow: auto;
    } */

    .button-container {
        {% comment %} display: flex; {% endcomment %}
        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;
        {% comment %} padding: 5px 10px; {% endcomment %}
    }

    #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_length {
        position: absolute;
    }

    #item-detail_filter {
        float: right;
    }

    select[name="item-table_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;
    }

    select[name="item-table_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;
    }

    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;
    }

</style>
{% comment %} <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"> {% endcomment %}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
{% comment %} <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css"> {% endcomment %}
{% comment %} <link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"> {% endcomment %}
<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>
{% comment %} <script src="//cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script> {% endcomment %}
<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>
{% comment %} <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script> {% endcomment %}
<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>
{% comment %} <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> {% endcomment %}
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://unpkg.com/gijgo@1.9.14/js/gijgo.min.js" type="text/javascript"></script>
<!-- Add FontAwesome CDN link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" >

{% endblock %}

{% block content %}
{% language 'id' %}
    <!-- main page content -->
        <div class="accordion-body">
            <div style="display: flex; justify-content: space-between;">
                <h5 class="h5">Semua Pasien</h5>
                <div style="display:flex">
                    {% comment %} <select id="filter-select" class="form-select">
                        <option value="">All</option>
                        <option value="option1">Option 1</option>
                        <option value="option2">Option 2</option>
                    </select> {% endcomment %}
                    <button class="btn btn-success btn-sm mr-2" id="export_excel_farmasi">
                        <span style="color:#fff">Export</span>
                    </button>
                    {% comment %} <button class="btn btn-info btn-sm" type="button" data-toggle="collapse" data-target="#collapseExample" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                        <span style="color:#fff"> <i class="fas fa-filter"></i> Filter</span>
                    </button> {% endcomment %}
                </div>
            </div>
            {% comment %} <div class="collapse" id="collapseExample">
                <div class="card mt-2">
                    <div class="card-body">
                        <form method="POST" action="">
                            {% csrf_token %}
                            <div class="form-group mb-2">
                                <label for="choice">Dokter:</label><br>
                                <select style="width: 100%" id="select-dokter">
                                    <option value="">All..</option>
                                    {% for x in dokter %}
                                        <option value="{{x.id}}">{{x.first_name}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="form-group mb-2">
                                <label for="name">No RM :</label>
                                <input class="form-control" type="text" id="rm_no" name="norm" value="{{pasien_norm}}">
                            </div>
                            <div class="form-group mb-2">
                                <label for="name">Pasien Terdaftar:</label>
                                <select style="width: 100%" id="select-pasien">
                                    <option value="">All..</option>
                                </select>
                            </div>
                            <div class="d-flex row">
                                <div class="col-md-6">
                                    <div class="form-group mb-2">
                                        <label for="start_date">Dari Tanggal:</label>
                                        <input id="start_date" />
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-2">
                                        <label for="finish_date">Sampai Tanggal:</label>
                                        <input id="finish_date" />
                                    </div>
                                </div>
                            </div>
                            <div style="display: flex;float:right">
                                <button style="margin-right: 5px;color: #fff" type="button" id="reset-filter" class="btn btn-warning">Reset</button>
                                <button style="color: #fff" type="button" id="filter-btn" class="btn btn-info">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div> {% endcomment %}
            <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>Kode Booking</th>
                            <th>No. RM</th>
                            <th>Nama Pasien</th>
                            <th>Usia</th>
                            <th>Berat Badan(kg)</th>
                            <th>Waktu Berobat</th>
                            <th>Layanan</th>
                            <th>Status</th>
                            <th>Dokter</th>
                            <th>Act</th>
                        </tr>
                    </thead>
                </table>
            </div> 
        </div>
    {% include "footer.html" %}

<script>
    function downloadExcelFileFarmasi(dokter_id,pasien_id,rm_no,waktu_berobat,start_date,finish_date) {
        var downloadUrl = `/pemeriksaan/export_excel_farmasi/`;

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

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

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

        // Clean up the anchor element
        document.body.removeChild(downloadLink);
    }

    $('#export_excel_farmasi').on('click',function() {
        var dokter_id = $('#select-dokter').val()
        var pasien_id = $('#select-pasien').val()
        var rm_no = $('#rm_no').val()
        var waktu_berobat = $('#waktu_berobat').val()
        var start_date = $('#start_date').val()
        var finish_date = $('#finish_date').val()
        downloadExcelFileFarmasi(dokter_id,pasien_id,rm_no,waktu_berobat,start_date,finish_date)
    })
</script>

<script>
    $('#start_date').datepicker({
        uiLibrary: 'bootstrap4',
        format: 'yyyy-mm-dd'
    });
    $('#finish_date').datepicker({
        uiLibrary: 'bootstrap4',
        format: 'yyyy-mm-dd'
    });
    $('#waktu_berobat').select2();
    $('#select-dokter').select2();
    $('#select-dokter').select2({placeholder: "Nama Dokter"}).on('change', function(e) {
        console.log("Hello")
    });
    $('#select-pasien').select2();
    
    $.ajax({
        url: '{% url "get_lab" %}',  // Replace with the actual URL
        method: 'GET',
        success: function(data) {
            const selectPasien = $('#select-pasien');

            selectPasien.empty();

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

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

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

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

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

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

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

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

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

    function masukanLab(id) {
        const url = "/pemeriksaan/laboratorium/" + id;
        window.open(url, "_blank");
    }
    $('#item-table').DataTable({
        "responsive":true,
        "scrollX":true,
        "ajax": {
            "url": "{% url 'get_lab' %}",
            "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": "kode_booking", "width" : "20%" },
            { "data": "nomor_rekam_medis" },
            { "data": "nama_pasien", "width" : "30%",},
            {
                "data": "tanggal_lahir",
                "width": "20%",
                "render": function(data, type, row) {
                    return getUsia(data);
                }
            },
            { "data": "bb", "width" : "20%"},
            {
            "data": "created_at",
            "width" : "30%",
            "render": function(data, type, row) {
                return formatDate(data);
            }
            },
            { "data": "ruang_rawat_pasien"},
            {
                "data": "status",
                "render": function (data, type, row) {
                    // Create a custom button within the cell
                    return `<button style="color:#fff" class="btn btn-info btn-sm">${data}</button>`;
                },
                "class": "text-center",
            },
            {
                "data": "nama_dokter",
                "width" : "40%",
                "render": function(data, type, row) {
                    return data + " | KLINIK " + row.poli_nama;
                }
            },
            {
                "data": "id",
                "render": function (data, type, row) {
                    // Create a custom button within the cell
                    return `<button style="color:#fff" class="btn btn-info btn-sm" data-id="${data}" onclick="masukanLab(${data})">Masukan Layanan Lab</button>`;
                },
                "class": "text-center",
            },
        ],
        "createdRow": function(row, data, dataIndex) {
            // Apply nowrap to each row
            $(row).css("white-space", "nowrap");
        },
    });
    // $('.dataTable').parent('div').addClass('scrollX');
</script>

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

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