@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  :desc="$desc" :pageTitle="$pageTitle"   :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="table-responsive px-3">
                        <table id="datatableu" class="table datatableu" style="width:100%;">
                            <thead>
                                <tr>
                                    <th>{{ __('S/N')}}</th>
                                    <th>Settlement Reference</th>
                                    <th>{{ __('Account Name')}}</th>
                                    <th>{{ __('Account Number')}}</th>
                                    <th>{{ __('Bank')}}</th>
                                    <th>{{ __('Amount Settled')}}</th>
                                    <th>{{ __('Settlement Date')}}</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                        <tbody id="reconcilation">
                        @forelse ($data as $key=> $item)
                        {{-- $passedInv = json_encode($item); --}}
                         <tr>
                             <td>{{$key+1}}</td>
                                <td>{{$item['settlement_ref']}} </td>
                                <td>{{$item['account_name']}} </td>
                                <td>{{$item['account_number']}} </td>
                                <td> {{$item['bank_name']}} </td>
                                <td> {{number_format($item['amount_to_be_settled'],2)}} </td>
                                <td>
                                    @if ($item['settlememt_date'])
                                        {{date('d-m-Y', strtotime($item['settlememt_date']))}}
                                    @else
                                         -
                                    @endif
                                    
                                </td>
                                <td>{!! $item['transfer_status'] ==1 ?  '<span class="badge badge-success">Successful</span>' : '<span class="badge badge-danger">Unpaid </span>'!!}</td>
                            </tr>

                        @empty

                        @endforelse
                        </tbody>
                     
                    </table>
                    </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 = `