@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" 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].item_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>';
                    }
                }
                document.getElementById('order-item-details').innerHTML = orders_details;
            });
        }
    </script>



   {{-- <div class="modal fade" id="shopclosed-img" tabindex="-1" role="dialog" aria-labelledby="DetailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content top_border">
                <div class="modal-header">
                    <h5 class="modal-title" id="DetailModalLabel">Visit <span> Picture</span></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
                </div>
                <div id="floating-label" class="modal-body">
                    <div class="row">
                        <div class="col-md-12 text-center"> <img class="sc-visit-img" src="images/store-img.jpg" alt=""/> </div>
                    </div>
                </div>

            </div>
        </div>
    </div>--}}

    <div class="overlay"></div>

    {{--<div id="sidebarblue"  class="sidebarblue">
        <div class="aside-primary">
            <div class="sell360"><a href="index.html"><img alt="Sell360" src="images/logo-w.svg"></a></div>
            <a href="#" id="menuClose" class="close-btn-pl"></a>
            <div class="main-links">
                <ul>
                    <li><a><img src="images/search-icon.svg" alt=""/> Search</a></li>
                    <li><a id="sidebar-menu"><img src="images/add-pluse-icon.svg" alt=""/> Create New</a></li>
                    <li><a><img src="images/dashboard-icon.svg" alt=""/> Dashboard</a></li>
                    <hr>
                    <li><a><img src="images/emp-icon.svg" alt=""/>Organization</a></li>
                    <li><a><img src="images/customer-icon.svg" alt=""/> Customer</a></li>
                    <li><a><img src="images/product-icon.svg" alt=""/> Product</a></li>
                    <li><a><img src="images/shippers-icon.svg" alt=""/> Shippers</a></li>
                    <li><a><img src="images/supplier-icon.svg" alt=""/> Supplier</a></li>
                    <li><a><img src="images/order-icon.svg" alt=""/> Order</a></li>
                    <li><a><img src="images/payment-icon.svg" alt=""/> Payment</a></li>
                    <li><a><img src="images/invoice-icon.svg" alt=""/> Invoices</a></li>
                    <li><a><img src="images/correspondence-icon.svg" alt=""> Correspondence</a></li>
                    <li><a><img src="images/bell-icon-setting.svg" alt=""> Notification</a></li>
                    <li><a><img src="images/profit-and-loss-icon.svg" alt=""/> Profit and Loss</a></li>
                    <li><a><img src="images/reports-icon.svg" alt=""/> Reports</a></li>
                    <li><a><img src="images/forwarder-icon.svg" alt=""/> Forwarder</a></li>
                    <li><a><img src="images/acquisition-source-icon.svg" alt=""/> Acquisition Source</a></li>
                    <li><a><img src="images/setting-left-icon.svg" alt=""/> Settings</a></li>
                </ul>
            </div>
            <div class="_user-nav"> <a href="#"><img src="images/bell-icon-2.svg" alt="Notification" title="Notification"/><span class="badge">4</span></a> <a href="#" class="userIMG"><img src="images/avatar.svg" alt=""/></a> <a href="#" class="float-right"><img src="images/setting-icon.svg" alt="Setting" title="Setting"/></a> </div>
            <div class="sidebar-BL">
                <ul>
                    <!--<li><a href="#"><img src="images/task-icon.svg" alt=""/> Tasks <span class="badge">13</span></a></li>-->
                    <li><a href="#"><img src="images/activity-icon.svg" alt="Employee"/> Activities <span class="badge">4</span></a></li>
                    <li><a href="#"><img src="images/logout-icon.svg" alt="Employee"/> Logout</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="_subNav-id">
        <div class="_subNav"> <a id="SN-close" class="SN-close-btn"><i class="fa fa-arrow-left"></i></a>
            <h2 class="mb-0">Creat New</h2>
            <ul>
                 <h2 class="mb-0">Organization</h2>
                <li><a href="employee-list.html"><img src="images/emp-list-icon.svg" alt=""/>Employees</a></li>
                <li><a href="region-area-territory.html"><img src="images/emp-list-icon.svg" alt=""/>Region\Area\Territory\Zone</a></li>
                <li><a href="#"><img src="images/access-right-icon.svg" alt=""/>Access Rights</a></li>
            </ul>
        </div>
    </div>--}}
    <div id="wrapper">

        <div id="content-wrapper" style="padding:0; margin:0; width: 100%">
            <div class="overlay-blure"></div>
            <div id="blureEffct" class="container-fluid emp-shift-overview">

                <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>';
                                                    }else{
                                                        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;

                                            //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" 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 class="row">



                                <!--			<div class="col-12" style="padding-right:25px;">

                                            <div>
                                            <h2 class="card-heading">SHIFT <span>OVERVIEW</span><a href="#" 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('theme/images/badge-icon.svg') !!}" alt="">
                                                    <img class="pic" src="{!! asset('theme/images/avatar.svg') !!}" alt="">
                                                </div>
                                                </div>
                                            <div class="col pl-0"><h4>Usama Shahid Khan</h4>
                                            <p><strong>ASM:</strong>Utba Aziz Khan</p>
                                            <p><strong>Territory:</strong>Johar Town</p>
                                            </div>
                                            </div>

                                            </div>

                                            <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> 80,00,00,000<span class="per-v"><i class="fa fa-long-arrow-alt-up"></i> 32%</span>
                                                    </div>
                                                    <div class="row pr-unit-v">
                                                    <div class="col"><span>20,000</span> Cartons</div>
                                                    <div class="col"><span>999,999</span> Dozens</div>
                                                    <div class="col"><span>999,999</span> Half Dozens</div>
                                                    </div>
                                                </div>
                                                <div class="col-auto">
                                                <div class="total-progress">
                                                  <div class="progress mx-auto" data-value="70"><span class="progress-left"> <span class="progress-bar progress-barColor"> </span> </span> <span class="progress-right"> <span class="progress-bar progress-barColor"></span> </span>
                                                    <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center">
                                                      <div class="digitVal">70<small>%</small><span>Productivity</span></div>
                                                    </div>
                                                  </div>
                                                </div>
                                                </div>
                                                <div class="col-12">
                                                <div class="row total-VO">
                                                    <div class="col-6 p-0">
                                                        <div class="row">
                                                            <div class="col-auto pr-0"><div class="icon-emp-vo"><img src="{!! asset('theme/images/visits-icon-emp.svg') !!}" alt=""></div></div>
                                                            <div class="col"><span>500 / 600</span>Total 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('theme/images/order-icon-emp.svg') !!}" alt=""></div></div>
                                                            <div class="col"><span>13,550</span>Total Orders</div>
                                                        </div>
                                                    </div>

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

                                            <div class="row">
                                            <div class="col-12 total-stime"><img class="time-icon" src="{!! asset('theme/images/clock-icon.svg') !!}" alt="">
                                            <h2 class="card-heading">Total <span>Time Spent Today</span></h2>
                                            <div class="total-time">6 <small>HRS</small> 40 <small>MINS</small></div>
                                            <div class="row time-s">
                                            <div class="col">Check in<span>11.22.12 AM</span></div>
                                            <div class="col bggray">Check Out<span>11.22.12 AM</span></div>
                                            <div class="col">First Order<span>11.22.12 AM</span></div>
                                            <div class="col bggray">Last Order<span>11.22.12 AM</span></div>
                                            </div>
                                             <button class="btn btn-primary">View Time Line <i class="fa fa-long-arrow-alt-right"> </i></button>
                                            </div>
                                            </div>

                                            <div class="row">
                                            <div class="col-12 mb-30">
                                            <h2 class="card-heading">Key <span>Trends</span></h2>
                                            <div class="row">
                                            <div class="col-12 key-tr-list">AVG. Spent Time/Shop <span>23<small>%</small></span></div>
                                            <div class="col-12 key-tr-list">Productive Ratio <span>23<small>%</small></span></div>
                                            <div class="col-12 key-tr-list">AVG. Order Value <span>Rs. 3,222</span></div>
                                            <div class="col-12 key-tr-list">AVG. Products/Order <span>20</span></div>
                                            <div class="col-12 key-tr-list">New Retailers <span>884</span></div>
                                            <div class="col-12 key-tr-list">AVG. Discount/Order <span>205</span></div>
                                            </div>
                                            </div>
                                            </div>

                                            <div class="row">
                                            <div class="col-12">
                                            <h2 class="card-heading">Top <span>Product Sales</span></h2>
                                            <div class="row">

                                             <div class="col-12 top-pr-list">
                                            <div class="row">
                                                <div class="col-auto pr-0"><img src="{!! asset('theme/images/product-img-005.jpg') !!}" alt=""></div>
                                                <div class="col">
                                                    <span class="head-font">Chilli chips without zooplay<span class="progressValue">45<small>%</small></span></span>
                                                    <div class="progress">
                                                    <div class="progress-bar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%" role="progressbar"> <span class="sr-only">45% Complete (success)</span> </div>
                                                    </div>
                                                </div>
                                            </div>
                                            </div>

                                             <div class="col-12 top-pr-list">
                                            <div class="row">
                                                <div class="col-auto pr-0"><img src="{!! asset('theme/images/product-img-005.jpg') !!}" alt=""></div>
                                                <div class="col">
                                                    <span class="head-font">Chilli chips without zooplay<span class="progressValue">45<small>%</small></span></span>
                                                    <div class="progress">
                                                    <div class="progress-bar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%" role="progressbar"> <span class="sr-only">45% Complete (success)</span> </div>
                                                    </div>
                                                </div>
                                            </div>
                                            </div>

                                             <div class="col-12 top-pr-list">
                                            <div class="row">
                                                <div class="col-auto pr-0"><img src="{!! asset('theme/images/product-img-005.jpg') !!}" alt=""></div>
                                                <div class="col">
                                                    <span class="head-font">Chilli chips without zooplay<span class="progressValue">45<small>%</small></span></span>
                                                    <div class="progress">
                                                    <div class="progress-bar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%" role="progressbar"> <span class="sr-only">45% Complete (success)</span> </div>
                                                    </div>
                                                </div>
                                            </div>
                                            </div>

                                             <div class="col-12 top-pr-list">
                                            <div class="row">
                                                <div class="col-auto pr-0"><img src="{!! asset('theme/images/product-img-005.jpg') !!}" alt=""></div>
                                                <div class="col">
                                                    <span class="head-font">Chilli chips without zooplay<span class="progressValue">45<small>%</small></span></span>
                                                    <div class="progress">
                                                    <div class="progress-bar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%" role="progressbar"> <span class="sr-only">45% Complete (success)</span> </div>
                                                    </div>
                                                </div>
                                            </div>
                                            </div>

                                             <div class="col-12 top-pr-list">
                                            <div class="row">
                                                <div class="col-auto pr-0"><img src="{!! asset('theme/images/product-img-005.jpg') !!}" alt=""></div>
                                                <div class="col">
                                                    <span class="head-font">Chilli chips without zooplay<span class="progressValue">45<small>%</small></span></span>
                                                    <div class="progress">
                                                    <div class="progress-bar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%" role="progressbar"> <span class="sr-only">45% Complete (success)</span> </div>
                                                    </div>
                                                </div>
                                            </div>
                                            </div>

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


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

                    </div>

                    <div class="col p-0 position-relative">
                        <div class="col-12 map-top">
                            <div class="row">
                                {{--<div class="col-7">
                                    <h2 class="_head01 font18">ACTIVITY <span class="act-loc" ><i class="fa fa-map-marker-alt"></i> Lahore, Pakistan</span></h2>
                                </div>--}}

                            </div>
                        </div>

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

        </div>
    </div>
    <script>
        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"), {
                    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"), {
                    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"), {
                    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"), {
                    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'));

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