@extends('layouts.main')
@section('title', 'Payment Summary')
@section('content')
    <!-- push external head elements to head -->
    @push('head')
        <link rel="stylesheet" href="{{ asset('plugins/DataTables/datatables.min.css') }}">
        <link rel="stylesheet" href="{{ asset('plugins/datedropper/datedropper.min.css') }}">
       
        <style>
            .card-body table{
                width:100%!Important;
            }
            .table-actions a {
                font-size: 5px!important;
            }
        </style>
    @endpush

    <div class="d-none" id="loaderEl">
        <x-loader/>
    </div>
    <div class="container-fluid">
    	<div class="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-title">
                        <i class="ik ik-users bg-blue"></i>
                        <div class="d-inline">
                            <h5>{{__('Payment Summary') }} </h5>
                            <span>{{ __('Payment summary Breakdown')}}</span>
                            {{-- <h2>{{ __('Listing of all Non-cash Invoices and Remittances')}}</h2> --}}
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <nav class="breadcrumb-container" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{route('dashboard')}}"><i class="ik ik-home"></i></a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{ route('dashboard') }}">{{ __('Dashboard')}}</a>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        {{--  --}}
        





        {{--  --}}
         <div class="row">
            <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">
                                <div class="form-group datepickers d-flex" id="datetimepicker" data-target-input="nearest">
                                    <input type="text" placeholder="Select From Date" class="form-control datetimepicker-input" data-toggle="datetimepicker" data-target="#datetimepicker" name="from_date" id="from-date">
                                    <div class="input-group-append" data-target="#datetimepicker" data-toggle="datetimepicker">
                                        <div style="margin-left:-3px; border-top-left-radius:0px; border-bottom-left-radius:0px;" class="input-group-text"><i class="fa fa-calendar"></i></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group datepickers d-flex" id="datetimepicker2" data-target-input="nearest">
                                    <input type="text" placeholder="Select To Date" class="form-control datetimepicker-input" data-target="#datetimepicker2" data-toggle="datetimepicker" id="to-date">
                                    <div class="input-group-append" data-target="#datetimepicker2" data-toggle="datetimepicker">
                                        <div style="margin-left:-3px; border-top-left-radius:0px; border-bottom-left-radius:0px;"  class="input-group-text"><i class="fa fa-calendar"></i></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <select  class="select2" name="grouping" id="grouping" >
                                        <option selected>Payments By Bank</option>
                                        <option>Payments By MDA</option>
                                        @forelse ( $mdas as $mda_id => $mdaName )
                                            <option value="{{ $mda_id }}">{{ $mdaName }}</option>
                                        @empty
                                                <option>No MDA Available</option>
                                        @endforelse

                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-sm-12 d-flex justify-content-end">
                                <button style="width:150px;" type="btn" class="btn btn-primary" id="search-btn">
                                    <i class="fa fa-search"></i> Search </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
             <div wire:ignore class="col-md-12">
                <div class="card p-3">
                    <div class="card-header">
                    </div>
                    <div class="card-body table-responsive">
                        <table id="payment_summary" class="table" style="width:100%;">
                            <thead>
                                <tr>
                                    <th id="theadingName">Bank Name</th>
                                    <th>Amount(₦)</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                            <tfoot>
                            <tr>
                                <th>Total:</th>
                                <th id="sum_total"></th>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </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/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js') }}"></script> --}}
        <script src="{{ asset('plugins/datedropper/datedropper.min.js') }}"></script>
        <script src="{{ asset('js/form-picker.js') }}"></script>
        <script src="{{ asset('js/currency.min.js') }}"></script>
        <!--server side users table script-->
        <script src="{{ asset('js/payment-summary.js') }}"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                // Initialize select2
                initializeSelect2();

                initializeDatepicker();

                // Payment Summary
                initializePaymentSummary()

                const updateTableHeading = (grouping) => {
                    const heading = $("#theadingName");
                    if (grouping === "Payments By Bank") {
                        heading.text("Bank Name");
                    } else {
                        if (grouping === "Payments By MDA") {
                            heading.text("MDA Name");
                        } else {
                            heading.text("Service Name");
                        }
                    }
                };

                const fetchPaymentSummary = async ()=> {
                    showLoading();
                    const fromDate = $("#from-date").val() || "";
                    const toDate = $("#to-date").val() || "";
                    const grouping = $("#grouping").val() || "";

                    showdataTableLoadingIcon('payment_summary');

                    const res = await
                    getRequest(`${window.location.href}?from_date=${fromDate}&to_date=${toDate}&grouping=${grouping}`);

                    if (res) {

                        const { msg } = res;

                        if (msg) {
                            hideDataTableLoadingIcon("payment_summary");
                           fireSwalErrorAlert(msg);
                           return hideLoading();
                        }
                        updateTableHeading(grouping);
                        hideDataTableLoadingIcon("payment_summary");
                        let overallTotal = 0;

                        if (res.length > 0) {
                            res.forEach((record) => {
                                overallTotal +=record.sum
                                record.sum = naira(record.sum).format();
                            });
                        }
                        if(reInitializeDataTable("payment_summary", res)){
                            // const v = naira(overallTotal).format()
                            $('#sum_total').html(`${naira(overallTotal).format()}`)
                        }

                        return hideLoading();
                    }

                    return hideLoading();
                }

                onCustomEvent('click', '#search-btn', ()=> {
                    fetchPaymentSummary();
                });

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