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

{% block title %}
Laporan Penjualan Obat
{% endblock %}
{% include "header.html" %}


{% block head %}
<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 }}
<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-lpo_info {
        margin-top: 5px;
    }

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

    #item-table-lpo_previous,
    #item-table-lpo_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-lpo_previous a,
    #item-table-lpo_next a {
        background-color: #aaa !important;
        color: #fff !important;
    }

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

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

    #item-detail_length {
        position: absolute;
    }

    #item-detail_filter {
        float: right;
    }
    div#item-table-lpo_length {
        display:contents !important
    }

    select[name="item-table-lpo_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-lpo_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;
    }

    #chart-container {
        position: relative;
        height: 100vh;
        overflow: hidden;
      }
</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" integrity="sha384-rHyoN1iiz4BywXFF6z9vxCpIH1a5zXYjRTm86aK5r5Pm5Pd1PfFqW1uSjJlWtJf6" crossorigin="anonymous">
<script src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.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>

        <script>
            // Display the first tab by default
            document.getElementsByClassName("tablinks")[0].click();

        </script>
          
        <div class="row" style="margin-top:20px">
            <div class="col-4" style="-left:">
              <div class="card card-sm">
                <div class="card-body">
                  <div class="card-title">Pendapatan bulan ini</div>
                  <p class="card-text" style="font-weight: bold; font-size:xx-large">{{bulan_ini|intcomma}}</p>
                  {% if persentase_perubahan < 0 %}
                    <div style="color: red;font-size:x-large">{{ persentase_perubahan }}%</div>
                        {% else %}
                    <div style="color: green;font-size:x-large">{{ persentase_perubahan }}%</div>
                    {% endif %}
                </div>
              </div>
            </div>
          
            <div class="col-4">
              <div class="card card-sm" >
                <div class="card-body">
                  <div class="card-title">Pendapatan bulan lalu</div>
                  <p class="card-text" style="font-weight: bold; font-size:xx-large">{{pendapatan|intcomma}}</p>
                  <div style="color:; font-size:x-large">{{last_month_end.month}} - {{last_month_end.year}}</div>
                </div>
              </div>
            </div>

            <div class="col-4">
                <div class="card card-sm" >
                  <div class="card-body">
                    <div class="card-title">Stok obat terjual bulan ini</div>
                    <p class="card-text" style="font-weight: bold; font-size:xx-large">{{kuantitas|floatformat:0}}</p>
                    <div style="color:green;  font-size:x-large">Kuantitas</div>
                  </div>
                </div>
              </div>
        </div>
        <div class=" mb-3 mt-4">
            <div class="col" style="padding: 0px;">
                <div class="card">
                    <div class="card-body">
                        <div style="display: flex; justify-content: space-between;">
                            <div style="display:flex">
                                    <span >Laporan Penjualan Obat</span>
                            </div>
                        </div>
                        <p style="border-bottom: 1px solid grey;" class="mt-2 mb-3 h5"></p>
                        <table width="100%" style="width:100% !important; " id="item-table-lpo" class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th class="bg-secondary">No</th>
                                    <th class="bg-secondary">Kode</th>
                                    <th class="bg-success">Nama Obat</th>
                                    <th class="bg-info">Kuantitas</th>
                                    <th class="bg-danger">Nama Dokter</th>
                                    <th class="bg-warning">Tanggal Pembayaran</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for x,y in invs %}
                                <tr>
                                    <td class="table-secondary">{{ forloop.counter }}</td>
                                    <td class="table-secondary">{{ y.kode }}</td>
                                    <td class="table-success">{{ y.nama }}</td>
                                    <td class="table-info">{{ x.kuantitas|floatformat:0}}</td>
                                    <td class="table-danger">{{ x.dokter }}</td>
                                    <td class="table-warning">{{ x.created_at }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>                            
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% include "footer.html" %}
</main>
<script>
    $(document).ready(function() {
        // Initialize DataTable
        $('#item-table-lpo').DataTable();
    });

  

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