@extends('admin.layouts.layout')

@section('content')

<div class="page-container">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header border-bottom border-dashed d-flex align-items-center">
                    <h4 class="header-title">Add User</h4>
                </div>

                <div class="card-body">
                    <form action="{{ route('report.export.income') }}" method="POST" id="income-form">
                        @csrf
                        <div class="row">
                            <div class="mb-3 col-lg-6">
                                <label class="form-label">Date to Date</label>
                                <input type="text" name="date_range" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" data-range-date="true">
                            </div>
                            <div class="mb-3 col-lg-6">
                                <label for="month" class="form-label">Month</label>
                                <input type="month" id="month" name="month" value="" class="form-control whitespace-trim">
                            </div>
                            <div>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div> <!-- container -->

<div class="page-container">

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="card-header border-bottom justify-content-between d-flex flex-wrap align-items-center gap-2">
                        <h4 class="header-title">Application Payment List</h4>
                    </div>

                    <table id="datatable-buttons" class="table table-striped dt-responsive nowrap w-100">
                        <thead>
                            <tr>
                                <th style="text-align: start;">Application No</th>
                                <th style="text-align: start;">Amount</th>
                                <th style="text-align: end;">Credited Amount</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div> <!-- end card body-->
            </div> <!-- end card -->
        </div><!-- end col-->
    </div> <!-- end row-->
</div>

@endsection

@section('footer-script')

<script>
   $(document).ready(function () {
    let table = $('#datatable-buttons').DataTable({
        destroy: true,
        dom: 'Bfrtip',
        buttons: [
        {
            extend: 'excel',
            title: 'Application Payment List'
        },
        {
            extend: 'pdf',
            title: 'Application Payment List'
        },
        {
            extend: 'print',
            title: 'Application Payment List'
        }
    ],
        language: {
            paginate: {
                previous: "<i class='ti ti-chevron-left'></i>",
                next: "<i class='ti ti-chevron-right'></i>"
            }
        },
        drawCallback: function () {
            $(".dataTables_paginate > .pagination").addClass("pagination-rounded");
        }
    });

    // Append buttons to the proper place
    table.buttons().container().appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)');

    $('#income-form').on('submit', function(e) {
        e.preventDefault();

        let formData = $(this).serialize();

        $.ajax({
            url: "{{ route('report.export.income') }}",
            type: "POST",
            data: formData,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                table.clear();

                let totalAmount = 0;
                let totalPayAmount = 0;

                $.each(response.data, function(index, item) {
                    let amount = parseFloat(item.amount) || 0;
                    let payAmount = parseFloat(item.pay_amount) || 0;

                    totalAmount += amount;
                    totalPayAmount += payAmount;

                    table.row.add([
                        item.register_no,
                        `<div style="text-align: start;">${amount.toFixed(2)}</div>`,
                        payAmount.toFixed(2)
                    ]);
                });

                // Add total row at the end
                table.row.add([
                    `<strong>Total</strong>`,
                    `<strong><div style="text-align: start;">${totalAmount.toFixed(2)}</div></strong>`,
                    `<strong>${totalPayAmount.toFixed(2)}</strong>`
                ]);

                table.draw();
            }
        });
    });
});

</script>

@endsection