@extends('layouts.main') 
@section('title', 'Payment Report')
@section('content')
    <!-- push external head elements to head -->
    @push('head')
    <link rel="stylesheet" href="{{ asset('plugins/DataTables/datatables.min.css') }}">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    {{-- date --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"
    integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <style>
            .card-body table{
                width:100%!Important;
            }
            .table-actions a {
                font-size: 5px!important;
            }
        </style>
    @endpush
    
     <div id="loaderEl">
        {{-- <x-loader/> --}}
    </div>
   
    <div class="container-fluid">
        
        <x-breadcrumb  :desc="$desc" :pageTitle="$pageTitle"   :iconName="$iconName" />
    	
         <div class="row">
            <x-summary-card :color="'blue'" :amountId="'totalRevenue'" :amountTitle="'Total Revenue Collected'"  :hideSecondaryOption="true"/>
            <x-summary-card :color="'green'" :amountId="'totalSettled'" :amountTitle="'Total Settled'"  :hideSecondaryOption="true"/>
            <x-summary-card :color="'red'" :amountId="'transactionFee'" :amountTitle="'Transaction Fees'"  :hideSecondaryOption="true"/>
        </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-6">
                                <label for="">from date</label>
                                <div class="form-group  d-flex" id="datetimepicker" data-target-input="nearest">
                                    <input type="text" placeholder="Select From Date" value="{{$fromDate}}" class="form-control"  name="from_date" id="fromDate">
                                    <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-6">
                                <label for="">to date</label>
                                <div class="form-group datepickers d-flex" id="datetimepicker2" data-target-input="nearest">
                                    <input type="text" placeholder="Select To Date" value="{{$toDate}}" class="form-control" data-target="#datetimepicker2" data-toggle="datetimepicker" id="toDate">
                                    <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>
                        <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 class="col-md-12">
                <div class="card p-3">
                    <div class="card-header d-flex justify-content-between">
                       <div>
                            <h3 class="mb-2"><strong>Settlement Summary</strong></h3>
                            <div class="d-flex" id="filter-wrapper">
                                
                            </div>
                       </div>
                        <div style="height:40px;" class="info-wrapper d-flex justify-content-between align-items-center">
                        </div>
                    </div>
                    <div class="card-body table-responsive">
                        <table id="settlementSummaryTable" class="table" style="width:100%;">
                            <thead>
                                <tr>
                                    <tr>
                                    <th>S/N</th>
                                    <th>MDA Name</th>
                                    <th>Total Sum</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
    <!-- push external js -->
    @push('script')
        

       
    
    
        <script src="{{ asset('plugins/DataTables/datatables.min.js') }}"></script>
        <script src="{{ asset('js/currency.min.js') }}"></script>
        <script src="{{ asset('js/custom.js') }}"></script>
    
        <script src="{{ asset('plugins/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js') }}"></script>
        <script src="{{ asset('plugins/select2/dist/js/select2.min.js') }}"></script>
        <script src="{{ asset('js/invoices.js') }}"></script>
        <script src="{{ asset('js/moment.js') }}"></script>
     

        <script>
            // hide sidbar on document readey
            document.body.classList.add("sidebar-mini");
            // ::::::::::::::::::::::::::::::::::::::::::
            document.addEventListener('DOMContentLoaded', function () {
            $("#fromDate").datepicker({dateFormat: "dd-mm-yy"});
            $("#toDate").datepicker({dateFormat: "dd-mm-yy"});
                // initializeDatepicker();
                // initialize  Settlement Summary DataTable
                initializeSettlementSummary()
                
                onCustomEvent('click', '#search-btn', ()=> {
                    fetchSettlementSummary();
                });
                
                fetchSettlementSummary();
            
            });
        </script>
    @endpush
@endsection