@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_TRANSACTION_REPORT") !!}
                            </h3>
                            <div class="card-toolbar">
                                    <a href="{{ url('agentportal/networkReport') }}"class="btn btn-primary font-weight-bolder">{{ trans('message_lang.BTN_BACK') }}</a>
                            </div>
                        </div>
                        <!--begin::Form-->
                        <div class="card-body">
                            <!-- network info -->
                            <div class="mb-4 d-flex justify-content-between">
                                <!-- network summary -->
                                <div>
                                    <div>
                                        <span>
                                            <b>{!! trans('message_lang.LBL_AGENT_NETWORK_NAME') !!}:</b>
                                            <span id="nwName" style="color: red"></span>
                                        </span>
                                    </div>
                                    <div>
                                        <span>
                                            <b>{!! trans('message_lang.LBL_COUNTRY') !!}:</b>
                                            <span id="nwCountry" style="color: red"></span>
                                        </span>
                                    </div>
                                    <div>
                                        <span>
                                            <b>{!! trans('message_lang.LBL_LOCATIONS') !!}:</b>
                                            <span id="nwLocationCount" style="color:red"></span>
                                        </span>
                                    </div>
                                </div>
                                
                                <!-- action buttons -->
                                <div>
                                    <button type="button" class="btn btn-primary" id="csvExportBtn" onclick="exportToCsv()">
                                        {!! trans('message_lang.LBL_EXPORT_TO_CSV') !!}
                                    </button>
                                </div>
                                
                            </div>

                            <!-- the filter form -->
                            <div class="mb-5">
                                <div class="row">
                                    <!-- transaction type -->
                                    <div class="col-12 col-lg-3">
                                        <label for="transactionType">{!! trans("message_lang.LBL_TRANSACTION_TYPE") !!}</label>
                                        <select name="transactionType" id="transactionType" class="form-control" onchange="localFilter()">
                                            <option value="0">All</option>
                                            <option value="Paid">{!! trans("message_lang.LBL_PAID") !!}</option>
                                            <option value="Sent">{!! trans("message_lang.LBL_SENT") !!}</option>
                                        </select>
                                    </div>

                                    <!-- locations -->
                                    <div class="col-12 col-lg-3">
                                        <label for="locations">{!! trans("message_lang.LBL_LOCATION") !!}</label>
                                        <select name="locations" id="locations" class="form-control" onchange="localFilter()">
                                        </select>
                                    </div>

                                    <!-- date form -->
                                    <div class="col-12 col-lg-3">
                                        <label for="dateFrom">{!! trans('message_lang.LBL_FROM_DATE') !!}</label>
                                        <input type="date" name="dateFrom" id="dateFrom" class="form-control" onchange="externalFilter()">
                                    </div>

                                    <!-- date to -->
                                    <div class="col-12 col-lg-3">
                                        <label for="dateTo">{!! trans('message_lang.LBL_TO_DATE') !!}</label>
                                        <input type="date" name="dateTo" id="dateTo" class="form-control" onchange="externalFilter()">
                                    </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="reportLimit" id="reportLimit" class="form-control" onchange="setReportEntriesLimit()">
                                                    <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>

                                    <!-- the search field -->
                                    <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="searchLocalTransactions" id="searchLocalTransactions" class="form-control">
                                            </span>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div class="mb-2">
                                <!--begin: Datatable-->
                                <table id="datatable" class="table table-bordered grid-table nowrap" style="font-size: 10pt;">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>{!! trans("message_lang.LBL_DATE") !!}</th>
                                            <th>{!! trans("message_lang.LBL_REFERENCE") !!}</th>
                                            <th>{!! trans("message_lang.LBL_TRANSACTION_TYPE") !!}</th>
                                            <th>{!! trans("message_lang.LBL_SENDING_AMOUNT") !!}</th>
                                            <th>{!! trans("message_lang.LBL_RECEIVING_AMOUNT") !!}</th>
                                            <th>{!! trans("message_lang.LBL_STATUS") !!}</th>
                                            <th>{!! trans("message_lang.LBL_LOCATION") !!}</th>
                                            <th>{!! trans("message_lang.LBL_SENDER") !!}</th>
                                            <th>{!! trans("message_lang.LBL_BENEFICIARY") !!}</th>
                                            <th>{!! trans("message_lang.LBL_RECEIVING_COUNTRY") !!}</th>
                                        </tr>
                                    </thead>
                                    <tbody id="transactions-tbl">
                                        <tr>
                                            <td colspan="11" style="text-align: center">
                                                <span class="spinner"></span>
                                            </td>
                                        </tr>
                                    </tbody>
                                    <tfoot>
                                        
                                    </tfoot>
                                </table>
                                <!--end: Datatable-->
                            </div>

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

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

                            <form method="POST" action="{{ url('agentportal/networkReport/csvExports') }}" name="form" id="hiddenForm" hidden>
                                @csrf 
                                <input type="date" name="dateFrom" id="fromDate" value="">
                                <input type="date" name="dateFrom" id="toDate" value="">
                            </form>
                            
                        </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">
    let currentPageNumber = 1;
    
    let networkTransactions = @json($locationReport ?? array());
    const networkLocations = @json($locations ?? array());

    updateNetworkInfo();
    updateTransactionsTable(networkTransactions)
    updateNetworkLocationsSelector();


    function updateNetworkInfo(){
        $("#nwName").html(networkLocations[0].agent_network_name);
        $("#nwCountry").html(networkLocations[0].name);
        $("#nwLocationCount").html(networkLocations[0].agent_locations.length);
    }

    function updateNetworkLocationsSelector(){
        const locations = networkLocations[0].agent_locations;
        let localStr = `<option value="0">All</option>`;

        for(let i=0; i<locations.length; i++){
            localStr += `<option value="${locations[i].name}">${locations[i].name}</option>`;
        }
        $("#locations").html(localStr);
    }

    function updateTransactionsTable(networkTransactions){
        // get the sected page limit
        const selectedLimit = Number($("#reportLimit").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 = networkTransactions.slice(startLim, endLim);

        let tblStr = ``;

        if(newPageData.length != 0){
            newPageData.forEach((val, index) => {
                tblStr += `<tr>
                                <td>${startLim + index + 1}</td>
                                <td>${val.paid_at}</td>
                                <td>${val.reference_no}</td>
                                <td>${val.type}</td>
                                <td>${val.sending_currency} ${val.sending_amount}</td>
                                <td>${val.receiving_currency} ${val.receiving_amount}</td>
                                <td>${val.status}</td>
                                <td>${val.agent_location_name}</td>
                                <td>${val.sender_first_name} ${val.sender_last_name}</td>
                                <td>${val.receiver_first_name} ${val.receiver_last_name}</td>
                                <td>${val.receiver_country}</td>
                            </tr>`
            })
        } else {
            tblStr = `<tr>
                        <td colspan="11" style="text-align: center">
                            <span>no transactions report</span>
                        </td>
                    </tr>`;
        }
        $("#transactions-tbl").html(tblStr);
        updatePaginationLinks();
    }

    function localFilter(){
        // get the transaction type and location
        const trans_type = $("#transactionType").val();
        const nw_location = $("#locations").val();

        // filter the data according to the location and transaction type
        let filtered_data = networkTransactions.length != 0 && trans_type != 0 ?
                networkTransactions.filter(val => val.type == trans_type) : networkTransactions;
        // check for transaction type
        filtered_data = filtered_data.length != 0 && nw_location != 0 ?
            filtered_data.filter(val => val.agent_location_name == nw_location) : filtered_data;

        updateTransactionsTable(filtered_data);
    }

    async function externalFilter(){
        // initiate the loading activity
        let spinnerStr = `<tr>
                            <td colspan="8" style="text-align: center">
                                <span class="spinner"></span>
                            </td>
                        </tr>`
        $("#transactions-tbl").html(spinnerStr);

        // get the dates
        const fromDate = $("#dateFrom").val();
        const toDate = $("#dateTo").val();
        const nwId = networkLocations[0].id;

        // set the data
        const filterData = {
            dateFrom: fromDate,
            dateTo: toDate,
            networkId: nwId
        }

        // submit the form data
        const url = '/agentportal/networkReport/reportFilter/filteredReport';
        sendEntityData(url, filterData).then(filteredReport => {
            // update the notwork report data
            networkTransactions = filteredReport;
            updateTransactionsTable(filteredReport);

            // run the local search
            localFilter();
        })
    }

    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;
    }

    // pagination functions 
    function updatePaginationLinks(){

        // get the sected page limit
        const selectedLimit = Number($("#reportLimit").val());
        const transactionsData = networkTransactions.length;

        // calculate the number of pages
        const number_of_pages = Math.ceil(transactionsData / 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 < transactionsData ? tmpEndEntries : transactionsData;
        const tmpStartEntries = tmpEndEntries - selectedLimit;
        const startEntry = tmpStartEntries > 0 ? tmpStartEntries : currentPageNumber;

        $("#startTEntry").html(startEntry);
        $("#endTEntry").html(endEntry);
        $("#totalTEntries").html(transactionsData);

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

    }

    function showTransactionPage(newPageNumber){
        // update the current page number and show the new page data
        currentPageNumber = newPageNumber;
        updateTransactionsTable(networkTransactions);
    }

    function setReportEntriesLimit(){
        // get the selected entry amount
        const selectedAmount = Number($("#reportLimit").val());
        const transactionsLimit = networkTransactions.slice(0, selectedAmount);

        // update the transactions table
        updateTransactionsTable(transactionsLimit);
    }

    // csv export
    async function exportToCsv(){
        
        // get the dates
        const fromDate = $("#dateFrom").val();
        const toDate = $("#dateTo").val();
        const nwId = networkLocations[0].id;

        if(!fromDate) return;

        // initiate the loading activity
        $("#csvExportBtn").prop("disabled", true);

        // set the data
        const exportData = {
            dateFrom: fromDate,
            dateTo: toDate,
            networkId: nwId
        }

        // submit the form data
        const url = 'agentportal/networkReport/csvExports';
        const tstUrl = `agentportal/reports/commission/csvExport`;
        sendEntityData(url, exportData).then(response => {
            // convert the data to csv
            const fileName = '{!! trans("message_lang.LBL_NETWORK_TRANSACTION_REPORT") !!}' + '.csv';
            exportToCsvFile(response, fileName);
            $("#csvExportBtn").prop("disabled", false);
        });
    }


    function searchLocalTransactions(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_location_name) ||
                regKey.test(val.reference_no) ||
                regKey.test(val.receiver_country) ||
                regKey.test(val.sender_country) ||
                regKey.test(val.receiver_first_name) ||
                regKey.test(val.receiver_last_name) ||
                regKey.test(val.sender_first_name) ||
                regKey.test(val.sender_last_name) ||
                regKey.test(val.receiving_amount)
                ) {
                // update the search result
                shRslt.push(val)
            }
        });

        // return the search result
        return shRslt;
    }

    function exportToCsvFile(jsonData, fileName) {
        let csvStr = parseJSONToCSVStr(jsonData);
        let dataUri = 'data:text/csv;charset=utf-8,'+ csvStr;

        let exportFileDefaultName = fileName;

        let linkElement = document.createElement('a');
        linkElement.setAttribute('href', dataUri);
        linkElement.setAttribute('download', exportFileDefaultName);
        linkElement.click();
    }
    

    function parseJSONToCSVStr(jsonData) {
        if(jsonData.length == 0) {
            return '';
        }

        let keys = Object.keys(jsonData[0]);

        let columnDelimiter = ',';
        let lineDelimiter = '\n';

        let csvColumnHeader = keys.join(columnDelimiter);
        let csvStr = csvColumnHeader + lineDelimiter;

        jsonData.forEach(item => {
            keys.forEach((key, index) => {
                if( (index > 0) && (index < keys.length-1) ) {
                    csvStr += columnDelimiter;
                }
                csvStr += item[key];
            });
            csvStr += lineDelimiter;
        });

        return encodeURIComponent(csvStr);;
    }
   
    $(document).ready(function () {
        const searchField = document.getElementById("searchLocalTransactions")
        searchField.addEventListener("input", function(){
            const searchRslt = searchLocalTransactions(networkTransactions, searchField.value);
            updateTransactionsTable(searchRslt);
        })

    });
</script>
@endsection