@extends('layouts.main')
@section('title', 'Agent Management')
@section('content')
    <!-- push external head elements to head -->
    @push('head')
    <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>
    @endpush

    <div class="container-fluid">
        <x-breadcrumb :pageTitle="$pageTitle" :desc="$desc" :iconName="$iconName"/>
        <div>
            <div class="d-none" id="loaderEl">
                <x-loader />
            </div>

        <div class="row">
        <div class="col-md-12">
            <div class="card p-3">
                <div class="card-header d-flex justify-content-between">
                    <h3>Filters: </h3>
                </div>
                <div class="card-body">
                    <form action="{{ route('agents_report') }}" method="GET">
                        <div class="form-row">
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <select class="select2 form-control" name="status" id="status">
                                        <option value="">Select status</option>
                                        <option value="all" {{ $status == 'all' ? 'selected' : '' }}>All</option>
                                        <option value="active" {{ $status == 'active' ? 'selected' : '' }}>Active</option>
                                        <option value="inactive" {{ $status == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <input name="fromDate" value="{{$fromDate}}" id="fromDate" type="text" class="form-control" placeholder="From Date">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <input name="toDate" value="{{$toDate}}" id="toDate" type="text" class="form-control" placeholder="To Date">
                                </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-sm-12 d-flex justify-content-end">
                                <button style="width:150px;" type="submit" class="btn btn-primary" id="search-btn"><i class="fa fa-search"></i> Search </button>
                            </div>
                        </div>
                    </form>
                </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">
                            <div>
                                <h3 class="mb-2"><strong>Agency Reports </strong></h3>
                                <div class="d-flex" id="filter-wrapper">

                                </div>
                            </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 style="height:40px;" class="d-flex justify-content-between align-items-center gap-2">
                                <a href="{{ route('agents_out_rem', ['status' => $status, 'fromDate' => $fromDate, 'toDate' => $toDate]) }}" class="btn btn-primary text-white text-center mr-2">
                                    Outstanding Remittances
                                </a>
                                <a href="" onclick="makePayment({{json_encode($agents)}})" class="btn btn-primary text-white text-center">
                                    Transfer
                                </a>
                            </div>
                        </div>
                        <div class="card-body table-responsive">
                            <table id="agent_table" class="table agent_table" style="width:100%;">
                                <thead>
                                    <tr>
                                        <th>S/N</th>
                                        <th>Agent Name</th>
                                        <th>Phone No</th>
                                        <th>Email</th>
                                        <th>Account Name</th>
                                        <th>Account Number</th>
                                        <th>Bank Name</th>
                                        <th>No of Transaction</th>
                                        <th>Total Paid</th>
                                        <th>Commission Earned</th>
                                    </tr>
                                </thead>
                                <tbody>
                                @foreach($agents as $agent)
                                <tr>
                                    <td>{{$loop->iteration}}</td>
                                    <td>{{$agent['name']}}</td>
                                    <td>{{$agent['mobile']}}</td>
                                    <td>{{$agent['email']}}</td>
                                    <td>{{$agent['account_name']}}</td>
                                    <td>{{$agent['account_number']}}</td>
                                    <td>{{$agent['bank']}}</td>
                                    <td>{{number_format($agent['no_of_transactions'])}}</td>
                                    <td>{{number_format($agent['total_paid'],2)}}</td>
                                    <td>{{number_format($agent['amount'],2)}}</td>
                                </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <livewire:agency-agent-new />

        </div>
        <!-- push external js -->
        @push('script')

        <script src="{{ asset('plugins/DataTables/datatables.min.js') }}"></script>
        <script src="{{ asset('js/_assets/general_js.js') }}"></script>
        <script>

            let settlemnent_url = `{{$merchant_settlement_url}}`

            $(document).ready(function() {
                document.body.classList.add("sidebar-mini");
                generalInitDataTable('agent_table', 0, '', [0, 1, 2, 3, 4, 5, 6,7,8,9], true)
            })

            const  makePayment = async (data) =>{
            // console.log(data)
            $('#overlay').show()
            const payLoad = {
                'account_breakdown' : data,
                'isAgent' : true
            }

            const res =  await  postWithToken(settlemnent_url,'',payLoad)
            if(res.status==='success'){
                $('#success_msg').show()
            }
            //
            else{
                $('#error_msg').show()
            }
            $('#overlay').hide()
        }

        </script>
        @endpush
    @endsection