@extends('layouts.master')
@section('content')
    <script src="/js/list.js"></script>
    <link rel="stylesheet" href="/css/list-pagination.css">
    <style>
        .net-sale .ns-head span,
        .ts-overview .total-amount,
        .tar-tgt-val span,
        .tar-sa-val span,
        .targettil span,
        .drr-value span,
        .tv-div span,
        .unit-bs .digit-v,
        .ad-kpi span {
            font-family: 'Rationale', sans-serif !important;
        }

        .net-sale {
            padding-top: 20px;
            position: relative;
            background-image: url(images/garph-bg-lines.jpg);
            background-position: top right;
            background-repeat: no-repeat
        }

        .net-sale .ns-head {
            font-size: 20px;
            margin-bottom: 5px;
            line-height: 1;
            color: #747474
        }

        .tar-tgt-val {
            font-size: 16px;
            line-height: 1;
            padding-top: 15px;
            float: left;
            color: #747474
        }

        .tar-tgt-val span {
            font-size: 28px;
            color: #282828;
            display: block;
            padding-top: 5px
        }

        .tar-tgt-val span small {
            color: #747474
        }

        .tar-sa-val {
            font-size: 16px;
            padding-top: 10px;
            padding-bottom: 10px;
            line-height: 1;
            background-color: #f3f3f3
        }

        .tar-sa-val span {
            font-size: 25px;
            color: #282828;
            display: block;
            padding-top: 5px
        }


        .dashboard-date {
            width: 200px;
            float: right;
            margin-top: 4px;
            margin-right: 15px;
            position: relative;
        }

        .dashboard-date .fa {
            position: absolute;
            top: 10px;
            right: 0;
            font-size: 16px;
            color: #888888
        }

        .dashboard-date .form-control {
            border: 0;
            box-shadow: none;
            font-size: 20px;
            text-align: right;
            z-index: 3;
            background-color: transparent !important;
            padding-right: 20px;
            font-family: 'Rationale', sans-serif !important;
        }

        .card-heading {
            font-size: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            position: relative;
        }

        .card-heading:before {
            background: #0038ba;
            position: absolute;
            width: 2px;
            height: 18px;
            left: -20px;
            top: 2px;
            content: '';
        }

        .ts-overview {
            padding: 20px;
            font-size: 13px;
            letter-spacing: 1px;
            margin-bottom: 20px;
        }

        .card-heading span {
            font-family: 'proximanova-light', sans-serif !important;
            font-weight: normal;
        }

        .ts-overview .total-amount {
            font-size: 42px;
            color: #0038ba;
            padding: 0;
            line-height: 1;
            border-bottom: solid 1px #f2f2f2;
            padding-bottom: 10px;
        }

        .ts-overview .total-amount small,
        .targettil span small {
            color: #282828
        }

        .ts-overview .total-amount .per-v {
            color: #24b314;
            font-size: 25px;
            margin-left: 10px;
        }

        .targettil {
            font-size: 16px;
            line-height: 1;
            padding: 15px;
            letter-spacing: normal;
            border: solid 1px #f3f3f3
        }

        .targettil span {
            font-size: 25px;
            display: block;
            padding-top: 5px;
            color: #0038ba
        }

        .targettil .date-sh {
            display: block;
            padding-top: 10px;
            color: #747474
        }

        .drr-value {
            font-size: 14px;
            padding-top: 10px;
            padding-bottom: 8px;
            line-height: 1;
            background-color: #f3f3f3;
        }

        .drr-value span {
            font-size: 20px;
            float: right;
            margin-top: -4px;
        }

        .div-name {
            background-color: #f3f3f3;
            font-size: 14px;
            text-align: center;
            padding: 2px 5px 1px 5px
        }

        .tv-div {
            background-color: #f3f3f3;
            padding: 5px 10px;
            margin-right: 1px;
        }

        .tv-div span {
            line-height: 1
        }

        .tv-div .tvaluse {
            display: block;
            font-size: 24px;
            padding-bottom: 3px;
        }

        .tv-div .tr-val {
            font-size: 14px;
        }

        .tv-div .tr-val span {
            font-size: 18px;
        }

        .unit-bs {
            min-height: calc(100% - 20px);
            letter-spacing: normal
        }

        .unit-bs .digit-v {
            font-size: 20px;
            margin-top: -2px
        }

        .unit-bs .col {
            padding: 15px 10px 10px 10px;
            border-bottom: solid 1px #eeeeee;
            line-height: 51px
        }

        #widget-meter,#second-widget-meter,#first-widget-meter {
            width: 140px;
            margin: 0 auto;
        }

        #widget-meter .needle,#second-widget-meter .needle,#first-widget-meter .needle,
        #widget-meter .needle-center,#second-widget-meter .needle-center,#first-widget-meter .needle-center {
            fill: #a6a6a6;
        }

        .label-percent {
            font-size: 22px;
            fill: #0038ba;
            padding-top: 25px;
            font-family: 'Rationale', sans-serif !important;
        }

        .title-ach {
            font-size: 13px;
            letter-spacing: 1px;
            display: block;
            margin: auto;
            text-align: center;
            margin-top: 5px;
        }

        .font20 {
            font-size: 20px !important;
        }

        .p-5 {
            padding: 5px !important;
        }

        .total-progress {
            padding: 0px;
            margin-top: -4px;
            float: right
        }

        .total-progress .progress {
            width: 54px;
            height: 54px;
            background: 0 0;
            position: relative
        }

        .total-progress .progress::after {
            content: "";
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 5px solid #eee;
            position: absolute;
            top: 0;
            left: 0
        }

        .total-progress .progress>span {
            width: 50%;
            height: 100%;
            overflow: hidden;
            position: absolute;
            top: 0;
            z-index: 1
        }

        .total-progress .progress .progress-left {
            left: 0
        }

        .total-progress .progress .progress-bar {
            width: 100%;
            height: 100%;
            background: 0 0;
            border-width: 5px;
            border-style: solid;
            position: absolute;
            top: 0
        }

        .total-progress .progress .progress-left .progress-bar {
            left: 100%;
            border-top-right-radius: 54px;
            border-bottom-right-radius: 54px;
            border-left: 0;
            -webkit-transform-origin: center left;
            transform-origin: center left
        }

        .total-progress .progress .progress-right {
            right: 0
        }

        .total-progress .progress .progress-right .progress-bar {
            left: -100%;
            border-top-left-radius: 54px;
            border-bottom-left-radius: 54px;
            border-right: 0;
            -webkit-transform-origin: center right;
            transform-origin: center right
        }

        .total-progress .progress .progress-value {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 5
        }

        .total-progress .progress .progress-value .digitVal {
            font-family: Rationale, sans-serif !important;
            font-size: 16px;
            font-weight: normal;
            letter-spacing: normal;
            color: #0038ba;
            line-height: 1;
            text-align: center
        }

        .total-progress .progress .progress-value .digitVal span {
            font-family: 'proximanova-semibold;', sans-serif !important;
            font-size: 13px;
            color: #282828;
            display: block;
        }

        .total-progress .progress-bar {
            background: linear-gradient(90deg, #fff 0, #fff 100%) !important
        }

        .total-progress .progress-barColor {
            border-color: #0038ba
        }

        .pro-info {
            font-size: 14px;
            border-bottom: solid 1px #f3f3f3;
            padding-top: 15px;
            padding-bottom: 15px
        }

        .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: 12px;
            letter-spacing: 1px;
            padding: 3px 10px;
            margin: 0;
        }

        .topreg-no span {
            position: absolute;
            left: 15px;
            top: 0
        }

        ._report-Head {
            padding-top: 0;
            padding-bottom: 0;
            width: auto;
            background-color: #fff;
            height: 44px;
            margin: 0;
        }

        ._report-Head .nav-pills .nav-link {
            font-size: 16px;
            padding: 5px 25px;
        }

        .ad-kpi-div {
            border-top: solid 1px #f3f3f3;
            padding-top: 14px;
            padding-bottom: 10px;
        }

        .ad-kpi {
            padding: 0px 0px;
            margin-right: 1px;
        }

        .ad-kpi span {
            line-height: 1
        }

        .ad-kpi .akvaluse {
            display: block;
            font-size: 28px;
            padding-bottom: 3px;
        }

        .ad-kpi .ak-val {
            font-size: 15px;
        }

        .ad-kpi .ak-val span {
            font-size: 20px;
        }

        .view-all {
            letter-spacing: normal;
            position: absolute;
            top: 40px;
            right: 10px;
            z-index: 5;
            font-size: 14px;
            color: #939393;
            font-family: proximanova-semibold, sans-serif !important;
        }

        .view-all:HOVER,
        .view-all:focus {
            color: #0038ba;
            text-decoration: none;
        }

        .top-reg-info {
            background-color: #f3f3f3;
            padding: 10px 15px;
            margin-top: 5px;
            margin-bottom: 20px;
        }

        .top-reg-info .card-heading:before {
            display: none
        }

        .top-reg-info .card-heading {
            text-transform: none;
            margin-bottom: 0;
            font-size: 16px
        }

        .CL-Product input {
            height: 30px;
        }

        .ProductPageNav {
            margin: 15px 0px 5px auto;
            padding-bottom: 0;
            padding-top: 0;
        }

        .top-reg-info {
            background-color: #f3f3f3;
            padding: 10px 15px;
            margin-top: 5px;
            margin-bottom: 20px;
        }

        .top-reg-info .card-heading:before {
            display: none
        }

        .top-reg-info .card-heading {
            text-transform: none;
            margin-bottom: 0;
            font-size: 16px
        }

        .top-pro-lr img {
            height: 49px;
            width: 49px;
            box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
        }

        .top-pr-list .progress {
            -webkit-box-shadow: none !important;
            background-color: rgba(120, 130, 140, .13);
            box-shadow: none !important;
            height: 6px;
            border-radius: 50px;
            margin-bottom: 0px;
            margin-top: 5px;
            overflow: hidden;
            font-family: 'Rationale', sans-serif !important;
        }

        .top-pr-list {
            padding-top: 10px;
            padding-bottom: 10px;
            border-bottom: solid 1px #ebebeb;
        }

        .top-pr-list .progressValue {
            font-size: 22px;
            margin-top: -2px;
            float: right;
            color: #0038ba;
            line-height: 1;
            font-family: 'Rationale', sans-serif !important;
        }

        .pt-val {
            font-size: 13px;
            line-height: 1;
            color: #939393
        }

        .pt-val span {
            font-size: 16px;
            color: #282828;
            font-family: 'Rationale', sans-serif !important;
        }

        .net-sale .ns-head span,
        .overall-tar .overall-val span,
        .unit-val span,
        .emp-ach-v span {
            font-family: 'Rationale', sans-serif !important;
        }

        .net-sale {
            padding-top: 20px;
            position: relative
        }

        .net-sale .net-sale-img {
            position: absolute;
            top: 0;
            right: 25px;
            height: 68px;
            width: auto
        }

        .net-sale .ns-head {
            font-size: 20px;
            border-bottom: solid 1px #e5e5e5;
            margin-bottom: 10px;
        }

        .net-sale .ns-head span {
            display: block;
            font-size: 40px;
            line-height: 1;
            color: #0038ba;
            padding-bottom: 5px;
        }

        .overall-tar {
            margin: 0;
            line-height: 1
        }

        .overall-tar h3 {
            font-size: 20px;
            margin-bottom: 5px
        }

        .overall-tar .overall-val {
            font-size: 18px
        }

        .overall-tar .overall-val span {
            font-size: 30px
        }

        .unit-val {
            font-size: 13px;
            line-height: 1;
            padding: 5px;
            text-align: center
        }

        .unit-val span {
            font-size: 24px;
            display: block;
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .emp-ach-v {
            font-size: 15px;
            letter-spacing: 1px;
            line-height: 1;
            border: solid 1px #e5e5e5;
            padding: 10px 6px 6px 6px;
            margin-top: 5px;
            margin-bottom: 5px;
        }

        .emp-ach-v span {
            font-size: 22px;
            float: right;
        }

        .emp-ach-v img {
            width: 25px;
            height: 25px;
            margin-left: 5px;
            margin-right: 5px;
        }

        ._report-Head .nav-pills .nav-link {
            padding: 10px 25px;
            font-size: 15px
        }

        .nav-pills .nav-link.active ._cus-val,
        .nav-tabs .nav-link.active ._cus-val {
            color: #fff;
            background-color: #0038ba;
        }

        .nav-pills .nav-link ._cus-val,
        .nav-tabs .nav-link ._cus-val {
            background-color: #e2e9fb;
            color: #7f8998;
            font-size: 10px;
            padding: 3px 4px 2px 4px;
            height: 16px;
            margin-top: 3px;
            margin-left: 5px;
            font-family: proximanova-light, sans-serif;
            border-radius: 5px;
            display: inline-block;
            line-height: 1;
        }

        .target-tab {
            height: 50px;
            margin-top: 20px;
            padding-top: 5px;
            background-color: #fff;
            position: relative;
        }

        .Product-row {
            padding: 8px;
            margin-bottom: 10px;
            box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
        }

        .Product-row-title {
            padding: 8px;
        }

        .Product-IMG img {
            width: 32px;
            height: 32px;
        }

        ._ITEMNAME {
            height: auto;
        }

        .tabs-search-bar {
            margin: 0;
        }

        .tabs-search-bar .col-12 {
            background: #d7d7d733;
            padding: 8px 10px;
            margin-top: 5px;
        }

        .tabs-search-bar .CL-Product {
            width: 270px;
        }
        .pt-val {
            font-size: 13px;
            line-height: 1;
            color: #939393;
        }
        .month-show {
            font-size: 20px;
            text-align: right;
            line-height: 1;
            font-family: 'Rationale', sans-serif !important;
        }


        .Product-row {
            padding: 8px;
            margin-bottom: 0px;
            box-shadow: 0px 0px 2px 0px rgb(0, 0, 0, 0.2);
            border-radius: 0px;
            position: relative;
            font-size: 13px;
            width: 100%;
            background-color: #fff;
            border: none;
            border-bottom: solid 2px #fff;
            transition: all 0.2s;
            transform: scale(0.97);
        }
        .Product-row:HOVER {
            border-bottom: solid 2px #0038ba;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            transition: all 0.3s ease;
            -ms-transform: scale(1);
            -webkit-transform: scale(1);
            transform: scale(1);
            box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
            z-index: 5;
        }
        .Product-row-title {
            padding: 8px;
            letter-spacing: normal;
            position: relative;
            text-transform: uppercase;
            color: #0038ba;
            font-family: proximanova-semibold, sans-serif;
            transform: scale(0.97);
            font-size: 13px;
        }

        .font-no,
        .dataTable .font-no {
            color: #282828;
            font-size: 20px;
            line-height: 1;
            font-family: Rationale, sans-serif!important;
        }
        .overview-teams .font-no {
            font-size: 18px;
        }

        .smBTN {
            margin: 0 !important;
        }
    </style>
    <div class="row mt-1 mb-1">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Monthly Sales Target <span>Report</span></h2>
        </div>
    </div>
    <style>
        .Product-Filter {
            padding: 8px 12px;
            font-size: 13px;
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
            border: none;
            background-color: #fff;
            margin-bottom: 10px;
        }
        .Product-Filter .btn-primary {
            box-shadow: none !important;
        }
        ._cust_filter {
            width: 200px;
            padding-right: 0;
            margin: 0;
        }
        .form-s2 .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 32px;
            font-size: 13px;
        }
        .form-s2 .select2-container .select2-selection--single {
            height: 32px !important;
        }
        .form-s2 .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 32px;
            width: 25px;
        }
    </style>
    <div class="Product-Filter">
        <div class="row">
            <div class="col-auto mt-auto mb-auto pr-0">Evaluation By:</div>
            <div class="col-auto">
                <div class="_cust_filter">
                    <div class="form-s2">
                        <select id="evaluation_criteria" class="form-control formselect" placeholder="Select Evaluation BY">
                            <option value="1">Master Pack</option>
                            <option value="2">Unit Sales</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-auto mt-auto mb-auto pl-0 pr-0">View By:</div>
            <div class="col-auto">
                <div class="_cust_filter">
                    <div class="form-s2">
                        <select class="form-control formselect view-by" placeholder="Select view">
                            @if(@$wise == 'region_wise')
                                <option value="2" selected>Region Wise</option>
                            @elseif(@$wise == 'area_wise')
                                <option value="3" selected>Area Wise</option>
                            @elseif(@$wise == "territory_wise")
                                <option value="4" selected>Territory Wise</option>
                            @else
                                <option value="1">Nation Wise</option>
                                <option value="2">Region Wise</option>
                                <option value="3">Area Wise</option>
                                <option value="4">Territory Wise</option>
                                <option value="5">Distributor Wise</option>
                            @endif

                        </select>
                    </div>
                </div>
            </div>
            <div class="col-auto mt-auto mb-auto p-0 region-col"  style="display: none">Region:</div>
            <div class="col-auto region-col"  style="display: none">
                <div class="_cust_filter">
                    <div class="form-s2">
                        <select class="form-control formselect region-id" placeholder="Select All"
                                style="width: 100%!important">
                            <option value="">Select Region</option>
                            @foreach ($regions as $region)
                                <option value="{{$region->id}}">{{$region->region_name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-auto mt-auto mb-auto p-0 area-col"  style="display: none">Area:</div>
            <div class="col-auto area-col"  style="display: none">
                <div class="_cust_filter">
                    <div class="form-s2">
                        <select class="form-control formselect area-id" placeholder="Select All"
                                style="width: 100%!important">
                            <option value="">Select Area</option>
                            @foreach ($areas as $area)
                                <option value="{{$area->id}}">{{$area->area_name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-auto mt-auto mb-auto p-0 territory-col" style="display: none">Territories:</div>
            <div class="col-auto territory-col"  style="display: none">
                <div class="_cust_filter">
                    <div class="form-s2">
                        <select class="form-control formselect territory-id" placeholder="Select All"
                                style="width: 100%!important">
                            <option value="">Select Territory</option>
                            @foreach ($territories as $territory)
                                <option value="{{$territory->id}}">{{$territory->territory_name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-auto mt-auto mb-auto p-0 distributor-col"  style="display: none">Distributors:</div>
            <div class="col-auto distributor-col"  style="display: none">
                <div class="_cust_filter">
                    <div class="form-s2">
                        <select class="form-control formselect distributor-id" placeholder="Select All"
                                style="width: 100%!important">
                            <option value="">Select Distributor</option>
                            @foreach ($distributors as $distributor)
                                <option value="{{$distributor->id}}">{{$distributor->distributor_name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="dashboard-date mt-date" style="margin:0px">
                    <input style="display:none;height: 32px;" type="text" value="" id="monthSelector" class="form-control date_filter_dashboard" placeholder="">
                    <i class="fa fa-angle-down"></i>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="row">
        <div class="col-md-12 mb-10">
            <div class="card ts-overview pt-0">

                <div class="row">
                    <div class="col-12 top-reg-info">
                        <div class="row">
                            <div class="col-6">
                                <h2 class="card-heading">View By: <span class="view_by_text"> Nation Wise</span></h2>
                            </div>
                            <div class="col-6 text-right">
                                <h2 class="card-heading view_by_name" style="display: none"></h2>
                            </div>
                        </div>
                    </div>
                    <div class="col-5">
                        <h2 class="card-heading">Target <span> Sales Overview</span></h2>
                        <div class="net-sale">
                            <h2 class="ns-head">NET Sales</h2>
                            <div class="total-amount ttl_net_sales_units">Loading...</div>
                            <div class="row">
                                <div class="col-6">
                                    <div class="tar-tgt-val">TGT: <span class="ttl_targets">Loading... </span> </div>
                                </div>
                                <div class="col-6">
                                    <div class="tar-tgt-val">Remaining: <span class="remaining_units">Loading... </span> </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-2 pl-0">
                        <div id="widget-meter"></div>
                        <span class="title-ach"><strong>Achievement</strong></span>
                    </div>

                    <div class="col-5 pl-0">
                        <div class="row m-0">
                            <div class="col-6 tar-sa-val" style="border-right:solid 1px #fff">Target Value:
                                <span class="ttl_targets_value">Loading...</span></div>
                            <div class="col-6 tar-sa-val">Gross Sales: <span class="ttl_gross_sales">Loading... </span></div>
                        </div>

                        <div class="row m-0">
                            <div class="col-6 targettil">
                                Target Till <small class="date-sh target_date">Date: Loading...</small> <!-- December 3, 2019 -->
                                <span class="target_till_date">Loading...</span>
                            </div>
                            <div class="col-6 targettil">Achievement Till <span
                                        style="float:right;padding: 0; display: inline-block; margin-top: -3px;" ></span>
                                <small class="date-sh target_date">Date: Loading...</small> <!-- December 3, 2019 -->
                                <span class="ach_till_date">Loading...%</span>
                            </div>
                        </div>
                        <div class="row m-0">
                            <div class="col-6 drr-value " style="border-right:solid 1px #fff">D.R.R. <span class="daily_run_rate">Loading...</span>
                            </div>
                            <div class="col-6 drr-value">R.R.R. <span class="required_run_rate">Loading...</span></div>
                        </div>

                    </div>

                </div>

            </div>
        </div>


        <div class="col-md-6 mb-10">
            <div class="card ts-overview">
                <h2 class="card-heading">Divisional <span> Reports</span></h2>
                <div class="loader-sell360 tblLoaderDivisional">
                    <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 font16 divisional_report">

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

        <div class="col-md-6 mb-10">
            <div class="card ts-overview unit-bs">
                <h2 class="card-heading">Unit <span> Based Sales </span></h2>
                <div class="row m-0">
                    <div class="col"
                         style="background-color:#f3f3f3; padding: 10px 5px; max-width:120px; line-height: normal">
                        <strong>Unit</strong>
                    </div>
                    <div class="col"
                         style="background-color:#f3f3f3; padding: 10px 5px; max-width:150px; line-height: normal">
                        <strong>Target</strong>
                    </div>
                    <div class="col"
                         style="background-color:#f3f3f3; padding: 10px 5px; max-width:150px; line-height: normal">
                        <strong>Sales</strong>
                    </div>
                    <div class="col" style="background-color:#f3f3f3; padding: 10px 5px; line-height: normal">
                        <strong>Achievement</strong>
                    </div>
                </div>
                <div class="loader-sell360 tblLoaderUnits">
                    <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_units"></span>

            </div>
        </div>

        {{-- Products --}}
        <div class="col-md-6 mb-30">
            <div class="card ts-overview PB-15" style="min-height: 100%; margin-bottom:0">

                <div class="row PB-10">
                    <div class="col">
                        <h2 class="card-heading">Products </h2>
                    </div>
                    <div class="col-auto">
                        <div class="CL-Product pr-0"><i class="fa fa-search"></i>
                            <input type="text" class="form-control" id="trend_product_search" placeholder="Search Product">
                        </div>
                    </div>
                </div>

                <div class="loader-sell360 tblLoaderProducts">
                    <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 id="productthumb">
                    <div class="row list all_products">
                    </div>
                    <div class="ProductPageNav text-right">
                        <div class="ProductPageNav text-right">
                            <ul class="justify-content-center pagination"></ul>
                        </div>
                    </div>
                </span>
                {{-- <div class="row all_products">

                    <div class="ProductPageNav">
                        <ul class="pagination justify-content-center">
                            <li class="page-item disabled"><a class="page-link" href="#"
                                    tabindex="-1">Previous</a>
                            </li>
                            <li class="page-item"><a class="page-link" href="#">1</a></li>
                            <li class="page-item active"><a class="page-link" href="#">2 <span
                                        class="sr-only">(current)</span></a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item"><a class="page-link" href="#">Next</a></li>
                        </ul>
                    </div>
                </div> --}}

            </div>
        </div>

        {{-- Brands --}}
        <div class="col-md-6 mb-30">
            <div class="card ts-overview PB-15" style="min-height: 100%; margin-bottom:0">

                <div class="row PB-10">
                    <div class="col">
                        <h2 class="card-heading">Brands </h2>
                    </div>
                    <div class="col-auto">
                        <div class="CL-Product pr-0"><i class="fa fa-search"></i>
                            <input type="text" class="form-control" id="trend_brand_search" placeholder="Search Brand">
                        </div>
                    </div>
                </div>
                <div class="loader-sell360 tblLoaderBrands">
                    <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 id="brandsthumb">
                    <div class="row list all_brands">
                    </div>
                    <div class="ProductPageNav text-right">
                        <div class="ProductPageNav text-right">
                            <ul class="justify-content-center pagination"></ul>
                        </div>
                    </div>
                </span>

            </div>
        </div>

        <div class="col-md-12 mb-10">
            <div class="card ts-overview overview-teams" style="min-height:100%">
                <h2 class="card-heading mb-0">Team <span>Performances </span></h2>
                <div class="_report-Head">
                    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                        <li class="nav-item region-tab"> <a class="nav-link active" id="pills-3-tab" data-toggle="pill" href="#pills-3"
                                                            role="tab" aria-controls="pills-3" aria-selected="false">Region </a> </li>

                        <li class="nav-item area-tab"> <a class="nav-link" id="pills-4-tab" data-toggle="pill" href="#pills-4"
                                                          role="tab" aria-controls="pills-4" aria-selected="false">Areas </a> </li>

                        <li class="nav-item territory-tab"> <a class="nav-link" id="pills-5-tab" data-toggle="pill" href="#pills-5"
                                                               role="tab" aria-controls="pills-5" aria-selected="false">Territory </a> </li>

                        <li class="nav-item distributor-tab"> <a class="nav-link" id="pills-6-tab" data-toggle="pill" href="#pills-6"
                                                                 role="tab" aria-controls="pills-6" aria-selected="false">Distributors </a> </li>

                        <li class="nav-item employee-tab"> <a class="nav-link" id="pills-home-tab" data-toggle="pill"
                                                              href="#pills-home" role="tab" aria-controls="pills-home"
                                                              aria-selected="true">Employees </a> </li>
                    </ul>
                </div>

                <div class="tab-content" id="pills-tabContent">

                    {{-- Region --}}
                    <div class="tab-pane fade show active region-tab-content" id="pills-3" role="tabpanel" aria-labelledby="pills-3">

                        <div class="row tabs-search-bar">
                            <div class="col-12">
                                <div class="CL-Product w-100 pr-0"><i class="fa fa-search"></i>
                                    <input type="text" class="form-control" id="trend_region_search" placeholder="Search Region">
                                </div>
                            </div>
                        </div>
                        <div class="col-12 p-0">
                            <div class="Product-row-title">
                                <div class="row">
                                    <div class="col colStyle h-auto" style="max-width:290px">Region</div>
                                    <div class="col colStyle h-auto" style="max-width:150px">RSM</div>
                                    <div class="col colStyle h-auto" style="max-width:175px">Gross Sales Value</div>
                                    <div class="col colStyle h-auto packaging-type" style="max-width:150px">Total Units</div>
                                    <div class="col colStyle h-auto" style="max-width:150px">Total Targets</div>
                                    <div class="col colStyle h-auto" style="max-width:150px">TGT. ACH%</div>
                                    <div class="col colStyle h-auto" style="max-width:130px">Action</div>
                                </div>
                            </div>
                        </div>
                        <div class="loader-sell360 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>
                        <span id="regionsthumb">
                            <div class="row list all_regions m-0">
                            </div>
                            <div class="ProductPageNav text-right">
                                <div class="ProductPageNav text-right">
                                    <ul class="justify-content-center pagination"></ul>
                                </div>
                            </div>
                        </span>
                    </div>
                    {{-- Areas --}}
                    <div class="tab-pane fade area-tab-content" id="pills-4" role="tabpanel" aria-labelledby="pills-4">

                        <div class="row tabs-search-bar">
                            <div class="col-12">
                                <div class="CL-Product w-100 pr-0"><i class="fa fa-search"></i>
                                    <input type="text" class="form-control" id="trend_areas_search" placeholder="Search Area">
                                </div>
                            </div>
                        </div>
                        <div class="col-12 p-0">
                            <div class="Product-row-title">
                                <div class="row">
                                    <div class="col colStyle h-auto" style="max-width:290px">Area</div>
                                    <div class="col colStyle h-auto" style="max-width:150px">ASM</div>
                                    <div class="col colStyle h-auto" style="max-width:175px">Gross Sales Value</div>
                                    <div class="col colStyle h-auto packaging-type" style="max-width:150px">Total Units</div>
                                    <div class="col colStyle h-auto" style="max-width:150px">Total Targets</div>
                                    <div class="col colStyle h-auto" style="max-width:150px">TGT. ACH%</div>
                                    <div class="col colStyle h-auto" style="max-width:130px">Action</div>
                                </div>
                            </div>
                        </div>
                        <div class="loader-sell360 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>
                        <span id="areasthumb">
                            <div class="row list all_areas m-0">
                            </div>
                            <div class="ProductPageNav text-right">
                                <div class="ProductPageNav text-right">
                                    <ul class="justify-content-center pagination"></ul>
                                </div>
                            </div>
                        </span>
                    </div>

                    {{-- Territory --}}
                    <div class="tab-pane fade territory-tab-content" id="pills-5" role="tabpanel" aria-labelledby="pills-5">

                        <div class="row tabs-search-bar">
                            <div class="col-12">
                                <div class="CL-Product w-100 pr-0"><i class="fa fa-search"></i>
                                    <input type="text" class="form-control" id="trend_territory_search" placeholder="Search Territory">
                                </div>
                            </div>
                        </div>
                        <div class="col-12 p-0">
                            <div class="Product-row-title">
                                <div class="row">
                                    <div class="col colStyle h-auto" style="max-width:290px">Territory</div>
                                    <div class="col colStyle h-auto" style="max-width:150px">TSM</div>
                                    <div class="col colStyle h-auto" style="max-width:175px">Gross Sales Value</div>
                                    <div class="col colStyle h-auto packaging-type" style="max-width:150px">Total Units</div>
                                    <div class="col colStyle h-auto" style="max-width:150px">Total Targets</div>
                                    <div class="col colStyle h-auto" style="max-width:150px">TGT. ACH%</div>
                                    <div class="col colStyle h-auto" style="max-width:130px">Action</div>
                                </div>
                            </div>
                        </div>
                        <div class="loader-sell360 tblLoaderTerritory">
                            <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 id="territoryhumb">
                            <div class="row list all_territory m-0">
                            </div>
                            <div class="ProductPageNav text-right">
                                <div class="ProductPageNav text-right">
                                    <ul class="justify-content-center pagination"></ul>
                                </div>
                            </div>
                        </span>
                    </div>

                    {{-- Distributors --}}
                    <div class="tab-pane fade distributor-tab-content" id="pills-6" role="tabpanel" aria-labelledby="pills-6">

                        <div class="row tabs-search-bar">
                            <div class="col-12">
                                <div class="CL-Product w-100 pr-0"><i class="fa fa-search"></i>
                                    <input type="text" class="form-control" id="trend_distributor_search" placeholder="Search Distributor">
                                </div>
                            </div>
                        </div>
                        <div class="col-12 p-0">
                            <div class="Product-row-title">
                                <div class="row">
                                    <div class="col colStyle h-auto" style="max-width:290px">Distributor</div>
                                    <div class="col colStyle h-auto" style="max-width:175px">Gross Sales Value</div>
                                    <div class="col colStyle h-auto packaging-type" style="max-width:150px">Total Units</div>
                                    <div class="col colStyle h-auto" style="max-width:150px">Total Targets</div>
                                    <div class="col colStyle h-auto" style="max-width:150px">TGT. ACH%</div>
                                    <div class="col colStyle h-auto" style="max-width:130px">Action</div>
                                </div>
                            </div>
                        </div>
                        <div class="loader-sell360 tblLoaderDistributor">
                            <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 id="distributorthumb">
                            <div class="row list all_distributors m-0">
                            </div>
                            <div class="ProductPageNav text-right">
                                <div class="ProductPageNav text-right">
                                    <ul class="justify-content-center pagination"></ul>
                                </div>
                            </div>
                        </span>
                    </div>

                    {{-- Employees --}}
                    <div class="tab-pane fade employee-tab" id="pills-home" role="tabpanel"
                         aria-labelledby="pills-home-tab">
                        <div class="row tabs-search-bar">
                            <div class="col-12">
                                <div class="CL-Product w-100 pr-0"><i class="fa fa-search"></i>
                                    <input type="text" class="form-control" id="trending_employee_search" placeholder="Search Employee">
                                </div>
                            </div>
                        </div>
                        <div class="col-12 p-0">
                            <div class="Product-row-title">
                                <div class="row">
                                    <div class="col colStyle h-auto" style="max-width:290px">Employee Name</div>
                                    <div class="col colStyle h-auto" style="max-width:175px">Gross Sales Value</div>
                                    <div class="col colStyle h-auto packaging-type" style="max-width:150px">Total Units</div>
                                    <div class="col colStyle h-auto" style="max-width:150px">Total Targets</div>
                                    <div class="col colStyle h-auto" style="max-width:150px">TGT. ACH%</div>
                                    <div class="col colStyle h-auto" style="max-width:130px">Action</div>
                                </div>
                            </div>
                            <div class="loader-sell360 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>
                            <span id="employeesthumb">
                                <div class="row list all_employees m-0">
                                </div>
                                <div class="ProductPageNav text-right">
                                    <div class="ProductPageNav text-right">
                                        <ul class="justify-content-center pagination"></ul>
                                    </div>
                                </div>
                            </span>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script src="{{url('/js/custom/monthly-sales-target-analysis/monthly-sales-target-analysis.js')}}"></script>
@endpush