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

    .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;
    }

    #item-detail_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;
    }

    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 */
    }

    #item-detail_length {
        position: absolute;
    }

    #item-detail_filter {
        float: right;
    }

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

    .dataTables_scrollHeadInner {
        width: 100% !important;
    }
    .dataTable {
        width: 100% !important;
    }
    .pasien-card{
        background: white;
        text-align: center;
        box-shadow: 0 10px 10px 0 rgba(0,0,0,0.15);
        position: relative;
        justify-self: center;
        width: 80%;
    }

</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="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" />
<link href="https://unpkg.com/gijgo@1.9.14/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="//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>
<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" >
<script src="https://cdn.jsdelivr.net/npm/dom-to-image@2.6.0/dist/dom-to-image.min.js"></script>
{% 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 class="accordion-body">
                        <div style="display: flex; justify-content: space-between;">
                            <h5 class="h5">Rekam Medis Pasien</h5>
                            <div style="display:flex">
                                {% comment %} <select id="filter-select" class="form-select">
                                    <option value="">All</option>
                                    <option value="option1">Option 1</option>
                                    <option value="option2">Option 2</option>
                                </select> {% endcomment %}
                                <button class="btn btn-success btn-sm mr-2" id="export_excel">
                                    <span style="color:#fff">Export</span>
                                </button>
                                <button class="btn btn-info btn-sm" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                                    <span style="color:#fff"> <i class="fas fa-filter"></i> Filter</span>
                                </button>
                            </div>
                        </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>
                        <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" class="table dataTable table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>No. RM</th>
                                        <th>Nama Pasien</th>
                                        <th>Status Pasien</th>
                                        <th>Domisili</th>
                                        <th>Usia</th>
                                        <th>Detail</th>
                                    </tr>
                                </thead>
                            </table>
                        </div> 
                        <!-- Modal -->
                        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" 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="exampleModalLabel">Detail</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="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">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Kode Booking</th>
                                                        <th>Nama Pasien</th>
                                                        <th>Waktu Berobat</th>
                                                        <th>Waktu Pulang</th>
                                                        <th>Layanan</th>
                                                        <th>Status</th>
                                                        <th>Dokter</th>
                                                        <th>Act</th>
                                                    </tr>
                                                </thead>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>  

                        <div class="modal fade" id="mdEditBiodata" tabindex="-1" aria-labelledby="mdEditBiodataLabel" aria-hidden="true">
                            <div class="modal-dialog modal-lg"> <!-- Added 'modal-lg' class for landscape orientation -->
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="mdEditBiodataLabel">Edit Biodata</h5>
                                        <button style="margin-left: 65%;" data-toggle="modal" class="btn btn-secondary btn-sm" data-id="" onclick="getKartuBerobat(this)">Kartu berobat</button>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <form id="editBiodataForm">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-6 col-lg-4 mb-3">
                                                    <label for="first_name" class="form-label">Nama Depan</label>
                                                    <div style="display:flex">
                                                        <input type="text" class="form-control" id="first_name" name="first_name" value="{{biodata_pasien.first_name}}">
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-6 col-lg-4 mb-3">
                                                    <label for="pekerjaan" class="form-label">Profesi</label>
                                                    <div style="display:flex">
                                                        <input type="text" class="form-control" id="pekerjaan" name="pekerjaan" value="{{biodata_pasien.pekerjaan}}">
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-6 col-lg-4 mb-3">
                                                    <label for="nomor_induk_kependudukan" class="form-label">NIK</label>
                                                    <div style="display:flex">
                                                        <input type="text" class="form-control" id="nomor_induk_kependudukan" name="nomor_induk_kependudukan" value="{{biodata_pasien.nomor_induk_kependudukan}}">
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-6 col-lg-4 mb-3">
                                                    <label for="norm" class="form-label">No.Rm</label>
                                                    <div style="display:flex">
                                                        <input type="text" class="form-control" id="norm" name="norm" value="{{biodata_pasien.norm}}">
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-6 col-lg-4 mb-3">
                                                    <label for="kontak" class="form-label">Kontak</label>
                                                    <div style="display:flex">
                                                        <input type="text" class="form-control" id="kontak" name="kontak" value="{{biodata_pasien.kontak}}">
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-6 col-lg-4 mb-3">
                                                    <label for="email" class="form-label">Email</label>
                                                    <div style="display:flex">
                                                        <input type="text" class="form-control" id="email" name="email" value="{{biodata_pasien.email}}">
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-6 col-lg-4 mb-3">
                                                    <label for="alamat" class="form-label">Alamat</label>
                                                    <div style="display:flex">
                                                        <input type="text" class="form-control" id="alamat" name="alamat" value="{{biodata_pasien.alamat}}">
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-6 col-lg-4 mb-3">
                                                    <label for="tempat_lahir" class="form-label">Tempat Lahir</label>
                                                    <div style="display:flex">
                                                        <input type="text" class="form-control" id="tempat_lahir" name="tempat_lahir" value="{{biodata_pasien.tempat_lahir}}">
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-6 col-lg-4 mb-3">
                                                    <label for="tanggal_lahir" class="form-label">Tanggal Lahir</label>
                                                    <div style="display:flex">
                                                        <input type="date" class="form-control" id="tanggal_lahir" name="tanggal_lahir" value="{{biodata_pasien.tanggal_lahir}}">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-primary" id="submitEditBiodata" data-id="">Submit</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="modal fade" id="mdKartuBerobat" tabindex="-1" role="dialog" aria-labelledby="mdKartuBerobatLabel" aria-hidden="true">
                            <div class="modal-dialog" style="max-width: 60%" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                    <h5 class="modal-title" id="mdKartuBerobatLabel">KARTU PASIEN</span></h5>
                                    <button type="button" class="close" onclick="hideModal('#mdKartuBerobat')">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="container-card">
                                            <div id="contentImg" class="pasien-card">
                                                <div>
                                                    <div style="display: flex;flex-direction: row;">
                                                        <div id="logo">
                                                            <div style="display: flex; align-items: center;">
                                                                <img src="{{ info_dasar_faskes.logo.url }}" style="width: 15%;">
                                                                <center>
                                                                    <div style="width: 98%; margin-right: 5px;">
                                                                        <span style="font-size:20px;">PRAKTIK DOKTER UMUM</span><br>
                                                                        <span style="font-size:20px; border-bottom: solid;"><b>{{ info_dasar_faskes.nama }}</b></span><br>
                                                                        <span style="font-size:14px;">{{ info_dasar_faskes.alamat }}</span><br>
                                                                    </div>
                                                                </center>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div style="width: 100%;border-bottom: double;text-align: center;"></div>
                                                    <b style="text-align: center;">KARTU BEROBAT</b>
                                                </div>
                                                <div style="display:flex;justify-content:space-between; margin-top: 10px;">
                                                    <span style="width: 15%;margin-left: 45px;"><span style="text-align: center;"></span>No.RM</span>
                                                    <span style="width: 85%;display: flex;">
                                                        :<span><input oninput="updateValue(this)" style="margin-left:15px; width: 250px;border: none;outline: none;" type="text" id="kartu-rm" value=""></span>
                                                    </span>
                                                </div>
                                                <diV>
                                                    <div style="display:flex;justify-content:space-between;">
                                                        <span style="width: 15%;margin-left: 45px;"><span style="text-align: center;"></span>Nama</span>
                                                        <span style="width: 85%;display: flex;">
                                                            :<span><input oninput="updateValue(this)" style="margin-left:15px; width: 250px;border: none;outline: none;" type="text" id="kartu-nama" value=""></span>
                                                        </span>
                                                    </div>
                                                    <div style="display:flex;justify-content:space-between;">
                                                        <span style="width: 15%;margin-left: 45px;"><span style="text-align: center;"></span>Umur</span>
                                                        <span style="width: 85%;display: flex;">
                                                            :<span><input oninput="updateValue(this)" style="margin-left:15px; width: 250px;border: none;outline: none;" type="text" id="kartu-usia" value=""></span>
                                                        </span>
                                                    </div>
                                                    <div style="display:flex;justify-content:space-between;">
                                                        <span style="width: 15%;margin-left: 45px;"><span style="text-align: center;"></span>Alamat</span>
                                                        <span style="width: 85%;display: flex; flex-wrap: wrap;">
                                                            :<span><textarea oninput="updateValue(this)" style="margin-left:15px; width: 400px;border: none;outline: none;resize: none; overflow-wrap: break-word;" type="text" id="kartu-alamat" value=""></textarea></span>
                                                        </span>
                                                    </div>
                                                    <br>
                                                </diV>
                                                <p style="padding-bottom: 10px;">KARTU HARAP DIBAWA SETIAP BEROBAT</span></p>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Modal Footer -->
                                    <div class="modal-footer">
                                        <button id="convertButton" type="button" class="btn btn-primary btn-sm">DOWNLOAD AS IMAGE</button>
                                    </div>
                                </div>
                            </div>
                        </div> 

                        <!-- Modal -->
                        <div class="modal fade" id="mdAsesDokter" tabindex="-1" role="dialog" aria-labelledby="mdAsesDokterLabel" aria-hidden="true">
                            <div class="modal-dialog" style="max-width: 80%" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                    <h5 class="modal-title" id="mdAsesDokterLabel">Asesmen Dokter</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>
                                    <!-- Modal Footer -->
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary btn-sm">Print</button>
                                        <button type="button" class="btn btn-primary btn-sm" id="submitAsesmenDokter">Submit</button>
                                    </div>
                                </div>
                            </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_laporan" %}',  // Replace with the actual URL
                method: 'POST',
                headers: {
                    'X-CSRFToken': csrftoken  // Get the CSRF token from a cookie
                },
                data: {
                    dokter_id : dokter_id,
                    pasien_id : pasien_id,
                    rm_no : rm_no,
                    waktu_berobat : waktu_berobat,
                    start_date : start_date,
                    finish_date : finish_date
                },
                success: function(data) {
                    $('#table-laporan').empty();
                    var html = `<table width="100%" style="width:100% !important; cursor: pointer;" id="item-table" class="table dataTable table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>No. RM</th>
                                <th>Nama Pasien</th>
                                <th>Domisili</th>
                                <th>Usia</th>
                                <th>Detail</th>
                            </tr>
                        </thead>
                    </table>`;
                    $('#table-laporan').html(html)
                    $('#item-table').DataTable({
                        "responsive":true,
                        "scrollX": true,
                        "data": data, 
                        "language": {
                            "search": "", // Remove the search label
                            "searchPlaceholder": "Search..." // Set the placeholder text
                        },
                        "columns": [
                            {
                            "data": null,
                            "render": function (data, type, row, meta) {
                                // Use the 'meta.row' to get the row index and add 1 to start counting from 1
                                return meta.row + 1;
                            }
                            },
                            { "data": "nomor_rekam_medis" },
                            { "data": "nama_pasien", "width" : "30%",},
                            { "data": "alamat"},
                            {
                                "data": "tanggal_lahir",
                                "width" : "20%",
                                "render": function(data, type, row) {
                                    return getUsia(data);
                                }
                            },
                            {
                                "data": "pasien_id",
                                "render": function (data, type, row) {
                                    // Create a custom button within the cell
                                    return `<button style="color:#fff" id="detail-pasien" data-toggle="modal" data-target="#exampleModal" class="btn btn-info btn-sm" data-id="${data}" onclick="get_historical(${data})">Detail</button>`;
                                },
                                "class": "text-center",
                            },
                        ],
                    });
                },
                error: function(error) {
                    console.log(error);
                }
            });
        })
    })
    function get_historical(id){
        console.log(id)
        var csrftoken = $("[name=csrfmiddlewaretoken]").val();
        // Make an AJAX request to load content into the modal
        $.ajax({
            url: '/pemeriksaan/laporan_detail/',  // URL for your Django view
            data: {
                id : id
            },
            method: 'POST',
            headers: {
                'X-CSRFToken': csrftoken  // Get the CSRF token from a cookie
            },
            success: function(data) {
                console.log(data)
                $('#table-detail').empty();
                var html = `<table width="100%" style="width:100% !important; cursor: pointer;" id="item-detail" class="table dataTable table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Kode Booking</th>
                            <th>Nama Pasien</th>
                            <th>Waktu Berobat</th>
                            <th>Waktu Pulang</th>
                            <th>Layanan</th>
                            <th>Status</th>
                            <th>Dokter</th>
                            <th>Biaya</th>
                            <th>Act</th>
                        </tr>
                    </thead>
                </table>`;
                $('#table-detail').html(html)
                $('#item-detail').DataTable({
                    "responsive":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": "kode_booking", "width" : "20%" },
                        { "data": "nama_pasien", "width" : "20%",},
                        {
                            "data": "created_at",
                            "width" : "20%",
                            "render": function(data, type, row) {
                                return formatDate(data);
                            }
                        },
                        {
                            "data": "waktu_keluar",
                            "width" : "20%",
                            "render": function(data, type, row) {
                                return formatDate(data);
                            }
                        },
                        { "data": "ruang_rawat_pasien" },
                        {
                            "data": "status",
                            "render": function (data, type, row) {
                                // Create a custom button within the cell
                                return `<button style="color:#fff" class="btn btn-info btn-sm">${data}</button>`;
                            },
                            "class": "text-center",
                        },
                        {
                            "data": "nama_dokter",
                            "width" : "40%",
                            "render": function(data, type, row) {
                                return data + " | KLINIK " + row.polinama;
                            }
                        },
                        {
                            "data": "biaya",
                            "width" : "40%",
                            "render": function(data, type, row) {
                                var statusPasienStyle = data == null ? "btn-warning" : "btn-info"
                                return `<button style="color:#fff" onclick="openInfoPembiayaan(${row.id})" class="btn ${statusPasienStyle} btn-sm">${isRupiah(data)}</button>`;
                            }
                        },
                        {
                            "data": null,
                            "render": function (data, type, row) {
                                // Create a custom button within the cell
                                return `
                                    <div style="width:450px" class="button-container">
                                        <button style="color:#fff" class="btn btn-success btn-sm" data-id="${row.id}" onclick="window.open('/pemeriksaan/informed/${ row.id }','mywindow','location=1,status=1,scrollbars=1,width=750px,height=380px');">Imformed</button>
                                        <button style="color:#fff" class="btn btn-success btn-sm" data-id="${row.id}" onclick="window.open('/pemeriksaan/consent/${ row.id }','mywindow','location=1,status=1,scrollbars=1,width=750px,height=380px');">Consent</button>
                                        <button style="color:#fff" class="btn btn-success btn-sm" data-id="${row.id}" onclick="window.open('/pemeriksaan/refusal/${ row.id }','mywindow','location=1,status=1,scrollbars=1,width=750px,height=380px');">Refusal</button>
                                        <button style="color:#fff" class="btn btn-success btn-sm" data-id="${row.id}" onclick="window.open('/pemeriksaan/asesmenperawat/${ row.id }','mywindow','location=1,status=1,scrollbars=1,width=750px,height=380px');">Asesmen Perawat</button>
                                        <button data-toggle="modal" data-target="#mdAsesDokter" class="btn btn-success btn-sm text-light" data-id="${ row.id }" onclick="getAsesmenDokter(${row.id})">Asesmen Dokter</button>
                                        <button style="color:#fff" class="btn btn-success btn-sm" data-id="${row.id}" onclick="window.open('/pemeriksaan/lembarpertama/${ row.id }','mywindow','location=1,status=1,scrollbars=1,width=750px,height=380px');">Lembar CPPT</button>
                                        <button style="color:#fff" class="btn btn-success btn-sm" data-id="${row.id}" onclick="window.open('/pemeriksaan/rekammedis/${ row.id }','mywindow','location=1,status=1,scrollbars=1,width=750px,height=380px');">Resume Medis</button>
                                    </div>
                                `;
                            },
                            "class": "text-center",
                        },
                    ],
                });
            },
        });
    } 
    $('#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('');
    })
