@extends('layouts.main')
@section('page_css')
<style>
.filter-content {
    display: flex;
}
.filter-content .text-left {
    width: 50%;
}
.filter-content .text-right {
    width: 50%;
}
select#dir-filter, select#eng-user-team, select#eng-team, select#job-rev-user, select#job-ajs-user{
    position: absolute;
    width: max-content;
    z-index: 999;
    right: 3%;
}
.calendar .pignose-calendar.pignose-calendar-light.pignose-calendar-default {
    width: auto;
    border: none;
    box-shadow: none;
}
</style>
@endsection

@section('css_file')
<link rel="stylesheet" type="text/css" href="{{$common->getTheamUrl('assets/plugins/custom/pg-calender-master/dist/css/pignose.calendar.min.css')}}">
@endsection

@section('content')
<div class="row">
    <div class="col-lg-8 col-md-8 col-sm-12">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <!--begin::Card-->
                <div class="card card-custom gutter-b">
                    <div class="card-header">
                        <div class="card-title">
                            <h3 class="card-label h6">Engagement Rate
                        </div>
                        <div class="card-toolbar">
                            <div id="eng-rate-range" style="cursor: pointer">
                                <small>from <span class="font-weight-bold font-size-sm"><span id="eng-rate-display"></span> <i class="ki ki-arrow-down icon-sm"></i></span></small>
                                <input type='hidden' class="form-control"  readonly id="eng-rate" value="" />
                            </div>
                            <div class="text-right pl-5">
                                <small><span class="font-weight-bold">Team:</span> <span class="font-weight-bold font-size-sm" style="cursor: pointer"><span id="eng-team-display">Southwind</span> <i class="ki ki-arrow-down icon-sm"></i></span></small> 
                                <select id="eng-team" class="form-control form-control-select" style="display: none">
                                   <option value="0">Southwind</option>
                                   @foreach ($teams as $team)
                                   <option value="{{$team->id}}">{{$team->team_name}}</option>
                                   @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="engagementRate"></div>
                    </div>
                </div>
                <!--end::Card-->
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <!--begin::Card-->
                <div class="card card-custom gutter-b">
                    <div class="card-header">
                        <div class="card-title">
                            <h3 class="card-label h6">Most Engaged Team Members
                        </div>
                        <div class="card-toolbar">
                            <div>
                            <small>for <span data-target="#eng-user-month" data-toggle="datetimepicker" class="font-weight-bold font-size-sm" style="cursor: pointer"><span id="eng-user-month-display"></span> <i class="ki ki-arrow-down icon-sm"></i></span></small>
                            <input type="hidden" value="{{date('Y-m')}}" class="form-control datetimepicker-input" name="eng-user-month" id="eng-user-month" data-toggle="datetimepicker" readonly="" required=""/>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="filter-content mb-2">
                            <div class="text-left">
                                <small><span class="font-weight-bold">Team member: </span><span class="font-weight-bold font-size-sm" style="cursor: pointer"><span id="eng-user-dir-display">Top 10</span> <i class="ki ki-arrow-down icon-sm"></i></span></small> 
                                <select id="dir-filter" name="dir_filter" class="form-control form-control-select" style="display: none">
                                    <option value="desc" selected>Top 10</option>
                                    <option value="asc">Bottom 10</option>
                                </select>
                            </div>
                            <div class="text-right">
                                <small><span class="font-weight-bold">Team:</span> <span class="font-weight-bold font-size-sm" style="cursor: pointer"><span id="eng-user-team-display">Southwind</span> <i class="ki ki-arrow-down icon-sm"></i></span></small> 
                                <select id="eng-user-team" class="form-control form-control-select" style="display: none">
                                   <option value="0">Southwind</option>
                                   @foreach ($teams as $team)
                                   <option value="{{$team->id}}">{{$team->team_name}}</option>
                                   @endforeach
                                </select>
                            </div>
                        </div>
                        <div id="mostActiveUser">
                        </div>
                    </div>
                </div>
                <!--end::Card-->
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12">
                <!--begin::Card-->
                <div class="card card-custom gutter-b">
                    <div class="card-header">
                        <div class="card-title">
                            <h3 class="card-label h6">Most Engaged Franchises
                        </div>
                        <div class="card-toolbar">
                            <small>for <span data-target="#eng-team-month" data-toggle="datetimepicker" class="font-weight-bold font-size-sm" style="cursor: pointer"><span id="eng-team-month-display"></span> <i class="ki ki-arrow-down icon-sm"></i></span></small>
                            <input type="hidden" value="{{date('Y-m')}}" class="form-control datetimepicker-input" name="eng-team-month" id="eng-team-month" data-toggle="datetimepicker" readonly="" required=""/>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="mostEngagedTeam"></div>
                        <div id="mostEngagedTeamName"></div>
                    </div>
                </div>
                <!--end::Card-->
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <!--begin::Card-->
                <div class="card card-custom gutter-b">
                    <div class="card card-custom">
                        <div class="card-body">
                            <div class="calendar"></div>
                        </div>
                    </div>
                    <div class="separator separator-solid"></div>
                    <div class="card card-custom" id="propular-post">
                    </div>
                </div>
                <!--end::Card-->
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-12">
        <div class="card card-custom gutter-b card-stretch">
            <!--begin::Header-->
            <div class="card-header border-0 pt-5">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label font-weight-bolder text-dark">Top Job Revenue</span>
                </h3>
                <div class="card-toolbar">
                    <div>
                        <small>for <span data-target="#job-rev-user-date" data-toggle="datetimepicker" class="font-weight-bold font-size-sm" style="cursor: pointer"><span id="job-rev-user-date-display"></span> <i class="ki ki-arrow-down icon-sm"></i></span></small>
                        <input type="hidden" value="{{date('Y-m-d')}}" class="form-control datetimepicker-input" name="job-rev-user-date" id="job-rev-user-date" data-toggle="datetimepicker" readonly="" required=""/>
                    </div>
                    <div class="text-right pl-5">
                        <small>
                            <span class="font-weight-bold">Team:</span> 
                            <span class="font-weight-bold font-size-sm" style="cursor: pointer">
                                <span id="job-rev-user-display">Southwind</span> <i class="ki ki-arrow-down icon-sm"></i>
                            </span>
                        </small> 
                        <select id="job-rev-user" class="form-control form-control-select" style="display: none">
                           <option value="0">Southwind</option>
                           @foreach ($teams as $team)
                           <option value="{{$team->id}}">{{$team->team_name}}</option>
                           @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <!--end::Header-->
            <!--begin::Body-->
            <div class="card-body pt-2 pb-0">
                <!--begin::Table-->
                <div class="table-responsive">
                    <table class="table table-borderless table-vertical-center" id="job-rev-user__table">
                        <thead>
                            <tr>
                                <th class="p-0 w-50px"></th>
                                <th class="p-0">Team Member</th>
                                <th class="text-right">Jobs</th>
                                <th class="text-right pr-0">Revenue</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <!--end::table-->
            </div>
            <!--begin::Body-->
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-12">
        <div class="card card-custom gutter-b card-stretch">
            <!--begin::Header-->
            <div class="card-header border-0 pt-5">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label font-weight-bolder text-dark">Top Job AJS</span>
                </h3>
                <div class="card-toolbar">
                    <div>
                        <small>for <span data-target="#job-ajs-user-date" data-toggle="datetimepicker" class="font-weight-bold font-size-sm" style="cursor: pointer"><span id="job-ajs-user-date-display"></span> <i class="ki ki-arrow-down icon-sm"></i></span></small>
                        <input type="hidden" value="{{date('Y-m-d')}}" class="form-control datetimepicker-input" name="job-ajs-user-date" id="job-ajs-user-date" data-toggle="datetimepicker" readonly="" required=""/>
                    </div>
                    <div class="text-right pl-5">                        
                        <small>
                            <span class="font-weight-bold">Team:</span> 
                            <span class="font-weight-bold font-size-sm" style="cursor: pointer">
                                <span id="job-ajs-user-display">Southwind</span> <i class="ki ki-arrow-down icon-sm"></i>
                            </span>
                        </small> 
                        <select id="job-ajs-user" class="form-control form-control-select" style="display: none">
                           <option value="0">Southwind</option>
                           @foreach ($teams as $team)
                           <option value="{{$team->id}}">{{$team->team_name}}</option>
                           @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <!--end::Header-->
            <!--begin::Body-->
            <div class="card-body pt-2 pb-0">
                <!--begin::Table-->
                <div class="table-responsive">
                    <table class="table table-borderless table-vertical-center" id="job-ajs-user__table">
                        <thead>
                            <tr>
                                <th class="p-0 w-50px"></th>
                                <th class="p-0">Team Member</th>
                                <th class="text-right">Jobs</th>
                                <th class="text-right pr-0">RESI AJS</th>
                            </tr>
                        </thead>
                        <tbody>
                        
                        </tbody>
                    </table>
                </div>
                <!--end::table-->
            </div>
            <!--begin::Body-->
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12">
        <div class="card card-custom gutter-b card-stretch">
            <!--begin::Header-->
            <div class="card-header border-0 pt-5">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label font-weight-bolder text-dark">Metrics</span>
                </h3>
                <div class="card-toolbar">

                    {{-- <div>
                        <small>for <span data-target="#job-metrics-user-date" data-toggle="datetimepicker" class="font-weight-bold font-size-sm" style="cursor: pointer"><span id="job-metrics-user-date-display"></span> <i class="ki ki-arrow-down icon-sm"></i></span></small>
                        <input type="hidden" value="{{date('Y-m-d')}}" class="form-control datetimepicker-input" name="job-metrics-user-date" id="job-metrics-user-date" data-toggle="datetimepicker" readonly="" required=""/>
                    </div> --}}

                    <div id="metrics-rate-range" style="cursor: pointer">
                        <small>for <span class="font-weight-bold font-size-sm"><span id="metrics-rate-display"></span> <i class="ki ki-arrow-down icon-sm"></i></span></small>
                        <input type='hidden' class="form-control"  readonly id="metrics-rate" value="" />
                    </div>

                    <div class="text-right pl-5">
                        <small>
                            <span class="font-weight-bold">Team:</span> 
                            <span class="font-weight-bold font-size-sm" style="cursor: pointer">
                                <span id="job-metrics-user-display">Southwind</span> <i class="ki ki-arrow-down icon-sm"></i>
                            </span>
                        </small> 
                        <select id="job-metrics-user" class="form-control form-control-select" style="display: none">
                           <option value="0">Southwind</option>
                           @foreach ($teams as $team)
                           <option value="{{$team->id}}">{{$team->team_name}}</option>
                           @endforeach
                        </select>
                    </div>

                </div>
            </div>
            <!--end::Header-->
            <!--begin::Body-->
            <div class="card-body pt-2 pb-0">
                <!--begin::Table-->
                <div class="table-responsive">
                    <table class="table table-borderless table-vertical-center" id="job-metrics-user__table">
                        <thead>
                            <tr>
                                <th class="p-0 w-50px"></th>
                                <th class="p-0">Team Member</th>
                                <th class="text-right">Team Name</th>
                                <th class="text-right">Revenue</th>
                                <th class="text-right">Ajs</th>
                                <th class="text-right pr-0">RPH</th>
                                <th class="text-right p-0">Labor %</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <!--end::table-->
            </div>
            <!--begin::Body-->
        </div>
    </div>
