@extends('layouts.master')
@section('content')
    <style>.avg-state .col{padding: 0px 0px 20px 0px}
        .Strength-val{padding-top: 12px; padding-bottom: 12px}
        .avg-state .col strong{
            display: block;
            background-color: #fbfbfb;
            color: #282828;
            padding: 8px 4px; margin-bottom: 23px}

        .lg-box{display: block;
            background-color: #fbfbfb;
            color: #282828;
            padding: 4px 4px 4px 15px; margin-left: -15px; margin-right: -15px
        }
        .heading-sm {
            font-size: 16px;
        }
        .heading-sm:before {
            height: 2px; width: 8px; top: 7px;}

        #wrapper #content-wrapper{background-color: #fff; padding-top: 0}
        .fullscreen-body #wrapper #content-wrapper{padding-top: 0}
        .fullscreen-body .sidebarblue{display: none}
        .fullscreen-body .container {max-width: 100%;}
        @media (max-width: 1440px){
            .fullscreen-body #wrapper #content-wrapper {padding-left: 15px;}
        }
        .expand-btn{float: right; margin-left: 20px; margin-top: -3px; color: #0038ba}
        .nosqu{
            font-family: 'Poppins', sans-serif;
            line-height: 1;
            font-size: 45px;
            font-weight: 800;
            color: #ececec;  position: absolute; right: 85px; top: 5px
        }
        .ml-30{margin-left: 30px!important}
        .mr-15{margin-right: 15px!important}
        .fullscreen-body #wrapper {height: 100% !important;}
        .dashboard-date {
            width: auto !important;
        }
    </style>
    <div id="blureEffct" class="container">
        <div class="row mt-1 mb-0">
            <div class="col-lg-6 col-md-6 col-sm-6">
                <h2 class="_head01">MONTHLY SALEs <span> ANALYSIS</span></h2>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6">
                <a onclick="toggleFullScreen()" ontouchstart="toggleFullScreen()" href="#" class="expand-btn"><i class="fa fa-expand"></i></a>
                <div class="dashboard-date" style="margin-top:-10px;margin-right:0">
                    <input type="text" id="datepicker" class="form-control" placeholder="" value="">
                    <i class="fa fa-angle-down"></i>
                </div>
                <div class="dashboard-date" style="margin-top:-10px;">
                    <select id="sale_type" onchange="saletype()" class="form-control" value="Sole">
                        <option value="0" title="">General Sale</option>
                        <option value="1">Company Sale</option>
                        <option value="2">Territory Sale</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="header-tabs">
                    <div class="row">
                        <div class="col">





                            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                <a class="primary-monthly-tabs  nav-item nav-link active" id="nav-national-tab" data-toggle="tab" href="#nav-national" role="tab"
                                   aria-controls="nav-national" aria-selected="false">National</a>
                                <a class="primary-monthly-tabs  nav-item nav-link" id="nav-region-tab" data-toggle="tab" href="#nav-region" role="tab"
                                   aria-controls="nav-region" aria-selected="false">Region</a>
                                <a class="primary-monthly-tabs  nav-item nav-link" id="nav-zone-tab" data-toggle="tab" href="#nav-zone" role="tab"
                                   aria-controls="nav-zone" aria-selected="false">Zone</a>
                                <a class="primary-monthly-tabs  nav-item nav-link" id="nav-territory-tab" data-toggle="tab" href="#nav-territory" role="tab"
                                   aria-controls="nav-territory" aria-selected="false">Territory</a>
                                <a class="primary-monthly-tabs  nav-item nav-link" id="nav-distributors-tab" data-toggle="tab" href="#nav-distributors" role="tab"
                                   aria-controls="nav-distributors" aria-selected="false">Distributors</a>
                                <a class="primary-monthly-tabs  nav-item nav-link" id="nav-products-tab" data-toggle="tab" href="#nav-products" role="tab"
                                   aria-controls="nav-products" aria-selected="false">Products</a>
                            </div>
                        </div>

                        <div class="col-auto pl-0">
                            <div class="dashboard-date">
                                <input type="text" id="datepicker" class="form-control" placeholder="">
                                <i class="fa fa-angle-down"></i>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="tab-content" id="nav-tabContent">

                    <div class="tab-pane fade show active" id="nav-national" role="tabpanel" aria-labelledby="nav-national-tab">
                        @include('Dashboards.MonthlyPrimaryBooking.monthly-booking.national');
                    </div>

                    <div class="tab-pane fade" id="nav-region" role="tabpanel" aria-labelledby="nav-region-tab">
                        @include('Dashboards.MonthlyPrimaryBooking.monthly-booking.national');
                    </div>

                    <div class="tab-pane fade" id="nav-zone" role="tabpanel" aria-labelledby="nav-zone-tab">
                        @include('Dashboards.MonthlyPrimaryBooking.monthly-booking.national');
                    </div>


                    <div class="tab-pane fade" id="nav-territory" role="tabpanel" aria-labelledby="nav-territory-tab">
                        @include('Dashboards.MonthlyPrimaryBooking.monthly-booking.national');
                    </div>

                    <div class="tab-pane fade" id="nav-distributors" role="tabpanel" aria-labelledby="nav-distributors-tab">
                        @include('Dashboards.MonthlyPrimaryBooking.monthly-booking.national');
                    </div>

                    <div class="tab-pane fade" id="nav-products" role="tabpanel" aria-labelledby="nav-products-tab">
                        @include('Dashboards.MonthlyPrimaryBooking.monthly-booking.national');
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script>
        var tab = '#nav-national ';
        $(document).on('click','.primary-monthly-tabs',function () {
            var thistab = "#"+$(this).attr('id');
            if($.trim(thistab) ==  $.trim(tab)){

            }
            tab = thistab+"  ";
        });
        //API:: primary-dashboard-monthly-booked-sales-api
        var data = {
            datasets: [{
                data: [1435],
                backgroundColor: ["#0038ba"],
                label: '' // for legend
            }],
            labels: ["General Trade"]
        };
        var chart1;
        chart1 = new Chart($(tab+"#ZoneSales"), {
            data: {},
            type: 'bar',
            options: {
                tooltips: {
                    bodyFontFamily: 'Rationale',
                    backgroundColor: '#282828',
                    titleFontColor: '#fff',
                    caretSize: 5,
                    cornerRadius: 2,
                    bodyFontSize:20,
                    //remove label colorbox from tooltips
                    custom: function(tooltip) {
                        if (!tooltip) return;
                        tooltip.displayColors = false;
                    },

                },
                legend: {
                    display: false,
                },
                plugins: {
                    labels: {
                        // render 'label', 'value', 'percentage', 'image' or custom function, default is 'percentage'
                        render: 'image',

                        // precision for percentage, default is 0
                        precision: 0,
                        // identifies whether or not labels of value 0 are displayed, default is false
                        showZero: true,
                        // font style, default is defaultFontStyle
                        fontStyle: 'normal',
                        // font family, default is defaultFontFamily
                        fontFamily: "'Rationale'",
                        // draw text shadows under labels, default is false
                        textShadow: true,
                        // text shadow intensity, default is 6
                        shadowBlur: 5,
                        // text shadow X offset, default is 3
                        shadowOffsetX: -2,
                        // text shadow Y offset, default is 3
                        shadowOffsetY: 2,
                        // text shadow color, default is 'rgba(0,0,0,0.3)'
                        shadowColor: 'rgba(0,0,0,0.40)',
                        // draw label in arc, default is false
                        // bar chart ignores this
                        // arc: true,
                        // position to draw label, available value is 'default', 'border' and 'outside'
                        // bar chart ignores this
                        // default is 'default'
                        // draw label even it's overlap, default is true
                        // bar chart ignores this
                        overlap: true,
                        // show the real calculated percentages from the values and don't apply the additional logic to fit the percentages to 100 in total, default is false
                        showActualPercentages: true,
                        // set images when `render` is 'image'
                        images: [
                            {
                                src: '',
                                width: 16,
                                height: 16
                            }
                        ],
                        // add padding when position is `outside`
                        // default is 2
                        outsidePadding: 4,
                        // add margin of text when position is `outside` or `border`
                        // default is 2
                        textMargin: 4
                    }
                }
            }
        });
        function monthly_booked_sale(sale_type,month,year){
            var apiData;
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content'),
                },
                data:{
                    'sale_type':sale_type,
                    'month':month,
                    'year':year
                },
                type: 'POST',
                url: '{{ URL::to('/primary-dashboard-monthly-booked-sales-api') }}', // This is what I have updated
            })
                .done(function(msg) {
                    monthly_booking_trends(sale_type,month,year);
                    apiData = JSON.parse(msg);
                    var     val = '';
                    val   =   addCommas(apiData.booked_sales.total_booked_sale.toFixed(2))+' <small>CTNs</small>';
                    $(tab+'#total-amount').html(val);
                    val         =    `${ Number(apiData.booked_sales.growth) > 0 ? '<i class="fa fa-long-arrow-alt-up"></i>':'<span class="text-danger"><i class="fa fa-long-arrow-alt-down"></i></span>' } <span>${apiData.booked_sales.growth}</span>`;
                    $(tab+'#growth').html(val);
                    val = addCommas(apiData.booked_sales.national_targets.toFixed(2)) + ' <small>CTNs</small>';
                    $(tab+'#national_targets').html(val);
                    val = addCommas(apiData.booked_sales.zonal_targets.toFixed(2)) + ' <small>CTNs</small>';
                    $(tab+'#zonal_targets').html(val);
                    val = apiData.booked_sales.total_booked_sale==0 || apiData.booked_sales.national_targets==0 ? '0.00%':addCommas(parseFloat((apiData.booked_sales.total_booked_sale/apiData.booked_sales.national_targets)*100).toFixed(2))+'%';
                    $(tab+'#national_targets_ach').html(val);
                    val = apiData.booked_sales.total_booked_sale==0 || apiData.booked_sales.zonal_targets==0 ? '0.00%':addCommas(parseFloat((apiData.booked_sales.total_booked_sale/apiData.booked_sales.zonal_targets)*100).toFixed(2))+'%';
                    $(tab+'#zonal_targets_ach').html(val);
                    val = apiData.booked_sales.town_info.active_town==0 || apiData.booked_sales.town_info.total_town==0 ? '0.00%':addCommas(parseFloat((apiData.booked_sales.town_info.active_town/apiData.booked_sales.town_info.total_town)*100).toFixed(2))+'%';
                    $(tab+'#national_coverage').html(val);
                    val = addCommas(apiData.booked_sales.per_capta.toFixed(4));
                    $(tab+'#per_capta').html(val);
                    val = addCommas(apiData.booked_sales.town_info.total_town);
                    $(tab+'#total_town').html(val);
                    val = addCommas(apiData.booked_sales.town_info.active_town);
                    $(tab+'#active_town').html(val);
                    val = addCommas(apiData.booked_sales.town_info.total_town-apiData.booked_sales.town_info.active_town);
                    $(tab+'#inactive_town').html(val);
                    val = addCommas(parseFloat((apiData.booked_sales.town_info.active_town/apiData.booked_sales.town_info.total_town)*100).toFixed(2))+'%';
                    $(tab+'#towns_coverage').html(val);


                    chart1.data=apiData.booked_sales.zonal_sales_data;
                    chart1.update();



                    //top 5 Zones
                    $(tab+"#top_5_zones").empty();
                    $(tab+"#top_5_zones").append(`<h2 class="card-heading heading-sm ml-30 mr-15 w-100">Top 5 <span> Zones</span> <a href="#" class="view-all float-right">View All <i class="fa fa-angle-right"></i></a></h2>`);
                    var c_i = 0;
                    if(typeof apiData.booked_sales.top_zones !== "undefined" && apiData.booked_sales.top_zones.length>0)
                    apiData.booked_sales.top_zones.forEach(element=>{
                        c_i++;
                        var net_avg =   element['contribution'].toFixed(2);//element['total_tarqet'] == 0 || element['total_qty_sold'] ==0 ?0:parseFloat((element['total_qty_sold']/element['total_tarqet'])*100).toFixed(2);
                        $(tab+"#top_5_zones").append(`
                                                            <div class="col-12 mt-5 PB-5 border-bottom">
                                                                <div class="row">
                                                                    <div class="col-12"><div class="nosqu">0${c_i}</div><span class="head-font font16"><strong>${element['area_name']}</strong></span></div>
                                                                    <div class="col-12"><span class="head-font">Region: ${element['region_name']} <span class="progressValue">${net_avg}%</span></span></div>
                                                                </div>
                                                                <div class="progress">
                                                                    <div class="progress-bar" aria-valuenow="${net_avg}" aria-valuemin="0" aria-valuemax="100" style="width: ${net_avg}%" role="progressbar"> <span class="sr-only">${net_avg}% Complete (success)</span> </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col font14">Target: <span class="font-digit">${addCommas(parseFloat(element['total_tarqet']).toFixed(2))} <small>CTNs</small></span></div>
                                                                    <div class="col font14 text-right">Net Sale: <span class="font-digit">${addCommas(element['total_qty_sold'].toFixed(2))}  <small>CTNS</small></span></div>
                                                                </div>
                                                            </div>
                                                        `);
                    });

                    $(tab+"#provisional_sale_trend").empty();
                    var index = 0;
                    if(typeof apiData.booked_sales.provincials !== "undefined" &&  apiData.booked_sales.provincials.length>0)
                    apiData.booked_sales.provincials.forEach(element=>{
                        index++;
                        $(tab+"#provisional_sale_trend").append(`
                                                            <div class="col ${apiData.booked_sales.provincials.length != index? 'border-right-0':''}  font14"><strong>${element['name']}</strong><span>${addCommas(element['qty'])} <small>CTNs</small></span></div>
                                                        `);
                    });

                    $(tab+"#town_tier_sale_trend").empty();

                    var index = 0;
                    if(typeof apiData.booked_sales.citytypes !== "undefined" &&  apiData.booked_sales.citytypes.length>0)
                    apiData.booked_sales.citytypes.forEach(element=>{
                        index++;
                        $(tab+"#town_tier_sale_trend").append(`
                                                            <div class="col ${apiData.booked_sales.citytypes.length != index? 'border-right-0':''} font14"><strong>${element['name']}</strong><span>${addCommas(element['qty'])} <small>CTNs</small></span></div>
                                                        `);
                    });


                    //top 5 Zones
                    $(tab+"#top_5_towns").empty();
                    var c_i = 0;
                    if(typeof apiData.booked_sales.top_zones !== "undefined" &&  apiData.booked_sales.top_zones.length>0)
                    apiData.booked_sales.top_towns.forEach(element=>{
                        c_i++;
                        var net_avg =   element['contribution'].toFixed(2);//element['total_bkd_qty_sold'] == 0 || element['total_qty_sold'] ==0 ?0:parseFloat((element['total_qty_sold']/element['total_bkd_qty_sold'])*100).toFixed(2);
                        $(tab+"#top_5_towns").append(`
                                                            <div class="col-12 mt-5 PB-5 border-bottom">
                                                                <div class="row">
                                                                    <div class="col-12"><div class="nosqu">${c_i}</div><span class="head-font font14"><strong>${element['city_name']}</strong></span></div>
                                                                    <div class="col-12"><span class="head-font">Region: ${element['region_name']} <span class="progressValue">${net_avg}%</span></span></div>
                                                                </div>
                                                                <div class="progress" style="margin-top: 3px; margin-bottom: 3px">
                                                                    <div class="progress-bar" aria-valuenow="${net_avg}" aria-valuemin="0" aria-valuemax="100" style="width: ${net_avg}%" role="progressbar"> <span class="sr-only">${net_avg}% Complete (success)</span> </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col font13">BooKing: <span class="font-digit font16">${addCommas(parseFloat(element['total_bkd_qty_sold']).toFixed(2))} <small>CTNS</small></span></div>
                                                                    <div class="col font13 text-right">Sold: <span class="font-digit font16"> ${addCommas(element['total_qty_sold'].toFixed(2))} <small>CTNs</small></span></div>
                                                                </div>
                                                            </div>
                                                        `);
                    });


                });
        }


        var linechart = document.getElementById('BookingTrends').getContext('2d'),
                        gradient = linechart.createLinearGradient(0, 0, 0, 330);
                        gradient.addColorStop(0, 'rgba(0, 56, 186, 0.5)');
                        gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.25)');
                        gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
        var chart2 = new Chart(linechart, {
            type: 'line',
            data: {},
            options: {
                layout: {
                    padding: {
                        top: 5
                    }
                },
                responsive: true,
                maintainAspectRatio: true,
                animation: {
                    easing: 'easeInOutQuad',
                    duration: 520
                },
                scales: {
                    xAxes: [{
                        gridLines: {
                            color: 'rgba(200, 200, 200, 0.05)',
                            lineWidth: 1
                        }
                    }],
                    yAxes: [{
                        // gridLines: {
                        // 	color: 'rgba(200, 200, 200, 0.08)',
                        //	lineWidth: 1
                        // },
                        ticks: {
                            display: false
                        }
                    }]
                },
                elements: {
                    line: {
                        tension: 0.4
                    }
                },
                legend: {
                    display: false
                },
                point: {
                    backgroundColor: '#0038ba',
                },


                tooltips: {
                    bodyFontFamily: 'Rationale',
                    backgroundColor: '#0038ba',
                    titleFontColor: '#fff',
                    caretSize: 5,
                    cornerRadius: 2,
                    bodyFontSize: 20,

                    //remove label colorbox from tooltips
                    custom: function(tooltip) {
                        if (!tooltip) return;
                        tooltip.displayColors = false;
                    },

                    callbacks: {
                        label: function(tooltipItem, data) {
                            return  tooltipItem.yLabel + " CTNs";
                        },
                        title: function(tooltipItem, data) {
                            return;
                        }
                    }

                }

            }
        });
        //API:: primary-dashboard-monthly-booking-trends-api
        function monthly_booking_trends(sale_type,month,year){
            var apiData_trends;
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                },
                data:{
                    'sale_type':sale_type,
                    'month':month,
                    'year':year
                },
                type: 'POST',
                url: '{{ URL::to('/primary-dashboard-monthly-booking-trends-api') }}', // This is what I have updated
            })
            .done(function(msg) {
                monthly_key_trends(sale_type,month,year);
                apiData_trends = JSON.parse(msg);
                $(tab+"#avg_sales_per_day").html(addCommas(apiData_trends.daily_sale_trends.avg_sales_per_day)+' <small> CTNs</small>');
                var trend_graph_data = [];
                var trend_graph_labels = [];

                for (var i = 0; i < apiData_trends.daily_sale_trends.day_wise_sale.length; i++) {
                    trend_graph_labels.push(apiData_trends.daily_sale_trends.day_wise_sale[i].date);
                    trend_graph_data.push(apiData_trends.daily_sale_trends.day_wise_sale[i].qty);
                }



                chart2.data = {
                    labels: trend_graph_labels,
                    datasets: [{
                        label: '',
                        backgroundColor: gradient,
                        pointBackgroundColor: '#0038ba',
                        borderWidth: 3,
                        borderColor: '#0038ba',
                        data: trend_graph_data
                    }]
                };
                chart2.update();




            });
        }

        //API ::primary-dashboard-monthly-key-trends-api
        function monthly_key_trends(sale_type,month,year){
            var apiData_key_trends;
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content'),
                },
                data:{
                    'sale_type':sale_type,
                    'month':month,
                    'year':year
                },
                type: 'POST',
                url: '{{ URL::to('/primary-dashboard-monthly-key-trends-api') }}', // This is what I have updated
            }).done(function(msg) {
                monthly_booking_execution(sale_type,month,year);
                apiData_key_trends = JSON.parse(msg);
                var key_trends = apiData_key_trends.key_trends;
                var val =  '';
                val = addCommas(key_trends.productivity.toFixed(2));
                $(tab+"#key_trends_productivity_avg").html(val);
                val = addCommas(key_trends.avg_order_value.toFixed(2));
                $(tab+"#key_trends_avg_order_value_avg").html(val);
                val = addCommas(key_trends.avg_products_per_order.toFixed(2));
                $(tab+"#key_trends_avg_products_per_order_avg").html(val);
                val = addCommas(key_trends.avg_drop_size.toFixed(2));
                $(tab+"#key_trends_avg_drop_size_avg").html(val);
                val = addCommas(key_trends.order_compliance.toFixed(2));
                $(tab+"#key_trends_order_compliance_avg").html(val);
            });
        }


        //API:: primary-dashboard-monthly-booking_execution-api
        function monthly_booking_execution(sale_type,month,year){
            var apiData_bookingexecution;
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                },
                data:{
                    'sale_type':sale_type,
                    'month':month,
                    'year':year
                },
                type: 'POST',
                url: '{{ URL::to('/primary-dashboard-monthly-booking_execution-api') }}', // This is what I have updated
            })
            .done(function(msg) {
                monthly_coverage(sale_type,month,year);
                apiData_bookingexecution = JSON.parse(msg);
                var bookingexecution = apiData_bookingexecution.bookedAndExecution;
                var val = '';
                val =  addCommas(bookingexecution.booked) + ' <small>CTNs</small>';
                $(tab+"#bookingexecution_booked").html(val);
                val =     addCommas(bookingexecution.executed) + ' <small>CTNs</small>';
                $(tab+"#bookingexecution_executed").html(val);
                val = (bookingexecution.executed==0 || bookingexecution.booked==0 ? '0': addCommas(parseInt((bookingexecution.executed /  bookingexecution.booked) * 100)) ) + ' <small>%</small><span>Execution</span>';
                $(tab+"#bookingexecution_executed_graph").html(val);
                $(tab+"#bookingexecution_executed_value").attr("data-value",parseInt((bookingexecution.executed / bookingexecution.booked) * 100));
                $(tab+'#divisions').empty();
                if(typeof bookingexecution.divisional !== "undefined" && bookingexecution.divisional.length>0)
                bookingexecution.divisional.forEach(element=>{
                    $(tab+'#divisions').append(`<div class="col-12">
                                            <span class="head-font"><strong>${element['division']}</strong><span class="progressValue">${element['execution']}%</span></span>
                                            <div class="progress">
                                                <div class="progress-bar progress-bar-gray" aria-valuenow="${element['execution']}" aria-valuemin="0" aria-valuemax="100" style="width: ${element['execution']}%" role="progressbar"> <span class="sr-only">${element['execution']}% Complete (success)</span> </div>
                                            </div>
                                            <div class="row font-digit">
                                                <div class="col pr-0"><b>Booked:</b> ${addCommas(element['booked'])} <small>CTNs</small></div>
                                                <div class="col pl-0 text-right"><b>Sold:</b> ${addCommas(element['sold'])} <small>CTNs</small></div>
                                            </div>
                                        </div>`);
                });

            });
        }

        //API:: primary-dashboard-monthly-coverage-api
        function monthly_coverage(sale_type,month,year){
            var apiData_coverage;
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                },
                data:{
                    'sale_type':sale_type,
                    'month':month,
                    'year':year
                },
                type: 'POST',
                url: '{{ URL::to('/primary-dashboard-monthly-coverage-api') }}', // This is what I have updated
            })
            .done(function(msg) {
                monthly_to_products(sale_type,month,year)
                apiData_coverage = JSON.parse(msg);
                var val = '';
                val = addCommas(apiData_coverage.sales_distribution.sole_booked)+' <small>CTNs</small>';
                $(tab+"#sole_booked").html(val);
                val = addCommas(apiData_coverage.sales_distribution.sole_executed)+' <small>CTNs</small>';
                $(tab+"#sole_executed").html(val);
                val = addCommas(apiData_coverage.sales_distribution.sub_booked)+' <small>CTNs</small>';
                $(tab+"#sub_booked").html(val);
                val = addCommas(apiData_coverage.sales_distribution.sub_executed)+' <small>CTNs</small>';
                $(tab+"#sub_executed").html(val);
                var distribution_executed_value =  apiData_coverage.sales_distribution.sub_executed ==0 ||  apiData_coverage.sales_distribution.sole_executed==0?0:parseInt((apiData_coverage.sales_distribution.sub_executed /  apiData_coverage.sales_distribution.sole_executed) * 100)
                val = addCommas(distribution_executed_value) + ' <small>%</small><span>Execution</span>';
                $(tab+"#distribution_executed_graph").html(val);
                $(tab+"#distribution_executed_value").attr("data-value", distribution_executed_value);
                $(tab+'#distribor_types').empty();
                if(typeof apiData_coverage.sales_distribution.types !== "undefined" &&  apiData_coverage.sales_distribution.types.length>0)
                apiData_coverage.sales_distribution.types.forEach(element=>{
                    $(tab+'#distribor_types').append(`<div class="row mb-10">
                                                    <div class="col dis-vs-value"><span>${element['booked_avg'].toFixed(2)}<small>%</small></span> (${addCommas(element['booked'].toFixed(2))}/${addCommas(element['overall_booked'].toFixed(2))})</div>
                                                    <div class="col-auto text-center p-0 font12"><strong>${element['name']}</strong></div>
                                                    <div class="col dis-vs-value text-right">(${addCommas(element['executed'].toFixed(2))}/${addCommas(element['overall_executed'].toFixed(2))}) <span>${element['executed_avg'].toFixed(2)}<small>%</small></span></div>
                                                    <div class="col-6">
                                                        <div class="progress pr-reverse">
                                                            <div class="progress-bar" aria-valuenow="${element['booked_avg'].toFixed(2)}" aria-valuemin="0" aria-valuemax="100" style="width: ${element['booked_avg'].toFixed(2)}%" role="progressbar"> </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-6">
                                                        <div class="progress">
                                                            <div class="progress-bar progress-bar-gray" aria-valuenow="${element['executed_avg'].toFixed(2)}" aria-valuemin="0" aria-valuemax="100" style="width: ${element['executed_avg'].toFixed(2)}%" role="progressbar"> </div>
                                                        </div>
                                                    </div>
                                                </div>`);
                });

            });
        }

        //API:: primary-dashboard-monthly-top-products-api
        function monthly_to_products(sale_type,month,year) {
            $(tab+'#top_five_product_href').attr('href',`/primary-dashboard-monthly-top-products/${month}/${year}`)
            var apiData_products;
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                },
                data:{
                    'sale_type':sale_type,
                    'month':month,
                    'year':year
                },
                type: 'POST',
                url: '{{ URL::to('/primary-dashboard-monthly-top-products-api') }}', // This is what I have updated
            })
            .done(function(msg) {
                monthly_to_categories(sale_type,month,year);
                apiData_products = JSON.parse(msg);
                var products = apiData_products.products;
                $(tab+'#top_products_data').empty();
                for (var j = 0; j < products.length; j++) {

                    $(tab+'#top_products_data').append(
                        '        <div class="col">' +
                        '            <div class="product-card">' +
                        '                <h3>' + products[j].item_name + '</h3>' +
                        '                <div class="PR-Thumb">' +
                        '                    <img src="' + products[j].thumbnail +
                        '" alt="" />' +
                        '                </div>' +
                        '                <div class="row pr-st">' +
                        '                    <div class="col-6"><span>' + products[j]
                            .qty + ' <small>CTNs</small></span>Net Sale</div>' +
                        '                    <div class="col-6 bg-shade"><span>' +
                        products[j].contribution + '  </span>Contribution</div>' +
                        '                </div>' +
                        '            </div>' +
                        '         </div>'
                    );

                }

            });
        }
        //API:: primary-dashboard-monthly-top-categories-api

        var chart3 = new Chart($(tab+"#ProductCategories"), {
            data: {},
            type: 'polarArea',

            options: {

                tooltips: {
                    enabled: false
                },

                legend: {
                    position: 'left',
                    labels: {
                        fontColor: "#282828",
                        boxWidth: 10,
                        usePointStyle: true,
                        padding: 25,
                        fontSize: 13
                    }
                },



                scales: {
                    yAxes: [{
                        display: false
                    }]
                },





                plugins: {
                    labels: {
                        // render 'label', 'value', 'percentage', 'image' or custom function, default is 'percentage'
                        render: 'percentage',

                        // precision for percentage, default is 0
                        precision: 0,

                        // identifies whether or not labels of value 0 are displayed, default is false
                        showZero: true,

                        // font size, default is defaultFontSize
                        fontSize: 16,

                        // font color, can be color array for each data or function for dynamic color, default is defaultFontColor
                        fontColor: '#fff',

                        // font style, default is defaultFontStyle
                        fontStyle: 'normal',

                        // font family, default is defaultFontFamily
                        fontFamily: "'Rationale'",

                        // draw text shadows under labels, default is false
                        textShadow: true,

                        // text shadow intensity, default is 6
                        shadowBlur: 5,

                        // text shadow X offset, default is 3
                        shadowOffsetX: -2,

                        // text shadow Y offset, default is 3
                        shadowOffsetY: 2,

                        // text shadow color, default is 'rgba(0,0,0,0.3)'
                        shadowColor: 'rgba(0,0,0,0.40)',

                        // draw label in arc, default is false
                        // bar chart ignores this
                        // arc: true,

                        // position to draw label, available value is 'default', 'border' and 'outside'
                        // bar chart ignores this
                        // default is 'default'
                        position: 'default',

                        // draw label even it's overlap, default is true
                        // bar chart ignores this
                        overlap: true,

                        // show the real calculated percentages from the values and don't apply the additional logic to fit the percentages to 100 in total, default is false
                        showActualPercentages: true,

                        // set images when `render` is 'image'
                        images: [{
                            src: '',
                            width: 16,
                            height: 16
                        }],

                        // add padding when position is `outside`
                        // default is 2
                        outsidePadding: 4,

                        // add margin of text when position is `outside` or `border`
                        // default is 2
                        textMargin: 4
                    }
                }
            }

        });
        function monthly_to_categories(sale_type,month,year) {
            var apiData_categories;
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content'),
                },
                data:{
                    'sale_type':sale_type,
                    'month':month,
                    'year':year
                },
                type: 'POST',
                url: '{{ URL::to('/primary-dashboard-monthly-top-categories-api') }}', // This is what I have updated
            })
            .done(function(msg) {
                monthly_to_brands(sale_type,month,year)
                apiData_categories = JSON.parse(msg);
                var categories = apiData_categories.categories;

                var graph_labels = [];
                var graph_data = [];
                for (var j = 0; j < categories.length; j++) {
                    graph_labels.push(categories[j].main_category_name);
                    graph_data.push(categories[j].price);
                }


                chart3.data = {
                    datasets: [{
                        data: graph_data,
                        backgroundColor: [
                            "#0038ba",
                            "#14a4ff",
                            "#c4c4c4",
                            "#1c1c1c",
                            "#5a5a5a"
                        ],
                        label: '' // for legend
                    }],
                    labels: graph_labels

                };
                chart3.update();


            });
        }
        //API:: primary-dashboard-monthly-top-brands-api
        function monthly_to_brands(sale_type,month,year) {
            //Top Brands
            var apiData_brands;
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                },
                data:{
                    'sale_type':sale_type,
                    'month':month,
                    'year':year
                },
                type: 'POST',
                url: '{{ URL::to('/primary-dashboard-monthly-top-brands-api') }}', // This is what I have updated
            })
                .done(function(msg) {
                    apiData_brands = JSON.parse(msg);
                    var brands = apiData_brands.brands;
                    $(tab+'#brands_data').empty();
                    for (var j = 0; j < brands.length; j++) {
                        var net_avg =   brands[j].total_tarqet == 0 || brands[j].qty ==0 ?0:parseFloat((brands[j].qty/brands[j].total_tarqet)*100).toFixed(2);

                        $(tab+'#brands_data').append(`<div class="col-12 mt-5 mb-5">
                                                                    <span class="head-font"><strong>${brands[j].name}</strong><span class="progressValue">${net_avg}%</span></span>
                                                                                <div class="progress">
                                                                                <div class="progress-bar" aria-valuenow="${net_avg}" aria-valuemin="0" aria-valuemax="100" style="width: ${net_avg}%" role="progressbar"> <span class="sr-only">${net_avg}% Complete (success)</span> </div>
                                                                                </div>
                                                                    <div class="row font-digit">
                                                                    <div class="col">Target :${addCommas(brands[j].total_tarqet)} <small>CTNS</small></div>
                                                                    <div class="col text-right">Net Sale: ${addCommas(brands[j].qty)} <small>CTNs</small></div>
                                                                    </div>
                                                                  </div>`);

                    }
                });
        }



        function getMonthFromString(mon){
            return new Date(Date.parse(mon +" 1, 2012")).getMonth()+1
        }


        function saletype(){
            var dm          =   $('#datepicker').val();
            const myArray   =   dm.split(" ");
            var month       =   getMonthFromString(myArray[0]);
            var year        =   myArray[1];
            var sale_type   =   $('#sale_type').val();
            monthly_booked_sale(sale_type,month,year);
        }
        $(document).ready(function () {
            $('#datepicker').datepicker({
                autoclose: true,
                todayHighlight: true,
                toggleActive: true,
                format: 'MM yyyy',
                minViewMode: 1,
                "orientation": 'right',
                maxDate: 'now',
            }).datepicker("setDate", new Date()).on('changeDate', function (ev) {
                $(this).datepicker('hide');
                var dm          = $('#datepicker').val();
                const myArray   =   dm.split(" ");
                var month       =   getMonthFromString(myArray[0]);
                var year        =   myArray[1];
                var sale_type   =   $('#sale_type').val();
                monthly_booked_sale(sale_type,month,year);
            });
            monthly_booked_sale(0,{{date('m')}},{{date('Y')}});

            $(".progress").each(function() {

                var value = $(this).attr('data-value');
                var left = $(this).find('.progress-left .progress-bar');
                var right = $(this).find('.progress-right .progress-bar');

                if (value > 0) {
                    if (value <= 50) {
                        right.css('transform', 'rotate(' + percentageToDegrees(value) + 'deg)')
                    } else {
                        right.css('transform', 'rotate(180deg)')
                        left.css('transform', 'rotate(' + percentageToDegrees(value - 50) + 'deg)')
                    }
                }

            })

            function percentageToDegrees(percentage) {

                return percentage / 100 * 360

            }

        });


        $(document).ready(function(){
            $(".expand-btn").click(function(){
                $("body").toggleClass("fullscreen-body");
                $('.expand-btn i').toggleClass('fa-expand fa-compress')
            });
        });

        var db, isfullscreen = false;
        function toggleFullScreen(){
            db = document.body;
            if(isfullscreen == false){
                if(db.requestFullScreen){
                    db.requestFullScreen();
                } else if(db.webkitRequestFullscreen){
                    db.webkitRequestFullscreen();
                } else if(db.mozRequestFullScreen){
                    db.mozRequestFullScreen();
                } else if(db.msRequestFullscreen){
                    db.msRequestFullscreen();
                }
                isfullscreen = true;
            } else {
                if(document.cancelFullScreen){
                    document.cancelFullScreen();
                } else if(document.exitFullScreen){
                    document.exitFullScreen();
                } else if(document.mozCancelFullScreen){
                    document.mozCancelFullScreen();
                } else if(document.webkitCancelFullScreen){
                    document.webkitCancelFullScreen();
                } else if(document.msExitFullscreen){
                    document.msExitFullscreen();
                }
                isfullscreen = false;
                // wrap.style.width = "100%";
                // wrap.style.height = "auto";
            }
        }

    </script>

@endsection