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

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

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

    .tablinks {
        cursor: pointer;
        padding: 10px;
    }
    .scrollX {
        overflow: auto;
    } 

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

    .paginate_button.active, .paginate_button.current {
        padding: 0.375rem 0.75rem !important;
    }

    .paginate_button.active:hover, .paginate_button.current:hover {
        background-color: #007bff !important;
        color: #fff !important;
        padding: 0.375rem 0.75rem !important;
    }

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

    .select2-container {
        width: 100%;
    }

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

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

    .select2-dropdown {
        z-index: 9999 !important;
    }
</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> -->
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></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/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://gcore.jsdelivr.net/npm/sweetalert2@10"></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 %}
                <div style="position: absolute; z-index: 1; right: 20px;background-color: #3ac79b;color: #fff;" class="toast show" data-delay="100" role="alert" aria-live="assertive" aria-atomic="true">
                    <div class="toast-body">
                        {{ x }}
                    </div>
                </div>
            {% endfor %}
        </div>

        <script>
        </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">Kas Pengeluaran</li>
                </ol>
            </nav>
            <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="pills-vital-sign-tab" data-bs-toggle="pill" data-bs-target="#pills-vital-sign" type="button" role="tab" aria-controls="pills-vital-sign" aria-selected="true">PENGELUARAN</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-lab-tab" data-bs-toggle="pill" data-bs-target="#pills-lab" type="button" role="tab" aria-controls="pills-lab" aria-selected="true">HISTORY</button>
                        </li>
                    </ul>
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-vital-sign" role="tabpanel" aria-labelledby="pills-vital-sign-tab" tabindex="0">
                            {% include 'pembayaran/pengeluaran/pengeluaran.html' %}
                        </div>
                        <div class="tab-pane fade" id="pills-lab" role="tabpanel" aria-labelledby="pills-lab-tab" tabindex="0">
                            {% include 'pembayaran/pengeluaran/history.html' %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% include "footer.html" %}
</main>
    <script>
        $(document).ready(function() {
            var myToast = $(".toast");
            
            // Set a delay to remove the 'show' class after 5 seconds
            setTimeout(function() {
                myToast.fadeOut();
            }, 2000);
        });
        $(document).ready(function() {
            $('#table-pengeluaran-history').DataTable({
                // "scrollX": true,
                "responsive": true,
            })
        })
        $('#category_id').select2()
        $('#payment_method').select2()
        $('#satuan_id').select2()
        function checkJenisPengeluaran(){
            var checkboxes = $('.checkbox-input');

            // Loop through each checkbox and check its state
            checkboxes.each(function() {
                var checkbox = $(this);
                if (checkbox.is(':checked')) {
                console.log('Checkbox with value:', checkbox.val(), 'is checked');
                }
            });
        }
    </script>
{% endlanguage %}
{% endblock %}