@extends('mpClient.layouts.main')

@section('title')
Dashboard
@endsection

@section('content')

<loading :active.sync="isLoading"></loading>

<main>
    <div class="single-col client-dashboard" v-cloak>

        @include('mpClient.common/secondary_header')

        <div class="tab-content">
            <div class="row">
                <div class="col-lg-6">
                    <form action="{{ route('mpClient.dashboard.getReportData', ['panel' => Session::get('panel')]) }}" method="post" id="getReportDataForm"
                    @submit.prevent="getReportData">
                    <div class="row">
                        <div class="col-xl-4 col-sm-6">
                            <div class="form-group select btm-arrow">
                                <label class="control-label">Mystery Program</label>
                                <select class="form-control" name="mystery_program_id" id="mystery_program_id" @change="getFilterClientByMpId" v-model="mystery_program_id" ref="mysteryProgramSelect">
                                    @foreach($mysteryProgramList as $mysteryProgram)
                                        <option value="{{ $mysteryProgram->id }}">{{ $mysteryProgram->scenario_name }}</option>
                                    @endforeach
                                </select>
                                @if($errors->has('mystery_program_id'))
                                <span class="invalid-feedback d-inline">{{ $errors->first('mystery_program_id') }}</span>
                                @endif
                            </div>
                        </div>
                        <div class="col-xl-4 col-sm-6">
                            <div class="form-group select btm-arrow">
                                <label class="control-label">Group By</label>
                                <select class="form-control" name="group_by" id="group_by" v-model="group_by" ref="groupBySelect">
                                    <option value="client" v-if="info_client_user && info_client_user.access_type == 'project_owner'">Industry</option>
                                    <option value="branch">Company</option>
                                </select>
                                @if($errors->has('group_by'))
                                <span class="invalid-feedback d-inline">{{ $errors->first('group_by') }}</span>
                                @endif
                            </div>
                        </div>
                        <div class="col-xl-4 col-sm-6">
                            <div class="form-group">
                                <label class="control-label"></label>
                                <button class="btn btn-em btn-primary-em" style="margin-top: .5rem;">Apply</button>
                            </div>
                        </div>
                    </div>
                    </form>
                </div>
                <div class="col-lg-6">
                    <div class="d-flex mp-statastics bg-white mb-3">
                        <template v-if="info_client_user && info_client_user.access_type == 'project_owner'">
                            <div class="border-left border-right text-center p-2 flex-fill">
                                <span class="medium-font bold">@{{ info_client_count }}</span>
                                <p class="extrasmall-font m-0">Companies</p>
                            </div>
                            <div class="border-right text-center p-2 flex-fill">
                                <span class="medium-font bold">@{{ info_branch_region_count }}</span>
                                <p class="extrasmall-font m-0">Regions</p>
                            </div>
                        </template>
                        <div class="border-right text-center p-2 flex-fill" :class="info_client_user && info_client_user.access_type == 'project_owner' ? '' : 'border-left'">
                            <span class="medium-font bold">@{{ info_branch_count }}</span>
                            <p class="extrasmall-font m-0">Branches</p>
                        </div>
                        <div class="border-right text-center p-2 flex-fill">
                            <span class="medium-font bold info_shoppers_count">@{{ info_shoppers_count }}</span>
                            <p class="extrasmall-font m-0">Shoppers</p>
                        </div>
                        <div class="border-right text-center p-2 flex-fill">
                            <span class="medium-font bold info_branch_visit_count">@{{ info_branch_visit_count }}</span>
                            <p class="extrasmall-font m-0">Branch Visits</p>
                        </div>
                        <div class="border-right text-center p-2 flex-fill">
                            <span class="medium-font bold info_data_point">@{{ info_data_point }}</span>
                            <p class="extrasmall-font m-0">Data Points</p>
                        </div>
                    </div>
                </div>
            </div>

            @include('mpClient.modules.dashboard.tabs.dashboard')
        </div>
    </div>

    @include('mpClient.modules.dashboard.filter_modal')
    @include('mpClient.modules.dashboard.show_empty_data_notification')

</main>
@endsection('content')

@push('pageCss')
<style>
    canvas {
        height: 400px !important;
    }
</style>
<link rel="stylesheet" type="text/css" href="{{ asset('css/vendor/bootstrap.modal.popover.css') }}">
@endpush

