@extends('layouts.master')
@section('content')
<style>
    .mtd-sale {
        background: linear-gradient(0deg, #0038ba 0%, #1e54d3 100%);
        padding: 15px;
        border-radius: 12px;
        color: #fff;
    }

    .mtd-sale .btn {
        padding: 0;
        background: transparent;
        color: #fff;
    }

    .mtd-sale .btn svg {
        margin-top: -3px;
    }

    .mtd-sale .dropdown-menu {
        padding: 5px 0 0px 0 !important;
        border: none;
        box-shadow: 0px 0px 15px 0px rgba(82, 63, 105, 0.2);
        -webkit-box-shadow: 0px 0px 15px 0px rgba(82, 63, 105, 0.4);
        -moz-box-shadow: 0px 0px 15px 0px rgba(82, 63, 105, 0.4);
        -ms-box-shadow: 0px 0px 15px 0px rgba(82, 63, 105, 0.4);
        margin-top: 6px;
        min-width: 130px;
    }

    .mtd-sale .dropdown-item {
        padding: 3px 10px;
        color: #282828;
        font-size: 13px;
    }

    .mtd-sale .dropdown-item:HOVER {
        background-color: #f4f5fa;
        color: #0038ba
    }

    .mtd-sale .bi-bar-chart-line {
        width: 22px;
        height: 22px;
        opacity: 0.75;
        margin-top: -3px;
    }

    .mtd-sale-val {
        padding-top: 30px;
        font-size: 15px;
        color: #c1caee;
        line-height: 1;
        margin-bottom: 0px;
    }

    .mtd-sale-val .divVal {
        font-size: 32px;
        color: #fff;
        display: block;
        font-family: 'Rationale', sans-serif !important;
        padding-top: 8px;
        line-height: 1;
    }

    .mtd-sale-val .divVal svg {
        width: 24px;
        height: 24px;
        margin-top: -5px;
        color: #32d376;
    }

    .mtd-Gross-val {
        padding-top: 10px;
        font-size: 13px;
        color: #aeb8e3;
    }

    .mtd-Gross-val span {
        font-size: 28px;
        color: #fff;
        display: block;
        font-family: 'Rationale', sans-serif !important;
        padding-top: 5px;
        line-height: 1;
    }

    .since-month {
        font-size: 13px;
        padding: 3px 8px;
        background-color: rgba(0, 0, 0, 0.3);
        margin-top: 10px;
        border-radius: 3px;
        display: inline-block;
    }

    .Target {
        background-color: #fff;
        box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.05);
        padding: 15px;
        border-radius: 12px;
        height: 100%;
        font-size: 14px;
    }

    .Target h2 {
        font-size: 18px;
    }

    .tabheading {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .tabheading svg {
        width: 18px;
        height: 18px;
        margin-top: -3px;
        color: #000;
        margin-right: 5px;
        opacity: 0.45;
    }

    .Target .Target-val {
        font-size: 18px;
        font-family: 'Rationale', sans-serif !important;
        line-height: 1;
        text-align: right;
    }

    .Target .bi-bullseye,
    .bi-graph-up-arrow,
    .bi-speedometer2 {
        margin-right: 10px;
        color: #0038ba;
        width: 20px;
        height: 20px;
        margin-top: -3px;
    }

    .kpi-div {
        font-size: 13px;
    }

    .kpi-val {
        font-size: 18px;
        font-family: 'Rationale', sans-serif !important;
        line-height: 1;
        color: #0038ba;
    }

    .kpi-row {
        background-color: #f4f5fa;
        border-radius: 8px;
        margin: 0;
        padding: 6px 0;
        line-height: 1;
        margin-bottom: 5px;
    }

    .kpi-row .col {
        padding-left: 10px;
    }

    .top-performer {
        background-color: #f4f5fa;
        border-radius: 12px;
        font-size: 14px;
        padding: 0;
    }

    .top-performer .nav-tabs {
        background-color: #eaecf4;
        border: none;
        border-radius: 10px;
        padding: 10px;
    }

    .top-performer .nav-tabs .nav-link {
        border: none;
        border-radius: 8px;
        padding: 12px 25px;
        color: #979797;
        height: auto;
        line-height: 1;
    }

    .top-performer .nav-tabs .nav-link svg {
        width: 16px;
        height: 16px;
        margin-right: 5px;
        opacity: 0.65;
    }

    .top-performer .nav-tabs .nav-item.show,
    .top-performer .nav-tabs .nav-link:HOVER,
    .top-performer .nav-tabs .nav-link.active {
        border: none;
        color: #282828;
    }

    .top-performer .nav-tabs .nav-link.active svg {
        color: #0038ba;
    }

    .top-performer .tab-pane {
        padding: 0 10px 10px 10px;
    }

    .list-row {
        padding-top: 10px;
        padding-bottom: 10px;
        margin: 0;
        font-size: 13px;
    }

    .info-list-row {
        background-color: #fff;
        border-radius: 8px;
        margin: 0;
        padding: 8px 0;
        line-height: 1;
        margin-bottom: 7px;
    }

    .list-row .col,
    .info-list-row .col {
        padding-left: 0;
        margin-top: auto;
        margin-bottom: auto;
    }

    .listIMG {
        background: #fff;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 10px;
        border: solid 1px #0038ba;
    }

    .list-pr-name {
        height: 19px;
        line-height: 18px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        margin-top: auto;
        margin-bottom: auto;
    }

    .ReportList {
        border: solid 1px #dddeea;
        border-radius: 12px;
        font-size: 14px;
        padding: 10px 30px
    }

    .report-name-l {
        display: flex;
        padding-bottom: 7px;
        padding-top: 7px;
        border-bottom: none;
        text-decoration: none;
        color: #282828;
        width: 100%;
    }

    .report-name-l+.report-name-l {
        border-top: solid 1px #dddeea;
    }

    .report-name-l:hover {
        text-decoration: underline;
        color: #0038ba;
    }

    .report-name-l .report-icon {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        margin-right: 10px;
        background-color: #f4f5fa;
        padding: 5px;
        text-align: center;
    }

    .report-name-l .report-icon img {
        width: 22px;
        height: 22px;
        margin: auto;
    }

    .report-name-l span {
        margin-top: auto;
        margin-bottom: auto;
    }

    :root {
        --tlt-br-cnt: 50;
        --i: 0;
    }

    .progress-1,.progress-2 {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin: 20px auto;
    }

    .progress-1 i,.progress-2 i {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transform: rotate(calc(45deg + calc(calc(360deg / var(--tlt-br-cnt)) * var(--i))));
    }

    .progress-1 i::after,.progress-2 i::after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        background: #c4c4c4;
        width: 2px;
        height: 18px;
        border-radius: 999rem;
        transform: rotate(-45deg);
        transform-origin: top;
        opacity: 0;
        animation: barCreationAnimation 100ms ease forwards;
        animation-delay: calc(var(--i) * 15ms);
    }

    .progress-1 .selected1::after,.progress-2 .selected1::after {
        background: #0038ba;
    }

    .progress-1 .selected2::after,.progress-2 .selected2::after {
        background: #0038ba;
    }

    .percent-text {
        font-size: 32px;
        margin: 0;
        color: #0038ba;
        font-family: 'Rationale', sans-serif !important;
        line-height: 1;
        animation: barCreationAnimation 500ms ease forwards;
        animation-delay: calc(var(--tlt-br-cnt) * 15ms / 2);
    }

    .percent-text span {
        display: block;
        font-size: 13px;
        text-align: center;
        color: #282828;
        font-family: 'proximanova-light', sans-serif !important
    }
    .loader-sell360 {
        height: 300px;
    }

    @keyframes barCreationAnimation {
        from {
            opacity: 0
        }

        to {
            opacity: 1
        }
    }
