@extends('layouts.master')
@section('page_title', 'Transaction History')
@section('content')

<div class="">
<div class="card">
            <div class="card-header header-elements-inline">
                 
                    <div class="form-row">
                        <div class="form-group col-md-5">
                        <label class="col-md-5">Start Date</label>
                        <input type="date" class="form-control" id="start_date" placeholder="Start Date">
                        </div>
                        <div class="form-group col-md-5">
                        <label class="col-md-5">End Date </label>
                        <input type="date" class="form-control" id="end_date" placeholder="End Date">
                        </div>
                        <div class="form-group col-md-5">
                        <label class="col-md-5">Status</label>
                         <select name="" id="status" class="form-control">
                            <option value="">All</option>
                            <option value="paid">Paid</option>
                            <option value="pending">Pending</option>
                            <option value="reversed">Reversed</option>
                         </select>
                        </div>

                        

                        <div class="form-group col-md-2">
                        <button  class="btn btn-dark search-btn mt-4"><i class="icon-search4"></i></button>
                        </div>
                    </div>
                
            </div>
            <div  class="col-md-12">
            <table class="table" id="payment-transaction">
                    <thead>
                        <tr>
                            <th>Student</th>
                            <!-- <th>Ref#</th> -->
                            <th>Amount </th>
                             <th>Date</th>
                            <th>Method</th>
                            <th>Payment Status</th>
                            <th>Narration</th>
                            <th>Paid By</th>
                            <th>Action</th>
                        </tr>
                    </thead>

                    <tbody>
      
                      
                    </tbody>
            
           </table>
            </div>

            <div class="col-md-12 code-ofconduct-body">
          
            </div>
        </div>

       
</div>

@endsection

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
   
    let paymentTransactionTable = $('#payment-transaction').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '/api/report/show-payment-transaction',
            type: 'GET',
            data: function(d) {
                d.start_date = $('#start_date').val();
                d.end_date = $('#end_date').val();
                d.status = $('#status').val();
                d.criteria = $('#criteria').val();
            }
        },
        columns: [
            { data: 'full_name', searchable: true },
            // { data: 'ref', searchable: true },
            { data: 'amount', searchable: true },
            { data: 'payment_date', searchable: true },
            { data: 'payment_method', searchable: true },
            { data: 'status', searchable: true },
            { data: 'narration', searchable: true },
            { data: 'paid_by', searchable: true },
            {data: 'print_receipt',}
        ],
        error: function (xhr, error, thrown) {
            console.error('Error loading data:', error);
        }
    });


    // Event listener for search button
    $('.search-btn').click(function(e) {
        e.preventDefault();
        toastr.info('Fetching records...');
        paymentTransactionTable.ajax.reload();
    });
});
</script>