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

{% block title %}
Inventory
{% endblock %}
{% include "header.html" %}


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

    .tabcontent {
        display: none;
    }

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

</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 }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.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="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">
<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="//code.jquery.com/jquery-1.12.4.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>
{% 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>
        <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="row" style="display: contents;width: 100%;">
                <div class="col-12 col-md-6 py-1 p-0">
                  <div class="card card-sm">
                    <div class="card-body">
                      <h5 class="card-title">Jumlah Stok Tersedia</h5>
                      <p class="card-text display-4 font-weight-bold">
                        {{jumlahSetiapObat.stok__sum|floatformat:0|intcomma}}
                      </p>
                    </div>
                  </div>
                </div>
              
                <div class="col-12 col-md-4 py-1 px-3">
                  <div class="card card-sm">
                    <div class="card-body">
                      <h5 class="card-title">Jenis Obat</h5>
                      <p class="card-text display-4 font-weight-bold">
                        {{totalStok|floatformat:0}}
                      </p>
                    </div>
                  </div>
                </div>
              
                <div class="col-12 col-md-2 py-1 p-0">
                  <div class="card card-sm">
                    <div class="card-body">
                        <div style="display: flex;justify-content: space-between;">
                            <h5 class="card-title">Harga Paket</h5>
                            <button class="btn btn-sm btn-info text-light" data-bs-target="#md_packages" data-bs-toggle="modal"><i class="fa fa-search"></i></button>
                        </div>
                      <p class="card-text display-4 font-weight-bold">{{ list_paket|length }}<span style="font-size: 18px;">Paket</span></p>
                    </div>
                  </div>
                </div>
              </div>
            <div class="col" style="padding: 0px;margin-top:10px;">
                <div class="card">
                    <div class="card-body">
                        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="stok-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-vital-sign" type="button" role="tab"
                                        aria-controls="pills-vital-sign" aria-selected="true">Stok Obat
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="opname-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-soapic" type="button" role="tab"
                                        aria-controls="pills-soapic" aria-selected="true">Stok Opname
                                </button>
                            </li>
                        </ul>
                        <div class="tab-content" id="pills-tabContent">
                            <div class="tab-pane fade show active" id="stok" role="tabpanel"
                                aria-labelledby="pills-vital-sign-tab" tabindex="0">
                                {% include 'pemeriksaan/inventory/card-stok-obat.html' %}
                                <div class="tab-pane fade" style="display:contents" id="opname" role="tabpanel"
                                    aria-labelledby="pills-soapic-tab" tabindex="0" hidden>
                                    {% include 'pemeriksaan/inventory/opname.html' %}
                                </div>
                            </div>
                        </div>
                        {% include 'pemeriksaan/inventory/modal-inventory.html' %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="md_packages" tabindex="" role="dialog" aria-labelledby="md_packagesLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 50%" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="md_packagesLabel">Referensi Harga Obat</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <table class="dataTable table-bordered" id="tbl_packages" style="width: 100%;">
                  <thead>
                    <tr>
                      <th>No</th>
                      <th>Nama</th>
                      <th>Harga Paket</th>
                      <th>TGL Ditambahkan</th>
                      <th>ACT</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for list in list_paket %}
                        <tr>
                          <td>{{forloop.counter}}</td>
                          <td>{{list.title}}</td>
                          <td>{{list.price|floatformat:0|intcomma}}</td>
                          <td>{{list.created_at|date:"d M Y"}}</td>
                          <td class="text-center">
                            <button type="button" class="btn btn-sm btn-warning editPackage" data-id="{{list.id}}"><i class="fa fa-edit"></i></button>
                            <button type="button" class="btn btn-sm btn-danger delPackage" data-id="{{list.id}}"><i class="fa fa-trash"></i></button>
                          </td>
                        </tr>
                    {% endfor %}
                  </tbody>
                </table>
            </div>
            </div>
        </div>
    </div>
  </div> 
    {% include "footer.html" %}
</main>
<script>
    function speak(text) {
        var speech = new SpeechSynthesisUtterance();
        speech.text = text
        speech.lang = 'id'
        speech.rate = 0.7
        window.speechSynthesis.speak(speech)
    }

    function goToDaftarpembayaranpasien(){
        window.location.href="/pembayaran/daftarpembayaranpasien"
    }

    $(document).ready(function(){
        $('#tbl_packages').DataTable({
            "scrollX": true,
        }) 
        $('#stok-tab').click(function(){
            $('#stok').removeAttr('hidden');
            $('#opname').attr('hidden',true);
        });
        $('#opname-tab').click(function(){
            $('#opname').removeAttr('hidden')
            $('#stok').attr('hidden',true)
        })
    })
    
     $(document).on('click', '.editPackage', function(e) {
        var id = $(this).data('id');
        $.ajax({
            url: '/penjualan/get_ref_obat/'+id,
            type: "GET",
            success: function(response) {
                Swal.fire({
                    title: "Edit Referensi Harga",
                    text: "Edit Referensi Harga",
                    html:
                    `<form method="POST" action="" id="form-ref-med" 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 Paket</label>`+
                            `<input style="width: 300px;height:40px;" type="text" id="nama_paket" class="swal2-input m-0" placeholder="Contoh: Paket 1" name="nama" value="${response.title}">` +
                        `</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" class="swal2-input m-0" placeholder="Harga" name="harga" value="${response.price}">`+
                        `</div>`+
                        `</form>`,
                        
                        showCancelButton: true,
                        confirmButtonColor: "#3085d6",
                        cancelButtonColor: "#d33",
                        confirmButtonText: "Simpan",
                    }).then((result) => {
                    if (result.isConfirmed) {
                        var nama_paket = $('#nama_paket').val();
                        var harga = $('#harga').val();
                        var csrftoken = $("[name=csrfmiddlewaretoken]").val();
                        $.ajax({
                            url: '/penjualan/edit_ref_obat/'+id,
                            type: "POST",
                            data:{
                                harga:harga,
                                nama_paket:nama_paket,
                            },
                            headers: {
                                'X-CSRFToken': csrftoken  // Get the CSRF token from a cookie
                            },
                            success: function(response) {
                                Swal.fire({
                                    title: "Berhasil",
                                    text: "Harga Telah Di Edit",
                                    icon: "success"
                                });
                                location.reload()
                            },
                            error: function(xhr, status, error) {
                              console.error(xhr.responseText);
                            }
                        });
                    }
                });
            },
            error: function(xhr, status, error) {
              console.error(xhr.responseText);
            }
        })
    })
    
    $(document).on('click', '.delPackage', function(e) {
        var id = $(this).data('id');
        $.ajax({
            url: '/penjualan/rm_ref_obat/'+id,
            type: "POST",
            headers: {
                'X-CSRFToken': csrftoken  // Get the CSRF token from a cookie
            },
            success: function(response) {
                Swal.fire({
                    title: "Berhasil",
                    text: "Harga Telah Dihapus!",
                    icon: "success"
                });
                location.reload()
            },
            error: function(xhr, status, error) {
              console.error(xhr.responseText);
            }
        })
    });
    
</script>
{% endlanguage %}
{% endblock %}