{% 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">Daftar Nakes</h5>
                <div style="display:flex">
                    <button class="btn btn-sm mr-2 btn-info" style="float: right;" id="tambah_layanan" data-target="md_tambah_jasmed" onclick="tambahLayanan()">
                        <span style="color:#fff">Tambah Jasa Medis</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-daftar-jasmed">
                <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 Nakes</th>
                            <th>Posisi Nakes</th>
                            <th>Nominal Jasa</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 Detail -->
        <div class="modal fade" id="detailModel" tabindex="-1" role="dialog" aria-labelledby="detailModelLabel" aria-hidden="true">
            <div class="modal-dialog" style="max-width: 90%" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="detailModelLabel">Detail</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div style="display: flex; margin-left: 33px !important">
                        <div class="col-2 m-2">
                            <div class="card card-sm">
                                <div class="card-body">
                                    <div class="card-title">Total Pasien</div>
                                        <p class="card-text" style="font-weight: bold; font-size:xx-large" id="total_pasien">0</p>
                                    <!-- <div style="font-size:x-large">Digunakan</div> -->
                                </div>
                            </div>
                        </div>
                        <div class="m-2">
                            <div class="card card-sm" >
                                <div class="card-body">
                                    <div class="card-title">Nominal Jasa Medis Didapat</div>
                                        <p class="card-text" style="font-weight: bold; font-size:xx-large" id="total_nominal">Rp. 0-,</p>
                                    <!-- <div style="font-size:x-large">Digunakan</div> -->
                                </div>
                            </div>
                        </div>
                        <div class="m-2">
                            <div class="card card-sm" >
                                <div class="card-body">
                                    <div class="card-title">Nominal Fee Layanan Didapat</div>
                                        <p class="card-text" style="font-weight: bold; font-size:xx-large" id="total_fee">Rp. 0-,</p>
                                    <!-- <div style="font-size:x-large">Digunakan</div> -->
                                </div>
                            </div>
                        </div>
                        <div class="m-3">
                            <div class="mb-4">
                                <div>
                                    <input id="filter_waktu" class="form-control" type="month" style="width: 200px;" value="2024-07">
                                </div>
                            </div>
                            <div style="margin-left: 115px;">
                                <button style="margin-left: auto;" type="button" id="export_excel_jasmed" class="btn btn-success btn-sm text-light"><i class="fas fa-file-excel"></i> Export</button>
                            </div>
                        </div>
                    </div>

                    <div class="modal-body">
                        <div class="row gy-3" id="table-detail">
                            <table width="100%" style="width:100% !important; cursor: pointer;" id="item-detail" class="table dataTable table-striped table-bordered">

                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div> 

        <!-- Modal Tambah Layanan -->
        <div class="modal fade" id="md_tambah_jasmed" tabindex="-1" role="dialog" aria-labelledby="md_tambah_jasmedLabel" 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_jasmedLabel">Tambah Jasa Medis</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_jasmed' %}">
                            {% csrf_token %}
                            <div class="form-row">
                            <div class="col-12 mb-3">
                                <label style="text-align:start" for="user_id">Nama Nakes</label>
                                <select class="form-control" id="user_id" name="user_id" required>
                                    {% for nakes in data_jasmed %}
                                        <option value="{{ nakes.id }}">{{ nakes.first_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-12 mb-3">
                                <label style="text-align: start;" for="group">Posisi</label>
                                <select class="form-control" name="group" id="group">
                                    {% for role in grup %}
                                        <option value="{{ role.id }}">{{ role.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-12 mb-3">
                                <label style="text-align:start" for="nominal">Nominal Jasa Medis</label>
                                <input type="number" class="form-control" id="nominal" name="nominal" required>                            </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_jasmed" tabindex="-1" role="dialog" aria-labelledby="md_edit_jasmedLabel" 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_jasmedLabel">Edit Jasa Medis</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 Nakes</label>
                                <input readonly type="text" class="form-control" id="nama" name="nama">
                            </div>
                            <div class="col-12 mb-3">
                                <label style="text-align:start" for="nominal">Nominal</label>
                                <input type="number" class="form-control" id="nominal" name="nominal">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="editjasmed" 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>
    function get_history(group_name, user_id){
        // console.log(group_name, user_id) 
        var csrftoken = $("[name=csrfmiddlewaretoken]").val();
        // Make an AJAX request to load content into the modal
        var month = $('#filter_waktu').val().split('-')[1].trim()
        var year = $('#filter_waktu').val().split('-')[0].trim()
        console.log(year)
        $.ajax({
            url: '/pemeriksaan/get_history_jasmed/',  // URL for your Django view
            data: {
                'group_name': group_name, 
                'user_id': user_id, 
                'month': month, 
                'year': year, 
            },
            method: 'POST',
            headers: {
                'X-CSRFToken': csrftoken  // Get the CSRF token from a cookie
            },
            success: function (data) {
                $('#table-detail').empty();
                var html = `<input type="hidden" id="group_name_filter" value="${group_name}">
                <input type="hidden" id="user_id_filter" value="${user_id}">
                <table width="100%" style="width:100% !important; cursor: pointer;" id="item-detail" class="table dataTable table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Nama Pasien</th>
                            <th>Nama Nakes</th>
                            <th>Jasa Medis</th>
                            <th>Fee Layanan</th>
                            <th>Tanggal Pemeriksaan</th>
                        </tr>
                    </thead>
                </table>`;
                $('#table-detail').html(html);
                
                // Set alias_name dan alias_jasmed berdasarkan group_name
                var alias_name, alias_jasmed;
                if (group_name === 'DOKTER') {
                    alias_name = 'nama_dokter';
                    alias_jasmed = 'dokter_jasmed';
                } else if (group_name === 'ADMIN') {
                    alias_name = 'nama_admin';
                    alias_jasmed = 'admin_jasmed';
                } else if (group_name === 'PERAWAT') {
                    alias_name = 'nama_perawat';
                    alias_jasmed = 'perawat_jasmed';
                } else if (group_name === 'FARMASI') {
                    alias_name = 'nama_farmasi';
                    alias_jasmed = 'farmasi_jasmed';
                } else if (group_name === 'LAB') {
                    alias_name = 'nama_lab';
                    alias_jasmed = 'lab_jasmed';
                } else {
                    alias_name = '';
                    alias_jasmed = '';
                }

                $('#total_pasien').text(data.total_pasien);
                $('#total_nominal').text(data.total_nominal.toLocaleString('id-ID', { style: 'currency', currency: 'IDR' }) + '-');
                $('#total_fee').text(data.total_fee.toLocaleString('id-ID', { style: 'currency', currency: 'IDR' }) + '-');

                $('#item-detail').DataTable({
                    "responsive": true,
                    "data": data.data,
                    "language": {
                        "search": "",
                        "searchPlaceholder": "Search..."
                    },
                    "columns": [
                        {
                            "data": null,
                            "render": function (data, type, row, meta) {
                                return meta.row + 1;
                            }
                        },
                        { "data": "nama_pasien" },
                        { "data": alias_name },  // Gunakan alias_name langsung di sini
                        { 
                            "data": function(row) {
                                return formatRupiah(row[alias_jasmed]); // Menggunakan alias_jasmed sebagai key untuk mengakses data
                            }
                        },
                        { 
                            data: function (row, type, set, meta) {
                                if (group_name === 'DOKTER') {
                                    return formatRupiah(row["harga_layanan"]);
                                } else {
                                    return '0';
                                }
                            }
                        },
                        {
                            "data": "created_at",
                            "width": "20%",
                            "render": function (data) {
                                return formatDate(data);
                            }
                        },
                    ],
                });
            },

        });
    } 

    $('#filter_waktu').on('change', function(){
        var group_name = $('#group_name_filter').val()
        var user_id = $('#user_id_filter').val() 
        var month = $(this).val().split('-')[1].trim()
        var year = $(this).val().split('-')[0].trim()
        var csrftoken = $("[name=csrfmiddlewaretoken]").val();
        $('#detailModel #table-detail').empty();
        $.ajax({
            type: "POST",
            url: "/pemeriksaan/get_history_jasmed/",
            data: {
                group_name: group_name,
                user_id: user_id,
                month: month,
                year: year,
            },
            headers: {
                'X-CSRFToken': csrftoken  // Get the CSRF token from a cookie
            },
            success: function (data) {

                $('#total_pasien').text(data.total_pasien);
                $('#total_nominal').text(data.total_nominal.toLocaleString('id-ID', { style: 'currency', currency: 'IDR' }) + '-');
                $('#total_fee').text(data.total_fee.toLocaleString('id-ID', { style: 'currency', currency: 'IDR' }) + '-');

                var html = `<input type="hidden" id="group_name_filter" value="${group_name}">
                <input type="hidden" id="user_id_filter" value="${user_id}">
                <table width="100%" style="width:100% !important; cursor: pointer;" id="item-detail" class="table dataTable table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Nama Pasien</th>
                            <th>Nama Nakes</th>
                            <th>Jasa Medis</th>
                            <th>Fee Layanan</th>
                            <th>Tanggal Pemeriksaan</th>
                        </tr>
                    </thead>
                </table>`;
                $('#detailModel #table-detail').html(html)

                var alias_name, alias_jasmed;
                if (group_name === 'DOKTER') {
                    alias_name = 'nama_dokter';
                    alias_jasmed = 'dokter_jasmed';
                } else if (group_name === 'ADMIN') {
                    alias_name = 'nama_admin';
                    alias_jasmed = 'admin_jasmed';
                } else if (group_name === 'PERAWAT') {
                    alias_name = 'nama_perawat';
                    alias_jasmed = 'perawat_jasmed';
                } else if (group_name === 'FARMASI') {
                    alias_name = 'nama_farmasi';
                    alias_jasmed = 'farmasi_jasmed';
                } else if (group_name === 'LAB') {
                    alias_name = 'nama_lab';
                    alias_jasmed = 'lab_jasmed';
                } else {
                    alias_name = '';
                    alias_jasmed = '';
                }

                $('#detailModel #table-detail #item-detail').DataTable({
                    "responsive": true,
                    "data": data.data,
                    "language": {
                        "search": "",
                        "searchPlaceholder": "Search..."
                    },
                    "columns": [
                        {
                            "data": null,
                            "render": function (data, type, row, meta) {
                                return meta.row + 1;
                            }
                        },
                        { "data": "nama_pasien" },
                        { "data": alias_name },  // Gunakan alias_name langsung di sini
                        { 
                            "data": function(row) {
                                return formatRupiah(row[alias_jasmed]); // Menggunakan alias_jasmed sebagai key untuk mengakses data
                            }
                        },
                        { 
                            data: function (row, type, set, meta) {
                                if (group_name === 'DOKTER') {
                                    return formatRupiah(row["harga_layanan"]);
                                } else {
                                    return '0';
                                }
                            }
                        },
                        {
                            "data": "created_at",
                            "width": "20%",
                            "render": function (data) {
                                return formatDate(data);
                            }
                        },
                    ],
                });
            }
        });
    })
</script>
    
<script>
    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_jasmed' %}",
            "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": "first_name"},
            {"data": "group_name"},
            {
                "data": "nominal",
                "render": function(data, type, row) {
                    return formatRupiah(data);
                }
            },
            {
                "data": "id",
                "render": function (data, type, row) {
                    console.log(row)
                    // 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="getEdit(${row.id})">Edit</button>
                        <button class="btn btn-info text-light" data-toggle="modal" data-target="#detailModel" data-id="${row.first_name}" onclick="get_history('${row.group_name}', '${row.user_id}')">Detail</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_jasmed').modal('toggle');   
    }

    function getEdit(id){
        $.ajax({
            url: '/pemeriksaan/get_data_nakes/' + id,
            type: 'GET',
            success: function(data) {
                // console.log(data)
                // Mengisi nilai input dengan data yang diterima
                $('#md_edit_jasmed #nama').val(data.nama);
                $('#md_edit_jasmed #nominal').val(data.nominal);
                
                // Menampilkan modal setelah data dimuat
                $('#md_edit_jasmed').modal('show');
                var submitButton = document.getElementById('editjasmed');
                submitButton.addEventListener('click', function() {
                    // // Collect form data
                    // var formData = new FormData(myForm);
                    // console.log($('#md_edit_jasmed #nama').val());

                    var nominal_baru = $('#md_edit_jasmed #nominal').val();
                    var csrftoken = $("[name=csrfmiddlewaretoken]").val();
                    $.ajax({
                    url: '/pemeriksaan/edit_jasmed/'+id+'/',
                    type: "POST",
                    data:{
                        nominal_baru:nominal_baru,
                    },
                    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 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;
    }
</script>

<script>
    function downloadExcelFile(group_name,user_id,month,year) {
        var downloadUrl = `/pemeriksaan/export_excel_jasmed/?group_name=${group_name}&user_id=${user_id}&month=${month}&year=${year}`;

        // 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_jasmed').on('click',function() {
        var group_name = $('#group_name_filter').val()
        var user_id = $('#user_id_filter').val()
        var month = $('#filter_waktu').val().split('-')[1].trim()
        var year = $('#filter_waktu').val().split('-')[0].trim()
        downloadExcelFile(group_name,user_id,month,year)
    })
</script>
{% endlanguage %}
{% endblock %}