@extends('layouts.main')
@section('title', 'Weekly Settlement')
@section('content')
    <!-- push external head elements to head -->
    @push('head')

    <script src = "https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
        <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>
         <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
         <script src="https://cdn.datatables.net/plug-ins/1.10.19/api/sum().js"></script>

    @endpush
    <x-loader/>


    <div class="container-fluid  mt-5">
    	<x-breadcrumb :pageTitle="$pageTitle" :desc="$desc" :iconName="$iconName"/>
       <h6>Filter Results :{{$fromDate}}  - {{$toDate}} </h6>
        <form method="post">
            @csrf
            <div class="row">
                <!-- start and end date -->
                <!-- from date -->
                <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12 form-group">
                    <div class="form-group d-flex">
                        <input type="date"  value="{{$fromDate}}"  class="form-control" name="from_date" required/>
                        <div class="input-group-append">
                            <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>

                <!-- to date -->
                <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12 form-group">
                    <div class="form-group d-flex">
                        <input type="date" name="to_date"  class="form-control datetimepicker-input" value="{{$toDate}}" required/>
                        <div class="input-group-append" >
                            <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">
                    <div class="">
                        <div class="d-flex justify-content-between">
                            <h5>
                                Total: <span id='total_display'></span>
                            </h5>
                            <span class="btn btn-primary" onclick="makePayment({{json_encode($data)}})">
                                Make Transfer Request
                            </span>
                        </div>

                        <div class="alert alert-success my-3" id="success_msg" style="display: none"> Request Logged successfully </div>
                        <div class="alert alert-danger my-3" id="error_msg" style="display: none"> Error Encounter while logging Request </div>
                    </div>
                    {{--  --}}
                    <div class="table-responsive px-3 ">
                        <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>
                                </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'],2)}} </td>
                                <td>{{number_format( ($item['amount'] - ($item['amount'] * 0.015)),2) }} </td>
                            </tr>

                        @empty

                        @endforelse


                        </tbody>
                        <tfoot>
                            <tr>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th id="amount"></th>
                                <th id="acutal_amount"></th>
                            </tr>
                        </tfoot>
                    </table>
                    </div>
                 </div>


            </div>
        </div>


<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add Payment Details </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div>
                <div class="modal-body">
                    <div class="form-group ">
                        <label>Account name</label>
                        <input type="text" class="form-control acc_name" name="acc_name" id="acc_name" readonly />
                    </div>
                    <div class="form-group ">
                        <label>Account Number</label>
                        <input type="text" class="form-control" name="acc_numb" id="acc_numb" readonly />
                    </div>
                    <div class="form-group ">
                        <label>Bank Name</label>
                        <input type="text" class="form-control" name="bank_name" id="bank_name" readonly />
                    </div>
                    <!-- gross_amount -->
                    <div class="form-group ">
                        <label>Gross Amount</label>
                        <input type="text" class="form-control" name="gross_amount" id="gross_amount" readonly />
                    </div>
                    <!-- net_amount -->
                    <div class="form-group">
                        <label>Net Amount</label>
                        <input type="text" class="form-control" name="net_amount" id="net_amount" readonly />
                    </div>
                    <!--  -->
                    <div class="form-group">
                        <label>Fee</label>
                        <input type="text" class="form-control" name="fee" id="fee" readonly />
                    </div>
                    <!--  -->
                    <div class="form-group ">
                        <label>Remark</label>
                        <textarea class="form-control" name="remark" id="remark"></textarea>
                    </div>

                </div>
                <div style="margin-left:15px; padding:5px;">
                    <div id="s_msg" style="display: none;"> </div>
                    <div id="phone_msg" style="display: none;"> </div>
                    <div id="email_msg" style="display: none;"> </div>
                </div>
                <div class="modal-footer">
                    <div id='actionBtn'>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" onclick="submitData()">Add Payment</button>
                    </div>
                    <div id="msg" style="display: none;"> </div>
                </div>
            </div>
        </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/_assets/general_js.js?tx=')}}{{strtotime("now")}}"> </script>


    <script>
        $('#overlay').hide()
        let name = `