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

<div class="overlay"></div>
<style>
    .pro-info {
        font-size: 14px;
        border-bottom: solid 1px #f3f3f3;
        padding-top: 15px;
        padding-bottom: 15px;
        color: #282828!important;
    }
    .pro-info a{
        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;
    }
</style>


<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>
            <!--<li><a href="#"><img src="images/task-icon.svg" alt=""/>Task</a></li>
        <li><a href="#"><img src="images/order-icon.svg" alt=""/>Order</a></li>
        <li><a href="#"><img src="images/emp-icon.svg" alt=""/>Emplyee</a></li>
        <li><a href="#"><img src="images/customer-icon.svg" alt=""/>Customer</a></li>
        <li><a href="#"><img src="images/product-icon.svg" alt=""/>Product</a></li>
        <li><a href="#"><img src="images/shippers-icon.svg" alt=""/>Shippers</a></li>
        <li><a href="#"><img src="images/supplier-icon.svg" alt=""/>Supplier</a></li>
        <li><a href="#"><img src="images/payment-icon.svg" alt=""/>Payment</a></li>
        <li><a href="#"><img src="images/invoice-icon.svg" alt=""/>Invoices</a></li>
        <li><a href="#"><img src="images/reports-icon.svg" alt=""/>Report</a></li>-->
            <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>
            <!--<h2 class="mb-0">Product</h2>
        <li><a href="#"><img src="images/unit-icon.svg" alt=""/>Units</a></li>
        <li><a href="#"><img src="images/inventory-icon.svg" alt=""/>Variants</a></li>
        <li><a href="#"><img src="images/m-categories-icon.svg" alt=""/>Main Categories</a></li>
        <li><a href="#"><img src="images/s-categories-icon.svg" alt=""/>Sub Categories</a></li>
        <li><a href="#"><img src="images/add-product-icon.svg" alt=""/>Add Product</a></li>
        <li><a href="#"><img src="images/add-product-list-icon.svg" alt=""/>Product List</a></li>
        <li><a href="#"><img src="images/gallary-icon.svg" alt=""/>Gallery</a></li>
        <li><a href="#"><img src="images/bulk-upload-icon.svg" alt=""/>Bulk Upload</a></li>
        <li><a href="#"><img src="images/brand-products-icon.svg" alt=""/>Brand Products</a></li>
        <li><a href="#"><img src="images/product-items-icon.svg" alt=""/>Product Items</a></li>
        <h2 class="mb-0">Customer</h2>
        <li><a href="#"><img src="images/customer-types-icon.svg" alt=""/>Customer Types</a></li>
        <li><a href="#"><img src="images/customer-list-icon.svg" alt=""/>Customer List</a></li>
        <li><a href="#"><img src="images/document-typess.svg" alt=""/>Document Typess</a></li>
        <li><a href="#"><img src="images/customer-assign-icon.svg" alt=""/>Customer Assignment</a></li>
        <h2 class="mb-0">Shippers</h2>
        <li><a href="#"><img src="images/shipping-company-icon.svg" alt=""/>Shipping Company</a></li>
        <li><a href="#"><img src="images/delivery-ports-icon.svg" alt=""/>Delivery Ports</a></li>
        <h2 class="mb-0">Supplier</h2>
        <li><a href="#"><img src="images/supplier-list-icon.svg" alt=""/>Supplier List</a></li>
        <li><a href="#"><img src="images/supplier-product-assignment-icon.svg" alt=""/>Supplier Product Assignment</a></li>
        <h2 class="mb-0">Invoice</h2>
        <li><a href="#"><img src="images/invoice-management-icon.svg" alt=""/>Invoice Management</a></li>
        <li><a href="#"><img src="images/performa-icon.svg" alt=""/>Performa List</a></li>
        <h2 class="mb-0">Order</h2>
        <li><a href="#"><img src="images/order-management-icon.svg" alt=""/>Order Management</a></li>
        <h2 class="mb-0">Correspondence</h2>
        <li><a href="#"><img src="images/stages-icon.svg" alt=""/>Stages</a></li>
        <li><a href="#"><img src="images/mediums-icon.svg" alt=""/>Mediums</a></li>
        <li><a href="#"><img src="images/correspondence-icon-2.svg" alt=""/>Correspondence</a></li>
        <h2 class="mb-0">Notifications</h2>
        <li><a href="#"><img src="images/notifications-p-icon.svg" alt=""/>Notifications</a></li>
        <h2 class="mb-0">Profit and Loss</h2>
        <li><a href="#"><img src="images/profit-and-loss-icon-2.svg" alt=""/>Add PNL</a></li>
        <h2 class="mb-0">Reports</h2>
        <li><a href="#"><img src="images/reports-icon2.svg" alt=""/>Report</a></li>
        <h2 class="mb-0">Payment</h2>
        <li><a href="#"><img src="images/bank-account-icon.svg" alt=""/>Bank Accounts</a></li>
        <li><a href="#"><img src="images/vendor-icon.svg" alt=""/>Vendor</a></li>-->

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