</style>
<div class="row _user-TS">
    <div class="col-md-12 _dashTOP">
        <img class="_user_Pimage" src="{{ Auth::user()->employee_picture ? Auth::user()->employee_picture : '/images/avatar.svg' }}" alt="">
        <h2 class="_head01">Good Afternoon, Mr. {{ (Auth::user()->employee_first_name." ".Auth::user()->employee_last_name) }}</h2>
        <p>Here’s what’s happening today.</p>
         <a href="{{route('primary-sale-reports')}}" class="btn add_button"><i class="fa fa-file-invoice"></i> View Reports</a>
    </div>
</div>
<div class="row pb-30">
    <div class="col-md-3 pr-0">
        <div class="mtd-sale">
            <div class="row">
                <div class="col-6">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                        fill="currentColor" class="bi bi-bar-chart-line" viewBox="0 0 16 16">
                        <path
                            d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2zm1 12h2V2h-2v12zm-3 0V7H7v7h2zm-5 0v-3H2v3h2z" />
                    </svg>
                </div>
                <div class="col-6 text-right">
                    <div class="btn-group" role="group">
                        <button id="btnGroupDrop1" type="button" class="btn dropdown-toggle"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
                                <path
                                    d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z" />
                                <path
                                    d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z" />
                            </svg>
                        </button>
                        <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                            <a class="dropdown-item last-month-btn" href="javascript:;">Last Month</a>
                        </div>
                    </div>


                </div>
            </div>
            <div class="row">
                <div class="col-12 mtd-sale-val">
                    <strong>MTD Sales</strong>
                    <div class="divVal"><small>Rs.</small> <span class="ttl_mtd_sale"> Loading... </span>
                        {{-- <i class="fa fa-long-arrow-alt-up ttl_mtd_sale_icon" style="font-size: 16px;margin-left: 20px;"></i> --}}
                        {{-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                            fill="currentColor" class="bi bi-arrow-up-short" viewBox="0 0 16 16">
                            <path fill-rule="evenodd"
                                d="M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z" />
                        </svg> --}}
                    </div>

                </div>
                <div class="col-12 mtd-Gross-val">
                    Total Units
                    <span class="ttl_units">Loading...</span>
                </div>
                <div class="col-12">
                    <div class="since-month ttl_growth">Loading...</div>
                </div>
            </div>

        </div>
    </div>

    <div class="col-md-3">
        <div class="Target">
            <h2>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                    class="bi bi-bullseye" viewBox="0 0 16 16">
                    <path
                        d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
                    <path
                        d="M8 13A5 5 0 1 1 8 3a5 5 0 0 1 0 10zm0 1A6 6 0 1 0 8 2a6 6 0 0 0 0 12z" />
                    <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" />
                    <path d="M9.5 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
                </svg>
                Target
            </h2>

            <div class="row">
                <div class="col-12">
                    <div class="progress-1"></div>
                </div>
            </div>

            <div class="row PB-5">
                <div class="col-6">TGT:</div>
                <div class="col-6 Target-val ttl_targets">Loading...</div>
            </div>
            <div class="row">
                <div class="col-6">SALEs:</div>
                <div class="col-6 Target-val ttl_achieved_units">Loading...</div>
            </div>
        </div>
    </div>

    <div class="col-md-3 pl-0">
        <div class="Target">
            <h2>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                    class="bi bi-graph-up-arrow" viewBox="0 0 16 16">
                    <path fill-rule="evenodd"
                        d="M0 0h1v15h15v1H0V0Zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5Z" />
                </svg>
                Productivity
            </h2>

            <div class="row">
                <div class="col-12">
                    <div class="progress-2"></div>
                </div>
            </div>

            <div class="row PB-5">
                <div class="col-6">TOTAL VISITS:</div>
                <div class="col-6 Target-val visit_calls">Loading...</div>
            </div>
            <div class="row">
                <div class="col-6">PRO. VISITS:</div>
                <div class="col-6 Target-val productive_calls">Loading...</div>
            </div>
        </div>
    </div>

    <div class="col-md-3  pl-0">
        <div class="Target kpi-div">
            <h2>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                    class="bi bi-speedometer2" viewBox="0 0 16 16">
                    <path
                        d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z" />
                    <path fill-rule="evenodd"
                        d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z" />
                </svg>
                KPIs
            </h2>

            <div class="row kpi-row">
                <div class="col pr-0 mt-auto mb-auto">AVG. SKUs/Order</div>
                <div class="col-auto kpi-val avg_sku_per_order">Loading...</div>
            </div>
            <div class="row kpi-row">
                <div class="col pr-0 mt-auto mb-auto">AVG. Bill Value</div>
                <div class="col-auto kpi-val avg_bill_value">Loading...</div>
            </div>
            <div class="row kpi-row">
                <div class="col pr-0 mt-auto mb-auto">AVG. Drop Size</div>
                <div class="col-auto kpi-val avg_drop_size">Loading...</div>
            </div>
            <div class="row kpi-row">
                <div class="col pr-0 mt-auto mb-auto">AVG. Time/Shop</div>
                <div class="col-auto kpi-val avg_time_per_shop">Loading...</div>
            </div>
            <div class="row kpi-row">
                <div class="col pr-0 mt-auto mb-auto">Plan Adherence</div>
                <div class="col-auto kpi-val plan_adherence">Loading...</div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <h2 class="tabheading">
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16"
                style="enable-background:new 0 0 16 16;" xml:space="preserve">
                <path
                    d="M9.7,0.9L8,0.1L6.3,0.9L4.5,1.2L3.6,2.9L2.3,4.2l0.3,1.9L2.3,7.9l1.3,1.3l0.8,1.7l1.9,0.3L8,12.1l1.7-0.9l1.9-0.3l0.8-1.7
            l1.3-1.3l-0.3-1.9l0.3-1.9l-1.3-1.3l-0.8-1.7L9.7,0.9z M10.9,2.1l0.7,1.4l1.1,1.1l-0.2,1.5l0.2,1.5l-1.1,1.1L10.9,10l-1.5,0.2L8,11
            l-1.4-0.7L5.1,10L4.5,8.7L3.4,7.6l0.2-1.5L3.4,4.6l1.1-1.1l0.7-1.4l1.5-0.2L8,1.2l1.4,0.7C9.4,1.9,10.9,2.1,10.9,2.1z" />
                <path d="M4,11.8V16l4-1l4,1v-4.2l-2,0.3l-2,1l-2-1L4,11.8z" />
                <path
                    d="M6.5,8.6c-0.1,0.1-0.3,0-0.2-0.2l0.3-1.6L5.4,5.7C5.3,5.6,5.3,5.4,5.5,5.3l1.6-0.2l0.7-1.4c0.1-0.1,0.2-0.1,0.3,0l0.7,1.4
            l1.6,0.2c0.1,0,0.2,0.2,0.1,0.3L9.4,6.8l0.3,1.6c0,0.1-0.1,0.3-0.2,0.2L8,7.8L6.5,8.6L6.5,8.6z" />
            </svg>
            Top Performer
        </h2>

        <div class="top-performer">

            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link active" id="nav-Employee-tab" data-toggle="tab"
                    href="#nav-Employee" role="tab" aria-controls="nav-Employee"
                    aria-selected="true"><svg xmlns="http://www.w3.org/2000/svg" width="16"
                        height="16" fill="currentColor" class="bi bi-people" viewBox="0 0 16 16">
                        <path
                            d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8Zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816ZM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z" />
                    </svg> Employee</a>
                <a class="nav-item nav-link" id="nav-Products-tab" data-toggle="tab"
                    href="#nav-Products" role="tab" aria-controls="nav-Products"
                    aria-selected="false"><svg xmlns="http://www.w3.org/2000/svg" width="16"
                        height="16" fill="currentColor" class="bi bi-boxes" viewBox="0 0 16 16">
                        <path
                            d="M7.752.066a.5.5 0 0 1 .496 0l3.75 2.143a.5.5 0 0 1 .252.434v3.995l3.498 2A.5.5 0 0 1 16 9.07v4.286a.5.5 0 0 1-.252.434l-3.75 2.143a.5.5 0 0 1-.496 0l-3.502-2-3.502 2.001a.5.5 0 0 1-.496 0l-3.75-2.143A.5.5 0 0 1 0 13.357V9.071a.5.5 0 0 1 .252-.434L3.75 6.638V2.643a.5.5 0 0 1 .252-.434L7.752.066ZM4.25 7.504 1.508 9.071l2.742 1.567 2.742-1.567L4.25 7.504ZM7.5 9.933l-2.75 1.571v3.134l2.75-1.571V9.933Zm1 3.134 2.75 1.571v-3.134L8.5 9.933v3.134Zm.508-3.996 2.742 1.567 2.742-1.567-2.742-1.567-2.742 1.567Zm2.242-2.433V3.504L8.5 5.076V8.21l2.75-1.572ZM7.5 8.21V5.076L4.75 3.504v3.134L7.5 8.21ZM5.258 2.643 8 4.21l2.742-1.567L8 1.076 5.258 2.643ZM15 9.933l-2.75 1.571v3.134L15 13.067V9.933ZM3.75 14.638v-3.134L1 9.933v3.134l2.75 1.571Z" />
                    </svg> Products</a>
            </div>

            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="nav-Employee" role="tabpanel"
                    aria-labelledby="nav-Employee-tab">

                    <div class="row list-row">
                        <div class="col-5"><strong>Employee</strong></div>
                        <div class="col"><strong>Net Sales</strong></div>
                        <div class="col"><strong>Target</strong></div>
                        <div class="col"><strong>Achievement</strong></div>
                    </div>
                    <div class="loader-sell360 tblLoader tblLoaderEmployeeAchievement">
                        <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>
                    <span class="all_employees"></span>

                </div>


                <div class="tab-pane fade" id="nav-Products" role="tabpanel"
                    aria-labelledby="nav-Products-tab">

                    <div class="row list-row">
                        <div class="col-5"><strong>Product</strong></div>
                        <div class="col"><strong>Net Sales</strong></div>
                        <div class="col"><strong>Target</strong></div>
                        <div class="col"><strong>Achievement</strong></div>
                    </div>
                    <div class="loader-sell360 tblLoader tblLoaderProductsAchievement">
                        <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>
                    <span class="all_products"></span>

                </div>

            </div>

        </div>
    </div>

    <div class="col-md-4">
        <h2 class="tabheading"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                fill="currentColor" class="bi bi-clipboard-data" viewBox="0 0 16 16">
                <path
                    d="M4 11a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0v-1zm6-4a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0V7zM7 9a1 1 0 0 1 2 0v3a1 1 0 1 1-2 0V9z" />
                <path
                    d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                <path
                    d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
            </svg> Report List</h2>
        <div class="ReportList">
            <div class="loader-sell360 tblLoader tblLoaderReports">
                <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 all_reports">
                

            </div>

        </div>
    </div>