</div>

@endsection

@section('js_file')
<script src="https://www.gstatic.com/charts/loader.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="{{$common->getTheamUrl('assets/plugins/custom/pg-calender-master/dist/js/pignose.calendar.full.min.js')}}" type="text/javascript"></script>
@endsection

@section('page_js')
    <script>
        let mostActiveTeam ='';
        let mostActiveTeamAll ='';
        var calender = $('.calendar');

        function drawActiveTeamChart() {
            var data = google.visualization.arrayToDataTable(mostActiveTeam);

            var view = new google.visualization.DataView(data);
            view.setColumns([0, 1,
                            { calc: getValueAt.bind(undefined, 3),
                                type: "string",
                                role: "annotation" },
                            2]);
            var rowHeight = data.getNumberOfRows() * 80;                    
            var options = {
                width:'auto',
                bar: {groupWidth: "20%"},
                legend: { position: "none" },
                chartArea: {
                    width: '100%',
                    },
                hAxis:{gridlines:{color: '#e1e1e1'}}
            };
            var chart = new google.visualization.BarChart(document.getElementById("mostEngagedTeam"));
            chart.draw(view, options);
        }
        function getValueAt(column, dataTable, row) {
            return dataTable.getFormattedValue(row, column);
        }

        function getEngagemenScoreChart() {
            var team_id = $('#team_id').val();
            var date = $('#date').val();

            $.ajax({
                url: "{{route('bi.ajax.engagement.chart')}}",
                type: 'get',
                dataType: 'json',
                data: {team_id:team_id, date:date, type:'communicationChart'},                    
                success: function (response) {
                    console.log(response);
                    var parseData = response;

                    google.charts.load('current', {'packages':['bar']});
                    google.charts.setOnLoadCallback(drawCommunicationLineChart);
                    parseData.communicationChart[0][2] = JSON.parse(parseData.communicationChart[0][2]);
                    function drawCommunicationLineChart() {
                        var data = google.visualization.arrayToDataTable(parseData.communicationChart);
                        var options = {
                            title: 'Total Posts',
                            height:300,
                            legend: { position: "none" },
                        };

                        var chart = new google.visualization.ColumnChart(document.getElementById('communicationbarchart'));
                        chart.draw(data, options);

                    }
                },
                error: function (response) {
                    //toastr.error("An error occurred");
                    getEngagemenScoreChart()
                }
            });

            $.ajax({
                url: "{{route('bi.ajax.engagement.chart')}}",
                type: 'get',
                dataType: 'json',
                data: {team_id:team_id, date:date, type:'communicationViewBarChart'},                    
                success: function (response) {
                    //console.log(response);
                    var parseData = response;
                    
                    //BAR CHART
                    google.charts.load("current", {packages:["corechart"]});
                    google.charts.setOnLoadCallback(communicationViewBarChart);

                    parseData.communicationViewBarChart[0][2] = JSON.parse(parseData.communicationViewBarChart[0][2]);
                    function communicationViewBarChart() {
                        var data = google.visualization.arrayToDataTable(parseData.communicationViewBarChart);

                        var view = new google.visualization.DataView(data);
                        view.setColumns([0, 1,{
                            calc: "stringify",
                            sourceColumn: 1,
                            type: "string",
                            role: "annotation" },
                        2]);

                        var options = {
                            title: 'Views & Likes',
                            width:'auto',
                            bar: {groupWidth: "50%"},
                            legend: { position: "none" },
                        };
                        var chart = new google.visualization.BarChart(document.getElementById("communicationviewbarchart"));
                        chart.draw(view, options);
                    }

                },
                error: function (response) {
                    toastr.error("An error occurred");
                }
            });
        }

        function getEngagementUserChart(){
            var month = $('#eng-user-month').val();
            var dir = $('#dir-filter').val();
            let team_id = $('#eng-user-team').val();
            $.ajax({
                url: "{{route('bi.ajax.engagement.chart')}}",
                type: 'get',
                dataType: 'json',
                data: {month:month, dir:dir, team_id:team_id, type:'mostActiveUser'},  
                beforeSend: function() {
                    $('#mostActiveUser').html('');
                    $('#mostActiveUser').html('<div class="spinner spinner-center"></div>');
                },                  
                success: function (response) {
                    $('#mostActiveUser').html('');
                    $('#mostActiveUser').html(response);
                },
                error: function (response) {
                    //toastr.error("An error occurred");
                    getEngagementUserChart()
                }
            });
        }

        function getEngagementTeamChart(){
            var month = $('#eng-team-month').val();
            $.ajax({
                url: "{{route('bi.ajax.engagement.chart')}}",
                type: 'get',
                dataType: 'json',
                data: {month:month, type:'mostActiveTeam'},  
                beforeSend: function() {
                    $('#mostEngagedTeam').html('');
                    $('#mostEngagedTeamName').html('');
                    $('#mostEngagedTeam').html('<div class="spinner spinner-center"></div>');
                },                  
                success: function (response) {
                    $('#mostEngagedTeam').html('');
                    $('#mostEngagedTeamName').html(response.html);
                    mostActiveTeamAll = response.mostActiveTeam;
                    mostActiveTeam = response.mostActiveTeam.slice(0, 11);                    
                    google.charts.load("current", {packages:["corechart"]});
                    google.charts.setOnLoadCallback(drawActiveTeamChart);
                    mostActiveTeam[0][2] = JSON.parse(mostActiveTeam[0][2]); 
                    mostActiveTeam[0][3] = JSON.parse(mostActiveTeam[0][3]);
                    
                },
                error: function (response) {
                    //toastr.error("An error occurred");
                    getEngagementTeamChart()
                }
            });

        }

        function getEngagementRateChart(){
            let month = $('#eng-rate').val() 
            let range = month.split(' - ');
            let team_id = $('#eng-team').val();
            $('#eng-rate-display').html(moment(range[0]).format('MMMM YYYY')+ ' to '+moment(range[1]).format('MMMM YYYY'))
            $.ajax({
                url: "{{route('bi.ajax.engagement.chart')}}",
                type: 'get',
                dataType: 'json',
                data: {month:month, team_id:team_id, type:'engagementRate'},  
                beforeSend: function() {
                    $('#engagementRate').html('');
                    $('#engagementRate').html('<div class="spinner spinner-center"></div>');
                },                  
                success: function (response) {
                    $('#engagementRate').html('');
                    let data = [];
                    let category = [];
                    $.each(response.engagementRate, function(index, value) {
                        data.push(value.totalEngagement);
                        category.push(moment(value.month).format('MMM YYYY'));
                    });
                    const apexChart = "#engagementRate";
                    var options = {
                        series: [{
                            name: "Engagement Rate",
                            data: data
                        }],
                        chart: {
                            height: 300,
                            type: 'line',
                            zoom: {
                                enabled: false
                            },
                            toolbar:{
                                show: false
                            }
                        },
                        dataLabels: { 	
                            enabled: false
                        },
                        stroke: {
                            curve: 'smooth'
                        },
                        xaxis: {
                            categories: category,
                        },
                        yaxis: {
                            show: false
                        },
                        colors: ['#6993FF']
                    };

                    var chart = new ApexCharts(document.querySelector(apexChart), options);
                    chart.render();
                },
                error: function (response) {
                    //toastr.error("An error occurred");
                    getEngagementRateChart();
                }
            });
        }

        function getTopJobRevenueUser(){
            let date = $('#job-rev-user-date').val();
            let team_id = $('#job-rev-user').val();
            $.ajax({
                url: "{{route('bi.ajax.job')}}",
                type: 'get',
                dataType: 'json',
                data: {date:date, team_id:team_id, type:'revenue'},  
                beforeSend: function() {
                    $('#job-rev-user__table tbody').html('');
                    $('#job-rev-user__table tbody').html('<div class="spinner spinner-center"></div>');
                },                  
                success: function (response) {
                    $('#job-rev-user__table tbody').html('');
                    $('#job-rev-user__table tbody').html(response);
                },
                error: function (response) {
                    getTopJobRevenueUser();
                    //toastr.error("An error occurred");
                }
            });
        }

        function getTopJobAjsUser(){
            let date = $('#job-rev-user-date').val();
            let team_id = $('#job-ajs-user').val();
            $.ajax({
                url: "{{route('bi.ajax.job')}}",
                type: 'get',
                dataType: 'json',
                data: {date:date, team_id:team_id, type:'ajs'},  
                beforeSend: function() {
                    $('#job-ajs-user__table tbody').html('');
                    $('#job-ajs-user__table tbody').html('<div class="spinner spinner-center"></div>');
                },                  
                success: function (response) {
                    $('#job-ajs-user__table tbody').html('');
                    $('#job-ajs-user__table tbody').html(response);
                },
                error: function (response) {
                    getTopJobAjsUser();
                    //toastr.error("An error occurred");
                }
            });
        }

        function getUserMetrics(){

            let date = $('#metrics-rate').val() 
            let range = date.split('to');
            $('#metrics-rate-display').html(moment(range[0]).format('MM/DD/YYYY')+ ' to '+moment(range[1]).format('MM/DD/YYYY'))

            let team_id = $('#job-metrics-user').val();
            $.ajax({
                url: "{{route('metrics.for.user')}}",
                type: 'get',
                dataType: 'json',
                data: {date:date, team_id:team_id},  
                beforeSend: function() {
                    $('#job-metrics-user__table tbody').html('');
                    $('#job-metrics-user__table tbody').html('<div class="spinner spinner-center"></div>');
                },                  
                success: function (response) {
                    $('#job-metrics-user__table tbody').html('');
                    $('#job-metrics-user__table tbody').html(response);
                },
                error: function (response) {
                    getUserMetrics();
                    //toastr.error("An error occurred");
                }
            });
        }

        $(document).ready(function() {
            
            google.charts.load('current', {packages: ['corechart']});
            
           //Active User
            $('#eng-user-month').datetimepicker({
                format: 'YYYY-MM'
            })
            $('#eng-user-month-display').html(moment($('#eng-user-month').val()).format('MMMM YYYY'));
            getEngagementUserChart();            
            $('#eng-user-month').on('change.datetimepicker', function (e) {
                getEngagementUserChart();
                $('#eng-user-month-display').html(moment($('#eng-user-month').val()).format('MMMM YYYY'));
            });

            //Active Team
            $('#eng-team-month').datetimepicker({
                format: 'YYYY-MM'
            })
            $('#eng-team-month-display').html(moment($('#eng-team-month').val()).format('MMMM YYYY'));
            google.charts.setOnLoadCallback(getEngagementTeamChart);           
            $('#eng-team-month').on('change.datetimepicker', function (e) {
                getEngagementTeamChart();
                $('#eng-team-month-display').html(moment($('#eng-team-month').val()).format('MMMM YYYY'));
            });

            // predefined ranges
            var start = moment().subtract(150, 'days');
            var end = moment();
            $('#eng-rate').val( start.format('YYYY-MM') + ' - ' + end.format('YYYY-MM'));
            // Ranege
            $('#eng-rate-range').daterangepicker({
                buttonClasses: ' btn',
                applyClass: 'btn-primary',
                cancelClass: 'btn-secondary',
                startDate: start,
                endDate: end,
                locale: {
                    format: 'YYYY-MM'
                }
            }, function(start, end, label) {
               $('#eng-rate').val( start.format('YYYY-MM') + ' - ' + end.format('YYYY-MM'));               
               getEngagementRateChart();
            });
            getEngagementRateChart();

            $("#eng-user-dir-display").on("click",function(){
                var se=$("#dir-filter");
                se.toggle();
                se[0].size=2;
            });
            $("#dir-filter").on("change",function(){
                var se=$(this);
                se.hide();
                $("#eng-user-dir-display").html($("#dir-filter option:selected").text());
                getEngagementUserChart();
            });

            $("#eng-user-team-display").on("click",function(){
                var se=$("#eng-user-team");
                se.toggle();
                se[0].size=10;
            });
            $("#eng-user-team").on("change",function(){
                var se=$(this);
                se.hide();
                $("#eng-user-team-display").html($("#eng-user-team option:selected").text());
                getEngagementUserChart();
            });

            $("#eng-team-display").on("click",function(){
                var se=$("#eng-team");
                se.toggle();
                se[0].size=10;
            });
            $("#eng-team").on("change",function(){
                var se=$(this);
                se.hide();
                $("#eng-team-display").html($("#eng-team option:selected").text());
                getEngagementRateChart();
            });


            //METRICS CODE START

            // predefined ranges
            var start = moment();
            var end = moment();

            $('#metrics-rate').val(moment().format('MM/DD/YYYY') + ' to ' + moment().format('MM/DD/YYYY'));
            
            // Ranege
            $('#metrics-rate-range').daterangepicker({
                buttonClasses: ' btn',
                applyClass: 'btn-primary',
                cancelClass: 'btn-secondary',
                startDate: start,
                endDate: end,
                locale: {
                    format: 'MM/DD/YYYY'
                }
            }, function(start, end, label) {
               $('#metrics-rate').val( start.format('MM/DD/YYYY') + ' to ' + end.format('MM/DD/YYYY'));               
               getUserMetrics();
            });
            getUserMetrics();
           

            //---------------------------------------------------//

            $("#job-metrics-user-display").on("click",function(){
                var se=$("#job-metrics-user");
                se.toggle();
                se[0].size=10;
            });
            $("#job-metrics-user").on("change",function(){
                var se=$(this);
                se.hide();
                $("#job-metrics-user-display").html($("#job-metrics-user option:selected").text());
                getUserMetrics();
            });                      
            $('#job-metrics-user-date').datetimepicker({
                format: 'YYYY-MM-DD'
            })
            $('#job-metrics-user-date-display').html(moment($('#job-metrics-user-date').val()).format('DD MMMM YYYY'));
            $('#job-metrics-user-date').on('change.datetimepicker', function (e) {
                getUserMetrics();
                $('#job-metrics-user-date-display').html(moment($('#job-metrics-user-date').val()).format('DD MMMM YYYY'));
            });
            getUserMetrics();

            //METRICS CODE END

            //JOB REVENUE 
            $("#job-rev-user-display").on("click",function(){
                var se=$("#job-rev-user");
                se.toggle();
                se[0].size=10;
            });
            $("#job-rev-user").on("change",function(){
                var se=$(this);
                se.hide();
                $("#job-rev-user-display").html($("#job-rev-user option:selected").text());
                getTopJobRevenueUser();
            });                      
            $('#job-rev-user-date').datetimepicker({
                format: 'YYYY-MM-DD'
            })
            $('#job-rev-user-date-display').html(moment($('#job-rev-user-date').val()).format('DD MMMM YYYY'));
            $('#job-rev-user-date').on('change.datetimepicker', function (e) {
                getTopJobRevenueUser();
                $('#job-rev-user-date-display').html(moment($('#job-rev-user-date').val()).format('DD MMMM YYYY'));
            });
            getTopJobRevenueUser();  

            //JOB AJS
            $("#job-ajs-user-display").on("click",function(){
                var se=$("#job-ajs-user");
                se.toggle();
                se[0].size=10;
            });
            $("#job-ajs-user").on("change",function(){
                var se=$(this);
                se.hide();
                $("#job-ajs-user-display").html($("#job-ajs-user option:selected").text());
                getTopJobAjsUser();
            });
            $('#job-ajs-user-date').datetimepicker({
                format: 'YYYY-MM-DD'
            })
            $('#job-ajs-user-date-display').html(moment($('#job-ajs-user-date').val()).format('DD MMMM YYYY'));
            $('#job-ajs-user-date').on('change.datetimepicker', function (e) {
                getTopJobAjsUser();
                $('#job-ajs-user-date-display').html(moment($('#job-ajs-user-date').val()).format('DD MMMM YYYY'));
            });
            getTopJobAjsUser();
            
            $('body').on('click','#show-more',function(){
                var txt = $("#show-more-div").is(':visible') ? 'More' : 'Less';
                if($("#show-more-div").is(':visible')){
                    mostActiveTeam = mostActiveTeamAll.slice(0, 11);
                }else{
                    mostActiveTeam = mostActiveTeamAll;
                }    
                              
                google.charts.load("current", {packages:["corechart"]});
                google.charts.setOnLoadCallback(drawActiveTeamChart);
                $("#show-more").text(txt);
                $('#show-more-div').slideToggle();
            })

            $('body').tooltip({
                selector: '[data-toggle=tooltip]'
            });

            getPosts(moment().year(),moment().month()+1);
        });

        $(document).mouseup(function(e) 
        {
            var container = $(".form-control-select");
            // if the target of the click isn't the container nor a descendant of the container
            if (!container.is(e.target) && container.has(e.target).length === 0) 
            {
                container.hide();
            }
        });

        function getPosts(year,month){
            let defaultDate = moment(year+'-'+month);
            $.ajax({
                url: "{{route('bi.ajax.post')}}",
                type: 'get',
                dataType: 'json',
                data: {month:month, year:year},  
                beforeSend: function() {
                    $('#propular-post').html('<div class="spinner spinner-center"></div>');
                },                  
                success: function (response) {
                    $('#propular-post').html(response.html);
                    calender.pignoseCalendar({
                        date: defaultDate,
                        schedules: response.postDate,
                        scheduleOptions: {
                            colors: response.postColor
                        },
                        next: function(info, context) {
                            getPosts(info.year , info.month);
                        },
                        prev: function(info, context) {
                            getPosts(info.year , info.month);
                        },
                        select: onDateClickHandler
                    });
                    
                },
                error: function (response) {
                    toastr.error("An error occurred");
                }
            });
            
        }
        function onDateClickHandler(date, obj) {    
            var $calendar = obj.calendar;                
            if(date[0] !== null) {
                date = date[0].format('YYYY-MM-DD');
                $.ajax({
                    url: "{{route('bi.ajax.post.byDate')}}",
                    type: 'get',
                    dataType: 'json',
                    data: {date:date},  
                    beforeSend: function() {
                        $('#propular-post').html('<div class="spinner spinner-center"></div>');
                    },                  
                    success: function (response) {
                        $('#propular-post').html(response.html);
                    },
                    error: function (response) {
                        toastr.error("An error occurred");
                    }
                });
            }    
        }
    </script>
@endsection