@extends('layouts.master')
@section('content')
    <style>
        .topstats{margin-top: 0px; font-size: 13px; margin-bottom: 15px;}
        .topstats .gary-box{line-height: 1;background-color: #f9f9f9;border-bottom: solid 1px #d1d1d1;padding: 10px;}
        .topstats .gary-box span, .value-sh span{font-family: 'Rationale', sans-serif; color:#0038ba; font-size: 20px; float: right; margin-top: -4px;}
        .Product-IMG img{width: 34px; height: 34px;}
        .Product-row{margin-bottom: 10px}
        .product-list-div{box-shadow:none; border:solid 1px #ececec; padding-bottom: 45px; padding: 5px 15px 30px 15px; letter-spacing: 1px}
        .total-order-val{padding: 10px; font-size: 14px; background-color: #0038ba; color: #fff; margin: 0 0 25px 0}
        .total-order-val span{font-family: 'Rationale', sans-serif;font-size: 20px;}

        /*map css*/
        #map {
            height: 100%;
        }

        /* Optional: Makes the sample page fill the window. */
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

    </style>
    <div class="modal fade" id="order_detail_modal_new" tabindex="-1" role="dialog" aria-labelledby="DetailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-full modal-dialog-centered">
            <div class="modal-content top_border">
                <div class="modal-header">
                    <h5 class="modal-title" id="DetailModalLabel">Order <span> Detail</span></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="top:22px;"> <span aria-hidden="true">&times;</span> </button>
                </div>
                <div class="container">
                    <div class="row" id="order-item-details">
                    </div>
                </div>

            </div>
        </div>
    </div>
    <script>
        //Orders
        function vieworderdetails(id){

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: 'get',
                url: '{{URL::to("/dashboard-live-report-sales-reps-details-orders-api/".request()->route()->parameters['emp_id'])}}', // This is what I have updated
            }).done(function (msg) {
                var apiData_orders = JSON.parse(msg);
                var orders_data = apiData_orders.orders;
                var orders_details = '';

                for(var add = 0; add< orders_data.length; add++) {

                    if(orders_data[add].order_id == id) {
                        orders_details += '<div class="col-md-12">';

                        orders_details += '<div class="topstats">' +
                            '         <div class="row">' +
                            '             <div class="col-6">' +
                            '                 <div class="row">' +
                            '                     <div class="col-7"> <strong class="retailer-name">'+orders_data[add].name+'</strong>' +
                            '                         <p class="mb-0 font13">'+orders_data[add].country+'</p>' +
                            '                         ' +
                            '                     </div>' +
                            '                     <div class="col-5 p-0">' +
                            '                         <p class="mb-0 font13"><strong>Phone No:</strong> '+orders_data[add].retailer_name+'</p>' +
                            '                         <p class="mb-0 font13"><strong>Neighborhood:</strong> '+orders_data[add].neighborhood+'</p>' +
                            '                     </div>' +
                            '                 </div>' +
                            '             </div>' +
                            '             <div class="col-6 pl-0">' +
                            '                 <div class="row m-0">' +
                            '                     <div class="col pr-0">' +
                            '                         <div class="gary-box"><strong>Date:</strong> <span>'+orders_data[add].order_date+'</span></div>' +
                            '                     </div>' +
                            '                     <div class="col pr-0">' +
                            '                         <div class="gary-box"><strong>Order No:</strong> <span>'+orders_data[add].order_id+'</span></div>' +
                            '                     </div>' +
                            '                 </div>' +
                            '             </div>' +
                            '         </div>' +
                            '     </div>';

                        orders_details += '<div class="card product-list-div">';


                        orders_details += '<div class="row">';

                        orders_details += '<div class="col-12 p-0">' +
                            '   <div class="Product-row-title p-10">' +
                            '       <div class="row">' +
                            '           <div class="col colStyle h-auto" style="max-width:450px">Product</div>' +
                            '           <div class="col colStyle h-auto" style="max-width:130px">Unit</div>' +
                            '           <div class="col colStyle h-auto" style="max-width:130px">Trade Price</div>' +
                            '           <div class="col colStyle h-auto" style="max-width:130px">Trade Offer</div>' +
                            '           <div class="col colStyle h-auto" style="max-width:130px">QTY:</div>' +
                            '           <div class="col colStyle h-auto" style="max-width:130px">Total Price:</div>' +
                            '       </div>' +
                            '   </div>';

                        for (var edd = 0; edd < orders_data[add].items.length; edd++) {

                            orders_details += '   <div class="Product-row p-10">' +
                                '        <div class="row">' +
                                '            <div class="col _ITEMNAME" style="max-width:450px">' +
                                '                <div class="Product-IMG"><img src="'+orders_data[add].items[edd].thumbnail+'" alt=""></div>' +
                                '\n                <div class="Product-Name"><strong>'+orders_data[add].items[edd].item_name+'</strong> <span style="display:block; line-height:1"></span></div>' +
                                '            </div>' +
                                '            <div class="col colStyle font-no" style="max-width:130px"><div class="pt-10">'+orders_data[add].items[edd].unit_name+'</div></div>' +
                                '            <div class="col colStyle font-no" style="max-width:130px"><div class="pt-10">Rs. '+orders_data[add].items[edd].trade_price+'</div></div>' +
                                '            <div class="col colStyle font-no" style="max-width:130px"><div class="pt-10">'+orders_data[add].items[edd].trade_offer+'</div></div>' +
                                '            <div class="col colStyle font-no" style="max-width:130px"><div class="pt-10">'+orders_data[add].items[edd].qty+'</div></div>' +
                                '            <div class="col colStyle font-no" style="max-width:130px"><div class="pt-10">Rs. '+orders_data[add].items[edd].total_price+'</div></div>' +
                                '        </div>' +
                                '    </div>' ;
                        }

                        orders_details += '   </div>' +
                            '          </div>' +
                            '    </div>' +
                            '      <div class="row total-order-val">' +
                            '         <div class="col-6 pt-5"><strong>Total Order Value:</strong></div>' +
                            '          <div class="col-6 text-right"><span><small>Rs.</small> '+orders_data[add].value+'</span></div>' +
                            '      </div>' +
                            '  </div>';
                    }
                    debugger;

                }
                document.getElementById('order-item-details').innerHTML = orders_details;
            });
        }
    </script>

    <div class="row">

        <div class="col-auto pr-0">
            <div class="card shift-overview">
                <div class="shift-overview-top">

                    <h2 class="card-heading">Sales  <span>Rep Detail</span><a href="/live-report-sales-reps" class="back-btn"><i class="fa fa-long-arrow-alt-left"></i> Back</a></h2>

                    <div class="row emp-info">
                        <div class="col-auto">
                            <div class="emp-pic">
                                <img class="badge-icon" src="{!! asset('images/badge-icon.svg') !!}" alt="">
                                <img class="pic" id="employee-image" onerror="this.src='{!! asset('images/employee.jpg') !!}'" src="{!! asset('images/employee.jpg') !!}" alt="">
                            </div>
                        </div>
                        <div class="col pl-0"><h4 id="employee-name"></h4>
                            <p id="employee-designation"><strong style="width:100px"></strong></p>
                            <p id="employee-phone"></p>
                        </div>
                    </div>

                    <div class="row emp-info">
                        <div class="col-12"><hr class="mb-10"></div>
                        <div class="col-12">
                            <p id="employee-reporting"></p>
                            <p id="employee-area"></p>
                            <p id="employee-territory"></p>
                        </div>
                    </div>

                    <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">SALES</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">TIME LINE</a> </li>
                            <li class="nav-item"> <a class="nav-link" id="pills-order-tab" data-toggle="pill" href="#pills-order" role="tab" aria-controls="pills-order" aria-selected="false">ORDERS</a> </li>
                            <li class="nav-item"> <a class="nav-link" id="pills-posm-tab" data-toggle="pill" href="#pills-posm" role="tab" aria-controls="pills-posm" aria-selected="false">POSM</a> </li>
                        </ul>
                    </div>
                </div>

                <div class="shift-overview-detail">
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                            <div class="row total-bs">
                                <div class="col-12">
                                    <h2 class="card-heading">Total <span>Booked Sales</span></h2>
                                    <div class="row">
                                        <div class="col">
                                            <div class="total-amount"><span>Rs.</span> <span id="sales-revenue"></span><span class="per-v"><i class="fa fa-long-arrow-alt-up"></i> <span id="sales-growth"></span></span>
                                            </div>
                                            <div class="row pr-unit-v">
                                                <div class="col"><span id="sales-ctn"></span> Cartons</div>
                                                <div class="col"><span id="sales-dz"></span> Dozens</div>
                                                <div class="col"><span id="sales-hdz"></span> Half Dozens</div>
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <div class="total-progress">
                                                <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="sales-productivity"></span><span>Productivity</span></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="row total-VO">
                                                <div class="col-6 p-0 mb-15">
                                                    <div class="row">
                                                        <div class="col-auto pr-0"><div class="icon-emp-vo"><img src="{!! asset('images/visits-icon-emp.svg') !!}" alt=""></div></div>
                                                        <div class="col"><span id="sales-stats-planned_visits"></span>Planned Visits</div>
                                                    </div>
                                                </div>

                                                <div class="col-6 p-0 mb-15">
                                                    <div class="row">
                                                        <div class="col-auto pr-0"><div class="icon-emp-vo"><img src="{!! asset('images/unique-visit-icon.svg') !!}" alt=""></div></div>
                                                        <div class="col"><span id="sales-stats-unique_visits"></span>Unique Visits</div>
                                                    </div>
                                                </div>

                                                <div class="col-6 p-0">
                                                    <div class="row">
                                                        <div class="col-auto pr-0"><div class="icon-emp-vo"><img src="{!! asset('images/productive-visit-icon.svg') !!}" alt=""></div></div>
                                                        <div class="col"><span id="sales-stats-productive_visits"></span>Productive Visits</div>
                                                    </div>
                                                </div>

                                                <div class="col-6 p-0">
                                                    <div class="row">
                                                        <div class="col-auto pr-0"><div class="icon-emp-vo"><img src="{!! asset('images/order-icon-emp.svg') !!}" alt=""></div></div>
                                                        <div class="col"><span id="sales-stats-total_orders"></span>Total Orders</div>
                                                    </div>
                                                </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-live-report-sales-reps-details-api/".request()->route()->parameters['emp_id'])}}', // This is what I have updated
                                }).done(function (msg) {
                                    apiData = JSON.parse(msg);
                                    var bookedsales = apiData.booked_sales;
                                    var profile = bookedsales.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= '<strong style="width:100px">Phone No:</strong>'+profile.employee_phone;
                                    document.getElementById('employee-designation').innerHTML= profile.designation;

                                    document.getElementById('sales-revenue').innerHTML= bookedsales.revenue;
                                    document.getElementById('sales-growth').innerHTML= bookedsales.growth;
                                    document.getElementById('sales-productivity').innerHTML= bookedsales.productivity+'%';
                                    document.getElementById('productivity-data-value').setAttribute("data-value", bookedsales.productivity);

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

                                    document.getElementById('sales-stats-planned_visits').innerHTML = bookedsales.stats.planned_visits;
                                    document.getElementById('sales-stats-unique_visits').innerHTML = bookedsales.stats.unique_visits;
                                    document.getElementById('sales-stats-productive_visits').innerHTML =  bookedsales.stats.productive_visits;
                                    document.getElementById('sales-stats-total_orders').innerHTML = bookedsales.stats.total_orders;
                                });
                            </script>

                            <div class="row">
                                <div class="col-12 PT-20 PB-20">
                                    <h2 class="card-heading">Key <span>Trends</span></h2>
                                    <div class="row">
                                        <div class="col-12 key-tr-list">AVG. Spent Time/Shop <span id="trends_spent_time"><small></small></span></div>
                                        <div class="col-12 key-tr-list">AVG. Order Value Rs.<span id="trends_order_value"></span></div>
                                        <div class="col-12 key-tr-list">AVG. Products/Order <span id="trends_products"></span></div>
                                        <div class="col-12 key-tr-list">New Retailers <span id="trends_retailers"></span></div>
                                        <div class="col-12 key-tr-list">AVG. Discount/Order <span id="trends_discount"></span></div>
                                    </div>
                                </div>
                            </div>
                            <script>
                                //key trends
                                var apiData_trend;
                                $.ajax({
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                    },
                                    type: 'get',
                                    url: '{{URL::to("/dashboard-live-report-sales-reps-details-trend-api/".request()->route()->parameters['emp_id'])}}', // This is what I have updated
                                }).done(function (msg) {
                                    apiData_trend = JSON.parse(msg);

                                    document.getElementById('trends_spent_time').innerHTML= apiData_trend.key_trends.avg_time_spent;
                                    document.getElementById('trends_order_value').innerHTML= apiData_trend.key_trends.avg_order_value;
                                    document.getElementById('trends_products').innerHTML= apiData_trend.key_trends.avg_products_per_order;
                                    document.getElementById('trends_retailers').innerHTML= apiData_trend.key_trends.new_retailers;
                                    document.getElementById('trends_discount').innerHTML= apiData_trend.key_trends.orders;
                                });
                            </script>

                            <div class="row">
                                <div class="col-12">
                                    <h2 class="card-heading">Top <span>Product Sales</span></h2>
                                    <div class="row" id="top_products">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <script>
                            var apiData_products;
                            $.ajax({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                },
                                type: 'get',
                                url: '{{URL::to("/dashboard-live-report-sales-reps-details-products-api/".request()->route()->parameters['emp_id'])}}', // This is what I have updated
                            }).done(function (msg) {
                                apiData_products = JSON.parse(msg);
                                var employee_pro = apiData_products.products;

                                for(var ep = 0; ep<employee_pro.length;ep++) {

                                    document.getElementById('top_products').innerHTML += '<div class="col-12 top-pr-list">\n' +
                                        '\t<div class="row">\n' +
                                        '\t\t<div class="col-auto pr-0"><img src="'+employee_pro[ep].thumbnail+'" alt=""></div>\n' +
                                    '\t\t<div class="col">\n' +
                                    '\t\t\t<span class="head-font">'+employee_pro[ep].item_name+'<span class="progressValue">'+employee_pro[ep].sales+' - '+employee_pro[ep].contribution+'</span></span>\n' +
                                    '\t\t\t<div class="progress">\n' +
                                    '\t\t\t\t<div class="progress-bar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style="width: '+employee_pro[ep].contribution+'" role="progressbar"> <span class="sr-only">45% Complete (success)</span> </div>\n' +
                                    '\t\t\t</div>\n' +
                                    '\t\t</div>\n' +
                                    '\t</div>\n' +
                                    '</div>';

                                }
                            });
                        </script>


                        <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
                            <div class="row">
                                <div class="col-12 search-timeline">
                                    <div class="CL-Product"><i class="fa fa-search"></i><input type="text" class="form-control" id="" placeholder="Search Timeline"></div>
                                </div>

                                <div class="col-12 total-stime"><img class="time-icon" src="{!! asset('images/clock-icon.svg') !!}" alt="">
                                    <h2 class="card-heading">Total <span>Time Spent Today</span></h2>
                                    <div class="total-time" id="time_spend"></div>
                                    <div class="row time-s">
                                        <div class="col">Check in<span  id="check_in"></span></div>
                                        <div class="col bggray" >Check Out<span  id="check_out"></span></div>
                                        <div class="col">First Order<span id="first_order"></span></div>
                                        <div class="col bggray">Last Order<span id="last_order"></span></div>
                                    </div>

                                    <div class="row time-s" >
                                        <div class="col">AVG. Travel Time<span> 6 Hrs 40 Mins</span></div>
                                        <div class="col border-left">AVG. Time/shop<span>6 Hrs 40 Mins</span></div>

                                        <div class="col-12 bggray text-left">
                                            <div class="row m-0">
                                                <div class="col" style="padding-top:13px; padding-left:0">AVG. Market Duration</div>
                                                <div class="col text-right"><span style="padding:0; float:right">6 Hrs 40 Mins</span></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12" style="color:red !important;">
                                    <h2 class="card-heading">Timeline </h2>
                                    <div class="FU-history">
                                        <ul class="Act-timeline" id="activity-data">

                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <script>
                            //Timeline
                            var check_in_lat;
                            var check_in_lng;
                            var apiData_timeline;
                            $.ajax({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                },
                                type: 'get',
                                url: '{{URL::to("/dashboard-live-report-sales-reps-details-timeline-api/".request()->route()->parameters['emp_id'])}}', // This is what I have updated
                            }).done(function (msg) {
                                apiData_timeline = JSON.parse(msg);

                                document.getElementById('check_in').innerHTML= apiData_timeline.timeline.check_in;
                                document.getElementById('check_out').innerHTML= apiData_timeline.timeline.check_out;
                                document.getElementById('first_order').innerHTML= apiData_timeline.timeline.first_order;
                                document.getElementById('last_order').innerHTML= apiData_timeline.timeline.last_order;
                                check_in_lat= apiData_timeline.timeline.check_in_lat;
                                check_in_lng= apiData_timeline.timeline.check_in_lng;
                                check_out_lat= apiData_timeline.timeline.check_out_lat;
                                check_out_lng= apiData_timeline.timeline.check_out_lng;

                                var activity = '';

                                for(var ad = 0; ad< apiData_timeline.timeline.activity.length; ad++){
                                    var activity_li = apiData_timeline.timeline.activity[ad];
                                    if(activity==''){
                                        activity += '<li style="margin-bottom:25px;">'+
                                            '<div class="dateFollowUP">'+apiData_timeline.timeline.check_in+'</div>'+
                                            '<div class="timeline-icon"><img src="{!! asset('images/checkin-mark-icon.svg') !!}" alt=""></div>'+
                                           ' <div class="timeline-info">'+
                                          '      <h4>Check IN</h4>'+
                                         '   </div>'+
                                        '</li>';
                                        }

                                            activity += '<li>'+
                                     '           <div class="dateFollowUP">'+activity_li.started_at+'<br>to<br>'+activity_li.ended_at+'</div>'+
                                     '       <div class="timeline-icon"><img src="{!! asset('images/order-icon-timeline.svg') !!}" alt=""></div>'+
                                     '       <div class="timeline-info">'+
                                     '           <h4>'+activity_li.retailer_name+'</h4>'+
                                     '           <div class="historyDiv">'+
                                     '               <p><strong>Time Spent:</strong> '+activity_li.time_spent+'</p>'+
                                     '               <p><strong>Order:</strong> '+activity_li.took_order+'</p>'+
                                     '               <p><strong>Order Amount:</strong> Rs. '+activity_li.order_amount+'</p>'+
                                     '           </div>'+
                                     '       </div>'+
                                     '   </li>';

                                    }

                                activity += '<li>'+
                                    '  <div class="dateFollowUP">'+apiData_timeline.timeline.check_out+'</div>'+
                                   '     <div class="timeline-icon"><img src="{!! asset('images/checkout-mark-icon.svg') !!}" alt=""></div>'+
                                   '     <div class="timeline-info">'+
                                   '         <h4>Check Out</h4>'+
                                   '     </div>'+
                                   ' </li>';

                                    document.getElementById('activity-data').innerHTML = activity;

                                viewcheckin();
                                
                                    //map code
                                /*const myLatLng = { lat: check_in_lat , lng: check_in_lng };
                                const map = new google.maps.Map(document.getElementById("map"), {
                                    zoom: 12,
                                    center: myLatLng,
                                });
                                new google.maps.Marker({
                                    position: myLatLng,
                                    map,
                                    title: "Check In",
                                });*/

                            });
                        </script>

                        <div class="tab-pane fade" id="pills-order" role="tabpanel" aria-labelledby="pills-order-tab">
                            <div class="row">
                                <div class="col-12 search-timeline">
                                    <div class="CL-Product"><i class="fa fa-search"></i><input type="text" class="form-control" id="" placeholder="Search"></div>
                                </div>
                                <span id="orders-data"></span>
                            </div>
                            <script>
                                //Orders
                                $.ajax({
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                    },
                                    type: 'get',
                                    url: '{{URL::to("/dashboard-live-report-sales-reps-details-orders-api/".request()->route()->parameters['emp_id'])}}', // This is what I have updated
                                }).done(function (msg) {
                                    var apiData_orders = JSON.parse(msg);
                                    var orders_data = apiData_orders.orders;

                                    for(var ad = 0; ad< orders_data.length; ad++){

                                        document.getElementById('orders-data').innerHTML +=
                                        '<div class="col-12 dash-order-list">'+
                                '            <div class="row">'+
                                    '            <div class="col-9 pr-0"><h3>'+orders_data[ad].retailer_name+'</h3>'+
                                             '        <div class="ord-d"><strong>Neighbourhood:</strong> '+orders_data[ad].neighborhood+'</div>'+
                                            '        <div class="ord-d"><strong>Order No:</strong> '+orders_data[ad].order_id+'</div>'+
                                            '    </div>'+
                                             '    <div class="col-3 text-right"><span class="dash-ord-price"><small>Rs.</small> '+orders_data[ad].value+'</span>'+
                                                '    <button class="btn btn-primary" data-toggle="modal" data-target="#order_detail_modal_new" onClick="vieworderdetails('+orders_data[ad].order_id+')" >View</button>'+
                                            '    </div>'+
                                        '    </div>'+
                                    '    </div>';
                                    }
                                });
                            </script>
                        </div>

                        <div class="tab-pane fade" id="pills-posm" role="tabpanel" aria-labelledby="pills-posm-tab">
                            <div class="row">
                                <div class="col-12 search-timeline">
                                    <div class="CL-Product"><i class="fa fa-search"></i><input type="text" class="form-control" id="" placeholder="Search"></div>
                                </div>

                                <div class="col-12 dash-order-list">
                                    <div class="row">
                                        <div class="col-9 pr-0"><h3>Ahmed Khan Karyana Store</h3>
                                        </div>
                                        <div class="col-3 text-right">
                                            <a class="btn btn-primary pl-10 pr-10" href="{!! asset('images/store-img.jpg') !!}" data-lightbox="example-set" data-title="Retailer Name: image1 title here..............">
                                                <i class="fa fa-camera"></i> View</a>
                                            <a class="example-image-link" href="{!! asset('images/imag-product.jpg') !!}" data-lightbox="example-set" data-title="Retailer Name: image2 title here.............."></a>
                                            <a class="example-image-link" href="{!! asset('images/customer-img.jpg') !!}" data-lightbox="example-set" data-title="Retailer Name: image3 title here.............."></a>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 dash-order-list">
                                    <div class="row">
                                        <div class="col-9 pr-0"><h3>Ahmed Khan Karyana Store</h3>
                                        </div>
                                        <div class="col-3 text-right">
                                            <a class="btn btn-primary pl-10 pr-10" href="{!! asset('images/store-img.jpg') !!}" data-lightbox="example-set" data-title="Retailer Name: image1 title here..............">
                                                <i class="fa fa-camera"></i> View</a>
                                            <a class="example-image-link" href="{!! asset('images/imag-product.jpg') !!}" data-lightbox="example-set" data-title="Retailer Name: image2 title here.............."></a>
                                            <a class="example-image-link" href="{!! asset('images/customer-img.jpg') !!}" data-lightbox="example-set" data-title="Retailer Name: image3 title here.............."></a>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 dash-order-list">
                                    <div class="row">
                                        <div class="col-9 pr-0"><h3>Ahmed Khan Karyana Store</h3>
                                        </div>
                                        <div class="col-3 text-right">
                                            <a class="btn btn-primary pl-10 pr-10" href="{!! asset('images/store-img.jpg') !!}" data-lightbox="example-set" data-title="Retailer Name: image1 title here..............">
                                                <i class="fa fa-camera"></i> View</a>
                                            <a class="example-image-link" href="{!! asset('images/imag-product.jpg') !!}" data-lightbox="example-set" data-title="Retailer Name: image2 title here.............."></a>
                                            <a class="example-image-link" href="{!! asset('images/customer-img.jpg') !!}" data-lightbox="example-set" data-title="Retailer Name: image3 title here.............."></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col p-0 position-relative">
            <div class="map-b-act">
                <div class="row">
                    <div class="col p-0"><a onclick="viewcheckin()" id="check-in" class="active" href="#"><img src="{!! asset('images/check-in-icon.svg') !!}" alt="">Check In</a></div>
                    <div class="col p-0"><a onclick="viewcheckout()" id="check-out"><img src="{!! asset('images/checkout-icon.svg') !!}" alt="">Check Out</a></div>
                    <div class="col p-0"><a onclick="viewproshops()" id="pro-shops"><img src="{!! asset('images/productive_shop-icon.svg') !!}" alt="">Productive Shops</a></div>
                    <div class="col p-0"><a onclick="viewvisitedshops()" id="visited-shops"><img src="{!! asset('images/non_productive_shop-icon.svg') !!}" alt="">Visited Shops</a></div>
                    <div class="col p-0"><a onClick="viewcompleteroute()" id="complete-route"><img src="{!! asset('images/complete-route-icon.svg') !!}" alt="">Complete Route</a></div>
                </div>
            </div>

            <div class="map-section" id="map_dashboard_report" style="background-position: top center">
            </div>

            <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDeQwXxCxBGNOxr-LOyv1IhchD7YST91eg&callback=initMap&libraries=&v=weekly" async ></script>
        </div>
    </div>

