@extends('layouts.master')
@section('content')

    <style>
        .pro-info {
            font-size: 14px;
            border-bottom: solid 1px #f3f3f3;
            padding-top: 15px;
            padding-bottom: 15px;
            color:#282828!important;
        }
        .pro-info p {
            margin: 0;
            line-height: 18px;
            color: #606060
        }
        .pro-img {
            width: 55px;
            height: 55px;
            border-radius: 50%;
            box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
            float: left;
            margin-right: 15px;
        }
        .pro-img img {
            width: 55px;
            height: 55px;
            border-radius: 50%
        }
        .pro-info h4 {
            font-size: 16px;
            margin-bottom: 0px;
        }
        .topreg-no {
            font-family: 'Poppins', sans-serif;
            font-weight: 800;
            font-size: 52px;
            text-align: right;
            line-height: 1;
            color: #f2f5fb;
        }
        .border-radius-0 {
            border-radius: 0 !important
        }
        .viewallbtn {
            font-size: 13px;
            letter-spacing: 1px;
            padding-left: 18px;
            padding-right: 18px;
            margin-top: 25px
        }
        .topreg-no span {
            position: absolute;
            left: 15px;
            top: 0
        }
        .reg-totalsale {
            text-align: right;
            line-height: 1;
            font-size: 14px;
            padding-top: 7px;
        }
        .reg-totalsale span {
            font-size: 24px;
            display: block;
            color: #0038ba;
            margin-top: 5px;
            font-family: 'Rationale', sans-serif !important;
        }
        .reg-totalsale span small {
            color: #282828
        }
        .keytrend-lr .col-12 {
            padding-top: 12px;
            padding-bottom: 12px;
        }
        .total-stime {
            border: none !important
        }
        .total-stime .time-s .col {
            padding: 9px 10px;
        }
        .pro-info {
            font-size: 14px;
            border-bottom: solid 1px #f3f3f3;
        }
        ._report-Head{background: #fff;}
        .divisional-reports{min-height: 351px; margin-bottom: 30px;}
        @media (max-width: 1024px) {

        }
    </style>

    <div class="row mt-1 mb-2">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Live  <span> Report</span></h2>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6">
            <a href="#" class="back-btn"><i class="fa fa-long-arrow-alt-left"></i> Back</a>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div style="display: none" class="col-6 PB-10 font15"><strong>Region:</strong> Lahore Region</div>
                <div style="display: none" class="col-6 PB-10 text-right font15"><strong>RSM:</strong> Utba Aziz</div>
                <div class="col-lg-8 col-md-12">
                    <div class="card BookedSales total-sale p-15">
                        <div class="row m-0" id="primUnitWiseSale">
                            <h2 class="card-heading mb-15 ml-5">Total <span>Booked Sales</span></h2>
                            <div class="col-12 position-relative p-0">
                                <div class="total-progress"
                                     style="position:absolute; top:-15px; right: 15px">
                                    <div class="progress progressRounderLiveReport 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">
                                                0<small>%</small><span>Productivity</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="total-amount PT-20" id="revenueLrOverview"><span>Rs.</span> -<span
                                            class="per-v" id="growthLrOverview">
                                  0%
                                </span>
                                </div>
                            </div>
                            <div class="puSales col-4 unit-v pl-0 PT-20">Cartons<span>--
                              <small>CTNS</small></span></div>
                            <div class="puSales col-4 unit-v pl-0 PT-20">Dozens<span>--
                              <small>DZNS</small></span></div>
                            <div class="puSales col-4 unit-v pl-0 PT-20">Half Dozens<span>--
                              <small>HDZNS</small></span></div>
                        </div>
                        <div class="row total-vals border-right-0" id="visitsStats">
                            <div class="col"><span>-</span>Planned Visits</div>
                            <div class="col bg-shade"><span>-</span>Unique Visits</div>
                            <div class="col"><span>-</span>Productive Visits</div>
                            <div class="col bg-shade"><span>-</span>Total Orders</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-12">
                    <div class="card DivisionalSales divisional-reports">
                        <h2 class="card-heading">DIVISIONAL <span>SALES</span></h2>
                        <div class="row PT-5">
                            <div class="col-6 text-right" style="border-right:solid 1px #e8e8e8">
{{--                                <div class="float-left font13 text-success pl-10" id="zainGrowth">0%</div>--}}
                                <h4>{{env('DIVISION_2')?env('DIVISION_2'):'Zain'}} <span class="circle-b"></span></h4>
                            </div>
                            <div class="col-6">
                                <h4><span class="circle-b circle-g"></span> {{env('DIVISION_1')?env('DIVISION_1'):'Shahi'}}
{{--                                    <div class="float-right font13 text-success pr-10" id="shahiGrowth">0%</div>--}}
                                </h4>
                            </div>
                        </div>
                        <div class="row font13 mt-15">
                            <div class="col text-right font-digit font16" id="zainOverallUnits">- <small>Units</small></div>
                            <div class="col-auto text-center p-0" style="width:90px;"><strong>SOLD</strong>
                            </div>
                            <div class="col font-digit font16" id="shahiOverallUnits">- <small>Units</small></div>
                        </div>
                        <div class="row font13 mt-15">
                            <div class="col text-right font-digit font16" id="zainOverallRev"><small>Rs.</small> -
                            </div>
                            <div class="col-auto text-center p-0" style="width:90px;">
                                <strong>REVENUE</strong></div>
                            <div class="col font-digit font16" id="shahiOverallRev"><small>Rs.</small> -</div>
                        </div>
                        <canvas style="margin-top:15px; margin-bottom:7px" id="divisional-sales"
                                height="160"></canvas>
                    </div>
                </div>
                <div class="col-lg-6  col-md-12 mb-20mas">
                    <div class="card KeyTrends mh-100 pb-0">
                        <h2 class="card-heading">Key <span>Trends</span></h2>
                        <div class="row keytrend-lr">
                            <div class="col-12">AVG. Order Value <span id="avgOrderValKt"><small>Rs.</small> -</span>
                            </div>
                            <div class="col-12">AVG. Products/Order <span id="avgProdPerOrderKt">-</span></div>
                            <div class="col-12">AVG. Drop Size <span id="avgDropSizeKt">-</span></div>
                            <div class="col-12">AVG. Sales/Employee <span id="avgSalesPerEmpKt"><small>Rs.</small> -</span>
                            </div>
                            <div class="col-12">Active Employee <span id="activeEmpsKt">-</span></div>
                            <div class="col-12">Absent Employee <span id="absentEmpsKt">-</span></div>
                            <div class="col-12">Deviation <span id="deviationKt">0<small>%</small></span></div>
                            <div class="col-12 total-stime"><img class="time-icon" src="images/clock-icon.svg" alt="">
                                <h2 class="card-heading">Avg. Time Spent<span style="float:none">/Shop</span>
                                </h2>
                                <div class="total-time" id="avgTimeSpentPerShop">-</div>
                                {{--                          <div class="row time-s">--}}
                                {{--                              <div class="col text-left">AVG. Market Duration<span id="avgMktDurKt">-</span>--}}
                                {{--                              </div>--}}
                                {{--                              <div class="col bggray text-left">Avg. Time Spent/Shop<span id="avgTimeSpentPerShop">---}}
                                {{--                                    </span></div>--}}
                                {{--                          </div>--}}

                            </div>
                            {{--                      <div class="col-12 total-stime"><img class="time-icon" src="images/clock-icon.svg" alt="">--}}
                            {{--                          <h2 class="card-heading">AVG. Shift <span style="float:none">Duration</span>--}}
                            {{--                          </h2>--}}
                            {{--                          <div class="total-time" id="avgShiftDurationKt">-</div>--}}
                            {{--                          <div class="row time-s">--}}
                            {{--                              <div class="col text-left">AVG. Market Duration<span id="avgMktDurKt">-</span>--}}
                            {{--                              </div>--}}
                            {{--                              <div class="col bggray text-left">Avg. Time Spent/Shop<span id="avgTimeSpentPerShop">---}}
                            {{--                                    </span></div>--}}
                            {{--                          </div>--}}
                            {{--                      </div>--}}
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-12 mb-20">
                    <div class="card TopPerformances ts-overview pb-0" style="min-height:100%">
                        <h2 class="card-heading mb-0">Top <span>Performances </span></h2>
                        <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-top-emps-tab"
                                                         data-toggle="pill" href="#pills-top-emps" role="tab"
                                                         aria-controls="pills-top-emps" aria-selected="true">Employees </a> </li>
                                <li class="nav-item"> <a class="nav-link" id="pills-products-tab"
                                                         data-toggle="pill" href="#pills-products" role="tab"
                                                         aria-controls="pills-products" aria-selected="false">Products</a>
                                </li>
                                <li class="nav-item"> <a class="nav-link" id="pills-geo-tab"
                                                         data-toggle="pill" href="#pills-geo" role="tab"
                                                         aria-controls="pills-geo" aria-selected="false">--</a>
                                </li>
                                <a id="viewAllTopPerformers" class="view-all-tab">View All <i class="fa fa-angle-right"></i> </a>
                            </ul>
                        </div>
                        <div class="tab-content" id="pills-tabContent">
                            <div class="tab-pane fade show active" id="pills-top-emps" role="tabpanel"
                                 aria-labelledby="pills-top-emps-tab">
                                <div class="row pro-info">
                                    <div class="col-7 pr-0">
                                        <div class="pro-img"> <img src="/images/avatar.svg" alt="" onerror="this.onerror=null;this.src='/images/avatar.svg';"> </div>
                                        <h4>--</h4>
                                        <p><strong>Territory: </strong> --</p>
                                        <p><strong>TSM: </strong> --</p>
                                    </div>
                                    <div class="col-2 topreg-no p-0">
                                        <img style="position:absolute;z-index: 3; width:auto; height:30px; left:0px; top:13px;" class="badge-icon"    src="/images/badge-icon.svg" alt=""><span>01</span></div>
                                    <div class="col-3 pl-0 reg-totalsale">Total Booking
                                        <span><small>Rs.</small> --</span></div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-products" role="tabpanel"
                                 aria-labelledby="pills-products-tab">
                                <div class="row pro-info">
                                    <div class="col-7 pr-0">
                                        <div class="pro-img border-radius-0"> <img class="border-radius-0" src="images/DefaultProdu" onerror="this.onerror=null;this.src='/images/DefaultProduct.jpg';" alt=""> </div>
                                        <h4>--</h4>
                                        <p><strong>Category: </strong> --</p>
                                        <p><strong>Brand: </strong> --</p>
                                    </div>
                                    <div class="col-2 topreg-no p-0"><img
                                                style="position:absolute;z-index: 3; width:auto; height:30px; left:0px; top:13px;"
                                                class="badge-icon" src="images/badge-icon.svg"
                                                alt=""><span>01</span></div>
                                    <div class="col-3 pl-0 reg-totalsale">Sales Unit <span>--
                                      <small>CTNS</small> </span></div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-geo" role="tabpanel"
                                 aria-labelledby="pills-geo-tab">
                                <div class="row pro-info">
                                    <div class="col-7 pr-0">
                                        <h4>--</h4>
                                        <p><strong>--: </strong> --</p>
                                    </div>
                                    <div class="col-2 topreg-no p-0"><img
                                                style="position:absolute;z-index: 3; width:auto; height:30px; left:0px; top:13px;"
                                                class="badge-icon" src="images/badge-icon.svg"
                                                alt=""><span>01</span></div>
                                    <div class="col-3 pl-0 reg-totalsale">TOTAL Booking
                                        <span><small>Rs.</small> --</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        let DIVISION_1= "{{env('DIVISION_1')}}";
        let DIVISION_2= "{{env('DIVISION_2')}}";
    </script>
    <script src="/js/loadingoverlay.min.js"></script>
    <script src="{{url('/js/custom/liveReports/live_reports.js?v=2.3')}}"></script>
@endpush