@extends('layouts.master')
@section('content')
<style>
    
</style>
<div class="row mt-1 mb-0">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <h2 class="_head01">Monthly <span>Sales</span></h2>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6">
        <div class="dashboard-date mr-0" style="margin-top:-10px">
            <input type="text" id="datepickerfilter" class="form-control" placeholder="">
            <i class="fa fa-angle-down"></i>
        </div>
        <input type="hidden" id="single_emp_id" value="{{$emp_id}}">
    </div>
</div>
<div class="row">
    <div class="col-md-12 PT-10">
        <div class="row">
            <div class="col-5">
                <div class="card top1-employee pb-0 mb-20">
                    <h2 class="card-heading">Employee <span>Detail</span></h2>
                    <div class="row emp-info">
                        <div class="col-auto">
                            <div class="emp-pic">
                                <img class="badge-icon" src="/images/badge-icon.svg" alt="">
                                <img class="pic emp_pic" src="/images/avatar.jpg" alt="" onerror="this.onerror=null;this.src='/images/avatar.svg';">
                            </div>
                        </div>
                        <div class="col pl-0 pt-5">
                            <h4 class="emp_name" style="text-transform: capitalize">Loading...</h4>
                            <p class="designation"><strong style="width:95px;">Designation: </strong>Order Booker</p>
                            <p><strong style="width:95px;">Phone:</strong><span class="phone_no">Loading...</span></p>
                        </div>
                        <div class="col-12">
                            <hr style="margin-top:13px; margin-bottom: 13px;">
                        </div>
                        <div class="col-12 emp-tr mb-0 pt-0 pb-0"> <span><strong>Reporting To:</strong>
                                Imran Khan</span>
                            <span class="emp_area"><strong>Area:</strong> Loading...</span>
                            <span class="emp_territory"><strong>Territory:</strong>Loading...</span>
                        </div>
                        <div class="col-12">
                            <hr style="margin-top:12px; margin-bottom: 12px;">
                        </div>
                    </div>
                    <div class="total-stime p-0"><img class="time-icon" src="/images/clock-icon.svg" alt="">
                        <h2 class="card-heading font18">AVG. Shift <span> Duration/Day</span></h2>
                        <div class="total-time mb-10 avg_shift_hours">0 <small>HRS</small></div>

                        <div class="row time-s" style="margin-left:-15px; margin-right:-15px; letter-spacing: normal">
                            <div class="col" style="padding-top:14px;padding-bottom:14px; font-size:12px">Active Days<span class="total_active_days">--</span></div>
                            <div class="col bggray" style="padding-top:14px;padding-bottom:14px; font-size:12px">AVG. Market Hours <span class="avg_market_time">00:00:00</span></div>
                            <div class="col" style="padding-top:14px;padding-bottom:14px; font-size:12px">AVG. Time/Shop<span class="avg_time_per_shop">00:00:00</span></div>
                            <div class="col bggray" style="padding-top:14px;padding-bottom:14px; font-size:12px">AVG. Time Travel<span class="avg_travel_time">00:00:00</span></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-7">
                <div class="card total-sale p-15">
                    <h2 class="card-heading mb-15 ml-5">Total <span>Sales</span></h2>
                    <div class="row m-0">
                        <div class="col-8 position-relative p-0">
                            <div class="total-amount PT-20" style="font-size:35px"><span>Rs.</span>
                                <span class="total_sale" style="color: #0038ba">Loading...</span>
                                {{-- <span class="per-v"><i class="fa fa-long-arrow-alt-up"></i>32%</span> --}}
                            </div>
                        </div>
                        <div class="col-4">
                            {{-- <div class="total-progress">
                                <div class="progress mx-auto bookingExecProgress" 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-4 unit-v pl-0 PT-15">Total Cartons<span class="ttl_ctns">Loading...</span>
                        </div>
                        <div class="col-4 unit-v pl-0 PT-15">Total Units<span class="ttl_units">Loading...</span>
                        </div>
                        <div class="col-4 unit-v pl-0 PT-15">Total Revenue<span class="ttl_revenue">Loading...</span></div>
                    </div>
                    <div class="row total-vals border-right-0">
                        <div class="col bg-shade font13"><span class="total_visits"> Loading...</span>Total Visits</div>
                        <div class="col font13"><span class="productive_visits">Loading...</span>Productive Visits</div>
                        <div class="col font13"><span class="planned_visits">Loading...</span>Planned Visits</div>
                        <div class="col bg-shade font13"><span class="total_orders">Loading...</span>Total Orders</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-12 col-md-12 mb-20">
                <div class="card mh-100">
                    <h2 class="card-heading PB-10">Key<span> Metrics</span></h2>
                    <div class="card-body p-0">
                        <div class="row">
                            <div class="col-md-3">
                                <figure class="highcharts-figure">
                                    <div id="strike-rate" class="chart-container"></div>
                                </figure>
                            </div>
                            <div class="col-md-3">
                                <figure class="highcharts-figure">
                                    <div id="effective-coverage" class="chart-container"></div>
                                </figure> 
                            </div>
                            <div class="col-md-3">
                                <figure class="highcharts-figure">
                                    <div id="visit-productivity" class="chart-container"></div>
                                </figure>
                            </div>
                            <div class="col-md-3">
                                <figure class="highcharts-figure">
                                    <div id="sales-target" class="chart-container"></div>
                                </figure> 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 mb-20">
                <div class="card mh-100 pb-0">
                    <h2 class="card-heading">KPIs <span></span></h2>
                    <div class="row keytrend-lr">
                        <div class="col-12"><strong>Range Sales Index</strong> <span class="range_sale_index">TBD</span></div>
                        <div class="col-12"><strong>AVG. SKUs/Order</strong> <span class="avg_product_per_order">Loading...</span></div>
                        <div class="col-12"><strong>AVG. Drop Size</strong> <span class="avg_drop_size">Loading...</span></div>
                        <div class="col-12"><strong>AVG. Order Value</strong><span class="avg_order_val">Loading...</span></div>
                        {{-- <div class="col-12"><strong>Plan Adherence</strong> <span class="plan_adherence">Loading...</span></div>
                        <div class="col-12"><strong>Productivity</strong> <span class="kpis_productivity">Loading...</span></div> --}}
                        <div class="col-12"><strong>Deviation</strong> <span class="deviation">Loading...</span></div>
                        <div class="col-12"><strong>AVG. Daily Sales</strong><span class="avg_daily_sale">Loading...</span></div>
                        <div class="col-12"><strong>AVG. Weekly Sales</strong> <span class="avg_weekly_sale"> Loading...</span></div>
                        <div class="col-12"><strong>Cancellation Ratio</strong> <span class="cancellation_ratio">Loading...</span></div>
                    </div>
                </div>
            </div>
            <div class="col-6 mb-20">
                <div class="card mh-100 pb-0">
                    <h2 class="card-heading">Top <span>Products</span></h2>
                    <div class="loader-sell360 tblLoaderTopProducts">
                        <div class="loader"> <span class="box-icon"></span> <span class="box-icon"></span>
                            <div class="loader-img"> <img src="/images/sell-360-logo.svg" alt=""> </div>
                            <span class="txt"><span></span> LOADING...</span> 
                        </div>
                    </div>
                    <div class="row top_products_row" style="display: none">
                        
                    </div>
                </div>
            </div>
            <style>
                .cancellation {
                    font-size: 14px;
                    line-height: 1;
                    background-color: #f3f3f3;
                    margin: 4px 0px 4px 0px;
                    width: 100%;
                    padding: 10px 10px 5px 10px;
                }
                .cancellation span {
                    font-size: 20px;
                    float: right;
                    margin-top: -4px;
                    font-family: 'Rationale', sans-serif!important;
                }
            </style>
            <div class="col-lg-12 col-md-12">
                <div class="card total-sale p-20">
                    <div class="row">
                        <div class="col-6">
                            <div class="row">
                                <div class="col-12 position-relative" style="background-image: url(/images/kpi-achive-img.jpg); background-position:bottom right; background-repeat:no-repeat">
                                    <h2 class="card-heading">Retail <span>Analysis</span></h2>
                                    <div class="total-amount" style="border-bottom:solid 1px #e1e1e1; line-height: 1;padding: 15px 0 8px 0;">
                                        <span><small style="font-size:16px"> Assign Retailers</small> </span><span class="ttl_retail_outlets" style="font-size: 36px;color: #0038ba;">Loading...</span></div>
                                </div>
                                <div class="col-12">
                                    <div class="cancellation">
                                        Visited Retailers <span class="ttl_visited_retailers">Loading...</span>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="cancellation">
                                        Productive Retailers <span class="ttl_productive_retailers">Loading...</span>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="cancellation">
                                        New Retailers Added <span class="total_added_new_retailers">Loading...</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="row retail-analysis-segments">
                                    
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-12 col-md-12 mb-20">
                <div class="card mh-100">
                    <h2 class="card-heading PB-10">Daily Visit<span> Analysis</span></h2>
                       <figure class="highcharts-figure">
                            <div id="chart-body-2"></div>
                        </figure>
                </div>
            </div>
            <div class="col-lg-12 col-md-12 mb-20">
                <div class="card mh-100">
                    <h2 class="card-heading">Daily Sale <span>Trends</span></h2>
                    <div class="avg-booking-day">
                        <h2>AVG. Sale/Day <span class="avg_bookings_valPerDay">Rs. ---</span></h2>
                    </div>
                    <canvas id="BookingTrends" height="300"></canvas>

                </div>
            </div>
           
            <div class="col-12 mb-20">
                <div class="card mh-100 pb-0">
                    <div class="row mb-10">
                        <div class="col-md-9">
                            <h2 class="card-heading">PJP Sales <span>Analysis</span></h2>
                        </div>
                        <div class="col-md-3">
                            <input type="hidden" value="1" id="sales_analysis_wise">
                            {{-- <select class="form-control" id="sales_analysis_wise" style="float: right;height:35px;margin-top: -6px;">
                                <option value="1">Route Wise</option>
                                <option value="2">Date Wise</option>
                                <option value="3">Region Wise</option>
                            </select> --}}
                        </div>
                    </div>
                    <div class="row">
                        <figure class="highcharts-figure">
                            <div id="chart-body"></div>
                        </figure> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
    $(document).ready(function(){
        var segments    = location.href.split('/');
        $('#datepickerfilter').datepicker({
        autoclose: true,
        todayHighlight: true,
        toggleActive: true, 
        format: 'mm-yyyy',
        "orientation": 'right',
        minViewMode: "months",
        }).on('changeDate', function (ev) {
            $(this).datepicker('hide');
        });
        // $("#datepickerfilter").datepicker().datepicker("setDate", new Date());
        $('#datepickerfilter').val(segments[5] + '-' + segments[6]);
    })
</script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<script src="{{url('/js/custom/monthly-dashboard/single-emp-monthly-details.js')}}"></script>
@endpush