@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">
                            <div>
                                <h3 class="mb-2"><strong>Agency Reports </strong></h3>
                                <div class="d-flex" id="filter-wrapper">

                                </div>
                            </div>
                            <div style="height:40px;" class="info-wrapper d-flex justify-content-between align-items-center add-button">

                            </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>No of Transaction</th>
                                    <th>Total Paid</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($items as $item)
                                    <tr>
                                        <td>{{$loop->iteration}}</td>
                                        <td>{{$item['account_code']}}</td>
                                        <td>{{$item['bank']}}</td>
                                        <td>{{$item['account_name']}}</td>
                                        <td>{{$item['account_number']}}</td>
                                        <td>{{$item['account_number']}}</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>
                $(document).ready(function() {
                    document.body.classList.add("sidebar-mini");
                    generalInitDataTable('agent_table', 0, '', [0, 1, 2, 3, 4, 5, 6], true)
                })

            </script>
    @endpush
@endsection