{% load humanize i18n static %}

{% 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;
    }
    
    .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);
        }
    }
</style>
<link href="/static/desain/assets/css/style.css" rel="stylesheet" id="style">
{% comment %} <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"> {% endcomment %}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
{% comment %} <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.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>
<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>
{% 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"></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' %}
    {% include "header.html" %}
    <!-- 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">
                <div id="data-table-table" 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-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 id="data-pagination-table" style="display: flex;margin-bottom: 10px;justify-content: space-between;"></div>
            </div> 
        </div>
    {% include "footer.html" %}
    <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/fixedcolumns/4.3.0/js/dataTables.fixedColumns.min.js"></script>
<script>
    $(document).ready(function(){
        $('#filter-btn').click(function(){
            var dokter_id = $('#select-dokter').val()
            var pasien_id = $('#select-pasien').val()
            var rm_no = $('#rm_no').val()
            var waktu_berobat = $('#waktu_berobat').val()
            var start_date = $('#start_date').val()
            var finish_date = $('#finish_date').val()
    
            var csrftoken = $("[name=csrfmiddlewaretoken]").val();
            $.ajax({
                url: '{% url "get_farmasi" %}',  // Replace with the actual URL
                method: 'POST',
                headers: {
                    'X-CSRFToken': csrftoken  // Get the CSRF token from a cookie
                },
                data: {
                    dokter_id : dokter_id,
                    pasien_id : pasien_id,
                    rm_no : rm_no,
                    waktu_berobat : waktu_berobat,
                    start_date : start_date,
                    finish_date : finish_date
                },
                success: function(data) {
                    $('#table-laporan').empty();
                    var html = `<table width="100%" style="width:100% !important; cursor: pointer;" id="item-table" class="table dataTable table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>No. RM</th>
                                <th>Nama Pasien</th>
                                <th>Domisili</th>
                                <th>Usia</th>
                                <th>Detail</th>
                            </tr>
                        </thead>
                    </table>`;
                    $('#table-laporan').html(html)
                    $('#item-table').DataTable({
                        "responsive":true,
                        "scrollX": true,
                        "data": data, 
                        "language": {
                            "search": "", // Remove the search label
                            "searchPlaceholder": "Search..." // Set the placeholder text
                        },
                        "columns": [
                            {
                            "data": null,
                            "render": function (data, type, row, meta) {
                                // Use the 'meta.row' to get the row index and add 1 to start counting from 1
                                return meta.row + 1;
                            }
                            },
                            {% comment %} { "data": "kode_booking", "width" : "20%" }, {% endcomment %}
                            { "data": "nomor_rekam_medis" },
                            { "data": "nama_pasien", "width" : "30%",},
                            { "data": "alamat"},
                            {
                                "data": "tanggal_lahir",
                                "width" : "20%",
                                "render": function(data, type, row) {
                                    return getUsia(data);
                                }
                            },
                            {% comment %} { "data": "nama_dokter", "width": "30%" }, {% endcomment %}
                            {
                                "data": "pasien_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="${data}" onclick="get_historical(${data})">Detail</button>`;
                                },
                                "class": "text-center",
                            },
                        ],
                    });
                },
                error: function(error) {
                    console.log(error);
                }
            });
        })
    })
    $('#reset-filter').click(function(){
        $('#select-dokter').val("").trigger('change');
        $('#select2-select-dokter-container').text("All..")
        $('#select-pasien').val(null).trigger('change');
        $('#select2-select-pasien-container').text("All..")
        $('.select2-results li.select2-results__option--highlighted').removeClass('select2-results__option--highlighted');
        $('#rm_no').val('');
        $('#start_date').val('');
        $('#finish_date').val('');
    })

    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_farmasi" %}',  // 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 masukanObat(id) {
        const url = "/pemeriksaan/farmasi/" + id;
        window.open(url, "_blank");
    }
    var table = $('#item-table').DataTable({
        "responsive":true,
        "ajax": {
            "url": "{% url 'get_farmasi' %}",
            "dataSrc": ""  // Specify that the data source is at the root level
        },
        // "scrollX": true,
        "initComplete": function (settings, json) {  
            $("#item-table").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");            
        },
        "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",
                "width" : "40%",
                "render": function (data, type, row) {
                    // Create a custom button within the cell
                    return `<div style="width:150px" class="button-container">
                        <button style="color:#fff" class="btn btn-info btn-sm" data-id="${data}" onclick="masukanObat(${data})">Masukan Obat</button>
                    </div>`;
                },
                "class": "text-center",
            },
        ],
        "createdRow": function(row, data, dataIndex) {
            // Apply nowrap to each row
            $(row).css("white-space", "nowrap");
        },
    });
    if ($(window).width() > 768) { // Adjust the breakpoint as needed
        new $.fn.dataTable.FixedColumns(table, {
            leftColumns: 1,
            rightColumns: 1
        });
    }
    // $('.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 %}