<script>
    document.getElementById('container').className = 'container-fluid emp-shift-overview';
    document.getElementById('content-wrapper').style.padding = '0px 0px 0px 0px';

    $(document).on('ready',function(){
        var map = new google.maps.Map(document.getElementById('map_dashboard_report'), {
            center: { lat: 34.397, lng: 150.644 },
            scrollwheel: false,
            zoom: 2
        });
    })
         function viewcheckout() {
            document.getElementById("check-in").classList.remove("active");
            document.getElementById("check-out").classList.remove("active");
            document.getElementById("pro-shops").classList.remove("active");
            document.getElementById("visited-shops").classList.remove("active");
            document.getElementById("complete-route").classList.remove("active");

            document.getElementById("check-out").classList.add("active");

            var check_out_lat;
            var check_out_lng;
            var apiData_timeline;
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: 'get',
                url: '{{URL::to("/dashboard-live-report-sales-reps-details-timeline-api/".request()->route()->parameters['emp_id'])}}', // This is what I have updated
            }).done(function (msg) {
                apiData_timeline = JSON.parse(msg);
                check_out_lat = apiData_timeline.timeline.check_out_lat;
                check_out_lng = apiData_timeline.timeline.check_out_lng;
                //map code
                const myLatLng = {lat: check_out_lat, lng: check_out_lng};

                const map = new google.maps.Map(document.getElementById("map_dashboard_report"), {
                    zoom: 12,
                    center: myLatLng,
                });
                new google.maps.Marker({
                    position: myLatLng,
                    map,
                    title: "Check In",
                });

            });
        }

        //check In
        function viewcheckin() {
            document.getElementById("check-in").classList.remove("active");
            document.getElementById("check-out").classList.remove("active");
            document.getElementById("pro-shops").classList.remove("active");
            document.getElementById("visited-shops").classList.remove("active");
            document.getElementById("complete-route").classList.remove("active");

            document.getElementById("check-in").classList.add("active");

            var check_in_lat;
            var check_in_lng;
            var apiData_timeline;
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: 'get',
                url: '{{URL::to("/dashboard-live-report-sales-reps-details-timeline-api/".request()->route()->parameters['emp_id'])}}', // This is what I have updated
            }).done(function (msg) {
                apiData_timeline = JSON.parse(msg);
                check_in_lat = apiData_timeline.timeline.check_in_lat;
                check_in_lng = apiData_timeline.timeline.check_in_lng;
                //map code
                const myLatLng = {lat: check_in_lat, lng: check_in_lng};

                const map = new google.maps.Map(document.getElementById("map_dashboard_report"), {
                    zoom: 12,
                    center: myLatLng,
                });
                new google.maps.Marker({
                    position: myLatLng,
                    map,
                    title: "Check In",
                });

            });
        }

        function viewvisitedshops() {
            document.getElementById("check-in").classList.remove("active");
            document.getElementById("check-out").classList.remove("active");
            document.getElementById("pro-shops").classList.remove("active");
            document.getElementById("visited-shops").classList.remove("active");
            document.getElementById("complete-route").classList.remove("active");

            document.getElementById("visited-shops").classList.add("active");

            var apiData_timeline;
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: 'get',
                url: '{{URL::to("/dashboard-live-report-sales-reps-details-timeline-details-api/".request()->route()->parameters['emp_id'])}}', // This is what I have updated
            }).done(function (msg) {
                apiData_timeline = JSON.parse(msg);
                var visited_shops = apiData_timeline.timeline_detail.activity;

                const FirstLatLng = {lat: visited_shops[0].latitude, lng: visited_shops[0].longitude};

                const map = new google.maps.Map(document.getElementById("map_dashboard_report"), {
                    zoom: 12,
                    center: FirstLatLng,
                });

                for(var vs = 0; vs<visited_shops.length; vs++) {
                    //map code
                    const myLatLng = {lat: visited_shops[vs].latitude, lng: visited_shops[vs].longitude};
                    new google.maps.Marker({
                        position: myLatLng,
                        map,
                        title: visited_shops[vs].retailer_name,
                    });
                }
            });
        }

        function viewproshops() {
            document.getElementById("check-in").classList.remove("active");
            document.getElementById("check-out").classList.remove("active");
            document.getElementById("pro-shops").classList.remove("active");
            document.getElementById("visited-shops").classList.remove("active");
            document.getElementById("complete-route").classList.remove("active");

            document.getElementById("pro-shops").classList.add("active");

            var apiData_timeline;
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: 'get',
                url: '{{URL::to("/dashboard-live-report-sales-reps-details-timeline-details-api/".request()->route()->parameters['emp_id'])}}', // This is what I have updated
            }).done(function (msg) {
                apiData_timeline = JSON.parse(msg);
                var visited_shops = apiData_timeline.timeline_detail.activity;

                const FirstLatLng = {lat: visited_shops[0].latitude, lng: visited_shops[0].longitude};

                const map = new google.maps.Map(document.getElementById("map_dashboard_report"), {
                    zoom: 12,
                    center: FirstLatLng,
                });

                for(var vs = 0; vs<visited_shops.length; vs++) {
                    //map code
                    if(visited_shops[vs].took_order>0) {
                        const myLatLng = {lat: visited_shops[vs].latitude, lng: visited_shops[vs].longitude};
                        new google.maps.Marker({
                            position: myLatLng,
                            map,
                            title: visited_shops[vs].retailer_name,
                        });
                    }
                }
            });
        }

        function viewcompleteroute() {
            document.getElementById("check-in").classList.remove("active");
            document.getElementById("check-out").classList.remove("active");
            document.getElementById("pro-shops").classList.remove("active");
            document.getElementById("visited-shops").classList.remove("active");
            document.getElementById("complete-route").classList.remove("active");

            document.getElementById("complete-route").classList.add("active");

            var apiData_timeline;
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: 'get',
                url: '{{URL::to("/dashboard-live-report-sales-reps-details-timeline-details-api/".request()->route()->parameters['emp_id'])}}', // This is what I have updated
            }).done(function (msg) {
                apiData_timeline = JSON.parse(msg);
                var visited_shops = apiData_timeline.timeline_detail.activity;

                 const FirstLatLng = new google.maps.LatLng(visited_shops[0].latitude, visited_shops[0].longitude);


                var service = new google.maps.DirectionsService;
                var map = new google.maps.Map(document.getElementById('map_dashboard_report'));

                // list of points
                var stations = [];

                for(var vs = 0; vs<visited_shops.length; vs++) {
                    stations.push(
                        {lat: visited_shops[vs].latitude, lng: visited_shops[vs].longitude, name: visited_shops[vs].retailer_name}
                    );
                }

                // Zoom and center map automatically by stations (each station will be in visible map area)
                var lngs = stations.map(function(station) { return station.lng; });
                var lats = stations.map(function(station) { return station.lat; });
                map.fitBounds({
                    west: Math.min.apply(null, lngs),
                    east: Math.max.apply(null, lngs),
                    north: Math.min.apply(null, lats),
                    south: Math.max.apply(null, lats),
                });

                // Show stations on the map as markers
                for (var i = 0; i < stations.length; i++) {
                    new google.maps.Marker({
                        position: stations[i],
                        map: map,
                        title: stations[i].name
                    });
                }

                // Divide route to several parts because max stations limit is 25 (23 waypoints + 1 origin + 1 destination)
                for (var i = 0, parts = [], max = 25 - 1; i < stations.length; i = i + max)
                    parts.push(stations.slice(i, i + max + 1));

                // Service callback to process service results
                var service_callback = function(response, status) {
                    if (status != 'OK') {
                        console.log('Directions request failed due to ' + status);
                        return;
                    }
                    var renderer = new google.maps.DirectionsRenderer;
                    renderer.setMap(map);
                    renderer.setOptions({ suppressMarkers: true, preserveViewport: true });
                    renderer.setDirections(response);
                };

                // Send requests to service to get route (for stations count <= 25 only one request will be sent)
                for (var i = 0; i < parts.length; i++) {
                    // Waypoints does not include first station (origin) and last station (destination)
                    var waypoints = [];
                    for (var j = 1; j < parts[i].length - 1; j++)
                        waypoints.push({location: parts[i][j], stopover: false});
                    // Service options
                    var service_options = {
                        origin: parts[i][0],
                        destination: parts[i][parts[i].length - 1],
                        waypoints: waypoints,
                        travelMode: 'WALKING'
                    };
                    // Send request
                    service.route(service_options, service_callback);
                }

            });
        }
    </script>


@endsection