@push('pageJs')
{!! JsValidator::formRequest('App\Http\Requests\MpClient\GetReportData', '#getReportDataForm') !!}
<script src="{{ asset('js/vendor/chart.js') }}"></script>
<script>
    function renderDashboardLineGraph() {

        $mpId = $('#mystery_program_id').val();
        $groupBy = $('#group_by').val();
        $clientId = $('#filter_line_client_id').val();
        $startDate = $('#line_start_date').val();
        $endDate = $('#line_end_date').val();
        $dataType = $('#filter_line_data_type').val();
        $dataPointId = $('#filter_line_data_point_id').val();

        app.isLoading = true


        axios.get(getLineGraphDataUrl + '?id=' + $mpId  + '&clientId=' + $clientId+ '&groupBy=' + $groupBy + '&startDate='   + $startDate
                                                    + '&endDate=' + $endDate + '&dataType=' + $dataType + '&dataPointId=' + $dataPointId
                )
        .then(function (response) {

            document.getElementById("dashboardLineChart").style.display = 'flex';
            document.getElementById("dashboardLineChart_loader").style.display = 'none';

            dashLineChart.data.labels = response.data.labels
            dashLineChart.data.datasets = response.data.datasets
            dashLineChart.update(0)

            app.findClientNameById('lineChart', $clientId)
            app.isLoading = false

        });
    }
    function renderDashboardBarGraph() {

        $mpId = $('#mystery_program_id').val();
        $groupBy = $('#group_by').val();
        $clients = $('#filter_bar_client_id').val();
        $startDate = $('#bar_start_date').val();
        $endDate = $('#bar_end_date').val();
        $dataType = $('#filter_bar_data_type').val();
        $dataPointId = $('#filter_bar_data_point_id').val();

        app.isLoading = true

        axios.get(getBarGraphDataUrl + '?id=' + $mpId + '&dataType=' + $dataType  + '&dataPointId=' + $dataPointId + '&groupBy=' + $groupBy
                                                        + '&startDate=' + $startDate   + '&endDate=' + $endDate  + '&clients=' + $clients
                )
        .then(function (response) {

            document.getElementById("dashboardBarChart").style.display = 'flex';
            document.getElementById("dashboardBarChart_loader").style.display = 'none';

            dashBarChart.data.labels = response.data.labels
            dashBarChart.data.datasets = response.data.datasets
            dashBarChart.update(0)

            app.findClientNameById('barChart', $clients)
            app.isLoading = false
        });
    }

    $(document).ready(function() {

        var dashLineChartElement = document.getElementById('dashboardLineChart').getContext('2d');
        document.getElementById("dashboardLineChart").style.display = 'none';
        document.getElementById("dashboardLineChart_loader").style.display = 'flex';
        window.dashLineChart = new Chart(dashLineChartElement, {
            type: 'line',
            data: {
                labels: '',
                datasets: ''
            },
            options: {
                legend: {
                    display: false,
                },
                'maintainAspectRatio': false,
                scales: {
                    xAxes : [{
                        // scaleLabel: {
						// 	display: true,
						// 	labelString: 'Duration'
						// }
                    }],
                    yAxes : [{
                        "ticks":{
                            "beginAtZero":true,
                            "max":100,
                            "stepSize":20},
                        // scaleLabel: {
						// 	display: true,
						// 	labelString: 'OAS Score'
						// }
                    }],
                },
                "responsive":true,
            }
        });

        var dashBarChartElement = document.getElementById('dashboardBarChart').getContext('2d');
        document.getElementById("dashboardBarChart").style.display = 'none';
        document.getElementById("dashboardBarChart_loader").style.display = 'flex';
        window.dashBarChart = new Chart(dashBarChartElement, {
            type: 'bar',
            data: {
                labels: '',
                datasets: ''
            },
            options: {
                'maintainAspectRatio': false,
                legend: {
                    display: false,
                },
                scales: {
                    xAxes : [{
                        // scaleLabel: {
						// 	display: true,
						// 	labelString: 'Data Point'
						// }
                    }],
                    yAxes : [{
                        "ticks":{
                            "beginAtZero":true,
                            "max":100,
                            "stepSize":20},
                        // scaleLabel: {
						// 	display: true,
						// 	labelString: 'OAS Score'
						// }
                    }]
                },
                "responsive":true,
            }
        });

        renderDashboardLineGraph()
        renderDashboardBarGraph()
    });
</script>


<script>
var isMpClientAdmin = '{!! $isMpClientAdmin !!}';
var dateJs = "{{ config('custom.formats.date_js') }}";
var getReportDataUrl = "{{ route('mpClient.dashboard.getReportData', ['panel' => Session::get('panel')]) }}";
var getLineGraphDataUrl = "{{ route('mpClient.dashboard.lineGraphByAjax',['panel' => Session::get('panel')]) }}";
var getBarGraphDataUrl = "{{ route('mpClient.dashboard.barGraphByAjax',['panel' => Session::get('panel')]) }}";
var threeAssessmentAvgUrl = "{{ route('mpClient.dashboard.filter.threeAssessmentAvg',['panel' => Session::get('panel')]) }}";
var getBranchesByClientIdUrl = "{{ route('mpClient.dashboard.filter.getBrancheByClientId',['panel' => Session::get('panel'),'id' => Null]) }}";
var getDataPointByDataTypeUrl = "{{ route('mpClient.dashboard.filter.getDataPointByDataType',['panel' => Session::get('panel')]) }}";
var getClientsByMpIdUrl = "{{ route('mpClient.dashboard.filter.getClientsByMpId',['panel' => Session::get('panel'), 'id' => Null]) }}";

$(document).ready(function() {
    @if(count($mysteryProgramList) == 0)
    $('#mpInfoModal').modal('show');
    @endif
});

@if(Session::has('message'))
    Snackbar.show({
        pos: 'bottom-right',
        text: "{!! session('message') !!}",
        actionText: 'Okay'
    });
@endif
</script>

<script src="{{ asset('js/mpClient/mpClient.js') }}"></script>
<script src="{{ asset('js/vendor/bootstrap.modal.popover.js') }}"></script>
@endpush