{% 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" integrity="sha384-rHyoN1iiz4BywXFF6z9vxCpIH1a5zXYjRTm86aK5r5Pm5Pd1PfFqW1uSjJlWtJf6" crossorigin="anonymous">

{% 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-sm mr-2 btn-info" style="float: right;" id="tambah_layanan_lab" data-target="md_tambah_layanan_lab" onclick="tambahlayananLab()">
                        <span style="color:#fff">Tambah Layanan</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-history" class="table dataTable table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Nama Layanan</th>
                            <th>Harga Layanan</th>
                            <th>Presentase Dokter</th>
                            <th>BHP + APD</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div> 
        </div>

            <!-- Modal Tambah Layanan -->
    <div class="modal fade" id="md_tambah_layanan_lab" tabindex="-1" role="dialog" aria-labelledby="md_tambah_layanan_labLabel" aria-hidden="true">
        <div class="modal-dialog" style="max-width: 50%" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="md_tambah_layanan_labLabel">Tambah Layanan</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{% url 'tambah_layanan_lab' %}">
                        {% csrf_token %}
                        <div class="form-row">
                            <div class="col-12 mb-3">
                                <label style="text-align:start" for="nama">Nama Layanan</label>
                                <input type="text" class="form-control" id="nama" name="nama" oninput="updateValue(this)" required>
                            </div>
                            <div class="col-12 mb-3">
                                <label style="text-align:start" for="harga">Tarif Layanan</label>
                                <input type="number" class="form-control" id="harga" name="harga" oninput="updateValue(this)" required>
                            </div>
                            <div class="col-12 mb-3">
                                <label style="text-align:start" for="presentase">Presentase Dokter</label>
                                <input type="number" class="form-control" id="presentase" name="presentase_dokter_persen" oninput="updateValue(this)">
                            </div>
                            <div class="col-12 mb-3">
                                <label style="text-align:start" for="presentase_bhp">BHP Dan APD</label>
                                <input type="number" class="form-control" id="presentase_bhp" name="presentase_dokter_rp" oninput="updateValue(this)">
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Edit Layanan -->
    <div class="modal fade" id="md_edit_layanan_lab" tabindex="-1" role="dialog" aria-labelledby="md_edit_layanan_labLabel" aria-hidden="true">
        <div class="modal-dialog" style="max-width: 40%" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="md_edit_layanan_labLabel">Edit Layanan</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="form-row">
                        <div class="col-12 mb-3">
                            <label style="text-align:start" for="nama">Nama Layanan</label>
                            <input type="text" class="form-control" id="nama" name="nama">
                        </div>
                        <div class="col-12 mb-3">
                            <label style="text-align:start" for="harga">Tarif layanan</label>
                            <input type="number" class="form-control" id="harga" name="harga">
                        </div>
                        <div class="col-12 mb-3">
                            <label style="text-align:start" for="presentase">Presentase Dokter</label>
                            <input type="number" class="form-control" id="presentase" name="presentase_dokter_persen">
                        </div>
                        <div class="col-12 mb-3">
                            <label style="text-align:start" for="presentase_bhp">BHP Dan APD</label>
                            <input type="number" class="form-control" id="presentase_bhp" name="presentase_dokter_rp">
                        </div>
                    </div>
                </div>
                <!-- Modal Footer -->
                <div class="modal-footer">
                    <button type="button" id="editlayananlab" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </div>
    {% include "footer.html" %}
<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 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}`;
    }

    $('#item-table-history').DataTable({
        "responsive":true,
        "ajax": {
            "url": "{% url 'data_layanan_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": "nama"},
        {
            "data": "harga",
            "render": function(data, type, row) {
                    return formatRupiah(data);
                }
        },
        {"data": "presentase_dokter_persen"},
        {
            "data": "presentase_dokter_rp",
            "render": function(data, type, row) {
                    return formatRupiah(data);
                }
        },
        {
            "data": "id",
            "render": function (data, type, row) {
                // console.log(data)
                // Create a custom button within the cell
                return `<div class="button-container text-center">
                    <button class="btn btn-success text-light" data-id="${row.id}" onclick="geteditLab(${row.id})">Edit</button>
                    <button class="btn btn-success text-light" data-id="${data}" onclick="hapuslayananLab(${data})">Hapus</button>
                </div>`;
            },
            "class": "text-center",
        },
    ],
    });
    $('.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)
    }

    function formatRupiah(angka) {
        var number_string = (angka !== null && angka !== undefined) ? angka.toString() : 0;
        var split = number_string.split(',');
        var sisa = split[0].length % 3;
        var rupiah = split[0].substr(0, sisa);
        var ribuan = split[0].substr(sisa).match(/\d{3}/gi);
        
        if (ribuan) {
            var separator = sisa ? '.' : '';
            rupiah += separator + ribuan.join('.');
        }
        
        rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
        return 'Rp ' + rupiah;
    }

    function tambahlayananLab(){
        $('#md_tambah_layanan_lab').modal('toggle');   
    }

    function geteditLab(id){
        $.ajax({
            url: '/pemeriksaan/get_data_layanan_lab/' + id,
            type: 'GET',
            success: function(data) {
                // console.log(data)
                // Mengisi nilai input dengan data yang diterima
                $('#md_edit_layanan_lab #nama').val(data.nama);
                $('#md_edit_layanan_lab #harga').val(data.harga);
                $('#md_edit_layanan_lab #presentase').val(data.presentase_dokter_persen);
                $('#md_edit_layanan_lab #presentase_bhp').val(data.presentase_dokter_rp);
                
                // Menampilkan modal setelah data dimuat
                $('#md_edit_layanan_lab').modal('show');
                var submitButton = document.getElementById('editlayananlab');
                submitButton.addEventListener('click', function() {
                    var nama_baru = $('#md_edit_layanan_lab #nama').val();
                    var harga_baru = $('#md_edit_layanan_lab #harga').val();
                    var presentase_dokter_persen = $('#md_edit_layanan_lab #presentase').val();
                    var presentase_dokter_rp = $('#md_edit_layanan_lab #presentase_bhp').val();
                    var csrftoken = $("[name=csrfmiddlewaretoken]").val();
                    $.ajax({
                    url: '/pemeriksaan/edit_layanan_lab/'+id+'/',
                    type: "POST",
                    data:{
                        nama_baru: nama_baru,
                        harga_baru: harga_baru,
                        presentase_dokter_persen: presentase_dokter_persen, // Mengirimkan nilai presentase dengan nama yang sesuai
                        presentase_dokter_rp: presentase_dokter_rp, // Mengirimkan nilai presentase dengan nama yang sesuai
                    },
                    headers: {
                        'X-CSRFToken': csrftoken  // Get the CSRF token from a cookie
                    },
                    success: function(response) {
                        if (response.message == "ok"){
                            Swal.fire({
                                title: "Simpan",
                                text: "Perubahan Telah Disimpan",
                                icon: "success"
                            });
                            location.reload()
                        }
                    },
                        error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                        }
                    });
                    
                })
            },
            error: function(error) {
                console.error('Error:', error);
            }
        });
    }

    function hapuslayananLab(id) {
        Swal.fire({
            title: "Anda yakin ingin menghapus layanan ini?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Yes"
        }).then((result) => {
            if (result.isConfirmed) {
                // Redirect to the delete URL
                window.location.href = "/pemeriksaan/hapus_layanan_lab/" + id;
            }
        });
    }
</script>
{% endlanguage %}
{% endblock %}