{% load humanize i18n static %}

{% block head %}
<style>
    label {
        display: block;
        text-align: right;
    }

    .tabcontent {
        display: none;
    }

    .tablinks {
        cursor: pointer;
        padding: 10px;
    }

    .scrollX {
        overflow: auto;
    }

    .button-container {
        {% comment %} display: flex; {% endcomment %}
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    
    .button-container button {
        flex-basis: calc(33.33% - 10px); 
        margin: 2px; 
    }
    
    @media (max-width: 768px) {
        .button-container button {
            flex-basis: calc(50% - 10px);
        }
    }

    .select2-container {
        width: 100%;
    }

    .form-control {
        border-color: #aaa !important;
        border-radius: 5px !important;
    }

    .select2-selection__rendered {
        line-height: 31px !important;
    }
    .select2-container .select2-selection--single {
        height: 35px !important;
    }
    .select2-selection__arrow {
        height: 34px !important;
    }

    .dataTables_paginate {
        text-align: center;
    }

    .dataTables_paginate {
        margin-top: 10px;
    }

    .page-item:not(:first-child) .page-link {
        margin-left: 0px !important;
    }

    .page-link {
        border: none !important;
        padding: 0px !important;
    }

    .paginate_button {
        display: inline-block;
        margin: 2px;
        border: 1px solid #007bff;
        background-color: #fff;
        color: #007bff;
        cursor: pointer;
        border-radius: 3px;
        padding: 0.375rem 0.75rem;
    }

    #item-table-stok_info {
        margin-top: 5px;
    }

    #item-table-stok_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-stok_ellipsis {
        display: none;
    }

    #item-table-stok_previous,
    #item-table-stok_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-stok_previous a,
    #item-table-stok_next a {
        background-color: #aaa !important;
        color: #fff !important;
    }

    #item-table-stok_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-stok_length {
        position: absolute;
    }

    #item-table-stok_filter {
        float: right;
    }

    #item-detail_length {
        position: absolute;
    }

    #item-detail_filter {
        float: right;
    }

    select[name="item-table-stok_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-stok_length"]:focus {
        border-color: #007bff; /* Change border color on focus */
        border: none !important;
        outline: none !important;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Add box shadow on focus */
    }

    select[name="item-detail_length"] {
        background-color: #f1f1f1; /* Background color */
        color: #333; /* Text color */
        border: 1px solid #ccc; /* Border */
        border-radius: 5px; /* Border radius */
        padding: 5px; /* Padding */
        -webkit-appearance: none; /* Remove arrow for Webkit browsers (Safari, Chrome) */
        -moz-appearance: none; /* Remove arrow for Mozilla Firefox */
        appearance: none; 
        font-size: 0.875rem;
    }

    select[name="item-detail_length"]:focus {
        border-color: #007bff; /* Change border color on focus */
        border: none !important;
        outline: none !important;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Add box shadow on focus */
    }

    .page-link:hover {
        outline: none;
    }

</style>
{% comment %} <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> {% endcomment %}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
{% comment %} <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css"> {% endcomment %}
{% comment %} <link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"> {% endcomment %}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://unpkg.com/gijgo@1.9.14/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
{% comment %} <script src="//cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script> {% endcomment %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragscroll/0.0.8/dragscroll.min.js" integrity="sha512-/ncZdOhQm5pgj5KHy720Ck7XF5RzYK6rtUsLNnGcitXrKT3wUYzTrPlOSG7SdL2kDzkuLEOFvrQRyllcZkeAlg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragscroll/0.0.8/dragscroll.js" integrity="sha512-av9OFV3TfDf07Bx0qGVXV+9oNYMjIpzb/QO/LvVFWr2sgMutARKm998SDdRbYiGQtm/8yl4Ob94eHEWRUTI4tQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
{% comment %} <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script> {% endcomment %}
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
{% comment %} <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> {% endcomment %}
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://unpkg.com/gijgo@1.9.14/js/gijgo.min.js" type="text/javascript"></script>
<!-- Add FontAwesome CDN link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" >

{% endblock %}

