@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.svg" 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">6 <small>HRS</small> 40 <small>MINS</small></div>

                        <div class="row time-s" style="margin-left:-15px; margin-right:-15px; letter-spacing: normal">
                            <div class="col" style="padding-top:14px;padding-bottom:14px; font-size:12px">Active
                                Days<span>22</span></div>
                            <div class="col bggray" style="padding-top:14px;padding-bottom:14px; font-size:12px">AVG.
                                Market
                                Time <span>05.11.32 PM</span></div>
                            <div class="col" style="padding-top:14px;padding-bottom:14px; font-size:12px">AVG.
                                Time/Shop<span>11.22.12 AM</span></div>
                            <div class="col bggray" style="padding-top:14px;padding-bottom:14px; font-size:12px">AVG.
                                Time
                                Travel<span>11.22.12 AM</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">999,999</span>
                        </div>
                        <div class="col-4 unit-v pl-0 PT-15">Total Units<span class="ttl_units">999,999</span>
                        </div>
                        <div class="col-4 unit-v pl-0 PT-15">Total Revenue<span class="ttl_revenue">999,999</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">Daily Sale <span>Trends</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-lg-12 col-md-12 mb-20">
                <div class="card mh-100">
                    <h2 class="card-heading PB-10">Daily Sale <span>Trends</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-6 mb-20">
                <div class="card mh-100 pb-0">
                    <h2 class="card-heading">Key <span>Trends</span></h2>
                    <div class="row keytrend-lr">
                        <div class="col-12"><strong>AVG. Daily Sales</strong>
                            <span class="avg_daily_sale"><small>Rs.</small>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 class="col-12"><strong>AVG. Order Value</strong>
                            <span class="avg_order_val"><small>Rs.</small>Loading...</span>
                        </div>
                        <div class="col-12"><strong>AVG. Products/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>
                </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="row top_products_row">
                        
                    </div>
                </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">
                            <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('/');
        var get_date    = segments[5];
        console.log(get_date);
        $('#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(get_date);
    })
</script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<script src="/js/custom/single-emp-monthly-details.js"></script>
@endpush