@extends("agentportal.layouts.layout")

@section("title", trans("message_lang.LBL_NETWORK_REPORT"))

@section("page_style")
<link rel="stylesheet" type="text/css" href="{{ url('dist/assets/plugins/custom/datatables/datatables.bundle.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url('css/select2.min.css') }}">
<style type="text/css">
    .select2-container--default .select2-selection--single {
        min-height: 38px;
        max-height: 38px;
    }
</style>
@endsection

<div id="loading"  style="display:none;">
    <div id="image-loader">
        <img  src="{{ url('img/loading.gif')}}" alt="Loading..." />
    </div>
</div>

@section("content")
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Subheader-->
    <!--end::Subheader-->
    <!--begin::Entry-->
    <div class="d-flex flex-column-fluid">
        <!--begin::Container-->
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <!--begin::Card-->
                    <div class="card card-custom gutter-b example1 example1-compact">
                        <div class="card-header">
                            <h3 class="card-title">
                                {!! trans("message_lang.LBL_NETWORK_REPORT") !!}
                            </h3>
                            <div class="card-toolbar">
                                @hasanyrole('finance back office|tresorerie')
                                    <a href="{{ url('agentportal/summary') }}"class="btn btn-primary font-weight-bolder">{{ trans('message_lang.BTN_BACK') }}</a>
                                @else
                                    @if(request()->has('CU'))
                                        <a href="{{ url()->previous() }}" class="btn btn-primary font-weight-bolder">{{ trans('message_lang.BTN_BACK') }}</a>
                                    @else
                                        <a href="{{ url('agentportal/summary') }}"class="btn btn-primary font-weight-bolder">{{ trans('message_lang.BTN_BACK') }}</a>
                                    @endif
                                @endhasanyrole
                            </div>
                        </div>
                        <!--begin::Form-->
                        <div class="card-body">
                            <!-- countries filter -->
                            <!-- the filter form -->
                            <div class="mb-5">
                                <div class="row">
                                    <!-- countries filter -->
                                    <div class="col-12 col-lg-3">
                                        <select name="countryFilter" id="countryFilter" class="form-control" onchange="countriesFilter()">
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- data limit filter -->
                            <div class="mb-5">
                                <div class="row">
                                    <div class="col-12 col-lg-3">
                                        <div class="d-flex align-items-baseline">
                                            <span class="mr-2">{!! trans('message_lang.DATATABLE_LBL_SHOW') !!}</span>
                                            <span class="mr-2">
                                                <select name="networkLimit" id="networkLimit" class="form-control" onchange="setNetworkEntriesLimit()">
                                                    <option value="25">25</option>
                                                    <option value="50">50</option>
                                                    <option value="100">100</option>
                                                </select>
                                            </span>
                                            <span>{!! trans('message_lang.DATATABLE_LBL_ENTRIES') !!}</span>
                                        </div>
                                    </div>

                                    <div class="col-12 col-lg-4"></div>

                                    <div class="col-12 col-lg-5">
                                        <div class="d-flex align-items-baseline float-right">
                                            <span class="mr-2">{!! trans('message_lang.DATATABLE_LBL_SEARCH') !!}:</span>
                                            <span>
                                                <input type="text" name="searchNetworks" id="searchNetworks" class="form-control">
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!--begin: Datatable-->
                            <div class="mt-4">
                                <table id="datatable" class="table table-bordered grid-table nowrap" style="font-size: 10pt;">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>{!! trans("message_lang.SIDEBAR_LBL_AGENT_NETWORKS") !!}</th>
                                            <th>{!! trans("message_lang.LBL_COUNTRY") !!}</th>
                                            <th>{!! trans("message_lang.LBL_AGENT_NETWORKS") !!}</th>
                                            <th>{!! trans("message_lang.LBL_ACTIONS") !!}</th>
                                        </tr>
                                    </thead>
                                    <tbody id="networks-tbl">
                                        <tr>
                                            <td colspan="5" style="text-align: center">
                                                <span class="spinner"></span>
                                            </td>
                                        </tr>
                                    </tbody>
                                    <tfoot>
                                    </tfoot>
                                </table>
                            </div>
                            <!--end: Datatable-->

                            <!-- table pagination -->
                            <div class="d-flex justify-content-between">
                                <div>
                                    {!! trans('message_lang.DATATABLE_LBL_SHOWING_INFO') !!} <span id="startNEntry"></span> {!! trans('message_lang.DATATABLE_LBL_TO') !!} <span id="endNEntry"></span> {!! trans('message_lang.DATATABLE_LBL_OF') !!} <span id="totalNEntries"></span> {!! trans('message_lang.DATATABLE_LBL_ENTRIES') !!}
                                </div>

                                <!-- pagination links -->
                                <div>
                                    <ul class="pagination" id="networkLinks">
                                    </ul>
                                </div>

                            </div>

                        </div>
                        <!--end::Form-->
                    </div>
                    <!--end::Card-->
                </div>
            </div>
        </div>
        <!--end::Container-->
    </div>
    <!--end::Entry-->
</div>
@endsection

@section("page_vendors")
<script src="{{ url('dist/assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
<script src="{{ url('js/select2.min.js') }}"></script>
@endsection

