@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">
                        <h2 class="_head01">Daily <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> Planned Visits</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> Plan Adherence</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-daily-booked-sales-api/".request()->route()->parameters['date'])}}', // 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.planned_visits;
                                    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.plan_adherence+'<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">Booking <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-daily-booking-trends-api/".request()->route()->parameters['date'])}}', // 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-down"></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-daily-key-trends-api/".request()->route()->parameters['date'])}}', // 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-12 mb-20">
                                <div class="card">
                                    <div class="row">

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

                                            <div class="row mr-0">
                                                <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="active_sr"></span><img src="{!! asset('images/active-icon.svg') !!}" alt="">Active SRs</div>
                                                </div>
                                                <div class="col pr-0">
                                                    <div class="emp-val-box"><span id="absent_sr"></span><img src="{!! asset('images/absent-icon.svg') !!}" alt="">Absent SRs</div>
                                                </div>
                                                <div class="col pr-0">
                                                    <div class="emp-val-box"><span id="att_compliance"></span><img src="{!! asset('images/order-compliance-icon.svg') !!}" alt="">ATT. 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. Shops/O.B.</strong><span id="avg_shops_per_ob"></span></div>



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

                                        <div class="col-4 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">Employees <span>Trends</span><a href="/dashboard-daily-employee-list/{{request('date', '1970-01-01')}}" 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-daily-employees-trends-api/".request()->route()->parameters['date'])}}', // 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('active_sr').innerHTML = employees_trends.active_sr;
                                                document.getElementById('absent_sr').innerHTML = employees_trends.absent_sr;
                                                document.getElementById('att_compliance').innerHTML = employees_trends.att_compliance+'<small>%</small>';
                                                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>Mins</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>Mins</small>';
                                                document.getElementById('avg_shops_per_ob').innerHTML = employees_trends.ams_stat.avg_shops_per_ob;

                                                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-4 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">155,000 <small>Units</small></span>
                                                                    </div>
                                                                </div>
                                                                <div class="col-6 pr-0">
                                                                    <div class="col ex-avg-booking">Executed Units<span class="avg-val">155,000 <small>Units</small></span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-12 mt-20 PT-5">
                                                            <div class="total-progress">
                                                                <div class="progress mx-auto" data-value="70"><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">70<small>%</small><span>Execution</span></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

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

                                                            <span class="head-font"><strong>{{env('DIVISION_2')?env('DIVISION_2'):'Zain'}}</strong><span class="progressValue">73%</span></span>
                                                            <div class="progress">
                                                                <div class="progress-bar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" style="width: 73%" 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> 42,540 <small>Units</small></div>
                                                                <div class="col pl-0 text-right"><b>Sold:</b> 42,540 <small>Units</small></div>
                                                            </div>

                                                        </div>

                                                        <div class="col-12">

                                                            <span class="head-font"><strong>{{env('DIVISION_1')?env('DIVISION_1'):'Shahi'}}</strong><span class="progressValue">83%</span></span>
                                                            <div class="progress">
                                                                <div class="progress-bar progress-bar-gray" aria-valuenow="83" aria-valuemin="0" aria-valuemax="100" style="width: 83%" 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> 42,540 <small>Units</small></div>
                                                                <div class="col pl-0 text-right"><b>Sold:</b> 42,540 <small>Units</small></div>
                                                            </div>

                                                        </div>

                                                    </div>

                                                </div>

                                                <div class="col-4 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">
                                                    <h2 class="card-heading">Coverage <span></span></h2>
                                                    <div class="row PT-15 PB-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>

                                                    <span id="coverage_data"></span>


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

                                                        var coverage =   apiData_coverage.sales_distribution.coverage;

                                                        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 dis-vs-value"><span>'+zainper+'<small>%</small></span> ('+zainvalue+')</div>'+
                                                                '<div class="col-auto text-center p-0 font12"><strong>Overall</strong></div>'+
                                                            '<div class="col 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 dis-vs-value"><span>' + zainper + '<small>%</small></span> (' + zainvalue + ')</div>' +
                                                                '<div class="col-auto text-center p-0 font12"><strong>' + coverage_stat_zain.name + '</strong></div>' +
                                                                '<div class="col 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.booking;

                                                        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-6 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-daily-top-categories-api/".request()->route()->parameters['date'])}}', // 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-6 mb-20">
                                <div class="card mh-100">
                                    <h2 class="card-heading">Top <span>Brands</span><a href="#" 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-daily-top-brands-api/".request()->route()->parameters['date'])}}', // 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="#" class="view-all">View All <i class="fa fa-angle-right"></i></a></h2>

                                            <div class="row pro-list" id="top_products_data">


                                                </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-daily-top-products-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('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-6 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-daily-product-segments-api/".request()->route()->parameters['date'])}}', // 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-6 mb-20">
                                <div class="card mh-100">
                                    <h2 class="card-heading">Top <span>5 Channels</span><a href="#" 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-daily-channel-api/".request()->route()->parameters['date'])}}', // 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-6 mb-20">
                                <div class="card mh-100">
                                    <h2 class="card-heading">Top 5 <span> Regions</span><a href="/dashboard-regions-list/{{request('date', '1970-01-01')}}" class="view-all">View All <i class="fa fa-angle-right"></i></a></h2>
                                    <div class="row" id="distributors_data">

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