@extends('layouts/contentNavbarLayout')

@section('title', 'Fund Request')

@section('vendor-style')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
@endsection

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <div class="card">
        <div class="card-header bg-primary text-white">
            Fund Requests
        </div>

        <div class="card-body pt-0">

            <form id="filter-form" class="mb-3 px-3 mt-3">
                <div class="row g-3">

                    <div class="col-md-3">
                        <div class="form-floating form-floating-outline w-100">
                            <input type="text" name="search_text" id="search_text" class="form-control"
                                placeholder="Search anything...">
                            <label for="search_text">Search</label>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-floating form-floating-outline w-100">
                            <input type="text" name="rrn" id="rrn" class="form-control"
                                placeholder="RRN">
                            <label for="rrn">RRN</label>
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="form-floating form-floating-outline w-100">
                            <select name="status" id="statusValue" class="form-select w-100">
                                <option value="" selected>Select Status</option>
                                <option value="P">Pending</option>
                                <option value="S">Approved</option>
                                <option value="R">Rejected</option>
                            </select>
                            <label for="status">Status</label>
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="form-floating form-floating-outline">
                            <input
                                type="date"
                                id="from_date"
                                name="from_date"
                                class="form-control"
                                placeholder="From date"
                            >
                            <label for="from_date">From (Start date)</label>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-floating form-floating-outline">
                            <input
                                type="date"
                                id="to_date"
                                name="to_date"
                                class="form-control"
                                placeholder="To date"
                            >
                            <label for="to_date">To (End date)</label>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary w-100">Apply </button>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-outline-primary w-100" id="reset_filter">Reset</button>
                    </div>
                </div>
            </form>

            <div class="table-responsive mt-4 px-3">
                <table class="table table-bordered table-striped table-hover text-center align-middle w-100"
                       id="fundrequestTable">
                    <thead class="table-primary">
                        <tr>
                            <th>#</th>
                            <th>REQUEST ID</th>
                            <th>AMOUNT</th>
                            <th>COMPANY BANK</th>
                            <th>SENDER ACCOUNT</th>
                            <th>RRN</th>
                            <th>DATE & TIME</th>
                            <th>STATUS</th>
                        </tr>
                    </thead>
                </table>
            </div>

        </div>
    </div>
@endsection

@section('js')
<!-- Excel dependency -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<!-- DataTables Buttons -->
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script>
$(document).ready(function() {

    let table = $('#fundrequestTable').DataTable({
        processing: true,
        serverSide: true,
        scrollX: true,
lengthMenu: [
                    [10, 25, 100, 1000, 10000, -1],
                    [10, 25, 100, 1000, 10000, "All"]
                ],
        // ✅ show export buttons
        dom: '<"row mb-3"<"col-md-6"l><"col-md-6 text-end"B>>frtip',

        buttons: [
            {
                extend: 'excelHtml5',
                text: 'Export Excel',
                className: 'btn btn-success btn-sm'
            },
            {
                extend: 'csvHtml5',
                text: 'Export CSV',
                className: 'btn btn-primary btn-sm'
            }
        ],

        ajax: {
            url: "{{ route('user.fundrequest.data') }}",
            data: function (d) {
                d.search_text = $('#search_text').val();
                d.rrn        = $('#rrn').val();
                d.status     = $('#statusValue').val();
                d.from_date  = $('#from_date').val();
                d.to_date    = $('#to_date').val();
            }
        },

        columns: [
            { data: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'request_id' },
            { data: 'amount' },
            { data: 'company_bank', orderable: false, searchable: false },
            { data: 'sender_account_number' },
            { data: 'transaction_utr' },
            { data: 'created_at' },
            { data: 'status_badge', orderable: false, searchable: false }
        ],

        order: [[6, 'desc']]
    });

    // reload table on filters
    // $('#search_text, #rrn').on('keyup', function(e){
    //     if (e.key === 'Enter') table.ajax.reload();
    // });

    // $('#statusValue, #from_date, #to_date').on('change', function(){
    //     table.ajax.reload();
    // });
    $('#filter-form').on('submit', function(e) {
        e.preventDefault();
        table.ajax.reload();
    });
    $('#reset_filter').on('click', function(e) {
        e.preventDefault();
        $('#filter-form')[0].reset();
        table.ajax.reload();
    });
});
</script>
@endsection