@extends('layouts.master')
@section('data-sidebar')
    <input type="hidden" id="all_areas" value="{{$areas}}">
    <div id="product-cl-sec"> <a href="#" id="pl-close" class="close-btn-pl"></a>
        <div class="pro-header-text">Select <span> Filters</span>
        </div>

        <div class="se_cus-type form-wrap p-10">
            <div class="row">
                <div class="col-12 filter-refine pt-0">
                    <div class="row">
                        <div class="col-auto mt-auto mb-auto font14 pr-0">
                            Select Date
                        </div>
                        <input type="hidden" value="" id="monthYear">
                        <div class="col"> <input type="text" id="datepicker" class="form-control" placeholder="">
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="pc-cartlist">
            <div class="overflow-plist">
                <div class="plist-content">
                    <div class="_left-filter pt-0">
                        <div class="container">
                            <div class="row">
                                <div id="floating-label" class="col-12">
                                    <div class="card top_border p-15">
                                        <h2 class="_head03">Filters <span></span></h2>
                                        <div class="form-wrap p-0">
                                            <div class="row">
                                                <div class="col-md-12 PB-5">
                                                    <label class="font12 mb-5">View By</label>
                                                    <div class="form-s2">
                                                        <select class="form-control formselect view_by" placeholder="select View By">
                                                            <option value="">Select View By</option>
                                                            @if($designation_flag == 4)
                                                            <option value="region">Region Wise</option>
                                                            @endif
                                                            @if($designation_flag == 4 || $designation_flag == 1)
                                                            <option value="area">Area/Zone Wise</option>
                                                            @endif
                                                            @if($designation_flag == 4 || $designation_flag == 1 || $designation_flag == 2 || $designation_flag == 3)
                                                            <option value="distributor">Distributor Wise</option>
                                                            @endif
                                                            @if($designation_flag == 4 || $designation_flag == 1 || $designation_flag == 2 || $designation_flag == 3)
                                                            <option value="employee">Order Booker Wise</option>
                                                            @endif
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-12 PB-5 region_wise area_wise distributor_wise employee_wise" style="display: none" >
                                                    <label class="font12 mb-5">Select Region</label>
                                                    <div class="form-s2">
                                                        <select class="form-control formselect region_id" placeholder="select Region" onchange="LoadAreasByRegion($(this).val(), 'area_id')">
                                                            <option value="">All Region</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-12 PB-5 area_wise distributor_wise employee_wise" style="display: none">
                                                    <label class="font12 mb-5">Select Area/Zone</label>
                                                    <div class="form-s2">
                                                        <select class="form-control formselect area_id" placeholder="select Area" onchange="LoadDistributorsByRegion($(this).val(), 'distributor_id')">
                                                            <option value="">All Area/Zone</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-12 PB-5 distributor_wise employee_wise" style="display: none">
                                                    <label class="font12 mb-5">Select Distributor</label>
                                                    <div class="form-s2">
                                                        <select class="form-control formselect distributor_id"
                                                            placeholder="select Distributor" onchange="LoadOrderBookerByDistributor($(this).val(), 'employee_id','region_id')">
                                                            <option value="">All Distributor</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-12 PB-5 employee_wise" style="display: none">
                                                    <label class="font12 mb-5">Select Order Booker</label>
                                                    <div class="form-s2">
                                                        <select class="form-control formselect employee_id"
                                                            placeholder="select Employee">
                                                            <option value="">All Order Bookers</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="_cl-bottom">
            <button type="buttton" class="btn btn-primary mr-2 filter-report">Filter</button>
            <button type="buttton" class="btn btn-primary btn-line mr-2 reset-filter">Reset</button>
            <button id="pl-close" type="button" class="btn btn-cancel mr-2">Cancel</button>
        </div>
    </div>
