@extends('layouts.main')
@section('title', 'Cash Collection Report')
@section('content')
    <!-- push external head elements to head -->
    @push('head')
        <link rel="stylesheet" href="{{ asset('plugins/DataTables/datatables.min.css') }}">
   {{-- 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
    <x-loader/>

    <div class="container-fluid">
        
        <x-breadcrumb :pageTitle="$pageTitle" :desc="$desc"  :iconName="$iconName"  />
    	
        <div class="row">
            <div class="col-xl-5">
                <div class="card card-blue text-white">
                    <div class="card-block">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <p style="font-size:15px;" class="mb-3">Cash Invoices
                                    <br/>
                                    <sub style="font-size:15px; font-weight:bold;" class="mb-0" id='totalInvAmount'> {{ number_format($total,2)}}</sub>
                                </p>
                                    <p style="font-size:16px;"  class="mb-0">
                                     Total no of Transactions
                                     <br/>
                                        <sub style="font-size:18px; font-weight:bold;" class="mb-0" id='totalNumberOfInv'>
                                            {{number_format(count($data))}}
                                        </sub>
                                    </p>
                            </div>
                            <div class="col-4 text-right py-5">
                                <i class="fas fa-cube f-30"></i>
                            </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">
                        <h3>Filters: </h3>
                    </div>
                    <div class="card-body">

                        <form method="GET" action="">
                            @csrf
                            <div class="row">
                                @if (auth()->user()->mda_id==0)
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 form-group">
                                    <div class="input-group">
                                        <label for="">mdas</label>
                                        <select class="select2 form-control" name="mda" id="mda" onchange="getServices(this.value)">
                                            <option value="all">All Mda</option>
                                            @foreach ($mdas as $mda)
                                                <option value="{{$mda['id']}}"> {{ $mda['name']}} </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                @else
                                    <input type="hidden" name="mda" value="{{auth()->user()->mda_id}}" id="mda_id"/>
                                @endif

                                <div class="{{ $special_role  ? "col-sm-4": "col-sm-6"}}">
                                    <div class="form-group">
                                        <label for="">services</label>
                                        <select name="service_id" class="select2 form-control"  id="service_id">
                                            <option value="all">Select Service </option>

                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div  class="row">
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label>from date</label>
                                        <input name="fromDate" type="text" placeholder="dd-mm-yy"  class="form-control" id="fromDate"
                                        />
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label>to date</label>
                                        <input name="toDate" type="text" class="form-control"  id="toDate" placeholder="dd-mm-yy">
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label>.</label>
                                        <button id="submit" class="btn btn-md btn-primary btn-block  pull-right">
                                            <i class="fa fa-search" aria-hidden="true"></i>
                                        </button>
                                    </div>

                                </div>
                            </div>
                        </form>

                    </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>Cash Collection</strong></h3>
                         <div class="d-flex" id="filter-wrapper"></div>
                    </div>
                 </div>
                 <div class="card-body table-responsive" id="cashTableWrapper">
                     <table class="table cash" style="width:100%;">
                         <thead>
                             <tr>
                                 <tr>
                                    <th>S/N</th>
                                    <th>Transaction Reference</th>
                                    <th>Payer</th>
                                    <th>Service(s)</th>
                                    <th>MDA</th>
                                    <th>Amount(₦)</th>
                                    <th>Payment Date</th>
                                    <th>Payment Method</th>
                                    <th>Invoice No.</th>
                                    <th>Created By</th>
                                    <th>Payment Status</th>
                                    <th>Actions</th>
                             </tr>
                         </thead>
                         <tbody id="cash_table_body">
                            @foreach ($data as $item)
                                <tr> 
                                    <td> </td>
                                    <td> {{$item->transaction_reference}} </td>
                                    <td> {{$item->fname}} </td>
                                    <td> {{$item->service->name}} </td>
                                    <td> {{$item->mda->name}} </td>
                                    <td> {{$item->amount}} </td>

                                    <td> 
                                        {{ date('Y-m-d', strtotime($item->paid_at)) }} 
                                    </td>

                                    <td> {{$item->payment_type}} </td>
                                    <td> {{$item->invoice_no}} </td>
                                    <td> {{$item->creator->name}} </td>
                                    <td> {{$item->payment_status}} </td>
                                    <td>
                                        <a target='_blank' href='/invoices/print_invoice/{{$item->invoice_no}}' class='badge badge-primary badge-sm'>
                                            View
                                        </a>
                                    </td>
                                  </tr>
                                
                            @endforeach
                            
                        </tbody>
                     </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> --}}
        {{-- <script src="{{ asset('js/custom.js') }}"></script> --}}
        <script src="{{ asset('js/_assets/general_js.js') }}"></script>


        <script>
            // hide sidbar on document readey
            document.body.classList.add("sidebar-mini");
            // ::::::::::::::::::::::::::::::::::::::::::
            let name = `