</script>

<script>
function get_biodata(id) {
    $('#submitEditBiodata').attr('data-id', id)
    $.ajax({
        url: '/pemeriksaan/biodata_pasien/' + id + '/',
        type: 'GET',
        success: function(data) {
            $('#kartu-rm').val(data.norm);
            $('#kartu-nama').val(data.first_name);
            $('#kartu-alamat').val(data.alamat);
            $('#kartu-usia').val(getUsia(data.tanggal_lahir));


            $('#norm').val(data.norm);
            $('#first_name').val(data.first_name);
            $('#nomor_induk_kependudukan').val(data.nomor_induk_kependudukan);
            $('#alamat').val(data.alamat);
            $('#kontak').val(data.kontak);
            $('#pekerjaan').val(data.pekerjaan);
            $('#email').val(data.email);
            $('#tanggal_lahir').val(data.tanggal_lahir);
            $('#tempat_lahir').val(data.tempat_lahir);
        },
        error: function(xhr, status, error) {
            console.error('Failed to fetch biodata:', error);
        }
    });
}

$('#submitEditBiodata').click(function() {
    let id = $(this).data('id');
    var formData = $('#editBiodataForm').serialize();

    var csrftoken = $("[name=csrfmiddlewaretoken]").val();
    $.ajax({
        url: '/pemeriksaan/update_biodata/' + id + '/',
        type: 'POST',
        headers: {
            'X-CSRFToken': csrftoken  // Get the CSRF token from a cookie
        },
        data: formData,
        success: function(response) {
            // Handle success response
            console.log('Biodata updated successfully:', response);
            $('#mdEditBiodata').modal('hide');
            location.reload(); // Reload the page to reflect the changes
        },
        error: function(xhr, status, error) {
            // Handle error response
            console.error('Failed to update biodata:', error);
        }
    });
});