@endsection
@section('content')
    <style>
        #product-cl-sec {
            width: 390px;
        }

        .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,
        .small-card .bi,
        .bi-symmetry-vertical {
            margin-right: 10px;
            color: #0038ba;
            width: 20px;
            height: 20px;
            margin-top: -3px;
        }

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

        .kpi-val {
            font-size: 17px;
            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: 7px;
        }

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

        .top-performer {
            background-color: #fff;
            border: solid 1px #ebebeb;
            border-radius: 12px;
            font-size: 14px;
            padding: 2px;
        }

        .top-performer .nav-tabs {
            background-color: #f4f5f9;
            border: none;
            border-radius: 10px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
            padding: 10px;
        }

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

        .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;
            background-color: #fff;
            border-radius: 12px;
            font-size: 14px;
            padding: 30px 15px 15px 15px
        }

        .filter-List {
            border: solid 1px #dddeea;
            background-color: #fff;
            border-radius: 12px;
            font-size: 14px;
            padding: 5px 15px;
            margin-bottom: 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 {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            margin: 20px auto;
        }

        .progress-1 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 {
            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 {
            background: #0038ba;
        }

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

        .percent-text {
            font-size: 30px;
            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
        }

        .Target .st-Val {
            font-size: 32px;
            display: block;
            font-family: 'Rationale', sans-serif !important;
            line-height: 1;
            margin-top: 53px;
            margin-bottom: 54px;
        }

        @keyframes barCreationAnimation {
            from {
                opacity: 0
            }

            to {
                opacity: 1
            }
        }

        .small-card {
            max-width: 217px;
            width: 217px;
            padding-right: 0;
        }

        .small-card-col-3 {
            max-width: 320px;
            width: 320px;
            padding-right: 0;
        }

        .dataTables_filter .form-control {
            box-shadow: none !important;
        }

        .download-btn {
            font-size: 13px;
            background-color: #0038ba;
            border: none;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -khtml-border-radius: 5px;
            padding: 7px 15px;
            color: #fff !important;
            margin-left: 10px;
            line-height: 1;
            margin-top: -3px;
            margin-bottom: 8px;
            letter-spacing: 1px;
        }

        .download-btn .fa {
            margin-right: 5px;
            font-size: 12px;
        }

        .overflow-x {
            overflow-x: auto;
            position: relative;
            padding-top: 0;
            padding-bottom: 0;
        }

        .overflow-x .ep-overflow {
            float: left;
            width: max-content;
            padding: 0 0 20px 0;
            min-width: 100%;
            display: inline-block;
            flex-wrap: unset;
            margin-right: 0;
            margin-left: 0;
        }

        .mCSB_horizontal.mCSB_inside>.mCSB_container {
            margin-bottom: 5px;
        }

        .btn-filter {
            background-color: transparent;
            float: right;
            color: #979797;
            padding: 4px 0;
        }

        .btn-filter img {
            width: 20px;
            height: 20px;
            float: right;
            margin-left: 8px;
            cursor: pointer
        }

        .Target .progress {
            height: 9px;
        }

        .light-blue .Target {
            background-color: #14a4ff;
            color: #fff;
        }

        .light-blue .Target .st-Val {
            margin-top: 0;
            margin-bottom: 33px;
        }

        .light-blue .Target .progress-bar {
            background: linear-gradient(90deg, #032b85 0%, #0038ba 100%) !important;
        }

        .light-blue .Target .progress {
            background-color: rgba(255, 255, 255, 0.7);
        }

        .light-blue .Target small {
            display: block;
            font-size: 20px;
        }

        .light-blue .Target .bi {
            color: #fff !important;
        }
        .tab-download-btn{
            position: absolute; top: 16px; right: 10px; z-index: 5;
        }
        .tab-download-btn .download-btn{
            margin-bottom: 0 !important; margin-top: 0;
        }
        .mt-69 {
            margin-top: 69px;
        }
        .progress-1,.progress-2,.progress-3 {
            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,
        .progress-3 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,
        .progress-3 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,
        .progress-3 .selected1::after {
            background: #0038ba;
        }

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

        .percent-text {
            font-size: 30px;
            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
        }
        .table .rational{
            font-family: 'Rationale', sans-serif!important;
            font-size: 15px!important;
            text-align: right!important;
        }
    </style>
    <div class="row mt-2 mb-3">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Monthly Sales <span> Report</span></h2>
        </div>

        <div class="col-lg-6 col-md-6 col-sm-6">
            <button class="btn btn-filter" type="button" id="openSidebar">Filters <img src="/images/report-filters.svg"
                    alt=""></button>
        </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>
                <div class="row">
                    <div class="col-12 mtd-sale-val">
                        <strong>Gross Sales Value</strong>
                        <div class="divVal"><small>Rs.</small> <span class="ttl_mtd_sale"> Loading... </span>
                        </div>
    
                    </div>
                    <div class="col-12 mtd-Gross-val">
                        Unit Sales
                        <span class="ttl_units">Loading...</span>
                    </div>
                    <div class="col-12">
                        <div class="since-month ttl_growth_month">GOLM: Loading...</div>
                        <div class="since-month ttl_growth_year">GOLY: 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 <small>(UNITs)</small>
                </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 target-master-packing">
                <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 <small>(Master Packing)</small>
                </h2>
    
                <div class="row">
                    <div class="col-12">
                        <div class="progress-2"></div>
                    </div>
                </div>
    
                <div class="row PB-5">
                    <div class="col-6">TGT:</div>
                    <div class="col-6 Target-val ttl_targets_master">Loading...</div>
                </div>
                <div class="row">
                    <div class="col-6">SALEs:</div>
                    <div class="col-6 Target-val ttl_achieved_master">Loading...</div>
                </div>
            </div>
        </div>
        <div class="col-md-3  pl-0">
            <div class="Target target-gross-sales">
                <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 <small>(Gross Value)</small>
                </h2>
    
                <div class="row">
                    <div class="col-12">
                        <div class="progress-3"></div>
                    </div>
                </div>
    
                <div class="row PB-5">
                    <div class="col-3">TGT:</div>
                    <div class="col-9 Target-val ttl_targets_gross">Loading...</div>
                </div>
                <div class="row">
                    <div class="col-3">SALEs:</div>
                    <div class="col-9 Target-val ttl_achieved_gross">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 PT-20">
        <div class="col-md-12">
            <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>
                    <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>
                    <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"></path>
                </svg>
                Report List
            </h2>

            <div class="top-performer">

                <div class="nav nav-tabs position-relative" id="nav-tab" role="tablist">
                        <a class="nav-item nav-link {{$designation_flag == 4 ? 'active' : ''}}" style="display:{{$designation_flag == 4 ? '' : 'none'}}" id="nav-Region-tab" data-toggle="tab" href="#nav-Region" role="tab" aria-controls="nav-Region" aria-selected="false">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-globe-asia-australia" viewBox="0 0 16 16">
                                <path d="m10.495 6.92 1.278-.619a.483.483 0 0 0 .126-.782c-.252-.244-.682-.139-.932.107-.23.226-.513.373-.816.53l-.102.054c-.338.178-.264.626.1.736a.476.476 0 0 0 .346-.027ZM7.741 9.808V9.78a.413.413 0 1 1 .783.183l-.22.443a.602.602 0 0 1-.12.167l-.193.185a.36.36 0 1 1-.5-.516l.112-.108a.453.453 0 0 0 .138-.326ZM5.672 12.5l.482.233A.386.386 0 1 0 6.32 12h-.416a.702.702 0 0 1-.419-.139l-.277-.206a.302.302 0 1 0-.298.52l.761.325Z"/>
                                <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM1.612 10.867l.756-1.288a1 1 0 0 1 1.545-.225l1.074 1.005a.986.986 0 0 0 1.36-.011l.038-.037a.882.882 0 0 0 .26-.755c-.075-.548.37-1.033.92-1.099.728-.086 1.587-.324 1.728-.957.086-.386-.114-.83-.361-1.2-.207-.312 0-.8.374-.8.123 0 .24-.055.318-.15l.393-.474c.196-.237.491-.368.797-.403.554-.064 1.407-.277 1.583-.973.098-.391-.192-.634-.484-.88-.254-.212-.51-.426-.515-.741a6.998 6.998 0 0 1 3.425 7.692 1.015 1.015 0 0 0-.087-.063l-.316-.204a1 1 0 0 0-.977-.06l-.169.082a1 1 0 0 1-.741.051l-1.021-.329A1 1 0 0 0 11.205 9h-.165a1 1 0 0 0-.945.674l-.172.499a1 1 0 0 1-.404.514l-.802.518a1 1 0 0 0-.458.84v.455a1 1 0 0 0 1 1h.257a1 1 0 0 1 .542.16l.762.49a.998.998 0 0 0 .283.126 7.001 7.001 0 0 1-9.49-3.409Z"/>
                            </svg> Region</a>
                        <a class="nav-item nav-link {{$designation_flag == 1 ? 'active' : ''}}" style="display:{{$designation_flag == 2 || $designation_flag == 3 ? 'none' : ''}}" id="nav-Area-tab" data-toggle="tab" href="#nav-Area" role="tab" aria-controls="nav-Area" aria-selected="false">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-map" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M15.817.113A.5.5 0 0 1 16 .5v14a.5.5 0 0 1-.402.49l-5 1a.502.502 0 0 1-.196 0L5.5 15.01l-4.902.98A.5.5 0 0 1 0 15.5v-14a.5.5 0 0 1 .402-.49l5-1a.5.5 0 0 1 .196 0L10.5.99l4.902-.98a.5.5 0 0 1 .415.103zM10 1.91l-4-.8v12.98l4 .8V1.91zm1 12.98 4-.8V1.11l-4 .8v12.98zm-6-.8V1.11l-4 .8v12.98l4-.8z"/>
                            </svg> Area</a>
                        <a class="nav-item nav-link {{$designation_flag == 2 || $designation_flag == 3 ? 'active' : ''}}" id="nav-Distirubutor-tab" data-toggle="tab" href="#nav-Distirubutor" role="tab" aria-controls="nav-Distirubutor" 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"></path>
                        </svg> Distirubutor</a>
                        <a class="nav-item nav-link" 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"></path>
                            </svg> Order Booker</a>
                    

                       <div class="tab-download-btn">
                            <a href="#" class="btn download-btn region-excel-export excel-download-btn"><i class="fa fa-download"></i> Excel</a>
                            <a href="#" class="btn download-btn area-excel-export excel-download-btn" style="display: none"><i class="fa fa-download"></i> Excel</a>
                            <a href="#" class="btn download-btn distributor-excel-export excel-download-btn" style="display:none"><i class="fa fa-download"></i> Excel</a>
                            <a href="#" class="btn download-btn employee-excel-export excel-download-btn" style="display:none"><i class="fa fa-download"></i> Excel</a>
                        {{-- <button class="btn download-btn"><i class="fa fa-download"></i> PDF</button> --}}
                       </div>
                </div>
                <input type="hidden" value="{{$designation_flag}}" id="designation_flag">
                <div class="tab-content" id="nav-tabContent">

                    <div class="tab-pane fade {{$designation_flag == 4 ? 'show active' : ''}}" id="nav-Region" role="tabpanel" aria-labelledby="nav-Region-tab">
                        
                        <div class="loader-sell360 tblLoader tblLoaderRegions">
                            <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="PT-15 all_regions_records">
                        </div>
                    </div>

                    <div class="tab-pane {{$designation_flag == 1 ? 'show active' : ''}}" id="nav-Area" role="tabpanel" aria-labelledby="nav-Area-tab">

                        <div class="loader-sell360 tblLoader tblLoaderAreas">
                            <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="PT-15 all_areas_records">
                        </div>

                    </div>

                    <div class="tab-pane {{$designation_flag != 1 && ($designation_flag == 2 || $designation_flag == 3) ? 'show active' : ''}}" id="nav-Distirubutor" role="tabpanel" aria-labelledby="nav-Distirubutor-tab">

                        <div class="loader-sell360 tblLoader tblLoaderDistributors">
                            <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="PT-15 all_distributor_records">
                        </div>

                    </div>

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

                        <div class="loader-sell360 tblLoader tblLoaderEmployees">
                            <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="PT-15 all_employee_records">
                        </div>

                    </div>

                </div>

            </div>
        </div>
    </div>
@endsection
@push('js')
<script>    
    var all_areas           =   JSON.parse($('#all_areas').val());
    var emp_region_id       =   '{!! $emp_region_id !!}';
    var emp_area_id         =   '{!! $emp_area_id !!}';
    var emp_territory_id    =   '{!! $emp_territory_id !!}';

    function ReportData(){
            this.data = [];
        }
        var reportData = new ReportData();

        // function GetEmployeeLinePermissions() {
        //     http('GET', `/GetEmployeeLinePermissions`).then((e) => {
        //         reportData.data = JSON.parse(e);
        //         SetRegionsDropDown();
        //     });
        // }
        // GetEmployeeLinePermissions();


        function SetRegionsDropDown(){
            $(`.region_id`).empty();
            $(`.region_id`).html(`<option selected value="">All Region</option>`);
            reportData.data.forEach(element => {
                $(`.region_id`).append(`<option value="${element.id}">${element.region_name}</option>`);
            });
        }

        function LoadAreasByRegion(regionId, el){
            $(`.${el}`).html(`<option selected value="">All Area/Zone</option>`);
            if(regionId){
                var areas = all_areas.filter(x=>x.region_id==regionId);
                if(areas){
                    if(areas.length>0){
                        areas.forEach(element => {
                            $(`.${el}`).append(`<option value="${element.id}">${element.area_name}</option>`);
                        });
                    }
                }
            }
        }
        function LoadDistributorsByRegion(areaId, el){
            var regionId    =   $(`.region_id`).val();
            $(`.${el}`).html(`<option selected value="">All Distributor</option>`);
            if(regionId){
                var region = reportData.data.find(x=>x.id==regionId);
                if(region.distributors){
                    var area_distributors = region.distributors.filter(x=>x.distributor_area_id==areaId);
                    if(area_distributors.length>0){
                        area_distributors.forEach(element => {
                            $(`.${el}`).append(`<option value="${element.id}">${element.distributor_name}</option>`);
                        });
                    }
                }
            }
        }

        function LoadOrderBookerByDistributor(distributorId, el, type){

            $(`#${el}`).html(`<option selected value="">All Order Bookers</option>`);
            if(distributorId){
                var regionId = $(`.${type}`).val();
                var region = reportData.data.find(x=>x.id==regionId);
                var distributor = region.distributors.find(x=>x.id==distributorId);

                if(distributor.order_bookers){
                    if(distributor.order_bookers.length>0){
                        distributor.order_bookers.forEach(element => {
                            $(`.${el}`).append(`<option value="${element.employee_id}">${element.employee_first_name+' '+element.employee_last_name}</option>`);
                        });
                    }
                }
            }
        }
        function http(type, url, formData) {
            var self = this;
            return new Promise(function(resolve, reject) {
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                    },
                    url: url,
                    type: type,
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: formData,
                    success: function(e) {
                        resolve(e);
                    },
                    error: function(err) {
                        console.log(err);
                        if (err.status == 422 || err.status == 500) {
                            self.notification('error', 'Some Error Occured, please try again.');
                        }
                    }
                });
            });
        }
    // $('.region_id').change(function(){
    //     $('.area_id').empty();
    //     $('.distributor_id').empty();
    //     $('.area_id').append(`<option value="">Select Area/Zone</option>`);
    //     $('.distributor_id').append(`<option value="">Select Distributor</option>`);
    //     var filter_areas    =   all_areas.filter(x=> x.region_id == $(this).val());
    //     if(filter_areas.length > 0){
    //         filter_areas.forEach(element => {
    //             $('.area_id').append(`<option value="${element.id}">${element.area_name}</option>`);
    //         });
    //     }
    // });
</script>
<script src="{{url('/js/custom/ss-monthly-sales/ss-monthly-sales.js')}}"></script>
@endpush