</div>
{{-- <div class="row">
    <div class="col-6">
        <div class="card total-sale">
            <div class="row">
                <div class="col-12">
                    <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 mb-20">Today's <span>Sales</span></h2>
                            <div class="row">
                                <div class="col-6 pr-0"><strong class="font14">Primary Sale</strong>
                                    <div class="total-amount" style="border-bottom:solid 1px #e1e1e1"  id="daily_executed_qty"></div>
                                </div>
                                <div class="col-6 pl-0"><strong class="font14">Sub Distribution</strong>
                                    <div class="total-amount" style="border-bottom:solid 1px #e1e1e1"  id="daily_sub_executed_qty"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col unit-v pr-0">Booked Sale<span id="daily_booked_qty"> </span></div>
                        <div class="col unit-v pr-0">Booked Sale<span id="daily_sub_booked_qty"></span></div>
                    </div>
                </div>

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

    <div class="col-6">
        <div class="card total-sale">
            <div class="row">
                <div class="col-12">
                    <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 mb-20">Monthly <span>Sale</span></h2>
                            <div class="row">
                                <div class="col-6 pr-0"><strong class="font14">Primary Sale</strong>
                                    <div class="total-amount" style="border-bottom:solid 1px #e1e1e1" id="monthly_executed_qty"></div>
                                </div>
                                <div class="col-6 pl-0"><strong class="font14">Sub Distribution</strong>
                                    <div class="total-amount" style="border-bottom:solid 1px #e1e1e1" id="monthly_sub_executed_qty"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col unit-v pr-0">Booked Sale<span id="monthly_booked_qty"> </span></div>
                        <div class="col unit-v pr-0">Booked Sale<span id="monthly_sub_booked_qty"></span></div>
                    </div>
                </div>

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

{{--<div class="sell360report">--}}
{{--    <div class="row">--}}
{{--        <div class="col-md-4">--}}
{{--            <div class="card mt-0">--}}
{{--                <img class="cardicon" src="/images/today-order.svg" alt="">--}}
{{--                <h4>Today's <span>Booking</span></h4>--}}
{{--                <h2 class="digit"><small>Rs.</small> {{ number_format($stat->today_booking) }}</h2>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--        <div class="col-md-4">--}}
{{--            <div class="card mt-0">--}}
{{--                <div id="widget-meter" style="display: none"></div>--}}
{{--                <h4>Yesterday's <span>Execution</span></h4>--}}
{{--                <h2 class="digit"><small>Rs.</small> {{ number_format($stat->ytday_execution) }}</h2>--}}
{{--                <input id="todaysExecution" type="text" value=" {{ $stat->ytday_booking ? ROUND($stat->ytday_execution/$stat->ytday_booking) : 0 }} " hidden>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--        <div class="col-md-4">--}}
{{--            <div class="card mt-0">--}}
{{--                <img class="cardicon" src="/images/target-monthly-icon.svg" alt="">--}}
{{--                <h4>Monthly <span>Target</span></h4>--}}
{{--                <h2 class="digit"><small>{{ $stat->kpi_type == 4 ? 'Rs.' : '' }}</small> {{ number_format($stat->target) }}</h2>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}
{{--</div>--}}
{{--

<div class="col-12 h_dash">
  <div class="row">
    <div class="col-3"><a href="live-report"><img src="images/live-icon-dash.svg"  alt=""/>
      <h2 class="HD-title">Live<span class="f-light">Report</span></h2>
      </a> 
	</div>
    <div class="col-3"><a href="daily-execution-overview"><img src="images/daily-excution-dash.svg"  alt=""/>
      <h2 class="HD-title">Daily Execution<span class="f-light">Report</span></h2>
      </a> 
	</div>
    <div class="col-3"><a href="#"><img src="images/distributor-st-icon-dash.svg"  alt=""/>
      <h2 class="HD-title">Distributor Stock<span class="f-light">Report</span></h2>
      </a> 
	</div>
    <div class="col-3"><a href="#"><img src="images/monthly-sale-dash.svg"  alt=""/>
      <h2 class="HD-title">Monthly sales<span class="f-light">Report</span></h2>
      </a> 
	</div>
    <div class="col-3"><a href="#"><img src="images/daily-booking-dash.svg"  alt=""/>
      <h2 class="HD-title">Daily Booking<span class="f-light">Report</span></h2>
      </a> 
	</div>
    <div class="col-3"><a href="#"><img src="images/sales-target-icon-dash.svg"  alt=""/>
      <h2 class="HD-title">Sales Targert<span class="f-light">Report</span></h2>
      </a> 
	</div>
    <div class="col-3"><a href="#"><img src="images/monthly-execution-dash.svg"  alt=""/>
      <h2 class="HD-title">Monthly Execution<span class="f-light">Report</span></h2>
      </a> 
	</div>  
	  
  </div>
</div>
--}}

<!-- <div class="card">
    <div class="header">
        <h2>Shortcuts <span></span></h2>
    </div>
    <div class="action-btns">
        <div class="row">
            <div class="col-3"><a href="/register-ss" class="btn btn-primary">Sales Staff <i
                        class="fa fa-arrow-right"></i></a></div>
            <div class="col-3"><a href="/inventory" class="btn btn-primary">Products <i
                        class="fa fa-arrow-right"></i></a></div>
            <div class="col-3"><a href="/territoryRetailers" class="btn btn-primary">Retail Shops <i
                        class="fa fa-arrow-right"></i></a></div>
            <div class="col-3"><a href="/territoryDistributor" class="btn btn-primary">Distributors <i
                        class="fa fa-arrow-right"></i></a></div>
            <div class="col-3"><a href="/secondary_orders_list" class="btn btn-primary">Orders <i
                        class="fa fa-arrow-right"></i></a></div>
            <div class="col-3"><a href="/ListSchemes" class="btn btn-primary">Trade Offers <i
                        class="fa fa-arrow-right"></i></a></div>
            <div class="col-3"><a href="/ListKpi" class="btn btn-primary">KPI <i
                        class="fa fa-arrow-right"></i></a></div>
            <div class="col-3"><a href="/marked_visits" class="btn btn-primary">Reports <i
                        class="fa fa-arrow-right"></i></a></div>
        </div>
    </div>
</div> -->

@endsection

@push('scripts')
    
    <script src="{{url('/js/custom/homePageReport/home.js')}}"></script>
@endpush