@extends('layouts.main')
@section('title', 'Performance Report')
@section('content')
    <!-- push external head elements to head -->
    @push('head')
        <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 id="loaderEl">
            <x-loader/>
        </div>
    	<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>{{__('Performance Report') }} </h5>
                            <span>{{ __('Track performance metrics of system resources')}}</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 class="form-row" >
            <div class="col-md-12">
                <div class="card p-3">
                    <div class="card-header d-flex justify-content-between">
                        <h3>Select Metrics to Show: </h3>
                    </div>
                    {{-- first card --}}
                    <x-metric-card :agents="$agents" :mdas="$mdas"/>

                    <div class="form-row p-3" style="margin: -20px 0 -20px 0;">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <div class="d-flex align-items-center" style="height:40px;">
                                    <label class="d-block mr-2" for="complete-payment"> Compare  metrics</label>
                                    <label class="switch">
                                        <input id="compare" name="compare" type="checkbox">
                                        <span class="slider round"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-12">
                            <x-metric-card :id="'compare-card'" :agents="$agents" :mdas="$mdas" :name="'compare'" :hide="true" />
                        </div>
                        {{-- <div class="col-md-4" >
                            <x-metric-card :id="'compare-card-1'" :agents="$agents" :mdas="$mdas" :name="'compare'" :hide="true" />
                        </div>
                        <div class="col-md-4">
                            <x-metric-card :id="'compare-card-2'" :agents="$agents" :mdas="$mdas" :name="'compare'" :hide="true" />
                        </div>  --}}

                    </div>
                    <button type="button" id="fetchReport" class="btn btn-lg btn-primary my-2">Fetch Report</button>
                </div>
            </div>
        </div>
        {{--  --}}


        {{-- result goes heare --}}
        <div class="row" id="collections" style="display:none;">

            <div class="col-md-6" id="summary_wrapper">
                <div class="card p-3">
                    <div class="card-header">
                          <h6 id="summary-title"></h6>
                    </div>
                    <div class="card-body table-responsive">
                       <table id="summaryTable" class="table" style="width:100%;">
                            <thead>
                                <tr>
                                    <th>Collection</th>
                                    <th>Account</th>
                                    <th>No. of Transactions</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-md-6" id="compare_summary_wrapper">
                <div class="card p-3">
                    <div class="card-header">
                        <h6 id="cmpSummary-title"></h6>
                    </div>
                    <div class="card-body table-responsive">
                       <table id="compareSummaryTable" class="table" style="width:100%;">
                            <thead>
                                <tr>
                                    <th>Collection</th>
                                    <th>Account</th>
                                    <th>No. of Transactions</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
         <!-- MONTHLY PERFORMANCE -->
        <div class="row hidden-row" style="display:none">
             <div class="col-md-12">
                <div class="card p-3">
                    <div class="card-header d-flex flex-column">
                        <h6 id="mp-title"></h6>
                        <div id="mp-collection"></div>
                    </div>
                    <div class="card-body table-responsive">
                        <div class="row">
                            <div class="col-sm-12 mb-4">
                                <!--    DAILY PERFORMANCE AMOUNT     -->
                                <div class="chart">
                                    <canvas id="barChartDPA" style="height:300px"></canvas>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <!--    DAILY PERFORMANCE TRANSACTIONS     -->
                                <div class="chart">
                                    <canvas id="barChartDP" style="height:300px"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- QUARTER PERFORMANCE -->
        <div class="row hidden-row" style="display:none">
             <div class="col-md-12">
                <div class="card p-3">
                    <div class="card-header d-flex flex-column">
                        <h6 id="qp-title"></h6>
                        <div id="qp-collection"></div>
                    </div>
                    <div class="card-body table-responsive">
                        <div class="row">
                            <div class="col-sm-12 mb-4">
                                <!--    WEEKLY PERFORMANCE AMOUNT     -->
                                <div class="chart">
                                    <canvas id="barChartWPA" style="height:300px"></canvas>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                 <!--    WEEKLY PERFORMANCE TRANSACTIONS     -->
                                <div class="chart">
                                    <canvas id="barChartWP" style="height:300px"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
         <!-- YEAR PERFORMANCE -->
        <div class="row hidden-row" style="display:none">
             <div class="col-md-12">
                <div class="card p-3">
                    <div class="card-header d-flex flex-column">
                         <h6 id="yp-title"></h6>
                        <div id="yp-collection"></div>
                    </div>
                    <div class="card-body table-responsive">
                        <div class="row">
                            <div class="col-sm-12 mb-4">
                                 <!--    MONTHLY PERFORMANCE AMOUNT    -->
                                <div class="chart">
                                    <canvas id="barChartMPA" style="height:300px"></canvas>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <!--    MONTHLY PERFORMANCE TRANSACTIONS    -->
                                <div class="chart">
                                    <canvas id="barChartMP" style="height:300px"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- push external js -->
    @push('script')
        <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> --}}
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
        {{-- <script src="{{ asset('plugins/chartist/dist/chartist.min.js') }}"></script> --}}
        <script src="{{ asset('js/currency.min.js') }}"></script>
        <!--server side users table script-->
        <script src="{{ asset('js/performance-chart.js') }}"></script>
        <script src="{{ asset('js/custom.js') }}"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                document.body.classList.add("sidebar-mini");
                // Hide loading
                hideLoading();
                // Initialize select2
                initializeSelect2();

                // $("#compare_mda").select2({
                //     maximumSelectionLength: 3
                // });

                initializePerformanceSummary("summaryTable", []);
                initializePerformanceSummary("compareSummaryTable", []);

                const is_compare = (e)=> e.target.name.split('_')[0] === "compare";

                const targetName = (e)=> {
                    const elName = e.target.name;
                    // const targetName = is_compare(e) ? `compare_${elName}`: `${elName}`;
                    return elName;
                }

                const showMetricEl = (e)=> {
                    const targetElName = e.target.value;

                    const domEls =
                        is_compare(e)
                        ?  {
                            mda: "compare_mda_box",
                            agent: "compare_agent_box",
                            email: "compare_email_box",
                            phone: "compare_phone_box",
                            revenue_points: "comapre_points_box",
                        }
                        :{
                            mda: "mda_box",
                            agent: "agent_box",
                            email: "email_box",
                            phone: "phone_box",
                            revenue_points: "points_box",
                        }
                    Object.values(domEls).forEach((wrapper)=> {
                        $(`#${wrapper}`).hide();
                    });

                    if(targetElName){
                        $(`#${domEls[targetElName]}`).show();
                    }
                }

                onCustomEvent('change', ".category", (e)=> showMetricEl(e));

                onCustomEvent('change', ".mda", async (e)=> {
                    const targetName  = is_compare(e) ? "compare_points" : "points";

                    $(`#${targetName}`).html("");

                    $(`#${targetName}`).append("<option value=''>Select revenue points ...</option>");

                    const mda = e.target.value;
                    const url = `/revenue/mda/${mda}/revenue_points`;
                    const response = await getRequest(url);
                    const { msg = null } = response;
                    if(!msg && response.data) {
                        response.data.forEach((res)=> {
                            $(`#${targetName}`).append($('<option/>', {
                                value: res.id,
                                text: res.name
                            }));
                        });

                        $(`#${targetName}_box`).show();
                    }
                });





                onCustomEvent('change', ".agent", (e)=> {
                    const targetElName = targetName(e);
                    const text = $(`#${targetElName}`).find(":selected").text().split(" ");
                    const textLen = text.length;
                    document.getElementById(`${is_compare(e) ? `compare_email`:`email`}`).value = text[textLen-1];
                    document.getElementById(`${is_compare(e) ? `compare_phone`:`phone`}`).value =  text[textLen-2];
                });




                // show/hide compare card
                onCustomEvent('change', '#compare', (e)=> {
                    $('#compare-card').toggleClass('d-none');
                    $('#compare-card-1').toggleClass('d-none');
                    $('#compare-card-2').toggleClass('d-none');
                });

                onCustomEvent('click', '#fetchReport', async (e)=> {

                    showLoading();

                    const selectors = [
                        "mda",
                        "agent",
                        "year",
                        "month",
                        "quarter",
                        "points",
                        "category",
                        "email",
                        "phone"
                    ];

                    const data = {};

                    const compare = {};

                    const compareIsChecked = $('#compare').is(':checked') ? true: false;

                    selectors.forEach((selector)=> {
                        data[selector] = $(`#${selector}`).val() || null;
                        if(compareIsChecked && !["year","month","quarter"].includes(selector)){
                            compare[`${selector}`] = $(`#compare_${selector}`).val() || null;
                        }
                    });

                    if(!data["mda"] && !data["agent"] && !data["email"] && !data["phone"]) {
                        fireSwalErrorAlert("You have not selected any system resource (MDA, Agent, Email or Phone)");
                        return hideLoading();
                    }

                    if(compareIsChecked && !compare["category"]) {
                        fireSwalErrorAlert("You have not selected compared category");
                        return hideLoading();
                    }

                    if(compareIsChecked && !compare["mda"] && !compare["agent"] && !compare["email"] && !compare["phone"]) {
                        fireSwalErrorAlert("You have not selected compared resource (MDA, Agent, Email or Phone)");
                        return hideLoading();
                    }

                    showdataTableLoadingIcon('summaryTable');

                    showdataTableLoadingIcon('compareSummaryTable');

                    if(Object.keys(compare).length !== 0) data.compare = compare;

                    // console.log(data);

                    // console.log(data)

                    const res = await postRequest(window.location.href, data);

                   renderPerformanceResult(res, data);

                   return hideLoading();

                });

            });
        </script>
    @endpush
@endsection