{{>adminheader}}
<link rel="stylesheet" href="/superAdmin/css/summernote-bs4.min.css">
<title>{{title}}</title>

<div class="row p-2" style="margin: 0px !important;">
    <div class="col-md-12">
        <div class="card mt-2" style="border-left: 2px solid black;">
            <div class="card-header">
                <h4><b>{{title}}</b></h4>
            </div>

            <div class="card-body p-2">
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="startDate">Start Date:</label>
                        <input type="date" id="startDate" class="form-control">
                    </div>
                    <div class="col-md-3">
                        <label for="endDate">End Date:</label>
                        <input type="date" id="endDate" class="form-control">
                    </div>
                    <div class="col-md-2 align-self-end">
                        <button id="filterBtn" class="btn btn-primary">Filter</button>
                    </div>
                </div>
                <div id="example1_wrapper">
                    <div class="row">
                        <div class="col-sm-12 table-responsive">
                            <table id="example2" aria-describedby="example1_info">
                                <thead>
                                    <tr>
                                        <th>S.No</th>
                                        <th>Amount</th>
                                        <th>UserName</th>
                                        <th>Phone</th>
                                        <th>Purchased at</th>
                                        <th>Valid till</th>
                                    </tr>
                                </thead>
                                <tbody id="tableBody">
                                    {{#each suscribedusers}}
                                    <tr class="odd">
                                        <td>{{inc @index}}</td>
                                        <td class="amount">{{this.amount}} Rs</td>
                                        <td>{{this.userid.username}}</td>
                                        <td>{{this.userid.phone}}</td>
                                        <td class="purchaseDate">{{formatDate1 this.subscription.createdAt}}</td>
                                        <td>{{formatDate1 this.validaty}}</td>
                                    </tr>
                                    {{/each}}
                                </tbody>
                            </table>
                            <h4>Total Amount: <span id="settledTotal">{{calculateTotal suscribedusers
                                    "amount"}} Rs</span></h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        // Helper function to parse dates in DD-MM-YYYY format
        function parseDate(dateString) {
            const [day, month, year] = dateString.split('-').map(Number);
            return new Date(year, month - 1, day); // Month is zero-based in JS Date
        }

        // Function to filter the table based on the selected date range
        function filterTable() {
            // Retrieve the start and end dates from the date inputs
            const startDate = parseDate($('#startDate').val().split('-').reverse().join('-'));
            const endDate = parseDate($('#endDate').val().split('-').reverse().join('-'));
            endDate.setDate(endDate.getDate() + 1);  // Include the end date in the filter

            let totalAmount = 0;

            // Loop through each row in the table and filter based on date range
            $('#tableBody tr').each(function () {
                const purchaseDateStr = $(this).find('.purchaseDate').text().trim();
                const purchaseDate = parseDate(purchaseDateStr);

                // Show or hide the row based on the date range
                if (purchaseDate >= startDate && purchaseDate < endDate) {
                    $(this).show();
                    const amount = parseFloat($(this).find('.amount').text());
                    totalAmount += amount;
                } else {
                    $(this).hide();
                }
            });

            // Update the total amount display
            $('#settledTotal').text(totalAmount.toFixed(2) + " Rs");
        }

        // Bind the filter button click event to the filterTable function
        $('#filterBtn').on('click', function () {
            filterTable();
        });
    });
</script>


{{>adminfooter}}