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

    .paginate_button:hover {
        background-color: transparent;
        color: #007bff;
        text-decoration: none;
    }
    
    .button-container {
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    
    .button-container button {
        flex-basis: calc(33.33% - 10px); 
        margin: 2px; 
    }

    #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;
    }
    
    @media (max-width: 768px) {
        .button-container button {
            flex-basis: calc(50% - 10px);
        }
    }
</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
<link href="https://gcore.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="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<!-- datatables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<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/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/4.3.0/js/dataTables.fixedColumns.min.js"></script>
<!-- end datatables -->
<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://gcore.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://gcore.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://gcore.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>
<script src="https://gcore.jsdelivr.net/npm/sweetalert2@10"></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">
                    <button class="btn btn-sm mr-2 btn-info" style="float: right;" id="tambah_layanan" data-target="md_tambah_layanan" onclick="tambahLayanan()">
                        <span style="color:#fff">Tambah Layanan</span>
                    </button>
                </div>
            </div>
            <p style="border-bottom: 1px solid grey;" class="mt-2 mb-3 h5"></p>
            <div class="row gy-3" id="table-tindakan">
                <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>Nama Layanan</th>
                            <th>Harga Layanan</th>
                            <th>Presentase Dokter</th>
                            <th>BHP Dan APD</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
                <div id="data-pagination-table" style="display: flex;margin-bottom: 10px;justify-content: space-between;"></div>
            </div> 
        </div>

        <!-- Modal Tambah Layanan -->
        <div class="modal fade" id="md_tambah_layanan" tabindex="-1" role="dialog" aria-labelledby="md_tambah_layananLabel" 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_layananLabel">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' %}">
                            {% 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" tabindex="-1" role="dialog" aria-labelledby="md_edit_layananLabel" 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_layananLabel">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">
                            </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">
                            </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">
                            </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">
                            </div>
                            
                            <div class="col-12 mb-3">
                                <input type="hidden" id="created_at" name="created_at">
                            </div>
                        </div>
                    </div>
                    <!-- Modal Footer -->
                    <div class="modal-footer">
                        <button type="button" id="editlayanan" class="btn btn-primary">Submit</button>
                    </div>
                </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>
    $('#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) {
    });
    $('#select-pasien').select2();
    
    $.ajax({
        url: '{% url "data_layanan" %}',  // 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 updateValue(inputElement) {
        inputElement.setAttribute('value', inputElement.value);
    }

    function formatRupiah(angka) {
        var number_string = angka.toString();
        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 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').DataTable({
        "responsive":true,
        // "scrollX":true,
        "ajax": {
            "url": "{% url 'data_layanan' %}",
            "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 text-center" data-id="${row.id}" onclick="getEdit(${row.id})">Edit</button>
                        <button class="btn btn-success text-light text-center" data-id="${data}" onclick="hapusLayanan(${data})">Hapus</button>
                    </div>`;
                },
                "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)
    }

    function tambahLayanan(){
        $('#md_tambah_layanan').modal('toggle');   
    }

    function getEdit(id) {
        $.ajax({
            url: '/pemeriksaan/get_data_layanan/' + id,
            type: 'GET',
            success: function(data) {
                // Mengisi nilai input dengan data yang diterima
                $('#md_edit_layanan #nama').val(data.nama);
                $('#md_edit_layanan #harga').val(data.harga);
                $('#md_edit_layanan #presentase').val(data.presentase_dokter);
                $('#md_edit_layanan #presentase_bhp').val(data.presentase_bhp);
                
                // Menampilkan modal setelah data dimuat
                $('#md_edit_layanan').modal('show');
                
                // Atur nilai untuk created_at
                var currentDateTime = new Date().toISOString();
                $('#md_edit_layanan #created_at').val(currentDateTime);

                // Event handler untuk tombol submit
                $('#editlayanan').off('click').on('click', function() {
                    var nama_baru = $('#md_edit_layanan #nama').val();
                    var harga_baru = $('#md_edit_layanan #harga').val();
                    var presentase = $('#md_edit_layanan #presentase').val();
                    var presentase_bhp = $('#md_edit_layanan #presentase_bhp').val();
                    var created_at = $('#md_edit_layanan #created_at').val(); // Ambil nilai created_at
                    var csrftoken = $("[name=csrfmiddlewaretoken]").val();
                    
                    $.ajax({
                        url: '/pemeriksaan/edit_layanan/' + id + '/',
                        type: "POST",
                        data: {
                            nama_baru: nama_baru,
                            harga_baru: harga_baru,
                            presentase_fee: presentase, // Mengirimkan nilai presentase dengan nama yang sesuai
                            presentase_bhp: presentase_bhp, // Mengirimkan nilai presentase dengan nama yang sesuai
                            created_at: created_at // Kirimkan nilai created_at
                        },
                        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 hapusLayanan(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/" + id;
            }
        });
    }

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