@extends('theme.default')

@extends('theme.sidemenu')

@section('content')

    <div id="wrapper">



        <div id="content-wrapper">
            <div class="overlay-blure"></div>
            <div id="blureEffct" class="container">

                <div class="row mt-1 mb-0">
                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <h2 class="_head01">Monthly<span>Sales</span></h2>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <div class="dashboard-date mr-0" style="margin-top:-10px">
                            <input type="text" id="datepicker" class="form-control" placeholder="">
                            <i class="fa fa-angle-down"></i>
                        </div>
                    </div>
                </div>

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

                        <div class="row">

                            <div class="col-5">
                                <div class="card top1-employee pb-0 mb-20">

                                    <h2 class="card-heading">Employee <span>Detail</span></h2>

                                    <div class="row emp-info">

                                        <div class="col-auto">
                                            <div class="emp-pic">
                                                <img class="badge-icon" src="{!! asset('theme/images/badge-icon.svg') !!}" alt="">
                                                <img class="pic" id="employee-image" alt="">
                                            </div>
                                        </div>

                                        <div class="col pl-0 pt-5" ><h4><span id="employee-name"></span></h4>
                                            <p><strong style="width:95px;" >Designation: </strong><span id="employee-designation"></span></p>
                                            <p><strong style="width:95px;">Phone:</strong><span id="employee-phone"></span></p>
                                        </div>
                                        <div class="col-12"><hr style="margin-top:13px; margin-bottom: 13px;"></div>

                                        <div class="col-12 emp-tr mb-0 pt-0 pb-0"> <span id="employee-reporting"></span>
                                             <span id="employee-area"></span>
                                            <span  id="employee-territory"></span>
                                        </div>

                                        <div class="col-12"><hr style="margin-top:12px; margin-bottom: 12px;"></div>

                                    </div>



                                    <div class="total-stime p-0"><img class="time-icon" src="{!! asset('theme/images/clock-icon.svg') !!}" alt="">
                                        <h2 class="card-heading font18">AVG. Shift <span> Duration/Day</span></h2>
                                        <div class="total-time mb-10">6 <small>HRS</small> 40 <small>MINS</small></div>

                                        <div class="row time-s" style="margin-left:-15px; margin-right:-15px; letter-spacing: normal">
                                            <div class="col" style="padding-top:14px;padding-bottom:14px; font-size:12px">Active Days<span id="active-days"></span></div>
                                            <div class="col bggray" style="padding-top:14px;padding-bottom:14px; font-size:12px">AVG. Market Time <span id="market-time"></span></div>
                                            <div class="col" style="padding-top:14px;padding-bottom:14px; font-size:12px">AVG. Time/Shop<span id="market-avg-time"></span></div>
                                            <div class="col bggray" style="padding-top:14px;padding-bottom:14px; font-size:12px">AVG. Time Travel<span id="market-time-travel"></span></div>
                                        </div>

                                    </div>


                                </div>
                            </div>


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


                                        <div class="col-8 position-relative p-0">
                                            <div class="total-amount PT-20" style="font-size:35px"><span>Rs.</span> <span id="revenue"></span><span class="per-v"><i class="fa fa-long-arrow-alt-up"></i> <span id="growth"></span></span>
                                            </div>
                                        </div>

                                        <div class="col-4">
                                            <div class="total-progress">
                                                <div class="progress mx-auto" data-value='' id="productivity"><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-value"></span><span>Productivity</span></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

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

                                    <div class="row total-vals border-right-0">
                                        <div class="col font13"><span id="planned_visit"></span>Planned Visits</div>
                                        <div class="col bg-shade font13"><span id="unique_visit">550</span>Unique Visits</div>
                                        <div class="col font13"><span id="productive_visit"></span>Productive Visits</div>
                                        <div class="col bg-shade font13"><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-employee-sales-api")}}', // This is what I have updated
                                }).done(function (msg) {
                                    apiData = JSON.parse(msg);
                                    var profile = apiData.total_sales.profile;
                                    document.getElementById('employee-name').innerHTML= profile.employee_name;
                                    document.getElementById('employee-image').src= profile.employee_picture;
                                    document.getElementById('employee-reporting').innerHTML= '<strong>Reporting To:</strong>'+profile.reporting_to;
                                    document.getElementById('employee-territory').innerHTML= '<strong>Territory:</strong>   ;'+profile.territory_name;
                                    document.getElementById('employee-area').innerHTML= '<strong>Area:</strong>'+profile.area_name;
                                    document.getElementById('employee-phone').innerHTML= profile.employee_phone;
                                    document.getElementById('employee-designation').innerHTML= profile.designation;

                                    //total sales
                                    document.getElementById('revenue').innerHTML= apiData.total_sales.revenue;
                                    document.getElementById('growth').innerHTML= apiData.total_sales.growth;
                                    document.getElementById('productivity-value').innerHTML= apiData.total_sales.productivity+'<small>%</small>';
                                    document.getElementById('productivity').setAttribute("data-value", apiData.total_sales.productivity);

                                    document.getElementById('planned_visit').innerHTML = apiData.total_sales.stats.planned_visits;
                                    document.getElementById('unique_visit').innerHTML = apiData.total_sales.stats.unique_visits;
                                    document.getElementById('productive_visit').innerHTML = apiData.total_sales.stats.productive_visits;
                                    document.getElementById('total_orders').innerHTML = apiData.total_sales.stats.total_orders;

                                    var dz = 0;
                                    var hdz = 0;
                                    var ctn = 0;
                                    for(var i = 0; i < apiData.total_sales.primary_units.length; i++) {
                                        var obj = apiData.total_sales.primary_units[i].unit_short_name;
                                        if(obj=="Dz")
                                            dz++;
                                        else if(obj=='HDoz')
                                            hdz++;
                                        else if(obj=='CTN')
                                            ctn++;
                                    }
                                    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-6 mb-20">
                                <div class="card mh-100 pb-0">
                                    <h2 class="card-heading">Key <span>Trends</span></h2>
                                    <div class="row keytrend-lr">
                                        <div class="col-12 pr-0"><strong>Orders</strong> <span><small>Rs.</small><span id="orders"></span></span></div>
                                        <div class="col-12 pr-0"><strong>AVG. Daily Sales</strong> <span><small>Rs.</small><span id="daily_sales"></span></span></div>
                                        <div class="col-12 pr-0"><strong>AVG. Weekly Sales</strong> <span id="weekly_sales"></span></div>
                                        <div class="col-12 pr-0"><strong>Cancellation Ratio</strong> <span id="cancellation"></span></div>
                                        <div class="col-12 pr-0"><strong>AVG. Order Value</strong> <span><small>Rs.</small><span id="order_value"></span></span></div>
                                        <div class="col-12 pr-0"><strong>AVG. Products/Order</strong> <span id="avg_products"></span></div>
                                        <div class="col-12 pr-0"><strong>AVG. Drop Size</strong> <span id="drop_size"></span></div>
                                        <div class="col-12 pr-0 border-0"><strong>New Retailers</strong> <span id="retailers"></span></div>
                                    </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-employee-sales-trend-api")}}', // This is what I have updated
                                }).done(function (msg) {
                                    apiData_trends = JSON.parse(msg);

                                    document.getElementById('daily_sales').innerHTML = apiData_trends.key_trends.avg_daily_sale;
                                    document.getElementById('weekly_sales').innerHTML = apiData_trends.key_trends.avg_weekly_sale;
                                    document.getElementById('cancellation').innerHTML = apiData_trends.key_trends.cancellation_ratio;
                                    document.getElementById('order_value').innerHTML = apiData_trends.key_trends.avg_order_value;
                                    document.getElementById('avg_products').innerHTML = apiData_trends.key_trends.avg_products_per_order;
                                    document.getElementById('drop_size').innerHTML = apiData_trends.key_trends.avg_drop_size;
                                    document.getElementById('retailers').innerHTML = apiData_trends.key_trends.new_retailers;
                                    document.getElementById('orders').innerHTML = apiData_trends.key_trends.orders;
                                });
                            </script>


                            <div class="col-6 mb-20">
                                <div class="card mh-100 pb-0">
                                    <h2 class="card-heading">Top <span>Products</span></h2>
                                    <div class="row" id="top_products">


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

                                    for(var i = 0; i < apiData_products.products.length; i++) {
                                        document.getElementById('top_products').innerHTML +=
                                            '<div class="col-12 top-pr-list top-pro-lr">\n' +
                                            '                                            <div class="row">\n' +
                                            '                                                <div class="col-auto pr-0"><img src="' + apiData_products.products[i].thumbnail + '" alt=""></div>\n' +
                                            '                                                <div class="col">\n' +
                                            '                                                    <span class="head-font font15">' + apiData_products.products[i].item_name + '<span class="progressValue">' + apiData_products.products[i].sales + '<small>%</small></span></span>\n' +
                                            '                                                    <div class="progress">\n' +
                                            '                                                        <div class="progress-bar" aria-valuenow="' + apiData_products.products[i].contribution + '" aria-valuemin="0" aria-valuemax="100" style="width: ' + apiData_products.products[i].contribution + '" role="progressbar">  </div>\n' +
                                            '                                                    </div>\n' +
                                            '                                                </div>\n' +
                                            '                                            </div>\n' +
                                            '                                        </div>';
                                    }
                                });
                            </script>






                        </div>


                    </div>


                    @extends('theme.footer')

                </div>


            </div>

        </div>

    </div>


@endsection