<div id="wrapper">



    <div id="content-wrapper">
        <div class="overlay-blure"></div>
        <div id="blureEffct" class="container">

            <div class="row mt-1 mb-0">
                <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">
                    <div class="dashboard-date mr-0" style="margin-top:-10px">
                        <input type="text" id="datepicker" class="form-control" placeholder="">
                        <i class="fa fa-angle-down"></i>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12 PT-10">

                    <div class="row">
                        <div class="col-8">
                            <div class="card total-sale p-15">
                                <div class="row m-0">
                                    <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 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" >
                                            <span>Rs.</span> <span class="booked_total_amount">0</span>
                                            <span class="per-v booked_productivity" >
                                                <i class="fa fa-long-arrow-alt-up"></i> 32%
                                            </span>
                                        </div>


                                    </div>

                                    <div class="col-4 unit-v pl-0 PT-20">Cartons<span class="booked_cartoon">0
                                            <small>CTNS</small></span></div>
                                    <div class="col-4 unit-v pl-0 PT-20">Dozens<span class="booked_dozen">0
                                            <small>DZNS</small></span></div>
                                    <div class="col-4 unit-v pl-0 PT-20">Half Dozens<span class="booked_halfDozen">0
                                            <small>HDZNS</small></span></div>
                                </div>

                                <div class="row total-vals border-right-0">
                                    <div class="col"><span>23,550</span class="booked_planned_visit">Planned Visits
                                    </div>
                                    <div class="col bg-shade"><span class="booked_unique_visit">2,123,550</span>Unique
                                        Visits</div>
                                    <div class="col"><span class="booked_productive_visit">13,550</span>Productive
                                        Visits</div>
                                    <div class="col bg-shade"><span
                                            class="booked_total_order">20<small>%</small></span>Total Orders</div>
                                </div>
                            </div>
                        </div>

                        <div class="col-4">
                            <div class="card 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 zain_growth"><i
                                                class="fa fa-long-arrow-alt-up"></i>+32%</div>
                                        <h4>Zain <span class="circle-b"></span></h4>
                                    </div>
                                    <div class="col-6">
                                        <h4><span class="circle-b circle-g"></span> Shahi <div
                                                class="float-right font13 text-success pr-10 shahi_growth"><i
                                                    class="fa fa-long-arrow-alt-up"></i>+32%</div>
                                        </h4>
                                    </div>
                                </div>

                                <div class="row font13 mt-15">
                                    <div class="col text-right font-digit font16 zain_sold_item">155,000 <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 shahi_sold_item">1525,000 <small>Units</small></div>
                                </div>

                                <div class="row font13 mt-15">
                                    <div class="col text-right font-digit font16 zain_revenue"><small>Rs.</small> 80,00,00,000
                                    </div>
                                    <div class="col-auto text-center p-0" style="width:90px;">
                                        <strong>REVENUE</strong></div>
                                    <div class="col font-digit font16 shahi_revenue"><small>Rs.</small> 80,00,00,000</div>
                                </div>

                                <canvas style="margin-top:25px; margin-bottom:15px" id="divisional-sales"
                                    height="160"></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">AVG. Order Value <span><small>Rs.</small> 2,000,000</span>
                                    </div>
                                    <div class="col-12">AVG. Products/Order <span>2.25</span></div>
                                    <div class="col-12">AVG. Drop Size <span>25.1</span></div>
                                    <div class="col-12">AVG. Sales/Employee <span><small>Rs.</small> 22,000</span>
                                    </div>
                                    <div class="col-12">Active Employee <span>45</span></div>
                                    <div class="col-12">Absent Employee <span>12</span></div>
                                    <div class="col-12">Diviation <span>41.67<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. Shift <span style="float:none">Duration</span>
                                        </h2>
                                        <div class="total-time">6 <small>HRS</small> 40 <small>MINS</small></div>
                                        <div class="row time-s">
                                            <div class="col text-left">AVG. Market Duration<span>11.22.12 AM</span>
                                            </div>
                                            <div class="col bggray text-left">Avg. Time Spent/Shop<span>11.22.12
                                                    AM</span></div>
                                        </div>
                                    </div>


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

                        <div class="col-md-6 mb-20">
                            <div class="card 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-home-tab"
                                                data-toggle="pill" href="#pills-home" role="tab"
                                                aria-controls="pills-home" aria-selected="true">Employees </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">Products</a>
                                        </li>
                                        <li class="nav-item"> <a class="nav-link" id="pills-Regions-tab"
                                                data-toggle="pill" href="#pills-Regions" role="tab"
                                                aria-controls="pills-Regions" aria-selected="false">Regions</a>
                                        </li>

                                        <a href="#" 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-home" role="tabpanel"
                                        aria-labelledby="pills-home-tab">

                                        <div class="row pro-info">
                                            <div class="col-7 pr-0">
                                                <div class="pro-img"> <img src="images/employee.jpg" alt=""> </div>
                                                <h4>Usama shahid khan</h4>
                                                <p><strong>Territory: </strong> Lahore-1</p>
                                                <p><strong>TSM: </strong> Utba Aziz</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> 2,000,000</span></div>
                                        </div>

                                        <div class="row pro-info">
                                            <div class="col-7 pr-0">
                                                <div class="pro-img"> <img src="images/employee.jpg" alt=""> </div>
                                                <h4>Usama shahid khan</h4>
                                                <p><strong>Territory: </strong> Lahore-1</p>
                                                <p><strong>TSM: </strong> Utba Aziz</p>
                                            </div>
                                            <div class="col-2 topreg-no p-0"><span>02</span></div>
                                            <div class="col-3 pl-0 reg-totalsale">Total Booking
                                                <span><small>Rs.</small> 2,000,000</span></div>
                                        </div>

                                        <div class="row pro-info">
                                            <div class="col-7 pr-0">
                                                <div class="pro-img"> <img src="images/employee.jpg" alt=""> </div>
                                                <h4>Usama shahid khan</h4>
                                                <p><strong>Territory: </strong> Lahore-1</p>
                                                <p><strong>TSM: </strong> Utba Aziz</p>
                                            </div>
                                            <div class="col-2 topreg-no p-0"><span>03</span></div>
                                            <div class="col-3 pl-0 reg-totalsale">Total Booking
                                                <span><small>Rs.</small> 2,000,000</span></div>
                                        </div>

                                        <div class="row pro-info">
                                            <div class="col-7 pr-0">
                                                <div class="pro-img"> <img src="images/employee.jpg" alt=""> </div>
                                                <h4>Usama shahid khan</h4>
                                                <p><strong>Territory: </strong> Lahore-1</p>
                                                <p><strong>TSM: </strong> Utba Aziz</p>
                                            </div>
                                            <div class="col-2 topreg-no p-0"><span>04</span></div>
                                            <div class="col-3 pl-0 reg-totalsale">Total Booking
                                                <span><small>Rs.</small> 2,000,000</span></div>
                                        </div>

                                        <div class="row pro-info">
                                            <div class="col-7 pr-0">
                                                <div class="pro-img"> <img src="images/employee.jpg" alt=""> </div>
                                                <h4>Usama shahid khan</h4>
                                                <p><strong>Territory: </strong> Lahore-1</p>
                                                <p><strong>TSM: </strong> Utba Aziz</p>
                                            </div>
                                            <div class="col-2 topreg-no p-0"><span>05</span></div>
                                            <div class="col-3 pl-0 reg-totalsale">Total Booking
                                                <span><small>Rs.</small> 2,000,000</span></div>
                                        </div>


                                    </div>

                                    <div class="tab-pane fade" id="pills-contact" role="tabpanel"
                                        aria-labelledby="pills-contact-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/Dal_Chana_1594102079.jpg" alt=""> </div>
                                                <h4>Chilli Chips without</h4>
                                                <p><strong>Category: </strong> Chocolate</p>
                                                <p><strong>Brand: </strong> Chocolate</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>2,000
                                                    <small>CTNS</small> </span></div>
                                        </div>

                                        <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/Dal_Chana_1594102079.jpg" alt=""> </div>
                                                <h4>Chilli Chips without</h4>
                                                <p><strong>Category: </strong> Chocolate</p>
                                                <p><strong>Brand: </strong> Chocolate</p>
                                            </div>
                                            <div class="col-2 topreg-no p-0"><span>02</span></div>
                                            <div class="col-3 pl-0 reg-totalsale">Sales Unit <span>2,000
                                                    <small>CTNS</small> </span></div>
                                        </div>

                                        <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/Dal_Chana_1594102079.jpg" alt=""> </div>
                                                <h4>Chilli Chips without</h4>
                                                <p><strong>Category: </strong> Chocolate</p>
                                                <p><strong>Brand: </strong> Chocolate</p>
                                            </div>
                                            <div class="col-2 topreg-no p-0"><span>03</span></div>
                                            <div class="col-3 pl-0 reg-totalsale">Sales Unit <span>2,000
                                                    <small>CTNS</small> </span></div>
                                        </div>

                                        <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/Dal_Chana_1594102079.jpg" alt=""> </div>
                                                <h4>Chilli Chips without</h4>
                                                <p><strong>Category: </strong> Chocolate</p>
                                                <p><strong>Brand: </strong> Chocolate</p>
                                            </div>
                                            <div class="col-2 topreg-no p-0"><span>04</span></div>
                                            <div class="col-3 pl-0 reg-totalsale">Sales Unit <span>2,000
                                                    <small>CTNS</small> </span></div>
                                        </div>

                                        <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/Dal_Chana_1594102079.jpg" alt=""> </div>
                                                <h4>Chilli Chips without</h4>
                                                <p><strong>Category: </strong> Chocolate</p>
                                                <p><strong>Brand: </strong> Chocolate</p>
                                            </div>
                                            <div class="col-2 topreg-no p-0"><span>05</span></div>
                                            <div class="col-3 pl-0 reg-totalsale">Sales Unit <span>2,000
                                                    <small>CTNS</small> </span></div>
                                        </div>

                                    </div>

                                    <div class="tab-pane fade" id="pills-Regions" role="tabpanel"
                                        aria-labelledby="pills-Regions-tab">

                                        <div class="row pro-info">
                                            <div class="col-7 pr-0">
                                                <h4>Lahore</h4>
                                                <p><strong>RSM: </strong> UTBA AZIZ</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> 2,000,000</span></div>
                                        </div>

                                        <div class="row pro-info">
                                            <div class="col-7 pr-0">
                                                <h4>Lahore</h4>
                                                <p><strong>RSM: </strong> UTBA AZIZ</p>
                                            </div>
                                            <div class="col-2 topreg-no p-0"><span>02</span></div>
                                            <div class="col-3 pl-0 reg-totalsale">TOTAL Booking
                                                <span><small>Rs.</small> 2,000,000</span></div>
                                        </div>

                                        <div class="row pro-info">
                                            <div class="col-7 pr-0">
                                                <h4>Lahore</h4>
                                                <p><strong>RSM: </strong> UTBA AZIZ</p>
                                            </div>
                                            <div class="col-2 topreg-no p-0"><span>03</span></div>
                                            <div class="col-3 pl-0 reg-totalsale">TOTAL Booking
                                                <span><small>Rs.</small> 2,000,000</span></div>
                                        </div>

                                        <div class="row pro-info">
                                            <div class="col-7 pr-0">
                                                <h4>Lahore</h4>
                                                <p><strong>RSM: </strong> UTBA AZIZ</p>
                                            </div>
                                            <div class="col-2 topreg-no p-0"><span>04</span></div>
                                            <div class="col-3 pl-0 reg-totalsale">TOTAL Booking
                                                <span><small>Rs.</small> 2,000,000</span></div>
                                        </div>

                                        <div class="row pro-info">
                                            <div class="col-7 pr-0">
                                                <h4>Lahore</h4>
                                                <p><strong>RSM: </strong> UTBA AZIZ</p>
                                            </div>
                                            <div class="col-2 topreg-no p-0"><span>05</span></div>
                                            <div class="col-3 pl-0 reg-totalsale">TOTAL Booking
                                                <span><small>Rs.</small> 2,000,000</span></div>
                                        </div>

                                    </div>

                                </div>

                            </div>
                        </div>


                    </div>

                </div>

            </div>


        </div>

    </div>

</div>

@endsection