@section("page_script")
<script type="text/javascript">
    async function sendEntityData(url, data){
        let returnedData = await $.ajax({
            type: "post",
            url: url,
            data: data,
            dataType: "json",
            headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
            },
            success: function(response){
                return response;
            }
        });

        return returnedData;
    }

    let currentPageNumber = 1;

    // get the agent countries and networks
    let networks = @json($networks ?? array());
    let agentCountries = @json($agentCountries ?? array());

    updateNetworksTable(networks);
    updateCountrySelector();

    function updateNetworksTable(networks){
        // get the selected page limit
        const selectedLimit = Number($("#networkLimit").val());

        // get the start and end limits
        const endLim = currentPageNumber * selectedLimit;
        const startLim = endLim - selectedLimit;

        // slice the data according to the limits and update the page
        const newPageData = networks.slice(startLim, endLim);

        let tblStr = ``;

        if(newPageData.length != 0){
            newPageData.forEach((val, index) => {
                tblStr += `<tr>
                                <td>${startLim + index + 1}</td>
                                <td>${val.agent_network_name}</td>
                                <td>${val.name}</td>
                                <td>${val.agent_locations.length}</td>
                                <td>
                                    <a href="/agentportal/networkReport/locationReports/${val.id}" role="button" class="btn btn-primary btn-sm">
                                        {!! trans('message_lang.LBL_LOCATIONS_SUMMARY_REPORTS') !!}
                                    </a>
                                </td>
                            </tr>`;
            })
        } else {
            tblStr = `<tr>
                        <td colspan="5" style="text-align: center">
                            <span>no agent network</span>
                        </td>
                    </tr>`
        }
        $("#networks-tbl").html(tblStr);
        updatePaginationLinks();
    }

    function updateCountrySelector(){
        // initialize the countries selector
        let countriesList = `<option value="">{{ __('message_lang.LBL_SELECT_COUNTRY') }}</option>`;

        // update the selector list with the countries data
        if(agentCountries.length != 0){
            agentCountries.forEach(val => {
                countriesList += `<option value="${val.id}">${val.name}</option>`
            })
        }

        // set the updated countries list on the countries selector
        $("#countryFilter").html(countriesList);
    }

    function searchNetworks(searchData, key) {
        // create and initialize a search result json array
        const shRslt = [];

        // set the search condition
        const regKey = new RegExp(key, 'i');
        searchData.forEach(val => {
            if (regKey.test(val.agent_network_name)) {
                // update the search result
                shRslt.push(val)
            }
        });

        // return the search result
        return shRslt;
    }

    async function sendEntityData(url, data){
        let returnedData = await $.ajax({
            type: "post",
            url: url,
            data: data,
            dataType: "json",
            headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
            },
            success: function(response){
                return response;
            }
        });

        return returnedData;
    }

    // countries filter
    function countriesFilter(){
        // get the selected country
        const selectedCountry = $("#countryFilter").val();

        const data = {
            countryId: selectedCountry
        }

        // submit the data to the filter function
        let url = `/agentportal/networkReport/filterNetwork`;
        sendEntityData(url, data).then(filteredData => {
            // update the local network data
            networks = filteredData;

            // update the table with the filtered data
            updateNetworksTable(filteredData);
        })
    }

    // pagination functions
    function updatePaginationLinks(){

        // get the sected page limit
        const selectedLimit = Number($("#networkLimit").val());
        const networksData = networks.length;

        // calculate the number of pages
        const number_of_pages = Math.ceil(networksData / selectedLimit);
        const linksLimit = number_of_pages < 5 ? number_of_pages : 4;

        // show the pagination list
        const nextPage = currentPageNumber + 1 <= number_of_pages ? currentPageNumber + 1 : number_of_pages;
        const prevPage = currentPageNumber - 1 > 0 ? currentPageNumber - 1 : 1;

        // update the start, end and total entries
        const tmpEndEntries = currentPageNumber * selectedLimit;
        const endEntry = tmpEndEntries > 0 && tmpEndEntries < networksData ? tmpEndEntries : networksData;
        const tmpStartEntries = tmpEndEntries - selectedLimit;
        const startEntry = tmpStartEntries > 0 ? tmpStartEntries : currentPageNumber;

        $("#startNEntry").html(startEntry);
        $("#endNEntry").html(endEntry);
        $("#totalNEntries").html(networksData);

        let pages = `<li class="page-item">
                                    <a onclick="showNetworkPage(${prevPage})" class="page-link">&laquo</a>
                                </li>`;
        for(let i=1; i<=linksLimit; i++){
            pages += `<li class="page-item">
                            <a onclick="showNetworkPage(${i})" class="page-link">${i}</a>
                        </li>`;
        }
        if(number_of_pages > 4){
            pages += `<li class="page-item">
                            <a onclick="showNetworkPage(${number_of_pages})" class="page-link">...${number_of_pages}</a>
                        </li>`
        }
        pages += `<li class="page-item">
                                    <a onclick="showNetworkPage(${nextPage})" class="page-link">&raquo</a>
                                </li>`;
        $("#networkLinks").html(pages);

    }

    function showNetworkPage(newPageNumber){
        // update the current page number and show the new page data
        currentPageNumber = newPageNumber;
        updateNetworksTable(networks);
    }

    function setNetworkEntriesLimit(){
        // get the selected entry amount
        const selectedAmount = Number($("#networkLimit").val());
        const networksLimit = networks.slice(0, selectedAmount);

        // update the transactions table
        updateNetworksTable(networksLimit);
    }

    $(document).ready(() => {
        const searchField = document.getElementById("searchNetworks")
        searchField.addEventListener("input", function(){
            const searchRslt = searchNetworks(networks, searchField.value);
            updateNetworksTable(searchRslt);
        })
    })
</script>
@endsection