@extends('layouts.main') 
@section('title', 'Remittance 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') }}"> --}}
        <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 :pageTitle="$pageTitle" :desc="$desc"  :iconName="$iconName"  />
    	
        {{--  --}}
        <div class="row">
            {{--  --}}
            <div class="col-xl-4">
                <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:16px;" class="mb-3">Remittance
                                    <br/>
                                    <sub style="font-size:18px; font-weight:bold;" class="mb-0" id='totalInvAmount'></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'>
                                        0 
                                    </sub>
                                    </p>
                            </div>
                            <div class="col-4 text-right">
                                <i class="fas fa-cube f-30"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{--  --}}
        <div class="row py-5">
            <div class="col-md-12">
                <div class="card p-3">
                    <div class="card py-3"> </div>
                    <div class="card-header d-flex justify-content-between">
                        <h3>Filters: </h3>
                        @can('view_remittance_due')
                        @if (auth()->user()->roleId!=1)
                            <a href="{{route('outstandingRemittances')}}" class="btn btn-primary">Outstanding Remittance</a>    
                        @endif
                        @endcan
                    </div>
                    <div class="card-body">
                        <div  wire:ignore class="form-row">
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label for="">from date</label>
                                    <input type="text" placeholder="dd-mm-yy" class="form-control" id="fromDate">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label for="">to date</label>
                                    <input type="text"  placeholder="dd-mm-yy"  class="form-control"  id="toDate"/>
                                </div>
                            </div>
                        
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label for="">channel</label>
                                    <select  class="select2 form-control"  id="channel">
                                        <option value="all" selected>All</option>
                                        <option value="card">Card</option>
                                        <option value="bank">Bank</option>
                                    </select>
                                </div>
                                </div>
                                 <div class="col-sm-3">
                                     <div class="form-group">
                                    <label for="">status</label>
                                    <select  class="select2 form-control" id="payment_status">
                                        <option value="all" >All</option>
                                        <option value="Paid" selected>Paid</option>
                                        <option value="Unpaid">Unpaid</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-sm-12 d-flex justify-content-end">
                                <button style="width:150px;" type="btn" onclick="searchRemittance()" 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">
                        <h3><strong>Remittances</strong></h3>
                    </div>
                    <div class="card-body">
                        <div id="remmitanceTableWrapper"> </div>
                       
                    </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>
        <!--server side users table script-->
        {{-- <script src="{{ asset('js/custom.js') }}"></script> --}}
        <script src="{{ asset('js/_assets/general_js.js') }}"></script>
        <script>
            $(document).ready(function() {
               $('#overlay').hide()
               document.body.classList.add("sidebar-mini");
            //    $('.select2').select2();
            createRemittanceLisitingTable()
            generalInitDataTable('remittance_table',0,exportTitle,rowsExported,true)
            searchRemittance()
           })
           let rowsExported = [0,1,2,3,4,5,6,7,8,9]
           let name = `