function getKartuBerobat() {
    $('#mdKartuBerobat').modal('show');
}

$('#mdKartuBerobat .close').click(function() {
    modalClose('mdKartuBerobat')
})

function modalClose(elementname){
    $('#'+ elementname).modal('hide');
}

document.getElementById('convertButton').addEventListener('click', function() {
    var content = document.getElementById('contentImg');
    domtoimage.toPng(content)
    .then(function(dataUrl) {
        // Create a link element for download
        var link = document.createElement('a');
        link.href = dataUrl;
        link.download = 'image.png'; // Set the filename for download

        // Add the link to the document and trigger the click event
        document.body.appendChild(link);
        link.click();

        // Remove the link from the document
        document.body.removeChild(link);
    })
    .catch(function(error) {
        console.error('Error converting to image:', error);
    });
});
</script>

<script>
    function conv(key){
        var value = ''
        switch (key) {
            case 'tdg-caries':
                value = 'Karies (CAR)'
            break;
            case 'tdg-tblogam':
                value = 'Tambalan Logam'
            break;
            case 'tdg-tbnon':
                value = 'Tambalan Non Logam'
            break;
            case 'tdg-mklogam':
                value = 'Mahkota Logam'
            break;
            case 'tdg-mknon':
                value = 'Mahkota Non Logam'
            break;
            case 'tdg-tblogam':
                value = 'Tambalan Logam'
            break;
        }
        return value;
    }
    function getData(id){
        $.ajax({
            url: '/pemeriksaan/odontogram/'+ id + '/',
            type: 'GET',
            success: function(data) {
                if(data.length != 0){
                    $('#table_odontogram').empty();
                }
                $.each(data, function(index, value){
                    console.log(data)
                    var kerusakan = '';
                    switch (value.ext) {
                        case 'UNE':
                            kerusakan = 'Belum Erupsi (UNE)'
                            break;
                        case 'PRE':
                            kerusakan = 'Erupsi Sebagian (PRE)'
                            break;
                        case 'ANO':
                            kerusakan = 'Anomali Bentuk (ANO)'
                            break;
                        case 'NVT':
                            kerusakan = 'Non Vital (NVT)'
                            break;
                    }
                    $('.pid-odontogram-' + value.no_gigi + '-ext').html(value.ext)
                    $('.pid-odontogram-' + value.no_gigi + '-base').addClass(value.base)
                    $('.pid-odontogram-' + value.no_gigi + '-center').addClass(value.center)
                    if(value.center !== ''){
                        kerusakan = conv(value.center)
                    }
                    $('.pid-odontogram-' + value.no_gigi + '-left').addClass(value.left)
                    if(value.left !== ''){
                        kerusakan = conv(value.left)
                    }
                    $('.pid-odontogram-' + value.no_gigi + '-right').addClass(value.right)
                    if(value.right !== ''){
                        kerusakan = conv(value.right)
                    }
                    $('.pid-odontogram-' + value.no_gigi + '-bottom').addClass(value.bottom)
                    if(value.bottom !== ''){
                        kerusakan = conv(value.bottom)
                    }
                    $('.pid-odontogram-' + value.no_gigi + '-top').addClass(value.top)
                    if(value.top !== ''){
                        kerusakan = conv(value.top)
                    }
                    if(value.status !== ''){
                        $('.pid-odontogram-' + value.no_gigi + '-status').attr('fill', value.status);
                        switch (value.status) {
                        case 'url(#img-akar)':
                            kerusakan = 'Sisa Akar'
                            break;
                        case 'url(#img-hilang)':
                            kerusakan = 'Gigi Hilang'
                            break;
                        case 'url(#img-jembatan)':
                            kerusakan = 'Jembatan'
                            break;
                        case 'url(#img-tiruan)':
                            kerusakan = 'Gigi Tiruan Lepas'
                            break;
                    }
                    }
                    var html = `
                        <tr><th colspan="2" style="border: 1px solid;text-align: center;font-weight: 400;">${index+1}</th>
                        <th colspan="2" style="border: 1px solid;text-align: center;font-weight: 400;">${value.no_gigi}</th>
                        <th colspan="5" style="border: 1px solid;text-align: center;font-weight: 400;">${kerusakan}</th></tr>`;
                    $('#table_odontogram').append(html)
                })
            },
            error: function(error) {
                console.error('Error:', error);
            }
        });
    }
    function fakeProgressBarAnimation() {
        var progressBar = document.getElementById('progress-bar');
        var currentValue = parseInt(progressBar.getAttribute('aria-valuenow'), 10);

        // Increment the progress value
        if (currentValue < 100) {
            currentValue += 10; // You can adjust the increment value as needed
            progressBar.setAttribute('aria-valuenow', currentValue);
            progressBar.style.width = currentValue + '%';
            progressBar.textContent = currentValue + '%';

            // Call the function again after a delay (simulating animation frames)
            setTimeout(fakeProgressBarAnimation, 500); // Adjust the delay as needed
        }
    }
    function getAsesmenDokter(id){
        $('#mdAsesDokter .modal-body').html(`<div class="progress">
        <div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar"
            aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
            0%
        </div>
        </div>`)
        fakeProgressBarAnimation();
        $.ajax({
            url: '/pemeriksaan/asesmendokter/' + id,
            type: 'GET',
            success: function(data) {
                // Display the HTML content in the modal
                $('#mdAsesDokter .modal-body').html(data);
                getData(id)
                // Find the form and button elements
                var myForm = document.getElementById('formAsesmen');
                var submitButton = document.getElementById('submitAsesmenDokter');
                submitButton.addEventListener('click', function() {
                    getDataOdontogram(id)
                    // // Collect form data
                    var formData = new FormData(myForm);
    
                    // Perform Ajax request
                    var xhr = new XMLHttpRequest();
                    xhr.open('POST', '/pemeriksaan/asesmendokter/' + id + '/', true);

                    // Set up the callback
                    xhr.onload = function() {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            Swal.fire({
                                title: 'Asesmen telah ditambahkan.',
                                text: 'Terimakasih.',
                                customClass: {
                                    icon: 'custom-swal-icon', // Add a custom class for the icon
                                },
                                timer: 3000,
                                imageUrl: 'https://wavahusada.com/pendaftaran/public/images/Puas.png', // Your custom image URL
                                imageWidth: 135, // Set the width of the image
                                imageHeight: 100, // Set the height of the image
                            })
                            location.reload()
                        } else {
                            console.error('Request failed with status:', xhr.status);
                        }
                    };

                    // Send the form data as the request payload
                    xhr.send(formData);
                });

            },
            error: function(error) {
            console.error('Error:', error);
            }
        });
    } 
