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

    <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>{{ __('Agent Management Dashboard') }}</h5>
                            <span>{{ __('Listing of all Agency Agents') }}</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>
        <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">
                            <div wire:ignore 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 of user</option>
                                            <option selected>All</option>
                                            <option>Active</option>
                                            <option>Inactive</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" 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">
                            <div>
                                <h3 class="mb-2"><strong>Agency Agents</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">
                                <a id="addAgentBtn"
                                    style="height:40px; margin-top:-10px; padding: 3px 5px;"
                                    class="btn btn-primary text-white text-center d-flex justify-content-center align-items-center">
                                    Add
                                    New Agent </a>
                            </div>
                        </div>
                        <div class="card-body table-responsive">
                            <table id="agent_table" class="table" style="width:100%;">
                                <thead>
                                    <tr>
                                        <th>S/N</th>
                                        <th>Agent Name</th>
                                        <th>Phone Nos</th>
                                        <th>Email</th>
                                        <th>Revenue Point</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <livewire:agency-agent-new />

        </div>
        <!-- push external js -->
        @push('script')
            @livewireScripts
            <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>

            <!--server side users table script-->
            <script src="{{ asset('js/agency-management.js') }}"></script>
            <script>
                Livewire.on('dismissAddModal', () => {
                    $("#agentModal").modal('hide');
                });

                Livewire.on('dismissModal', () => {
                    $("#editAgentModal").modal('hide');
                });

                $('#addAgentBtn').on('click', function() {
                    $('#agentModal').modal({
                        backdrop: 'static',
                        keyboard: false
                    })
                });
                $(document).on('click', function(e) {
                    let $editBtn = $(e.target);
                    if ($editBtn.is(".editAgentBtn")) {
                    $('#editAgentModal').modal({
                        backdrop: 'static',
                        keyboard: false
                    })
                }
                });
                document.addEventListener('DOMContentLoaded', function() {
                    document.body.classList.add("sidebar-mini");
                    showLoading()
                    // Get Table data
                    async function getData() {
                        let response = await fetch(window.location.origin + "/agency/agents-management-query")

                        if (response.status == 200) {
                            return await response.json()
                        }
                    }

                    getData().then((data) => {
                        loadTable(data)
                        hideLoading()
                    });

                    function loadTable(data) {
                        let index = 1

                        data[0].forEach(item => {
                            // Add properties that are needed for constructing the table that does not
                            // come from the server-side like the S/N represented as index and action buttons
                            // and status button
                            item.index = index++

                            // item.action = `<div class='d-flex flex-column'>

                            //             </div>`

                            item.action = `
                                <div class="dropdown">
                                    <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        View Actions
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                                        <button class='dropdown-item  reset-password' data-key='${item.agentID}' style='margin-right:2px;' title='Reset Agent Password'>
                                                 <i class='fa fa-eraser reset-password'  data-key='${item.agentID}'></i> Reset Agent Password
                                         </button>

                                         <form method='post' action='{{ route('agency.transactions') }}'>
                                            {{ csrf_field() }}
                                            <input name='agents' value='${item.mobile}' type='hidden'/>
                                            <button style='width:100%;' class='dropdown-item' type='submit' title="View Invoices">
                                                <i class='fa fa-eye'></i> View Invoices
                                            </button>
                                        </form>


                                        <button class='dropdown-item  edit-agent editAgentBtn' data-key='${item.agentID}' title='Edit Agent Details'>
                                            <i class='fa fa-pen' data-key='${item.agentID}'></i> Edit Agent Details
                                        </button>

                                        <button class='dropdown-item  clear-token' data-key='${item.agentID}'  title='Clear Device Token'>
                                            <i class='fa fa-spinner clear-token' data-key='${item.agentID}'></i>  Clear Device Token
                                        </button>

                                    </div>
                                </div>
                            `

                            if (item.status == 0) {
                                item.status =
                                    `<span data-key='${item.agentID}' style='cursor:pointer' data-status='${item.status}' class='badge badge-warning badge-sm toggle-status' title='Activate/Unblock Agent'>Deactivate</span>`
                            } else {
                                item.status =
                                    `<span class='badge badge-success toggle-status' style='cursor:pointer' data-status='${item.status}' data-key='${item.agentID}" title='Block or Deactivate Agent'>&nbsp;Activate&nbsp;</span>`
                            }
                        })

                        let table = $("#agent_table").DataTable({
                            "ordering": true,
                            responsive: true,
                            dom: 'Bfrtip',
                            buttons: [{
                                extend: 'excelHtml5',
                                footer: true,
                                exportOptions: {
                                    columns: [0, 1, 2, 3, 4, 5]
                                }
                            }, ],
                            processing: true,
                            data: data[0],
                            columns: [{
                                    data: 'index'
                                },
                                {
                                    data: 'name',
                                },
                                {
                                    data: 'mobile'
                                },
                                {
                                    data: 'email'
                                },
                                {
                                    data: 'revenue_point'
                                },

                                {
                                    data: 'status'
                                },
                                {
                                    data: 'action'
                                }
                            ],
                        });
                    }

                    onCustomEvent('click', '#search-btn', async () => {
                        showLoading()

                        let selectedStatus = $("#status :selected").text()

                        // Destroy the current table to avoid conflict
                        $("#agent_table").DataTable().destroy()
                        let response = await fetch(
                            `${window.location.origin}/agency/agents-management-query?status=${selectedStatus}`
                        )

                        if (response.status == 200) {
                            let data = await response.json()
                            loadTable(data)
                        }

                        hideLoading()
                    });

                    onCustomEvent('click', '.toggle-status', (e) => {
                        const status = parseInt($(e.target).data("status"));
                        const el = parseInt($(e.target).data("key"));
                        const text =
                            status === 1 ?
                            "You want to unblock/activate this user" :
                            "You want to block/deactivate this user";
                        fireSweetAlert(text, "Continue", (agent) => {
                            showLoading();
                            Livewire.emit('toogle_status', agent);
                        }, el)
                    });

                    onCustomEvent('click', '.reset-password', (e) => {
                        const target = parseInt($(e.target).data("key"));
                        const text = "You want reset the agent password"
                        fireSweetAlert(text, "Continue", (agent) => {
                            showLoading();
                            Livewire.emit('reset_password', agent);
                        }, target)
                    });

                    onCustomEvent('click', '.edit-agent', (e) => {
                        const target = parseInt($(e.target).data("key"));
                        Livewire.emit('getEditAgentData', target);
                    });


                    onCustomEvent('click', '.clear-token', (e) => {
                        const target = parseInt($(e.target).data("key"));
                        const text = "You want to clear the agent's device token"
                        fireSweetAlert(text, "Continue", (agent) => {
                            showLoading();
                            Livewire.emit('reset_device_token', agent);
                        }, target)
                    });


                    alertSuccessMsg(() => {
                        $("#agent_table").DataTable().destroy()
                        getData().then((data) => {
                            loadTable(data)
                        });
                    });

                    // alertErrorMsg(() => {

                    // });


                    onCustomEvent('click', '.delete-invoice', (e) => {
                        const invoiceNos = $(e.target).data("key");
                        const text = "Are you sure you want to delete this invoice? This action is irreversible."
                        fireSweetAlert(text, "Continue", (invoice) => {
                            Livewire.emit('delete_invoice', invoice);
                        }, invoiceNos)
                    })
                });
            </script>
        @endpush
    @endsection