{% block content %}
{% language 'id' %}
    {% include "header.html" %}
    <!-- main page content -->
    <script>
        $(document).ready(function() {
            $("#toggleButton").click(function() {
                $(".toggle-buttons").toggleClass("expanded");
            });
        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <div class="accordion-body">
            <div style="display: flex; justify-content: space-between;">
                <h5 class="h5">List obat</h5>
                <div style="display:flex">
                    <button class="btn btn-success btn-sm mr-2" id="export_obat">
                        <span style="color:#fff">Export</span>
                    </button>
                    <button class="btn btn-sm mr-2 btn-info" style="float: right;" id="tambah_obat" data-target="md_tambah_obat" onclick="tambahObat()">
                        <span style="color:#fff">tambah obat</span>
                    </button>
                </div>
            </div>
            {% comment %} <div class="collapse" id="collapseExample">
                <div class="card mt-2">
                    <div class="card-body">
                        <form method="POST" action="" id="form-filter">
                            {% csrf_token %}
                            <div class="form-group mb-2">
                                <label for="choice">Dokter:</label><br>
                                <select style="width: 100%" id="select-dokter">
                                    <option value="">All..</option>
                                    {% for x in dokter %}
                                        <option value="{{x.id}}">{{x.first_name}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="form-group mb-2">
                                <label for="rm">No RM :</label>
                                <input class="form-control" type="text" id="rm_no" name="norm" value="{{pasien_norm}}">
                            </div>
                            <div class="form-group mb-2">
                                <label for="name">Pasien Terdaftar:</label>
                                <select style="width: 100%" id="select-pasien">
                                    <option value="">All..</option>
                                </select>
                            </div>
                            <div class="d-flex row">
                                <div class="col-md-6">
                                    <div class="form-group mb-2">
                                        <label for="start_date">Dari Tanggal:</label>
                                        <input id="start_date" />
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-2">
                                        <label for="finish_date">Sampai Tanggal:</label>
                                        <input id="finish_date" />
                                    </div>
                                </div>
                            </div>
                            <div style="display: flex;float:right">
                                <button style="margin-right: 5px;color: #fff" type="button" id="reset-filter" class="btn btn-warning">Reset</button>
                                <button style="color: #fff" type="button" id="filter-btn" class="btn btn-info">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div> {% endcomment %}
            <p style="border-bottom: 1px solid grey;" class="mt-2 mb-3 h5"></p>
            <div class="row gy-3" id="table-stok-barang">
                <table width="100%" style="width:100% !important; cursor: pointer;" id="item-table-stok" class="table dataTable table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>kode</th>
                            <th>Nama Obat</th>
                            <th>Stok</th>
                            <th>Harga</th>
                            <th>Kadaluarsa</th>
                            <th style="text-align:center">Act</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for barang in barang%}
                        <tr>
                            <td>{{ barang.kode }}</td>
                            <td>{{ barang.nama }}</td>
                            <td>{{ barang.stok|floatformat:0 }}</td>
                            <td>{{ barang.harga_jual }}</td>
                            <td>{{ barang.expired_at|date:"d M Y" }}</td>
                            <td style="text-align:center">
                                <button class="edit btn" style="background:lightseagreen; color:white" id="edit" data-toggle="modal" data-id="{{barang.id}}" data-nama="{{barang.nama}}" data-stok="{{barang.stok}}" data-harga="{{barang.harga_jual}}" data-expired="{{barang.expired_at|date:'Y-m-d'}}" >Ubah</button>
                                <button class="btn btn-danger" id="hapus" data-id="{{barang.id}}" data-nama="{{barang.nama}}" style="color:white;"><i class="fa fa-trash"></i></button>
                                <!--{% for x in request.user.groups.all %}-->
                                <!--    {% if x|striptags == "SUPERADMIN" or x|striptags == "FARMASI" %} -->
                                <!--        <button class="btn btn-danger" id="hapus" data-id="{{barang.id}}" data-nama="{{barang.nama}}" style="color:white;"><i class="fa fa-trash"></i></button>-->
                                <!--    {% endif %}-->
                                <!--{% endfor %}-->
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div> 
        </div>

        {% comment %} modal {% endcomment %}
        {% include 'pemeriksaan/inventory/modal-inventory.html' %}


    {% include "footer.html" %}

<script>

    
    function downloadExcelFileFarmasi(dokter_id,pasien_id,rm_no,waktu_berobat,start_date,finish_date) {
        var downloadUrl = `/pemeriksaan/export_excel_farmasi/`;

        // 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_farmasi').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()
        downloadExcelFileFarmasi(dokter_id,pasien_id,rm_no,waktu_berobat,start_date,finish_date)
    })
</script>

<script>

    $(document).ready(function() {
        // Initialize DataTable
        $('#item-table-stok').DataTable();
    });

</script>

<script>
    function speak(text) {
        var speech = new SpeechSynthesisUtterance();
        speech.text = text
        speech.lang = 'id'
        speech.rate = 0.7
        window.speechSynthesis.speak(speech)
    }
    $(document).on('click','#edit',function(){
        var id = $(this).attr('data-id')
        var nama = $(this).attr('data-nama')
        var stok = $(this).attr('data-stok')
        var harga_jual = $(this).attr('data-harga')
        var expired_date = $(this).attr('data-expired')
        Swal.fire({
            title: "Edit Obat",
            text: "Stok",
            html:
            `<form method="POST" action="" id="form${id}" style="display: flex; flex-direction: column;">`+
                `{% csrf_token %}`+
                `<div style="display: flex; justify-content: space-between;align-items: center; margin-bottom: 10px;">`+
                    `<label for="name">Nama Obat</label>`+
                    `<input style="width: 300px;height:40px;" type="text" id="nama_baru" class="swal2-input m-0" placeholder="stok" name="nama" value="`+nama+`">` +
                `</div>`+
                `<div style="display: flex; justify-content: space-between;align-items: center; margin-bottom: 10px;">`+
                    `<label for="stok">Stok</label>`+
                    `<input style="width: 300px;height:40px;" type="number" id="stok_baru" class="swal2-input m-0" placeholder="stok" name="stok" value="`+parseInt(stok)+`">` +
                `</div>`+
                `<div style="display: flex; justify-content: space-between;align-items: center; margin-bottom: 10px;">`+
                    `<label for="harga">Harga</label>`+
                    `<input style="width: 300px;height:40px;" type="number" id="harga_baru" class="swal2-input m-0" placeholder="harga" name="harga" value="`+parseInt(harga_jual)+`">`+
                `</div>`+
                `<div style="display: flex; justify-content: space-between;align-items: center; margin-bottom: 10px;">`+
                    `<label for="expired_date">Expired Date</label>`+
                    `<input style="width: 300px;height:40px;" type="date" id="expired_date_baru" class="swal2-input m-0" placeholder="Expired Date" name="expired_date" value="`+expired_date+`">`+
                `</div>`+
                `</form>`,
                
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Simpan",
            }).then((result) => {
            if (result.isConfirmed) {
                
                var nama_baru = $('#nama_baru').val();
                var stok_baru = $('#stok_baru').val();
                var harga_baru = $('#harga_baru').val();
                var expired_date_baru = $('#expired_date_baru').val();
                var csrftoken = $("[name=csrfmiddlewaretoken]").val();
                $.ajax({
                url: '/pemeriksaan/edit_stok/'+id+'/',
                type: "POST",
                data:{
                    stok_baru:stok_baru,
                    harga_baru:harga_baru,
                    nama_baru:nama_baru,
                    expired_date_baru:expired_date_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);
                    }
                  });
            }
          });
    });

    $(document).on('click','#hapus',function(){
        var id = $(this).attr('data-id')
        var nama = $(this).attr('data-nama')
        Swal.fire({
            title: `Apakah anda yakin ingin menghapus obat ${nama}?`,
            icon: "warning",
            showCancelButton: true,         
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Hapus",
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '/pemeriksaan/hapus_obat/' + id + '/',
                    type: "POST",
                    success: function(response) {
                        Swal.fire({
                            title: "Hapus",
                            text: response.message,
                            icon: "success"
                        });
                        location.reload();
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                    }
                });
            }
        });
    });

    function tambahObat(){
        $('#md_tambah_obat').modal('show');
        
    }
</script>
{% endlanguage %}
{% endblock %}