</script>

<script>
    function downloadExcelFile(dokter_id,pasien_id,rm_no,waktu_berobat,start_date,finish_date) {
        var downloadUrl = `/pemeriksaan/export_excel/?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);
    }
    $('#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').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)
    })

    $.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 getUsia(tanggal_lahir){
        var tanggalLahir = new Date(tanggal_lahir);
        var tanggalSekarang = new Date();

        // Hitung selisih tahun dan bulan
        var selisihTahun = tanggalSekarang.getFullYear() - tanggalLahir.getFullYear();
        var selisihBulan = tanggalSekarang.getMonth() - tanggalLahir.getMonth();

        // Koreksi jika selisih bulan negatif
        if (selisihBulan < 0) {
            selisihTahun--;
            selisihBulan += 12;
        }

        return selisihTahun + ' tahun ' + selisihBulan + ' bulan';
    }

    function formatDate(dateString) {
        const months = [
            "Jan.", "Feb.", "Mar.", "Apr.", "Mei", "Jun.", "Jul.", "Ags.", "Sep.", "Okt.", "Nov.", "Des."
        ];
    
        const date = new Date(dateString);
    
        const day = date.getDate();
        const month = months[date.getMonth()];
        const year = date.getFullYear();
        const hours = date.getUTCHours();
        const minutes = date.getUTCMinutes();
        // Format the time to include leading zero for single-digit minutes
        const formattedMinutes = (minutes < 10) ? `0${minutes}` : minutes;
    
        // Format the time to use 12-hour clock with "AM" or "PM"
        const ampm = (hours < 12) ? "AM" : "PM";
        const formattedHours = (hours > 12) ? hours - 12 : hours;
    
        return `${day} ${month} ${year}, ${formattedHours}.${formattedMinutes} ${ampm}`;
    }

    function openInfoPembiayaan(id) {
        const url = "/pemeriksaan/pembiayaanlayanan/" + id;
        window.open(url, "_blank");
    }

    function isRupiah(num) {
        // Check if num is a valid number
        if (typeof num !== 'number' || isNaN(num)) {
            return 'Rp 0 BPJS';
        }
    
        // Format the number as Rupiah
        const rupiah = new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' }).format(num);
    
        return rupiah + " Umum";
    }

    $('#item-table').DataTable({
        "responsive":true,
        "ajax": {
            "url": "{% url 'get_laporan' %}",
            "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": "nomor_rekam_medis" },
            { "data": "nama_pasien", "width" : "30%",},
            {
                "data": "is_new_pasien",
                "render": function(data, type, row) {
                    if(data){
                        return `<span style="color:#fff" class="btn btn-info btn-sm">Baru</span>`;
                    } else {
                        return `<span style="color:#fff" class="btn btn-info btn-sm">Lama</span>`;
                    }
                },
                "class": "text-center",
            },
            { "data": "alamat"},
            {
                "data": "tanggal_lahir",
                "width" : "20%",
                "render": function(data, type, row) {
                    return getUsia(data);
                }
            },
            {
                "data": "pasien_id",
                "render": function (data, type, row) {
                    // Create a custom button within the cell
                    return `
                    <div style="display: flex;justify-content:center;">
                        <button style="color:#fff; margin-right: 5px;" id="detail-pasien" data-toggle="modal" data-target="#exampleModal" class="btn btn-info btn-sm" data-id="${data}" onclick="get_historical(${data})">Detail</button>
                        <button style="color:#fff" id="edit-biodata" data-toggle="modal" data-target="#mdEditBiodata" class="btn btn-info btn-sm" data-id="${data}" onclick="get_biodata(${data})"><i class="fas fa-user"></i></button>
                    </div>`;
                },
                "class": "text-center",
            },
        ],
    });
    $('.dataTable').parent('div').addClass('scrollX');

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