{% load humanize i18n static %}
{% language 'ID' %}
{% csrf_token %}
    <div style="display: flex; justify-content: space-between;border-bottom: 1px solid;padding-bottom: 10px;align-items: center;">
        <span style="position: absolute;right: 15px;top: 0;">
            <div style="display: table-row;">
                <span style="font-size: xx-large;margin-right: 20px;"><i style="color: #3ac79b;" class="bi bi-file-arrow-up-fill"></i><b>Rp{{lastPemasukan|floatformat:0|intcomma}}</b></span>
                <span style="font-size: xx-large;"><i style="color: #f73563" class="bi bi-file-arrow-down-fill"></i><b>Rp{{lastMonthTotal|floatformat:0|intcomma}}</b></span>
            </div>
        </span>
        <h5 class="h5">List Pengeluaran Bulan {{lastmonthyear}}</h5>
        <span style="display: flex;">
            <button type="button" id="export-current-pengeluaran" onclick="exportPengeluaranHistory()" class="btn btn-success btn-sm text-light"><i class="fa fa-file-export"></i></button>
            <div id="month-filter">
                <div style="margin-left: 10px;width: 200px">
                    <input class="form-control" type="month" id="monthYearInput" value="{{year}}-{{lastmonth}}">
                </div>
            </div>
        </span>
    </div>
    <div id="collapseOneVitalSign" class="accordion-collapse collapse show collapse show"
        aria-labelledby="headingOneVitalSign" data-bs-parent="#accordionVitalSign">
        <div class="accordion-body px-0">
            <!-- <h5 class="mt-3 h5">Semua Pasien</h5> -->
            <div class="row gy-3" style="overflow-x: auto;" id="pengeluaran">
                <table width="100%" style="width:100% !important; cursor: pointer;" class="table dataTable table-striped table-bordered" id="item-pengeluaran">
                    <thead>
                        <th>#</th>
                        <th>Tanggal</th>
                        <th>Keterangan</th>
                        <th>Kategori</th>
                        <th>Kuantitas</th>
                        <th>Harga</th>
                        <th>Jumlah</th>
                        <th>Pembayaran</th>
                    </thead>
                    <tbody>
                        {% if pengeluaranlisthistory %}
                            {% for x in pengeluaranlisthistory %}
                                <tr>
                                    <td>{{forloop.counter}}</td>
                                    <td>{{x.activity_date}}</td>
                                    <td>{{x.title}}</td>
                                    <td><span data-bs-toggle="tooltip" data-bs-placement="left" title="{{x.subcategory.category.kode}}.{{x.subcategory.kode}}">{{x.subcategory.name}}</span></td>
                                    <td>{{x.qty}}</td>
                                    <td>Rp{{x.price|floatformat:"0"|intcomma}}</td>
                                    <td>Rp{{x.total|floatformat:"0"|intcomma}}</td>
                                    <td>{{x.payment_method}}</td>
                                </tr>
                            {% endfor %}
                        {% else %}
                            <tr>
                                <td colspan="9" class="text-center">Data not found.</td>
                            </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endlanguage %}
<script>
    $('#monthYearInput').on('change', function () {
        var value = $(this).val();
        var month = value.split('-')[1].trim()
        var year = value.split('-')[0].trim()
        var csrftoken = $("[name=csrfmiddlewaretoken]").val();
        $.ajax({
            url: '{% url "filter_pengeluaran_month" %}',  // Replace with the actual URL
            method: 'POST',
            headers: {
                'X-CSRFToken': csrftoken  // Get the CSRF token from a cookie
            },
            data: {
                month: month, 
                year: year,
            },
            success: function(data) {
                $('#pengeluaran').empty();
                var html = `<table width="100%" style="width:100% !important; cursor: pointer;" id="item-pengeluaran" class="table dataTable table-striped table-bordered">
                    <thead>
                        <th>#</th>
                        <th>Tanggal</th>
                        <th>Keterangan</th>
                        <th>Kategori</th>
                        <th>Kuantitas</th>
                        <th>Harga</th>
                        <th>Jumlah</th>
                        <th>Pembayaran</th>
                        <th class="text-center">Act</th>
                    </thead>
                </table>`;
                $('#pengeluaran').html(html)
                $('#item-pengeluaran').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": "activity_date" },
                        { "data": "title" },
                        { "data": "subcategory_id" },
                        { "data": "qty" },
                        { "data": "price" },
                        { "data": "total" },
                        { "data": "payment_method", "width" : "30%",},
                        {
                            "data": "id",
                            "render": function (data, type, row) {
                                // Create a custom button within the cell
                                return `<button type="button" style="margin-left: 10px;" class="btn btn-danger text-light"><i class="bi bi-trash"></i></button>`;
                            },
                            "class": "text-center",
                        },
                    ],
                });
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
    function exportPengeluaranHistory(){
        var value = $('#monthYearInput').val()
        var month = value.split('-')[1].trim();
        var year = value.split('-')[0].trim();
        var downloadUrl = `export_pengeluaran?month=${month}&year=${year}`;

        // 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);
    }
</script>