@extends('layouts.higher-institution')
@section('title', 'Higer Institution Payment')
@section('content')
    <!-- push external head elements to head -->


    <div class="container-fluid">
        @include('include.higher-institution.top-section')

        @include('include.message')

        <div class="col-md-12">
            <div class="card p-3">
                <div class="card-header d-flex justify-content-between">
                    <h3>Filters: </h3>
                </div>
                <div class="card-body">
                    <div class="form-row">
                        <div class="col-sm-4 col-lg-4 form-group">
                            <label for="from-date">From Date:</label>
                            <input class="form-control" name="from_date" value="{{ $fromDate }}" id="from-date"
                                type="date" />
                        </div>
                        <div class="col-sm-4 col-lg-4 form-group">
                            <label for="to-date">To Date:</label>
                            <input class="form-control" name="to_date" value="{{ $toDate }}" id="to-date"
                                type="date" />
                        </div>
                        <div class="col-sm-4 col-lg-4 form-group">
                            <label for="to-date">Transaction Reference</label>
                            <input class="form-control" name="transaction_reference" value="{{ $transactionReference }}"
                                id="transaction-reference" type="text" />
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-sm-12 d-flex justify-content-end">
                            <button type="button" style="width:150px;" type="btn" id="reset-btn"
                                class="btn btn-danger"><i class="fa fa-times"></i>
                                Reset </button>
                            {{-- <button style="width:150px;" type="btn" class="btn btn-primary"><i
                                        class="fa fa-check"></i>
                                    Submit </button> --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div>


            <div class="col-md-12">
                <div class="card p-3">
                    <div class="card-header d-flex justify-content-between">
                        <h3>View All Payments</h3>
                    </div>
                    <div class="card-body">


                        <div class="table-responsive px-3">
                            <table id="higher_institution" class="table" style="width:100%;">
                                <thead>
                                    <tr>
                                        <th class="text-nowrap">{{ __('S/N') }}</th>
                                        <th class="text-nowrap">{{ __('Payer name') }}</th>
                                        <th>{{ __('Transaction Reference') }}</th>
                                        <th>{{ __('Invoice number') }}</th>
                                        <th>{{ __('Total Amount') }}</th>
                                        <th>{{ __('Payment Status') }}</th>
                                        <th>{{ __('Matric No') }}</th>
                                        <th>{{ __('Bank Branch') }}</th>
                                        <th>{{ __('Pay Channel') }}</th>
                                        <th>{{ __('Date Created') }}</th>
                                        <th>{{ __('Actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end message area-->
        </div>
    </div>
    <!-- push external js -->
    @push('script')
        <script src="{{ asset('plugins/DataTables/datatables.min.js') }}"></script>
        <script src="{{ asset('plugins/select2/dist/js/select2.min.js') }}"></script>
        <script src="{{ asset('plugins/datedropper/datedropper.min.js') }}"></script>
        <script src="{{ asset('js/form-picker.js') }}"></script>
        <!--server side users table script-->
        <script src="{{ asset('js/custom.js') }}"></script>
        <script>
            function initializeHigherInstitutionDatabase() {
                const columns = [{
                        data: "id",
                        name: "id",
                        orderable: false,
                        searchable: false,
                    },
                    {
                        data: "firstname",
                        name: "fname",
                        orderable: true,
                        searchable: true,
                    },
                    {
                        data: "transaction_reference",
                        name: "transaction_reference",
                        orderable: true,
                        searchable: true,
                    },
                    {
                        data: "invoice_no",
                        name: "invoice_no",
                        orderable: true,
                        searchable: true,
                    },
                    {
                        data: "total_amount",
                        name: "total_amount",
                        orderable: true,
                        searchable: false,
                    },
                    {
                        data: "payment_status",
                        name: "payment_status",
                        orderable: true,
                        searchable: true,
                    },
                    {
                        data: "matric_no",
                        name: "matric_no",
                        orderable: true,
                        searchable: true,
                    },
                    {
                        data: "bankbranch",
                        name: "bankbranch",
                        orderable: true,
                        searchable: true,
                    },
                    {
                        data: "paychannel",
                        name: "paychannel",
                        orderable: true,
                        searchable: false,
                    },
                    {
                        data: "created_at",
                        name: "created_at",
                        orderable: true,
                    },
                    {
                        data: "actions",
                        name: "actions",
                        orderable: false,
                        searchable: false,
                    },
                ];

                $("#higher_institution").DataTable({
                    ...dataTableConfig(true),
                    order: [
                        [9, 'desc']
                    ],
                    ajax: {
                        url: "{{ route('higher-institution.payment.index') }}",
                        type: "get",
                        data: function(request) {
                            request.from_date = $("#from-date").val() != '' ? $("#from-date").val() : null;
                            request.to_date = $("#to-date").val() != '' ? $("#to-date").val() : null;
                            request.transaction_reference = $('#transaction-reference').val() != '' ? $(
                                '#transaction-reference').val() : null
                        }
                    },
                    columns,
                    ...generateSerialNumber
                });
            }

            function calculateTotalAmount() {
                let totalAmount = 0;
                $('#service_ids option:selected').each(function() {
                    totalAmount += parseFloat($(this).data('amount'));
                });
                $('#total_amount').val(totalAmount);
            }
            document.addEventListener('DOMContentLoaded', function() {
                // Initialize select2
                initializeSelect2();

                initializeHigherInstitutionDatabase();
                // Calculate total amount on page load
                calculateTotalAmount();

                // Calculate total amount on selection change
                $('#service_ids').on('change', function() {
                    calculateTotalAmount();
                });

                onCustomEvent('change', "#from-date", function(element) {
                    redrawTable('higher_institution');
                });
                onCustomEvent('change', "#to-date", function(element) {
                    redrawTable('higher_institution');
                });
                onCustomEvent('click', "#reset-btn", function(element) {
                    $("#from-date").val("{{ $fromDate }}");
                    $("#to-date").val("{{ $toDate }}");;
                    $("#transaction-reference").val("");
                    redrawTable('higher_institution');
                });
                let timeout;
                onCustomEvent('keyup', "#transaction-reference", function(element) {
                    clearTimeout(timeout); // Make a new timeout set to go off in 800ms
                    timeout = setTimeout(
                        function() { // Put your code here that you want to run // after the user has stopped typing for a little bit
                            redrawTable('higher_institution');
                        }, 800);

                });
            });
        </script>
    @endpush
@endsection