@extends('layouts.master')
@section('content')
    <style>
        .pro-info{font-size:14px; border-bottom: solid 1px #f3f3f3; padding-top: 15px; padding-bottom: 15px}
        .pro-info p{margin:0; line-height: 18px; color: #606060}

        .pro-img {
            width: 55px;
            height: 55px; border-radius: 50%;
            box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25); float: left; margin-right: 15px;
        }
        .pro-img img {width: 55px; height: 55px; border-radius: 50%}
        .pro-info h4 {font-size: 16px; margin-bottom: 0px;}
        .topreg-no {
            font-family: 'Poppins', sans-serif;
            font-weight: 800;
            font-size: 52px;
            text-align: right;
            line-height: 1;
            color: #f2f5fb;
        }
        .border-radius-0{border-radius: 0!important}
        .viewallbtn {
            font-size: 13px;
            letter-spacing: 1px; padding-left: 18px; padding-right:18px; margin-top: 25px
        }
        .topreg-no span{position: absolute; left: 15px; top: 0}
        .reg-totalsale{text-align: right; line-height: 1; font-size: 14px; padding-top: 7px;}
        .reg-totalsale span{font-size: 24px; display: block; color: #0038ba; margin-top: 5px; font-family: 'Rationale', sans-serif!important;}
        .reg-totalsale span small{color: #282828}

        .keytrend-lr .col-12 {
            padding-top: 12px;
            padding-bottom: 12px;
        }
        .total-stime{border: none!important}
        .total-stime .time-s .col {
            padding: 9px 10px;
        }
        .pro-info {
            font-size: 14px;
            border-bottom: solid 1px #f3f3f3;
        }
    </style>


          <div id="blureEffct" class="container">
                <div class="row mt-1 mb-0">
                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <h2 class="_head01">Live Report <span> Region Detail</span></h2>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <!-- <div class="dashboard-date">
                         <input type="text" id="datepicker" class="form-control" placeholder="">
                         <i class="fa fa-angle-down"></i>
                         </div>-->
                        <a href="#" class="back-btn"><i class="fa fa-long-arrow-alt-left"></i> Back</a>
                    </div>
                </div>

                <div class="row mt-1 mb-0">
                    <div class="col-6 PB-10 font15"><strong>Region:</strong> Lahore Region</div>
                    <div class="col-6 PB-10 text-right font15"><strong>RSM:</strong> Utba Aziz</div>
                </div>

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

                        <div class="row">
                            <div class="col-8">
                                <div class="card total-sale p-15">
                                    <div class="row m-0">
                                        <h2 class="card-heading mb-15 ml-5">Total <span>Booked Sales</span></h2>
                                        <div class="col-12 position-relative p-0">


                                            <div class="total-progress" style="position:absolute; top:-15px; right: 15px">
                                                <div class="progress mx-auto" id="productivity-data-value" data-value=""><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" ><span id="productivity"></span><span>Productivity</span></div>
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="total-amount PT-20"><span>Rs.</span> <span id="total-amount"></span><span class="per-v" id="growth"><i class="fa fa-long-arrow-alt-up"></i> </span></div>
                                        </div>

                                        <div class="col-4 unit-v pl-0 PT-20">Cartons<span id="ctn"></span></div>
                                        <div class="col-4 unit-v pl-0 PT-20">Dozens<span id="dz"></span></div>
                                        <div class="col-4 unit-v pl-0 PT-20">Half Dozens<span id="hdz"></span></div>
                                    </div>

                                    <div class="row total-vals border-right-0">
                                        <div class="col"><span id="planned_visits"></span>Planned Visits</div>
                                        <div class="col bg-shade"><span id="unique_visits"></span>Unique Visits</div>
                                        <div class="col"><span id="productive_visits"></span>Productive Visits</div>
                                        <div class="col bg-shade"><span id="total_orders"></span>Total Orders</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-live-report-region-api/".request()->route()->parameters['id'])}}.', // This is what I have updated
                                }).done(function (msg) {
                                    apiData = JSON.parse(msg);
                                    document.getElementById('total-amount').innerHTML= apiData.booked_sales.revenue;
                                    document.getElementById('growth').innerHTML= apiData.booked_sales.growth;
                                    document.getElementById('productivity').innerHTML= apiData.booked_sales.productivity+'<small>%</small>';
                                    document.getElementById('productivity-data-value').setAttribute("data-value", apiData.booked_sales.productivity);

                                    document.getElementById('planned_visits').innerHTML = apiData.booked_sales.stats.planned_visits;
                                    document.getElementById('unique_visits').innerHTML = apiData.booked_sales.stats.unique_visits;
                                    document.getElementById('productive_visits').innerHTML = apiData.booked_sales.stats.productive_visits;
                                    document.getElementById('total_orders').innerHTML = apiData.booked_sales.stats.total_orders+'<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-4">
                                <div class="card divisional-reports">
                                    <h2 class="card-heading">DIVISIONAL <span>SALES</span></h2>


                                    <div class="row PT-5">
                                        <div class="col-6 text-right" style="border-right:solid 1px #e8e8e8">
                                            <div class="float-left font13 text-success pl-10"><i class="fa fa-long-arrow-alt-up"></i><span id="divisional-growth-zain"></span></div>
                                            <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 class="float-right font13 text-success pr-10"> <i class="fa fa-long-arrow-alt-up"></i><span id="divisional-growth-shahi"></span></div></h4>
                                        </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 style="margin-top:25px; margin-bottom:15px" id="divisional-sales" height="160"></canvas>

                                </div>
                            </div>
                            <script>
                                //Divissional Sales Section

                                var apiData_divissional;
                                $.ajax({
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                    },
                                    type: 'get',
                                    url: '{{URL::to("/dashboard-live-report-region-divisional-api/".request()->route()->parameters['id'])}}', // This is what I have updated
                                }).done(function (msg) {
                                    apiData_divissional = JSON.parse(msg);
                                    document.getElementById('divisional-division-shahi').innerHTML= ' '+apiData_divissional.divisional_sales[0].division;
                                    document.getElementById('divisional-growth-shahi').innerHTML= apiData_divissional.divisional_sales[0].growth;
                                    document.getElementById('divisional-sold-shahi').innerHTML= apiData_divissional.divisional_sales[0].qty_sold;
                                    document.getElementById('divisional-revenue-shahi').innerHTML= apiData_divissional.divisional_sales[0].revenue;

                                    document.getElementById('divisional-division-zain').innerHTML= apiData_divissional.divisional_sales[1].division;
                                    document.getElementById('divisional-growth-zain').innerHTML= apiData_divissional.divisional_sales[1].growth;
                                    document.getElementById('divisional-sold-zain').innerHTML= apiData_divissional.divisional_sales[1].qty_sold;
                                    document.getElementById('divisional-revenue-zain').innerHTML= apiData_divissional.divisional_sales[1].revenue;

                                    var data_division_sales_ghraph = {
                                        datasets: [{
                                            data: [
                                                apiData_divissional.divisional_sales[0].revenue,
                                                apiData_divissional.divisional_sales[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 class="col-6 mb-20">
                                <div class="card mh-100 pb-0">
                                    <h2 class="card-heading">Key <span>Trends</span></h2>
                                    <div class="row keytrend-lr" id="key-trends">
                                    </div>
                                </div>
                            </div>
                            <script>
                                //Key Trends Section
                                var apiData_trends;
                                $.ajax({
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                    },
                                    type: 'get',
                                    url: '{{URL::to("/dashboard-live-report-region-key-trands-api/".request()->route()->parameters['id'])}}', // This is what I have updated
                                }).done(function (msg) {
                                    apiData_trends = JSON.parse(msg);

                                    document.getElementById('key-trends').innerHTML =
                                        '<div class="col-12">AVG. Order Value <span><small>Rs.</small> '+apiData_trends.key_trends.average_order_value+'</span></div>\n' +
                                        '                                        <div class="col-12">AVG. Products/Order <span> '+apiData_trends.key_trends.average_products_per_order+'</span></div>\n' +
                                        '                                        <div class="col-12">AVG. Drop Size <span> '+apiData_trends.key_trends.average_drop_size+'</span></div>\n' +
                                        '                                        <div class="col-12">AVG. Sales/Employee <span><small>Rs.</small> '+apiData_trends.key_trends.average_sale_per_employee+'</span></div>\n' +
                                        '                                        <div class="col-12">Active Employee <span> '+apiData_trends.key_trends.active_employees+'</span></div>\n' +
                                        '                                        <div class="col-12">Absent Employee <span> '+apiData_trends.key_trends.absent_employees+'</span></div>\n' +
                                        '                                        <div class="col-12">Diviation <span> '+apiData_trends.key_trends.deviation+'<small>%</small></span></div>\n' +
                                        '\n' +
                                        '\n' +
                                        '                                        <div class="col-12 total-stime"><img class="time-icon" src="{!! asset('images/clock-icon.svg') !!}" alt="">\n' +
                                        '                                            <h2 class="card-heading">AVG. Shift <span style="float:none">Duration</span></h2>\n' +
                                        '                                            <div class="total-time">6 <small>HRS</small> 40 <small>MINS</small></div>\n' +
                                        '                                            <div class="row time-s">\n' +
                                        '                                                <div class="col text-left">AVG. Market Duration<span> '+apiData_trends.key_trends.average_market_duration+'</span></div>\n' +
                                        '                                                <div class="col bggray text-left">Avg. Time Spent/Shop<span> '+apiData_trends.key_trends.average_time_spent_per_shop+'</span></div>\n' +
                                        '                                            </div>\n' +
                                        '                                        </div>';

                                });
                            </script>


                            <div class="col-md-6 mb-20">
                                <div class="card ts-overview pb-0" style="min-height:100%">
                                    <h2 class="card-heading mb-0">Top  <span>Performances </span></h2>

                                    <div class="_report-Head">
                                        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                            <li class="nav-item"> <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Employees </a> </li>
                                            <li class="nav-item"> <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Products</a> </li>
                                            <li class="nav-item"> <a class="nav-link" id="pills-Regions-tab" data-toggle="pill" href="#pills-Regions" role="tab" aria-controls="pills-Regions" aria-selected="false">Regions</a> </li>


                                        </ul>



                                    </div>
                                    <div class="tab-content" id="pills-tabContent">
                                        <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                                            <a href="live-report-sales-reps" class="view-all-tab">View All <i class="fa fa-angle-right"></i></a>

                                        </div>

                                        <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
                                            <a href="" class="view-all-tab">View All <i class="fa fa-angle-right"></i></a>

                                        </div>

                                        <div class="tab-pane fade" id="pills-Regions" role="tabpanel" aria-labelledby="pills-Regions-tab">
                                            <a href="#" class="view-all-tab">View All <i class="fa fa-angle-right"></i></a>

                                        </div>

                                    </div>

                                </div>
                            </div>
                            <script>
                                //Performance Section
                                var apiData_performance;
                                var count_emp;
                                var count_pro;
                                var count_reg;
                                $.ajax({
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                    },
                                    type: 'get',
                                    url: '{{URL::to("/dashboard-live-report-region-performance-api/".request()->route()->parameters['id'])}}', // This is what I have updated
                                }).done(function (msg) {
                                    apiData_performance = JSON.parse(msg);

                                    for(var i = 0; i < apiData_performance.top_performances.employees.length; i++) {
                                        count_emp = i+1;
                                        var obj = apiData_performance.top_performances.employees[i];

                                        document.getElementById('pills-home').innerHTML +=
                                            '<div class="row pro-info">\n' +
                                            '                                                <div class="col-7 pr-0">\n' +
                                            '                                                    <div class="pro-img"> <img onerror="this.src=\'{!! asset('images/employee.jpg') !!}\'" src="'+obj.employee_picture+'" alt=""> </div>\n' +
                                            '                                                    <h4>'+obj.employee_name+'</h4>\n' +
                                            '                                                    <p><strong>Territory: </strong> '+obj.territory_name+'</p>\n' +
                                            '                                                    <p>'+obj.manager_name+'</p>\n' +
                                            '                                                </div>\n' +
                                            '                                                <div class="col-2 topreg-no p-0"><img style="position:absolute;z-index: 3; width:auto; height:30px; left:0px; top:13px;" class="badge-icon" src="{!! asset('images/badge-icon.svg') !!}" alt=""><span>'+count_emp+'</span></div>\n' +
                                            '                                                <div class="col-3 pl-0 reg-totalsale">Total Booking <span><small>Rs.</small> '+obj.total+'</span></div>\n' +
                                            '                                            </div>';

                                    }

                                    for(var i = 0; i < apiData_performance.top_performances.products.length; i++) {
                                        count_pro = i+1;
                                        var obj = apiData_performance.top_performances.products[i];

                                        document.getElementById('pills-contact').innerHTML +=
                                            '<div class="row pro-info">\n' +
                                            '                                                <div class="col-7 pr-0">\n' +
                                            '                                                    <div class="pro-img border-radius-0"> <img class="border-radius-0" src="'+obj.thumbnail+'" alt=""> </div>\n' +
                                            '                                                    <h4>'+obj.category+'</h4>\n' +
                                            '                                                    <p><strong>Category: </strong> '+obj.category+'</p>\n' +
                                            '                                                    <p><strong>Brand: </strong> '+obj.brand+'</p>\n' +
                                            '                                                </div>\n' +
                                            '                                                <div class="col-2 topreg-no p-0"><img style="position:absolute;z-index: 3; width:auto; height:30px; left:0px; top:13px;" class="badge-icon" src="{!! asset('images/badge-icon.svg') !!}" alt=""><span>'+count_pro+'</span></div>\n' +
                                            '                                                <div class="col-3 pl-0 reg-totalsale">Sales Unit <span>'+obj.qty_sold+' <small>'+obj.unit_short_name+'</small> </span></div>\n' +
                                            '                                            </div>';
                                    }

                                    for(var i = 0; i < apiData_performance.top_performances.regions.length; i++) {
                                        count_reg = i+1;
                                        var obj = apiData_performance.top_performances.regions[i];

                                        document.getElementById('pills-Regions').innerHTML +=
                                            '<div class="row pro-info">\n' +
                                            '                                                <div class="col-7 pr-0">\n' +
                                            '                                                    <h4>'+obj.region_name+'</h4>\n' +
                                            '                                                    <p><strong>RSM: </strong> '+obj.rsm+'</p>\n' +
                                            '                                                </div>\n' +
                                            '                                                <div class="col-2 topreg-no p-0"><img style="position:absolute;z-index: 3; width:auto; height:30px; left:0px; top:13px;" class="badge-icon" src="{!! asset('images/badge-icon.svg') !!}" alt=""><span>'+count_reg+'</span></div>\n' +
                                            '                                                <div class="col-3 pl-0 reg-totalsale">TOTAL Booking <span><small>Rs.</small> '+obj.booking+'</span></div>\n' +
                                            '                                            </div>';
                                    }
                                });
                            </script>
                        </div>
                    </div>
                </div>
            </div>

@endsection