{% extends 'basic.html' %}
{% load humanize i18n static %}

{% block title %}
Daftar Pasien
{% endblock %}

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

    input[type="search"]:focus {
        border-color: #007bff; /* Change border color on focus */
        /* border: none !important; */
        outline: none !important;
        border-width: 1px;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Add box shadow on focus */
    }

</style>
<script>
    function openTab(evt, tabName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " active";
    }

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


{% endblock %}

{% block content %}
{% language 'id' %}
<main class="h-100">
    
    {% include "header.html" %}
    <!-- main page content -->
    <div class="main-container container">
        <!--card pelayanan-->
        <div class="row mb-2">
            {% for x in messages %}
            <button class="btn btn-primary col-lg-12">{{ x }}</button>
            {% endfor %}
        </div>

        <!-- <div class="d-flex justify-content-center">
            <div class="row mb-3 mt-4">
                <div class="col">
                    <h4>Daftar Pasien</h4>
                </div>
            </div>
        </div> -->
        <script>
            // Display the first tab by default
            document.getElementsByClassName("tablinks")[0].click();

        </script>
        <div class="row mb-3 m-2">
            <nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
                <ol class="breadcrumb" style="background-color: transparent;display: flex;justify-content: flex-end;">
                  <li class="breadcrumb-item"><a href="/">Dashboard</a></li>
                  <li class="breadcrumb-item active" aria-current="page">Pemeriksaan</li>
                </ol>
            </nav>
            <div class="card">
                <div class="card-body">
                    <div style="display: flex; justify-content: space-between;border-bottom: 1px solid;padding-bottom: 10px;align-items: center;">
                        <h5 class="h5">Laporan Keuangan</h5>
                        <span>
                            <button style="margin-left: auto;" type="button" id="export_excel_uang" class="btn btn-success btn-sm text-light"><i class="fas fa-file-excel"></i> Export</button>
                            <button type="button" id="daftarkan-pasien" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" class="btn btn-info btn-sm text-light"><i class="fas fa-filter"></i> Filter</button>
                        </span>
                    </div>

                    <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 {% for x in request.user.groups.all %}{% if  x|striptags == "DOKTER" %}disabled{% endif %}{% endfor %} style="width: 100%" id="select-dokter">
                                            <option value="">All..</option>
                                            {% for dok in dokter %}
                                                <option {% if request.user.id == dok.id  %}selected disabled {% endif %} value="{{dok.id}}">{{dok.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="form-group mb-2">
                                        <label for="name">Waktu Berobat:</label>
                                        <select style="width: 100%" id="waktu_berobat">
                                            <option value="all">All time</option>
                                            <option value="today">TODAY</option>
                                            <option value="week">WEEK</option>
                                            <option value="month">MONTH</option>
                                            <option value="year">YEAR</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>

                    <div id="collapseOneVitalSign" class="accordion-collapse collapse show collapse show"
                        aria-labelledby="headingOneVitalSign" data-bs-parent="#accordionVitalSign">
                        <div class="accordion-body">
                            <!-- <h5 class="mt-3 h5">Semua Pasien</h5> -->
                            <div class="row gy-3" id="table-laporan">
                                <table width="100%" style="width:100% !important; cursor: pointer;" class="table dataTable table-striped table-bordered" id="table-pembayaran">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>No. RM</th>
                                            <th>Nama Pasien</th>
                                            <th>Nama Dokter</th>
                                            <th>Harga Obat</th>
                                            <th>Pendaftaran</th>
                                            <th>Tindakan</th>
                                            <th>Laboratorium</th>
                                            <th>APD</th>
                                            <th>TOTAL</th>
                                            <th>Tanggal</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for item in laporan_keuangan %}
                                        <tr>
                                            <td>{{ forloop.counter }}</td>
                                            <td>{{ item.nomor_rekam_medis }}</td>
                                            <td>{{ item.nama_pasien }}</td>
                                            <td>Dr. {{ item.nama_dokter }}</td>
                                            <td>Rp{{ item.harga_obat|floatformat|intcomma }}</td>
                                            <td>Rp{{ item.administrasi_pendaftaran|floatformat|intcomma }}</td>
                                            <td>Rp{{ item.total_layanan_harga|floatformat:0|intcomma }}</td>
                                            <td>Rp{{ item.total_lab_harga|floatformat:0|intcomma }}</td>
                                            <td>Rp{{ item.apd|floatformat:0|intcomma }}</td>
                                            <td>Rp{{ item.total|floatformat:0|intcomma }}</td>
                                            <td>{{ item.created_at|date:"d M Y" }}</td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% include "footer.html" %}
</main>
<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_filter" %}',  // 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>Nama Dokter</th>
                                <th>Harga Obat</th>
                                <th>Pendaftaran</th>
                                <th>Tindakan</th>
                                <th>Laboratorium</th>
                                <th>APD</th>
                                <th>TOTAL</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;
                            }
                            },
                            { "data": "nomor_rekam_medis" },
                            { "data": "nama_pasien", "width" : "30%",},
                            { "data": "nama_dokter" },
                            { "data": "harga_obat" },
                            { "data": "administrasi_pendaftaran" },
                            { "data": "total_layanan_harga" },
                            { "data": "total_lab_harga" },
                            { "data": "apd" },
                            { "data": "total" },
                        ],
                    });
                },
                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..")
        $('#waktu_berobat').val('all').trigger('change');
        $('#select2-waktu_berobat-container').text("All time")
        $('.select2-results li.select2-results__option--highlighted').removeClass('select2-results__option--highlighted');
        $('#rm_no').val('');
        $('#start_date').val('');
        $('#finish_date').val('');
    })

    $.ajax({
        url: '{% url "get_laporan" %}',  // 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 downloadExcelFile(dokter_id,pasien_id,rm_no,waktu_berobat,start_date,finish_date) {
        var downloadUrl = `/pemeriksaan/export_excel_uang/?dokter_id=${dokter_id}&pasien_id=${pasien_id}&rm_no=${rm_no}&waktu_berobat=${waktu_berobat}&start_date=${start_date}&finish_date=${finish_date}`;

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

    $(document).ready(function() {
        $('#table-pembayaran').DataTable({
            "scrollX": true,
            "responsive": true,
        })
    })
    function panggilPasien(nama){
        let name = nama.split(',')[0].trim();
        speak(`pasien atas nama ${name} silahkan ke loket pembayaran`)
    }
    $('#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-pasien').select2();

    $('#export_excel_uang').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()
        downloadExcelFile(dokter_id,pasien_id,rm_no,waktu_berobat,start_date,finish_date)
    })
</script>
{% endlanguage %}
{% endblock %}