@extends('layouts.master')
@section('content')
    <div id="blureEffct" class="container">
        <div class="row mt-1 mb-0">
            <div class="col-lg-6 col-md-6 col-sm-6 pl-0">
                <h2 class="_head01">Monthly <span>Booking</span></h2>
            </div>
            {{-- <div class="col-lg-6 col-md-6 col-sm-6">
                        <a href="#" id="productlist01"><img style="width:23px;height:23px;float:right;margin-top:-3px;cursor:pointer" src="{!! asset('images/report-filters.svg') !!}" alt=""></a>
                        <div class="dashboard-date" style="margin-top:-10px">
                            <input type="text" id="datepicker" value="{{date('D d M Y', strtotime(date(request()->route()->parameters['date'])))}}" class="form-control" placeholder="">
                            <i class="fa fa-angle-down"></i>
                        </div>
                    </div> --}}
        </div>

        <div class="row">
            <div class="col-md-12 p-0 PT-10">

                <div class="row">
                    <div class="col-12">
                        <div class="card total-sale">
                            <div class="row">
                                <div class="col-7">
                                    <div class="row">
                                        <div class="col-12 position-relative"
                                            style="background-image: url({!! asset('images/kpi-achive-img.jpg') !!}); background-position:bottom right; background-repeat:no-repeat">
                                            <!--<div class="timechart-div"><canvas  id="timechart" width="310" height="110"></canvas></div>-->

                                            <h2 class="card-heading">Total <span>Booked Sales</span></h2>
                                            <div class="total-amount" style="border-bottom:solid 1px #e1e1e1"><span
                                                    id="total-amount"></span> <span class="per-v"><i
                                                        class="fa fa-long-arrow-alt-up"></i> <span
                                                        id="growth"></span></span></div>
                                        </div>
                                        <div class="col unit-v">Cartons<span id="ctn"></span></div>
                                        <div class="col unit-v">Dozens<span id="dz"></span></div>
                                        <div class="col unit-v">Half Dozens<span id="hdz"></span></div>
                                    </div>
                                </div>
                                <div class="col-5">
                                    <div class="row m-0">
                                        <div class="col-6 total-val border-bottom"><span id="retail_visits"></span> Total
                                            Retail Visits</div>
                                        <div class="col-6 total-val border-left border-bottom"><span
                                                id="planned_visits"></span> Total Orders</div>
                                        <div class="col-6 total-val"><span id="productive_visits"></span> Productive Visits
                                        </div>
                                        <div class="col-6 total-val border-left"><span id="plan_adherence"></span>
                                            Productive Ratio</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script>
                        //Booked Sales Section
                        var apiData;
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            type: 'get',
                            url: '{{ URL::to('/dashboard-monthly-booked-sales-api') }}', // This is what I have updated
                        }).done(function(msg) {
                            apiData = JSON.parse(msg);

                            document.getElementById('total-amount').innerHTML = 'Rs. ' + apiData.booked_sales
                                .revenue;
                            document.getElementById('growth').innerHTML = apiData.booked_sales.growth;

                            document.getElementById('planned_visits').innerHTML = apiData.booked_sales.stats
                                .total_orders;
                            document.getElementById('retail_visits').innerHTML = apiData.booked_sales.stats
                                .retail_visits;
                            document.getElementById('productive_visits').innerHTML = apiData.booked_sales.stats
                                .productive_visits;
                            document.getElementById('plan_adherence').innerHTML = apiData.booked_sales.stats
                                .productive_ratio + '<small>%</small>';



                            var dz = 0;
                            var hdz = 0;
                            var ctn = 0;
                            for (var i = 0; i < apiData.booked_sales.primary_units.length; i++) {
                                var obj = apiData.booked_sales.primary_units[i].unit_short_name;
                                if (obj == "Dz")
                                    dz = apiData.booked_sales.primary_units[i].sold;
                                else if (obj == 'HDoz')
                                    hdz = apiData.booked_sales.primary_units[i].sold;
                                else if (obj == 'CTN')
                                    ctn = apiData.booked_sales.primary_units[i].sold;
                            }
                            document.getElementById('dz').innerHTML = dz + ' <small>DZNS</small>';
                            document.getElementById('hdz').innerHTML = hdz + ' <small>HDZNS</small>';
                            document.getElementById('ctn').innerHTML = ctn + ' <small>CTNS</small>';
                        });

                    </script>

                    <div class="col-lg-6 col-md-12 mb-20">
                        <div class="card mh-100">
                            {{-- <h2 class="card-heading">Daily Sales <span>Trends</span><a href="#" class="view-all">View All <i class="fa fa-angle-right"></i></a></h2> --}}

                            <div class="row">
                                <div class="col-5 pr-0">
                                    <div class="avg-booking-day">
                                        <h2>AVG. Booking/Day <span id="avg_sales_per_day"></span></h2>
                                    </div>
                                </div>

                                <div class="col-7 pr-0">
                                    <div class="row">
                                        <div class="col unit-v font14 pl-0 PT-10">CTNS<span style="font-size:22px;"
                                                id="trend-ctn"></span></div>
                                        <div class="col unit-v font14 pl-0 PT-10">DZNS<span style="font-size:22px;"
                                                id="trend-dz"></span></div>
                                        <div class="col unit-v font14 pl-0 PT-10">HDZNS<span style="font-size:22px;"
                                                id="trend-hdz"></span></div>
                                    </div>
                                </div>

                            </div>
                            <canvas id="BookingTrends" height="200"></canvas>

                        </div>
                    </div>
                    <script>
                        //Booking Trends Sales
                        var apiData_trends;
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            type: 'get',
                            url: '{{ URL::to('/dashboard-monthly-booking-trends-api') }}', // This is what I have updated
                        }).done(function(msg) {
                            apiData_trends = JSON.parse(msg);
                            document.getElementById('avg_sales_per_day').innerHTML = 'Rs. ' + apiData_trends
                                .daily_sale_trends.avg_sales_per_day;
                            //document.getElementById('total_daily_sale').innerHTML= apiData.daily_sale_trends.total_daily_sale;

                            var dz = 0;
                            var hdz = 0;
                            var ctn = 0;
                            for (var i = 0; i < apiData_trends.daily_sale_trends.primary_units.length; i++) {
                                var obj = apiData_trends.daily_sale_trends.primary_units[i].unit_name;
                                if (obj == "Dz")
                                    dz = apiData_trends.daily_sale_trends.primary_units[i].sold;
                                else if (obj == 'HDoz')
                                    hdz = apiData_trends.daily_sale_trends.primary_units[i].sold;
                                else if (obj == 'CTN')
                                    ctn = apiData_trends.daily_sale_trends.primary_units[i].sold;
                            }
                            document.getElementById('trend-dz').innerHTML = dz;
                            document.getElementById('trend-hdz').innerHTML = hdz;
                            document.getElementById('trend-ctn').innerHTML = ctn;

                            // booking trend graph

                            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].sale);
                            }

                            var chart = document.getElementById('BookingTrends').getContext('2d'),
                                gradient = chart.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 data = {
                                labels: trend_graph_labels,
                                datasets: [{
                                    label: '',
                                    backgroundColor: gradient,
                                    pointBackgroundColor: '#0038ba',
                                    borderWidth: 3,
                                    borderColor: '#0038ba',
                                    data: trend_graph_data
                                }]
                            };

                            var 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.xLabel + " RS." + tooltipItem.yLabel;
                                        },
                                        title: function(tooltipItem, data) {
                                            return;
                                        }
                                    }

                                }

                            };

                            var chartInstance = new Chart(chart, {
                                type: 'line',
                                data: data,
                                options: options
                            });




                        });

                    </script>

                    <div class="col-lg-6 col-md-12 mb-20">
                        <div class="card mh-100">
                            <h2 class="card-heading">Key <span>Trends</span></h2>
                            <a href="#" class="key-trend">
                                <div class="row">
                                    <div class="col key-lab pr-0"><strong>Productivity</strong></div>
                                    <div class="col-4 key-growth text-success"><i class="fa fa-long-arrow-alt-up"></i><span
                                            id="key_trends_productivity_growth"></span>% Growth</div>
                                    <div class="col key-val pl-0"><span
                                            id="key_trends_productivity_avg"></span><small>%</small></div>
                                </div>
                            </a> <a href="#" class="key-trend">
                                <div class="row">
                                    <div class="col key-lab pr-0"><strong>AVG. Order Value</strong></div>
                                    <div class="col-4 key-growth text-success"><i class="fa fa-long-arrow-alt-up"></i><span
                                            id="key_trends_avg_order_value_growth"></span>% Growth</div>
                                    <div class="col key-val pl-0"><span id="key_trends_avg_order_value_avg"></span></div>
                                </div>
                            </a> <a href="#" class="key-trend">
                                <div class="row">
                                    <div class="col key-lab pr-0"><strong>AVG. SKUs/Order</strong></div>
                                    <div class="col-4 key-growth text-warning"><i class="fa fa-long-arrow-alt-up"></i><span
                                            id="key_trends_avg_products_per_order_growth"></span>% Growth</div>
                                    <div class="col key-val pl-0"><span
                                            id="key_trends_avg_products_per_order_avg"></span><small>%</small></div>
                                </div>
                            </a> <a href="#" class="key-trend">
                                <div class="row">
                                    <div class="col key-lab pr-0"><strong>AVG. Drop Size</strong></div>
                                    <div class="col-4 key-growth text-danger"><i class="fa fa-long-arrow-alt-up"></i><span
                                            id="key_trends_avg_drop_size_growth"></span>% Growth</div>
                                    <div class="col key-val pl-0"><span
                                            id="key_trends_avg_drop_size_avg"></span><small></small></div>
                                </div>
                            </a> <a href="#" class="key-trend mb-0">
                                <div class="row">
                                    <div class="col key-lab pr-0"><strong>Order Compliance</strong></div>
                                    <div class="col-4 key-growth text-success"><i class="fa fa-long-arrow-alt-up"></i><span
                                            id="key_trends_order_compliance_growth"></span>% Growth</div>
                                    <div class="col key-val pl-0"><span
                                            id="key_trends_order_compliance_avg"></span><small>%</small></div>
                                </div>
                            </a>
                        </div>

                    </div>
                    <script>
                        //Key Trends Section
                        var apiData_key_trends;
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            type: 'get',
                            url: '{{ URL::to('/dashboard-monthly-key-trends-api') }}', // This is what I have updated
                        }).done(function(msg) {
                            apiData_key_trends = JSON.parse(msg);
                            var key_trends = apiData_key_trends.key_trends;

                            document.getElementById('key_trends_productivity_avg').innerHTML = key_trends
                                .productivity.productivity;
                            document.getElementById('key_trends_productivity_growth').innerHTML = key_trends
                                .productivity.growth;
                            document.getElementById('key_trends_avg_order_value_avg').innerHTML = key_trends
                                .avg_order_value.avg;
                            document.getElementById('key_trends_avg_order_value_growth').innerHTML = key_trends
                                .avg_order_value.growth;
                            document.getElementById('key_trends_avg_products_per_order_avg').innerHTML = key_trends
                                .avg_products_per_order.avg;
                            document.getElementById('key_trends_avg_products_per_order_growth').innerHTML =
                                key_trends.avg_products_per_order.growth;
                            document.getElementById('key_trends_avg_drop_size_avg').innerHTML = key_trends
                                .avg_drop_size.avg;
                            document.getElementById('key_trends_avg_drop_size_growth').innerHTML = key_trends
                                .avg_drop_size.growth;
                            document.getElementById('key_trends_order_compliance_avg').innerHTML = key_trends
                                .order_compliance.avg;
                            document.getElementById('key_trends_order_compliance_growth').innerHTML = key_trends
                                .order_compliance.growth;
                        });

                    </script>

                    <div class="col-md-12 mb-20">
                        <div class="card">
                            <div class="row">

                                <div class="col-lg-8 col-md-12">
                                    <h2 class="card-heading">Employees <span>Trends</span></h2>

                                    <div class="row mr-0 set-icon-size">
                                        <div class="col pr-0">
                                            <div class="strength">
                                                Total Strength
                                                <span class="Strength-val"><span id="total_strength"></span></span>
                                                <span class="Strength-lab">Order Bookers</span>
                                            </div>
                                        </div>
                                        <div class="col pr-0">
                                            <div class="emp-val-box"><span id="avg_active_emps_per_day"></span><img
                                                    src="{!! asset('images/active-icon.svg') !!}" alt="">Avg. Act. Emps/Day</div>
                                        </div>
                                        <div class="col pr-0">
                                            <div class="emp-val-box"><span id="avg_visits_per_day"></span><img
                                                    src="{!! asset('images/order-compliance-icon.svg') !!}" alt="">Avg. Visits/Day</div>
                                        </div>
                                        <div class="col pr-0">
                                            <div class="emp-val-box"><span id="avg_orders_per_day"></span><img
                                                    src="{!! asset('images/order-compliance-icon.svg') !!}" alt="">Avg. Orders/Day</div>
                                        </div>
                                        <div class="col pr-0">
                                            <div class="emp-val-box"><span id="order_compliance"></span><img
                                                    src="{!! asset('images/order-compliance-icon.svg') !!}" alt="">Order Compliance</div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-12">
                                            <div class="row avg-booking">
                                                <div class="col-4 p-0"><strong>AVG. Booking/O.B.</strong><span
                                                        class="avg-val" id="avg_booking_per_ob_rs"> </span></div>
                                                <div class="col text-center"><span id="employees_trends_ctn"></span>Cartons
                                                </div>
                                                <div class="col text-center border-left border-right"><span
                                                        id="employees_trends_dz"></span>Dozens</div>
                                                <div class="col text-center"><span id="employees_trends_hdz"></span>Half
                                                    Dozens</div>
                                            </div>
                                            <div class="row avg-state">
                                                <div class="col border-right-0 font14"><strong>AVG. Shift
                                                        Duration</strong><span id="avg_shift_duration"> </span></div>
                                                <div class="col border-right-0 font14"><strong>AVG. Market
                                                        Time</strong><span id="avg_market_time"> </span></div>
                                                <div class="col border-right-0 font14"><strong>AVG. Time/Shop</strong><span
                                                        id="avg_time_per_shop"></span></div>
                                                <div class="col font14"><strong>AVG. Travel Time.</strong><span
                                                        id="avg_time_travel"></span></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-12 top1-employee">
                                    <div class="employee-bg"><img class="pic" id="trend_emp_image_bg"
                                            onerror="this.src='{!! asset('images/employee.jpg') !!}'" alt=""></div>
                                    <h2 class="card-heading">Top <span>Performers</span><a
                                            href="/dashboard-monthly-top-employees" class="view-all">View All <i
                                                class="fa fa-angle-right"></i></a></h2>
                                    <div class="row">
                                        <div class="col-12 text-center">
                                            <div class="emp-pic">
                                                <img class="badge-icon" src="{!! asset('images/badge-icon.svg') !!}" alt="">
                                                <img class="pic" id="trend_emp_image"
                                                    onerror="this.src='{!! asset('images/employee.jpg') !!}'" alt="">
                                            </div>
                                            <strong id="trend_emp_name"></strong>
                                        </div>
                                        <div class="col-12 emp-tr">
                                            <span id="territory"></span>
                                            <span id="trend_emp_tsm"></span>
                                        </div>
                                    </div>
                                    <div class="row avg-state state-01">
                                        {{-- <div class="col border-right-0"><strong>Total Visits</strong><span>245</span></div> --}}
                                        <div class="col border-right-0"><strong>Revenue</strong><span
                                                id="trend_emp_revenue"></span></div>
                                        <div class="col"><strong>Unites Sold</strong><span id="trend_emp_sold"></span></div>
                                    </div>
                                </div>
                                <script>
                                    //Employees Trends Section
                                    var apiData_employees_trends;
                                    $.ajax({
                                        headers: {
                                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                        },
                                        type: 'get',
                                        url: '{{ URL::to('/dashboard-monthly-employees-trends-api') }}', // This is what I have updated
                                    }).done(function(msg) {
                                        apiData_employees_trends = JSON.parse(msg);
                                        var employees_trends = apiData_employees_trends.employee_trends;

                                        document.getElementById('total_strength').innerHTML = employees_trends
                                            .total_strength;
                                        document.getElementById('avg_active_emps_per_day').innerHTML =
                                            employees_trends.avg_active_emps_per_day;
                                        document.getElementById('avg_visits_per_day').innerHTML = employees_trends
                                            .avg_visits_per_day;
                                        document.getElementById('avg_orders_per_day').innerHTML = employees_trends
                                            .avg_orders_per_day;
                                        document.getElementById('order_compliance').innerHTML = employees_trends
                                            .order_compliance;
                                        document.getElementById('avg_booking_per_ob_rs').innerHTML = 'Rs. ' +
                                            employees_trends.avg_booking_per_ob_rs;

                                        document.getElementById('avg_shift_duration').innerHTML = employees_trends
                                            .ams_stat.avg_shift_duration + ' <small></small>';
                                        document.getElementById('avg_time_per_shop').innerHTML = employees_trends
                                            .ams_stat.avg_time_per_shop;
                                        document.getElementById('avg_market_time').innerHTML = employees_trends
                                            .ams_stat.avg_market_time + ' <small></small>';
                                        document.getElementById('avg_time_travel').innerHTML = employees_trends
                                            .ams_stat.avg_time_travel;

                                        var dz = 0;
                                        var hdz = 0;
                                        var ctn = 0;
                                        for (var i = 0; i < employees_trends.avg_booking_per_ob_units.length; i++) {
                                            var obj = employees_trends.avg_booking_per_ob_units[i].unit_name;
                                            if (obj == "Dz")
                                                dz = employees_trends.avg_booking_per_ob_units[i].sales;
                                            else if (obj == 'HDoz')
                                                hdz = employees_trends.avg_booking_per_ob_units[i].sales;
                                            else if (obj == 'CTN')
                                                ctn = employees_trends.avg_booking_per_ob_units[i].sales;
                                        }
                                        document.getElementById('employees_trends_dz').innerHTML = dz;
                                        document.getElementById('employees_trends_hdz').innerHTML = hdz;
                                        document.getElementById('employees_trends_ctn').innerHTML = ctn;


                                        //top employee
                                        document.getElementById('trend_emp_name').innerHTML = employees_trends
                                            .top_employees[0].employee_name;
                                        document.getElementById('territory').innerHTML =
                                            '<strong>Territory:</strong> ' + employees_trends.top_employees[0]
                                            .territory_name;
                                        document.getElementById('trend_emp_image').src = employees_trends
                                            .top_employees[0].employee_picture;
                                        document.getElementById('trend_emp_image_bg').src = employees_trends
                                            .top_employees[0].employee_picture;
                                        document.getElementById('trend_emp_revenue').innerHTML = employees_trends
                                            .top_employees[0].revenue;
                                        document.getElementById('trend_emp_tsm').innerHTML =
                                            '<strong>TSM:</strong> ' + employees_trends.top_employees[0].tsm;
                                        document.getElementById('trend_emp_sold').innerHTML = employees_trends
                                            .top_employees[0].units_sold;
                                    });

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


                    <div class="col-12 mb-20">
                        <div class="card divisional-reports">
                            <div class="row">
                                <div class="col-12">

                                    <div class="row mr-0">
                                        <div class="col-lg-4 col-md-12 set-widthCol">
                                            <h2 class="card-heading">BOOKING VS EXECUTION <span></span></h2>
                                            <div class="row">
                                                <div class="col-12 pt-10">
                                                    <div class="row">
                                                        <div class="col-6 pr-0">
                                                            <div class="col ex-avg-booking">Booked Units<span
                                                                    class="avg-val" id="bookingexecution_booked">=</span>
                                                            </div>
                                                        </div>
                                                        <div class="col-6 pr-0">
                                                            <div class="col ex-avg-booking">Executed Units<span
                                                                    class="avg-val" id="bookingexecution_executed"></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 mt-20 PT-5">
                                                    <div class="total-progress">
                                                        <div class="progress mx-auto" id="bookingexecution_executed_value"
                                                            data-value="10"><span class="progress-left"> <span
                                                                    class="progress-bar progress-barColor"> </span> </span>
                                                            <span class="progress-right"> <span
                                                                    class="progress-bar progress-barColor"></span> </span>
                                                            <div
                                                                class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center">
                                                                <div class="digitVal" id="bookingexecution_executed_graph">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="w-100" id="bookingexecution_data"></div>

                                            </div>

                                        </div>

                                        <script>
                                            //Booking VS Execution
                                            var apiData_bookingexecution;
                                            $.ajax({
                                                headers: {
                                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                                },
                                                type: 'get',
                                                url: '{{ URL::to('/dashboard-monthly-booking_execution-api') }}', // This is what I have updated
                                            }).done(function(msg) {
                                                apiData_bookingexecution = JSON.parse(msg);
                                                var bookingexecution = apiData_bookingexecution.bookedAndExecution;

                                                document.getElementById('bookingexecution_booked').innerHTML =
                                                    bookingexecution.booked + ' <small>Units</small>';
                                                document.getElementById('bookingexecution_executed').innerHTML =
                                                    bookingexecution.executed + ' <small>Units</small>';
                                                document.getElementById('bookingexecution_executed_graph')
                                                    .innerHTML = parseInt((bookingexecution.executed /
                                                        bookingexecution.booked) * 100) +
                                                    ' <small>%</small><span>Execution</span>';
                                                document.getElementById('bookingexecution_executed_value')
                                                    .setAttribute("data-value", parseInt((bookingexecution
                                                        .executed / bookingexecution.booked) * 100));


                                                document.getElementById('bookingexecution_data').innerHTML =
                                                    '             <div class="col-12 mb-20">' +
                                                    '                <span class="head-font"><strong>' +
                                                    bookingexecution.divisional[1].division +
                                                    '</strong><span class="progressValue">' + bookingexecution
                                                    .divisional[1].execution + '%</span></span>' +
                                                    '            <div class="progress">' +
                                                    '                <div class="progress-bar" aria-valuenow="' +
                                                    bookingexecution.divisional[1].execution +
                                                    '" aria-valuemin="0" aria-valuemax="100" style="width: ' +
                                                    bookingexecution.divisional[1].execution +
                                                    '%" role="progressbar"> <span class="sr-only">73% Complete (success)</span> </div>' +
                                                    '            </div>' +
                                                    '            <div class="row font-digit">' +
                                                    '                <div class="col pr-0"><b>Booked:</b> ' +
                                                    bookingexecution.divisional[1].booked +
                                                    ' <small>Units</small></div>' +
                                                    '                <div class="col pl-0 text-right"><b>Sold:</b> ' +
                                                    bookingexecution.divisional[1].sold +
                                                    ' <small>Units</small></div>' +
                                                    '            </div>' +
                                                    '        </div>' +
                                                    '        <div class="col-12">' +
                                                    '        <span class="head-font"><strong>' + bookingexecution
                                                    .divisional[0].division +
                                                    '</strong><span class="progressValue">' + bookingexecution
                                                    .divisional[0].execution + '%</span></span>' +
                                                    '        <div class="progress">' +
                                                    '        <div class="progress-bar progress-bar-gray" aria-valuenow="' +
                                                    bookingexecution.divisional[0].execution +
                                                    '" aria-valuemin="0" aria-valuemax="100" style="width: ' +
                                                    bookingexecution.divisional[0].execution +
                                                    '%" role="progressbar"> <span class="sr-only">83% Complete (success)</span> </div>' +
                                                    '        </div>' +
                                                    '        <div class="row font-digit">' +
                                                    '        <div class="col pr-0"><b>Booked:</b> ' +
                                                    bookingexecution.divisional[0].booked +
                                                    ' <small>Units</small></div>' +
                                                    '        <div class="col pl-0 text-right"><b>Sold:</b> ' +
                                                    bookingexecution.divisional[0].sold +
                                                    ' <small>Units</small></div>' +
                                                    '        </div>' +
                                                    '        </div>';

                                            });

                                        </script>

                                        <div class="col-lg-4 col-md-12 set-widthCol"
                                            style="border-left: solid 1px #e8e8e8; border-right: solid 1px #e8e8e8;">
                                            <h2 class="card-heading">Booking<span></span></h2>
                                            <div class="row PT-15 PB-20">
                                                <div class="col-6 text-right" style="border-right:solid 1px #e8e8e8">
                                                    <h4><span id="divisional-division-zain"> </span> <span
                                                            class="circle-b"></span></h4>
                                                </div>
                                                <div class="col-6">
                                                    <h4><span class="circle-b circle-g"> </span><span
                                                            id="divisional-division-shahi"></span>
                                                </div>
                                            </div>

                                            <div class="row font13 mt-15">
                                                <div class="col text-right font-digit font16"><span
                                                        id="divisional-sold-zain"></span> <small>Units</small></div>
                                                <div class="col-auto text-center p-0" style="width:90px;">
                                                    <strong>SOLD</strong></div>
                                                <div class="col font-digit font16"><span id="divisional-sold-shahi"></span>
                                                    <small>Units</small></div>
                                            </div>

                                            <div class="row font13 mt-15">
                                                <div class="col text-right font-digit font16"><small>Rs.</small> <span
                                                        id="divisional-revenue-zain"></span></div>
                                                <div class="col-auto text-center p-0" style="width:90px;">
                                                    <strong>REVENUE</strong></div>
                                                <div class="col font-digit font16"><small>Rs.</small> <span
                                                        id="divisional-revenue-shahi"></span></div>
                                            </div>

                                            <canvas class="mb-15 mt-30" id="divisional-sales" height="160"></canvas>

                                        </div>

                                        <div class="col-lg col-md-12 pr-0">
                                            <h2 class="card-heading">Coverage <span></span></h2>
                                            <div class="row PT-15 PB-15 lg-pr-15">
                                                <div class="col-6 text-right" style="border-right:solid 1px #e8e8e8">
                                                    <h4>{{env('DIVISION_2')?env('DIVISION_2'):'Zain'}} <span class="circle-b"></span></h4>
                                                </div>
                                                <div class="col-6">
                                                    <h4><span class="circle-b circle-g"></span> {{env('DIVISION_1')?env('DIVISION_1'):'Shahi'}}</h4>
                                                </div>
                                            </div>

                                            <div id="coverage_data" class="overflow-scroll"></div>

                                        </div>
                                        <script>
                                            //Coverage Section
                                            var apiData_coverage;
                                            $.ajax({
                                                headers: {
                                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                                },
                                                type: 'get',
                                                url: '{{ URL::to('/dashboard-monthly-coverage-api') }}', // This is what I have updated
                                            }).done(function(msg) {
                                                apiData_coverage = JSON.parse(msg);

                                                var coverage = apiData_coverage.sales_distribution.distribution;

                                                var zainvalue = coverage[1].overall_ordering + '/' + coverage[1]
                                                    .overall_total;
                                                var zainper = (coverage[1].overall_ordering / coverage[1]
                                                    .overall_total) * 100;
                                                //var zainbar = ;

                                                var shahivalue = coverage[0].overall_ordering + '/' + coverage[0]
                                                    .overall_total;
                                                var shahiper = (coverage[0].overall_ordering / coverage[0]
                                                    .overall_total) * 100;
                                                // var shahibar = ;

                                                document.getElementById('coverage_data').innerHTML =
                                                    '<div class="row mb-10">' +
                                                    '<div class="col-5 dis-vs-value"><span>' + zainper +
                                                    '<small>%</small></span> (' + zainvalue + ')</div>' +
                                                    '<div class="col-2 text-center p-0 font11"><strong>Overall</strong></div>' +
                                                    '<div class="col-5 dis-vs-value text-right"> (' + shahivalue +
                                                    ')<span>' + shahiper + '<small>%</small></span></div>' +
                                                    '<div class="col-6">' +
                                                    '<div class="progress pr-reverse">' +
                                                    '<div class="progress-bar" aria-valuenow="' + coverage[1]
                                                    .overall_ordering +
                                                    '" aria-valuemin="0" aria-valuemax="100" style="width: ' +
                                                    coverage[1].overall_ordering + '%" role="progressbar"> </div>' +
                                                    '</div>' +
                                                    '</div>' +
                                                    '<div class="col-6">' +
                                                    '<div class="progress">' +
                                                    '<div class="progress-bar progress-bar-gray" aria-valuenow="' +
                                                    coverage[0].overall_ordering +
                                                    '" aria-valuemin="0" aria-valuemax="100" style="width: ' +
                                                    coverage[0].overall_ordering + '%" role="progressbar"> </div>' +
                                                    '</div>' +
                                                    '</div>' +
                                                    '</div>';

                                                for (var j = 0; j < coverage[0].stat.length; j++) {
                                                    var coverage_stat_zain = coverage[1].stat[j];
                                                    var coverage_stat_shahi = coverage[0].stat[j];

                                                    var zainvalue = coverage_stat_zain.ordering_retailers + '/' +
                                                        coverage_stat_zain.total_retailers;
                                                    var zainper = (coverage_stat_zain.ordering_retailers /
                                                        coverage_stat_zain.total_retailers) * 100;

                                                    var shahivalue = coverage_stat_shahi.ordering_retailers + '/' +
                                                        coverage_stat_shahi.total_retailers;
                                                    var shahiper = (coverage_stat_shahi.ordering_retailers /
                                                        coverage_stat_shahi.total_retailers) * 100;
 
                                                    document.getElementById('coverage_data').innerHTML +=
                                                        '<div class="row mb-10">' +
                                                        '<div class="col-5 dis-vs-value"><span>' + zainper +
                                                        '<small>%</small></span> (' + zainvalue + ')</div>' +
                                                        '<div class="col-2 text-center p-0 font11"><strong>' +
                                                        coverage_stat_zain.name + '</strong></div>' +
                                                        '<div class="col-5 dis-vs-value text-right"> (' + shahivalue +
                                                        ')<span>' + shahiper + '<small>%</small></span></div>' +
                                                        '<div class="col-6">' +
                                                        '<div class="progress pr-reverse">' +
                                                        '<div class="progress-bar" aria-valuenow="' +
                                                        coverage_stat_zain.ordering_retailers +
                                                        '" aria-valuemin="0" aria-valuemax="100" style="width: ' +
                                                        coverage_stat_zain.total_retailers +
                                                        '%" role="progressbar"> </div>' +
                                                        '</div>' +
                                                        '</div>' +
                                                        '<div class="col-6">' +
                                                        '<div class="progress">' +
                                                        '<div class="progress-bar progress-bar-gray" aria-valuenow="' +
                                                        coverage_stat_shahi.ordering_retailers +
                                                        '" aria-valuemin="0" aria-valuemax="100" style="width: ' +
                                                        coverage_stat_shahi.ordering_retailers +
                                                        '%" role="progressbar"> </div>' +
                                                        '</div>' +
                                                        '</div>' +
                                                        '</div>';

                                                }

                                                // divisional sales

                                                apiData_divissional = JSON.parse(msg);

                                                var daily_divisiona_sale = apiData_divissional.sales_distribution
                                                    .sales;

                                                document.getElementById('divisional-division-shahi').innerHTML =
                                                    ' ' + daily_divisiona_sale[0].division;
                                                document.getElementById('divisional-sold-shahi').innerHTML =
                                                    daily_divisiona_sale[0].units_sold;
                                                document.getElementById('divisional-revenue-shahi').innerHTML =
                                                    daily_divisiona_sale[0].revenue;

                                                document.getElementById('divisional-division-zain').innerHTML =
                                                    daily_divisiona_sale[1].division;
                                                document.getElementById('divisional-sold-zain').innerHTML =
                                                    daily_divisiona_sale[1].units_sold;
                                                document.getElementById('divisional-revenue-zain').innerHTML =
                                                    daily_divisiona_sale[1].revenue;

                                                var data_division_sales_ghraph = {
                                                    datasets: [{
                                                        data: [
                                                            daily_divisiona_sale[0].revenue,
                                                            daily_divisiona_sale[1].revenue
                                                        ],
                                                        backgroundColor: [
                                                            "#14a4ff",
                                                            "#0038ba",
                                                        ],
                                                        label: '' // for legend
                                                    }],
                                                    labels: [
                                                        "",
                                                        ""
                                                    ]

                                                };

                                                var ctx = $("#divisional-sales");
                                                new Chart(ctx, {
                                                    data: data_division_sales_ghraph,
                                                    type: 'pie',
                                                    options: {
                                                        tooltips: {
                                                            enabled: false
                                                        },

                                                        legend: {
                                                            display: false,
                                                            position: 'bottom',
                                                            labels: {
                                                                fontColor: "#282828",
                                                                boxWidth: 20,
                                                                usePointStyle: true,
                                                                padding: 25,
                                                                fontSize: 13,
                                                            }
                                                        },
                                                        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: 18,
                                                                // 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
                                                            }
                                                        }
                                                    }
                                                });

                                            });

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

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



                    <div class="col-lg-6 col-md-12 mb-20">
                        <div class="card mh-100">
                            <h2 class="card-heading">Top <span>5 Categories</span><a href="#" class="view-all">View All <i
                                        class="fa fa-angle-right"></i></a></h2>
                            <canvas class="mt-15" id="ProductCategories" height="330"></canvas>
                        </div>
                    </div>
                    <script>
                        //Top Categories
                        var apiData_categories;
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            type: 'get',
                            url: '{{ URL::to('/dashboard-monthly-top-categories-api') }}', // This is what I have updated
                        }).done(function(msg) {
                            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);
                            }


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

                            };

                            var ctx = $("#ProductCategories");
                            new Chart(ctx, {
                                data: 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
                                        }
                                    }
                                }

                            });

                        });

                    </script>
                    <div class="col-lg-6 col-md-12 mb-20">
                        <div class="card mh-100">
                            <h2 class="card-heading">Top <span>Brands</span><a href="/dashboard-monthly-top-brands"
                                    class="view-all">View All <i class="fa fa-angle-right"></i></a></h2>
                            <div class="row" id="brands_data">



                            </div>
                            <script>
                                //Top Brands
                                var apiData_brands;
                                $.ajax({
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                    },
                                    type: 'get',
                                    url: '{{ URL::to('/dashboard-monthly-top-brands-api') }}', // This is what I have updated
                                }).done(function(msg) {
                                    apiData_brands = JSON.parse(msg);
                                    var brands = apiData_brands.brands;
                                    for (var j = 0; j < brands.length; j++) {

                                        document.getElementById('brands_data').innerHTML +=
                                            '<div class="col-12 mt-5 mb-5">' +
                                            '            <span class="head-font"><strong>' + brands[j].name +
                                            '</strong><span class="progressValue">' + brands[j].contribution +
                                            '</span></span>' +
                                            '        <div class="progress">' +
                                            '            <div class="progress-bar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: ' +
                                            brands[j].contribution +
                                            '" role="progressbar"> <span class="sr-only">' + brands[j]
                                            .contribution + ' Complete (success)</span> </div>' +
                                            '        </div>' +
                                            '    </div>';

                                    }
                                });

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

                    <div class="col-12 mb-20">
                        <div class="card">
                            <div class="row">
                                <div class="col-12">

                                    <h2 class="card-heading">TOP <span> 5 PRODDUCTs</span><a
                                            href="/dashboard-monthly-top-products" class="view-all">View All <i
                                                class="fa fa-angle-right"></i></a></h2>

                                    <div class="L-1024-overflow">
                                    <div class="p-1024-width">
                                      <div class="row pro-list" id="top_products_data">
                                    
                                    </div> 
                                    </div>
                                    </div>

                                    <script>
                                        //Top 5 Products
                                        var apiData_products;
                                        $.ajax({
                                            headers: {
                                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                            },
                                            type: 'get',
                                            url: '{{ URL::to('/dashboard-monthly-top-products-api') }}', // This is what I have updated
                                        }).done(function(msg) {
                                            apiData_products = JSON.parse(msg);
                                            var products = apiData_products.products;
                                            for (var j = 0; j < products.length; j++) {

                                                document.getElementById('top_products_data').innerHTML +=
                                                    '        <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 + '</span>Booked</div>' +
                                                    '                    <div class="col-6 bg-shade"><span>' +
                                                    products[j].contribution + ' </span>Contribution</div>' +
                                                    '                </div>' +
                                                    '            </div>' +
                                                    '         </div>';

                                            }
                                        });

                                    </script>
                                </div>

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


                    <div class="col-lg-6 col-md-12 mb-20">
                        <div class="card mh-100 position-relative">
                            <h2 class="card-heading">SEGMENTS <span>Type</span><a href="#" class="view-all">View All <i
                                        class="fa fa-angle-right"></i></a></h2>
                            <div class="segmentType-value">10<small>%</small> <span id="total_sale"></span></div>
                            <canvas class="mt-15" id="segmentType" height="300"></canvas>

                        </div>
                    </div>
                    <script>
                        // segments graph Section
                        var apiData_segments;
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            type: 'get',
                            url: '{{ URL::to('/dashboard-monthly-product-segments-api') }}', // This is what I have updated
                        }).done(function(msg) {
                            apiData_segments = JSON.parse(msg);

                            var segments = apiData_segments.segments;

                            document.getElementById('total_sale').innerHTML = 'Rs.' + segments.total_sales;
                            var graph_data = [];
                            //  var graph_color = [];
                            var graph_labels = [];

                            for (var i = 0; i < segments.segments.length; i++) {
                                graph_labels.push(segments.segments[i].name);
                                graph_data.push(segments.segments[i].qty);
                                //  graph_color.push('#'+(Math.random() * 0xFFFFFF << 0).toString(16).padStart(6, '0'));
                            }

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

                            };

                            var ctx = $("#segmentType");
                            new Chart(ctx, {
                                data: data,
                                type: 'doughnut',

                                options: {
                                    tooltips: {
                                        enabled: false
                                    },

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


                                    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: 18,

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

                            });
                        });

                    </script>

                    <div class="col-lg-6 col-md-12 mb-20">
                        <div class="card mh-100">
                            <h2 class="card-heading">Top <span>5 Channels</span><a href="/dashboard-monthly-top-channels"
                                    class="view-all">View All <i class="fa fa-angle-right"></i></a></h2>
                            <canvas class="mt-15" id="topChannels" height="350"></canvas>
                        </div>
                    </div>
                    <script>
                        //pie Chart Section
                        var apiData_channel;
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            type: 'get',
                            url: '{{ URL::to('/dashboard-monthly-channel-api') }}', // This is what I have updated
                        }).done(function(msg) {
                            apiData_channel = JSON.parse(msg);
                            var cahnnel = apiData_channel.channels

                            var chart_data = [];
                            //   var chart_color = [];
                            var chart_labels = [];

                            for (var i = 0; i < cahnnel.length; i++) {
                                chart_labels.push(cahnnel[i].retailer_type_name);
                                chart_data.push(cahnnel[i].units);
                                //  chart_color.push('#0038ba');
                            }

                            var data1 = {
                                datasets: [{
                                    data: chart_data,
                                    backgroundColor: [
                                        "#0038ba",
                                        "#14a4ff",
                                        "#c4c4c4",
                                        "#1c1c1c",
                                        "#5a5a5a"
                                    ],
                                    label: '' // for legend
                                }],
                                labels: chart_labels

                            };



                            var ctx1 = $("#topChannels");
                            new Chart(ctx1, {
                                data: data1,
                                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: false,




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

                            });






                        });

                    </script>

                    <div class="col-lg-6 col-md-12 mb-20">
                        <div class="card mh-100">
                            <h2 class="card-heading">Top 5 <span> Regions</span><a href="/dashboard-monthly-top-Regions"
                                    class="view-all">View All <i class="fa fa-angle-right"></i></a></h2>
                            <div class="row" id="distributors_data">

                            </div>
                            {{-- <script>
                                        //Distributors
                                        var apiData_products;
                                        $.ajax({
                                            headers: {
                                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                            },
                                            type: 'get',
                                            url: '{{URL::to("/dashboard-daily-top-distributors-api/".request()->route()->parameters['date'])}}', // This is what I have updated
                                        }).done(function (msg) {
                                            apiData_products = JSON.parse(msg);
                                            var products =   apiData_products.products;
                                            for(var j=0 ; j < products.length; j++) {

                                                document.getElementById('distributors_data').innerHTML +=
                                                '    <div class="col-12 mt-5 PB-5 border-bottom">'+
                                                '        <div class="row">'+
                                                '            <div class="col-12"><span class="head-font font16"><strong>Madni Traders</strong></span></div>'+
                                                '            <div class="col-12"><span class="head-font">Region: Karachi <span class="progressValue">45%</span></span></div>'+
                                                '        </div>'+
                                                '        <div class="progress">'+
                                                '            <div class="progress-bar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%" role="progressbar"> <span class="sr-only">45% Complete (success)</span> </div>'+
                                                '        </div>'+
                                                '        <div class="row">'+
                                                '            <div class="col font14">BooKing: <span class="font-digit">20,000 <small>CTNS</small></span></div>'+
                                                '            <div class="col font14 text-right">Revenue: <span class="font-digit"><small>Rs.</small> 999,999</span></div>'+
                                                '        </div>'+
                                                '    </div>';

                                            }
                                        });


                                    </script> --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {

            $('#datepicker').datepicker({
                autoclose: true,
                todayHighlight: true,
                toggleActive: true,
                format: 'DD dd MM yyyy',
                "orientation": 'right',
            }).on('changeDate', function(ev) {
                $(this).datepicker('hide');
                var d = new Date(document.getElementById('datepicker').value);
                var str = $.datepicker.formatDate('yy-mm-dd', d);
                window.location.assign('/dashboard-daily/' + str);
            });

        });

    </script>

@endsection