@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') }}">
        <link rel="stylesheet" href="{{ asset('plugins/datedropper/datedropper.min.css') }}">
        <style>
            .card-body table{
                width:100%!Important;
            }
            .table-actions a {
                font-size: 5px!important;
            }
            #overlay {
                background: #ffffff;
                color: #666666;
                position: fixed;
                height: 100%;
                width: 100%;
                z-index: 5000;
                top: 0;
                left: 0;
                float: left;
                text-align: center;
                padding-top: 25%;
                opacity: .80;
            }
            button {
                cursor: pointer;
            }

            .spinner {
                margin: 0 auto;
                height: 64px;
                width: 64px;
                animation: rotate 0.8s infinite linear;
                border: 5px solid firebrick;
                border-right-color: transparent;
                border-radius: 50%;
            }

            @keyframes rotate {
                0% {
                    transform: rotate(0deg);
                }

                100% {
                    transform: rotate(360deg);
                }
            }
        </style>
         <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
         
    @endpush
      <div id="overlay">
        <div class="spinner"></div>
    </div>

    
    <div class="container-fluid  mt-5">
    	<x-breadcrumb :pageTitle="$pageTitle"/>
       <h6>Filter Results</h6>
       <form action="{{route('agency.report-log')}}" method="get">
        <div class="row">
            <!-- start and end date -->
                <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12 form-group">
                    <div class="input-group">
                        <div class="form-group datepickers d-flex" id="datetimepicker" data-target-input="nearest">
                            <input type="text" value="{{$fromDate}}" placeholder="Select From Date" class="form-control datetimepicker-input" data-toggle="datetimepicker" data-target="#datetimepicker" 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>
                <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12 form-group">
                    <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="toDate"  value="{{$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 class="col-lg-1 col-md-1 col-sm-6 col-xs-6 form-group">
                    <button id="submit" class="btn btn-md btn-primary btn-block searchList pull-right">
                        <i class="fa fa-search" aria-hidden="true"></i>
                    </button>
                </div>
                
            </div>
        </form>
    </div>
    
    <!-- push external js -->
        <div class="col-md-12">
        <div class="card p-3">
            <div class="card-body">
                 <div id="firstTableDiv">
                    <table id="mda_table" class="table datatableu" style="width:100%;">
                        <thead>
                            <tr>
                                <th>{{ __('S/N')}}</th>
                                <th>{{ __('Account Name')}}</th>
                                <th>{{ __('Account Number')}}</th>
                                <th>{{ __('Bank')}}</th>
                                <th>{{ __('Amount')}}</th>
                                <th>{{ __('Actual Amount')}}</th>
                                <th>{{ __('Action')}}</th>
                            </tr>
                        </thead>
                        <tbody id="reconcilation">
                        @forelse ($data as $key=> $item)
                        {{-- $passedInv = json_encode($item); --}}
                         <tr>
                             <td>{{$key+1}}</td>
                                <td>{{$item['account_name']}} </td>
                                <td>{{$item['account_number']}} </td>
                                <td> {{$item['bank']}} </td>
                                <td> {{number_format($item['amount'])}} </td>
                                <td>{{number_format($item['amount'] - ($item['amount'] * 0.015)) }} </td>
                                <td> <span onclick='fillTheModal({{json_encode($item)}})' data-toggle='modal' data-target='#exampleModal' >pay</a></td>
                            </tr>
                            
                        @empty
                            
                        @endforelse
                          

                        </tbody>
                    </table>
                 </div>

               
            </div>
        </div>





    {{--  --}}
    @push('script')
     <script>
        document.body.classList.add("sidebar-mini");
     </script> 
    <script src="{{ asset('plugins/DataTables/datatables.min.js') }}"></script>
    <script src="{{ asset('js/form-picker.js') }}"></script>
    <script src="{{ asset('plugins/datedropper/datedropper.min.js') }}"></script>
    <script src="{{ asset('plugins/select2/dist/js/select2.min.js') }}"></script>
    {{-- <script src="{{ asset('js/reconcilation.js') }}"></script> --}}
    <script src="{{ asset('js/custom.js') }}"></script>
    <script>
        var resultData = []
        $('#overlay').hide()
        $('.resetFilters').hide();
        //
        $(document).ready(function() {
            initDataTable('datatableu')
            initializeSelect2();
            initializeDatepicker();
        })
        // 
        function initDataTable(id) {
            let Table = $(`.${id}`).DataTable({
                "ordering": true,
                responsive: true,
                dom: 'Bfrtip',
                buttons: [{
                    extend: 'excelHtml5',
                    footer: true,
                    exportOptions: {
                        columns: [1]
                    }
                }],
                processing: true,
            });
        }
    //
    function hideBtn() {
        $('#submit').hide();
        $('#overlay').show()
    }
    //
    function showBtn() {
        $('#submit').show();
        $('#overlay').hide()
    }
    //::
    function createTable() {
        $("#firstTableDiv").html(`
        <table class="table table-striped datatableu" style="width:100%">
            <thead>
                <tr>
                    <th>S/n</th>
                    <th>Ref No</th>
                    <th>Date(RVP)</th>
                    <th>Amount(RVP)</th>
                    <th>--</th>
                    <th>Amount(MNTA)</th>
                    <th>Date(MNTA)</th>
                    <th>Date Status</th>
                    <th>Amount Status</th>
                    <th>Resolution</th>
                </tr>
            </thead>
            <tbody id="reconcilation"></tbody>
        </table>`)
    }
    
   

    // function create
    async function search() {
        //clearing the table for Reconcile
        $("#firstTableDiv").empty();
        $("#secondTableDiv").empty();
        createTable();
        createTableTwo()
        //
        var fromDate = $('#fromDate').val()
        var toDate = $('#toDate').val()
        var mda = $('#mda_id').val()
        //
        url = `