@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_out_rem') }}" 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 Outstanding Remittances</strong></h3>
                                <div class="d-flex" id="filter-wrapper">

                                </div>
                            </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>Outstanding Remittance</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>{{number_format($agent['outstanding_remittance'],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>
            $(document).ready(function() {
                document.body.classList.add("sidebar-mini");
                generalInitDataTable('agent_table', 0, '', [0, 1, 2, 3, 4], true)
            })

        </script>
        @endpush
    @endsection