@extends('layouts.main') 
@section('title', 'Settlement details')
@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;
            }
        </style>
    @endpush
    <x-loader/>
    <div class="container-fluid">
    	<div class="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-title">
                        <i class="ik ik-users bg-blue"></i>
                        <div class="d-inline">
                            <h5>{{__('Settlement Details') }} </h5>
                            <span>{{ __('Listing of all Settlement details')}}</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <nav class="breadcrumb-container" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{route('dashboard')}}"><i class="ik ik-home"></i></a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{ route('dashboard') }}">{{ __('Dashboard')}}</a>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        {{-- end of header --}}
        {{-- start of filter --}}
        <div class="row">
             <div class="col-md-12">
                <div class="card p-3">
                    <div class="card-header d-flex justify-content-between">
                        <h3>Filters:{{$fromDate}} </h3>
                    </div>
                    <div class="card-body">
                       
                         <div class="form-row">
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <input type="date" class="form-control" id="fromDate" value="{{$fromDate}}" />
                                </div>
                            </div>
                            {{--  --}}
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <input type="date" class="form-control" id="toDate" value="{{$toDate}}">
                                 </div>
                            </div>
                            {{-- MDA --}}
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <select class="select2 form-control" id="mdaId">
                                        @if (is_array($mdas))
                                        {{--  Client is an administrator. Just render all MDAS--}} 
                                            <option value="0"> Bauchi </option>
                                            @forelse ($mdas  as $mda)
                                                <option value="{{ $mda->name  }}" :key={{ $mda->name }}>{{ $mda->name }}</option>
                                            @empty
                                            <option value="">No MDA available</option>
                                            @endforelse
                                        @else
                                        {{-- Client is not an administrator. Just render client's MDA --}}
                                            {{-- <option value="{{ $mdas->name  }}" :key={{ $mdas->id }}>{{ $mdas->name }}></option> --}}
                                        @endif
                                        
                                    </select>
                                </div>
                            </div>
                            {{--  --}}
                        </div>
                        <div class="form-row">
                            <div class="col-sm-12 d-flex justify-content-end">
                                <button style="width:150px;" type="btn" 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">
                    </div>
                    <div class="card-body table-responsive">
                        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="pills-paystack-tab" data-toggle="pill" href="#pills-paystack" role="tab" aria-controls="pills-paystack" 
                            aria-selected="true">Paystack</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="pills-collegepay-tab" data-toggle="pill" href="#pills-collegepay" role="tab" aria-controls="pills-collegepay" aria-selected="false">
                                CollegePay
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="pills-paydirect-tab" data-toggle="pill" href="#pills-paydirect" role="tab" aria-controls="pills-paydirect" aria-selected="false">
                                PayDirect
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" id="pills-nibbs-tab" data-toggle="pill" href="#pills-nibbs" role="tab" aria-controls="pills-nibbs" aria-selected="false">
                                Nibbs
                            </a>
                          </li>
                          <li class="nav-item">
                                <a class="nav-link" id="pills-remitta-tab" data-toggle="pill" href="#pills-remitta" role="tab" aria-controls="pills-remitta" aria-selected="false">
                                    Remitta
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content" id="pills-tabContent">
                            {{-- paystack --}}
                            <div class="tab-pane fade show active" id="pills-paystack" role="tabpanel" aria-labelledby="pills-paystack-tab">
                                <table id="paystack" class="table" style="width:100%;">
                                    <thead>
                                        <tr>
                                            <tr>
                                            <th>S/N</th>
                                            <th>Account Name</th>
                                            <th>Account Number</th>
                                            <th>Bank</th>
                                            <th>Amount Settled(₦)</th>
                                            <th>Date</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                            {{-- collegepay --}}
                            <div class="tab-pane fade" id="pills-collegepay" role="tabpanel" aria-labelledby="pills-collegepay-tab">
                                <table id="collegepay" class="table" style="width:100%;">
                                    <thead>
                                        <tr>
                                            <tr>
                                            <th>S/N</th>
                                            <th>Account Name</th>
                                            <th>Account Number</th>
                                            <th>Bank</th>
                                            <th>Amount Settled (₦)</th>
                                            <th>Date Settled</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                            {{-- paydirect --}}
                            <div class="tab-pane fade" id="pills-paydirect" role="tabpanel" aria-labelledby="pills-paydirect-tab">
                               <table id="paydirect" class="table" style="width:100%;">
                                    <thead>
                                        <tr>
                                            <tr>
                                            <th>S/N</th>
                                            <th>Account Name</th>
                                            <th>Account Number</th>
                                            <th>Bank</th>
                                            <th>Amount Settled (₦)</th>
                                            <th>Date Settled</th>
                                            <th>Date Range</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                            {{-- nibbs --}}
                            <div class="tab-pane fade" id="pills-nibbs" role="tabpanel" aria-labelledby="pills-nibbs-tab">
                               <table id="nibss" class="table" style="width:100%;">
                                    <thead>
                                        <tr>
                                            <tr>
                                            <th>S/N</th>
                                            <th>Account Name</th>
                                            <th>Account Number</th>
                                            <th>Bank</th>
                                            <th>Amount Settled (₦)</th>
                                            <th>Date Settled</th>
                                            <th>Date Range</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                            {{-- remitta --}}
                             <div class="tab-pane fade" id="pills-remitta" role="tabpanel" aria-labelledby="pills-remitta-tab">
                               <table id="remitta" class="table" style="width:100%;">
                                    <thead>
                                        <tr>
                                            <tr>
                                            <th>S/N</th>
                                            <th>Account Name</th>
                                            <th>Account Number</th>
                                            <th>Bank</th>
                                            <th>Amount Settled (₦)</th>
                                            <th>Date</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                            {{--  --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    {{--  --}}
    @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/datedropper/datedropper.min.js') }}"></script>
        <script src="{{ asset('js/form-picker.js') }}"></script>
        <script src="{{ asset('js/custom.js') }}"></script>
        <script src="{{ asset('js/settlement_details.js') }}"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                // Initialize select2
                $('#overlay').hide()
                initializeSelect2();
                initializeSettlementDatataTable('paystack', []);
                initializeSettlementDatataTable('collegepay', []);
                initializeSettlementDatataTable('paydirect', []);
                initializeSettlementDatataTable('nibss', []);
                initializeSettlementDatataTable('remitta', []);
                
                getResult()
            
            });

            const getResult = async () => {
                $('#overlay').show()
                const fromDate = $('#fromDate').val()
                const toDate = $('#toDate').val()
                const mdaId = $('#mdaId').val()
                const data = {
                    fromDate,
                    toDate,
                    mdaId
                }
                const url = window.location.href

                const res = await newpostReq(url,data,'')
                // console.log(res)

                if(res.status==='success'){
                    reInitializeDataTable('paystack', res.data.paystack);
                    reInitializeDataTable('collegepay', res.data.collegepay);
                    reInitializeDataTable('paydirect', res.data.paydirect);
                    reInitializeDataTable('nibss', res.data.nibss);
                    reInitializeDataTable('remitta', res.data.remitta);
                    $('#overlay').hide()
                }else{
                    $('#overlay').hide()
                    // fireSwalErrorAlert(res.mesaage);
                }
            }
        </script>
    @endpush
@endsection