@extends('layouts.master')
@section('content')
    <script src="/js/list.js"></script>
    <link rel="stylesheet" href="/css/dashboard-new.css">
    <link rel="stylesheet" href="/css/list-pagination.css">
    <style>
        .CL-Product .fa {
            top: 9px !important;
        }
        .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: 13px;
            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: 13px;
            padding-top: 15px;
            padding-bottom: 15px;
            line-height: 1;
            background-color: #f3f3f3
        }

        .tar-sa-val span {
            font-size: 28px;
            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: 13px;
            line-height: 1;
            padding: 15px;
            border: solid 1px #f3f3f3
        }

        .targettil span {
            font-size: 28px;
            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 {
            width: 140px;
            margin: 0 auto;
        }

        #widget-meter .needle,
        #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: 13px;
            border: 1px solid #dee2e6;
            padding-top: 15px;
            padding-bottom: 15px;
            margin: 0px 0 8px 0;

        }

        .pro-info p {
            margin: 0;
            line-height: 18px;
            color: #606060
        }

        .pro-img {
            width: 45px;
            height: 45px;
            border-radius: 0;
            box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
            float: left;
            margin-right: 15px;
        }

        .pro-img img {
            width: 45px;
            height: 45px;
            border-radius: 0
        }

        .pro-info h4 {
            font-size: 15px;
            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: 17px;
            padding: 8px 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 15px 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;
        }
        .in-earn-t {
            border-bottom: solid 1px #e5e5e5;
            margin-bottom: 5px;
            font-size: 15px;
            line-height: 1;
            color: #5c5c5c;
            padding-bottom: 5px;
        }
        .total-sale .total-amount small{
            color: #282828;
        }
        .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;
        }



        .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; margin-left: 0 !important; padding-top: 0 !important;
        }
        .emp-info {
            font-size: 14px
        }

        .emp-info p {
            margin: 0
        }

        .emp-info p strong {
            width: 68px;
            display: inline-block
        }

        .emp-info .emp-pic {
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background-color: #fff;
            box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
            padding: 3px;
            margin: 0
        }

        .pro-info .unit-v span{
            font-size: 28px;
        }
        .emp-info .emp-pic .pic {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            border: solid 1px #0038ba
        }

        .emp-info .emp-pic .badge-icon {
            position: absolute;
            width: auto;
            height: 25px;
            top: 43px;
            left: 0;
            right: 0;
            margin: auto
        }

        .emp-info h4 {
            font-size: 16px;
            margin-bottom: 5px;
        }

        .emp-info h4 span {
            display: block;
            color: #535353;
            padding-top: 5px;
            font-size: 14px;
        }
        .font22{
            font-size: 22px !important;
        }
        .pr-gray-b{
            background-color: #F9F9F9; padding: 6px 10px; margin-top: 5px; border: solid 1px #fff;
        }
        .inc-b-box{
            background-color: #0038ba; padding:6px 10px; border: solid 1px #fff; color: #fff; font-size: 13px; height: 32px;
        }
        .inc-b-box span{
            font-size: 18px !important;
            float: right; color: #fff;
        }
        .no-found-holder {
            text-align: center;
            border: solid 1px #E5E5E5;
            min-height: 230px;
            display: flex;
            color: #C3C3C3;
            font-size: 14px;
            margin-top: 15px;
        }
    </style>
    <div class="row mb-2">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Incentive  <span>Report</span></h2>
        </div>

        <div class="col-lg-6 col-md-6 col-sm-6">
            <div class="dashboard-date mr-0" style="margin-top:-10px">
                <input type="text" id="datepicker" class="form-control" placeholder="">
                <i class="fa fa-angle-down"></i>
            </div>
        </div>

    </div>

    <div class="row">

        <div class="col-12">
            <div class="card ts-overview">
                <div class="row emp-info">
                    <div class="col-4">
                        <div class="row">
                            <div class="col-auto">
                                <div class="emp-pic">
                                    <img class="badge-icon" src="/images/badge-icon.svg" alt="">
                                    <img class="pic" src="{{$employee->employee_picture}}" onerror="this.onerror=null;this.src='/images/avatar.svg';" alt="">
                                </div>
                            </div>

                            <div class="col pl-0 pr-0">
                                <h4>{{$employee->employee_name}}</h4>
                                <p><strong style="width:95px;">Designation: </strong>{{$employee->designation}}</p>
                                <p><strong style="width:95px;">Phone:</strong>{{$employee->employee_phone}}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-8">
                        <div class="row">
                            @if($employee->reporting_to) <div class="col pr-0"><strong>Reporting To:</strong><br>  {{$employee->reporting_to ? $employee->reporting_to:'NA'}} </div> @endif
                            <div class="col pr-0"><strong>Area:</strong><br>  {{$employee->area_name ? $employee->area_name:'NA'}}</div>
                            <div class="col pr-0"><strong>Territory:</strong><br> {{$employee->territory_name ? $employee->territory_name:'NA'}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12">
            <div class="card total-sale mb-30 p-20">
                <div class="row">
                    <div class="col-7">
                        <div class="row">
                            <div class="col-12 position-relative" style="background-image: url(/images/kpi-achive-img.jpg); background-position:bottom right; background-repeat:no-repeat">
                                <h2 class="card-heading">Sales  <span>Incentive</span></h2>
                                <div class="total-amount total_incentive_earned" style="border-bottom:solid 1px #e1e1e1; line-height: 1;"><h2 class="in-earn-t">Total Incentive Earned:</h2><small>Rs.</small> 0</div>
                            </div>
                            <div class="col unit-v">Minimum Incentive<span class="total_min_incentive"><small>RS. </small> 0 </span></div>
                            <div class="col unit-v">Maximum Incentive<span class="total_max_incentive"><small>RS. </small> 0 </span></div>
                        </div>
                    </div>
                    <div class="col-5">
                        <div class="row m-0" style="border: solid 1px #dee2e6;">
                            <div class="col-12 total-val border-bottom"><span class="overall_incentive_earned"><small>RS. </small> 0</span> Overall</div>
                            <div class="col-6 total-val"><span class="brand_incentive_earned"><small>RS. </small> 0</span> Brands</div>
                            <div class="col-6 total-val border-left"><span class="product_incentive_earned"><small>RS. </small> 0</span> Products</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="col-md-12 mb-10">
            <div class="card ts-overview PT-5" style="min-height:100%">

                <div class="_report-Head">
                    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                        <li class="nav-item"> <a class="nav-link active" id="pills-1-tab" data-toggle="pill" href="#pills-1" role="tab" aria-controls="pills-1" aria-selected="false">Overall </a> </li>
                        <li class="nav-item"> <a class="nav-link" id="pills-2-tab" data-toggle="pill" href="#pills-2" role="tab" aria-controls="pills-2" aria-selected="false">Brands </a> </li>
                        <li class="nav-item"> <a class="nav-link" id="pills-3-tab" data-toggle="pill" href="#pills-3" role="tab" aria-controls="pills-3" aria-selected="true">Products </a> </li>
                    </ul>
                </div>

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

                        <div class="col-12 p-0 PT-30">

                            <div class="row">
                                <div class="col-4">
                                    <h2 class="card-heading">Monthly <span> Sales Target</span></h2>
                                    <div class="net-sale">
                                        <h2 class="in-earn-t">Net Sales</h2>
                                        <div class="total-amount overall_net_sale">0 <small>Units</small></div>
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="tar-tgt-val">Target<span class="overall_target_units">0 <small>Units</small> </span> </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="tar-tgt-val">Remaining <span class="overall_target_remaining">0 <small>Units</small> </span> </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-3 pl-0">
                                    <div id="widget-meter">
{{--                                        <svg viewBox="0 0 100 100"><g transform="translate(50, 75)">--}}
{{--                                                <path class="arc chart-filled" d="M-50,6.123233995736766e-15A50,50 0 0,1 40.450849718747364,-29.389262614623668L22.472694288192983,-16.32736811923537A27.77777777777778,27.77777777777778 0 0,0 -27.77777777777778,3.4017966642982033e-15Z" fill="#31a324"></path>--}}
{{--                                                <path class="arc chart-empty" d="M40.45084971874734,-29.3892626146237A50,50 0 0,1 50,-5.6655388976479795e-14L27.77777777777778,-3.1475216098044334e-14A27.77777777777778,27.77777777777778 0 0,0 22.472694288192965,-16.32736811923539Z"></path>--}}
{{--                                                <circle class="needle-center" cx="0" cy="0" r="6.25"></circle>--}}
{{--                                                <path class="needle" d="M -3.673657826827957 -5.056356214843421 L 40.450849718747364 -29.38926261462366 L 3.6736578268279576 5.0563562148434205"></path></g>--}}
{{--                                            <g></g><text class="label-percent" x="26.47879409790039" y="100">80%</text>--}}
{{--                                        </svg>--}}
                                    </div>
                                    <span class="title-ach"><strong>Achievement</strong></span>
                                </div>

                                <div class="col-5 pl-0">
                                    <div class="row m-0">
                                        <div class="col-12 tar-sa-val" style="border-right:solid 1px #fff">Projected Sales
                                            <span class="overall_projected_sale">0 <small>Units</small></span>
                                        </div>
                                    </div>

                                    <div class="row m-0">
                                        <div class="col-6 targettil">Projected Acheivement<span class="overall_projected_ach">0<small>%</small> </span></div>
                                        <div class="col-6 targettil">EST. Incentive <span class="overall_est_incentive"><small>RS.</small> 0</span> </div>
                                    </div>

                                    <div class="row m-0">
                                        <div class="col-6 unit-v inc-b-box">MIN. Incentive <span class="overall_min_incentive"><small>RS.</small> 0</span></div>
                                        <div class="col-6 unit-v inc-b-box">MAX. Incentive <span class="overall_min_incentive"><small>RS.</small> 0</span></div>
                                    </div>

                                </div>



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

                        <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="brand_search" placeholder="Search">
                                </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="brandthumb">
                            <div class="list all_brands">
                            </div>
                            <div class="ProductPageNav text-center">
                                <div class="ProductPageNav text-center">
                                    <ul class="justify-content-center pagination"></ul>
                                </div>
                            </div>
                        </span>


                    </div>
                    <div class="tab-pane fade" 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="product_search" placeholder="Search">
                                </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="list all_products">
                            </div>
                            <div class="ProductPageNav text-center">
                                <div class="ProductPageNav text-center">
                                    <ul class="justify-content-center pagination"></ul>
                                </div>
                            </div>
                        </span>

                    </div>

                </div>

            </div>
        </div>






    </div>
@endsection
@push('scripts')
    <script>






        var responseData=   [];
        var segments    =   location.href;
        segments        =   $.trim(segments.replace('#', ''));
        segments        =   segments.split('/');

        let employee_id =   segments[4];
        let start_month =   segments[5];
        let end_month   =   segments[6];

        let prompt      =   `<div class="row pro-info m-0">
                                <div class="col-12 no-found-holder border-0">
                                    <div class="m-auto"> No data found.</div>
                                </div>
                             </div>`;


        function all_brands_thumb(all_data){
            $('.tblLoaderBrands').hide();
            $('.all_brands').empty();
            let cnt                     =   0;
            var achievement             =   0;
            var brand_details         =   "";
            var brand_name            =   "";
            var thumbnail               =   "";
            var filtered_products       =    all_data;
            var dynamic_search_val      =    $('#brand_search').val().toLowerCase().trim();
            if(dynamic_search_val  != ''){
                filtered_products       =   filtered_products.filter(x=> x.brand_name.toLowerCase().includes(dynamic_search_val));
            }
            // debugger
            valuesThumbBrands             =   filtered_products;
            // debugger
            var optionsThumbProducts        =   {
                page: 10,
                pagination: true,
                valueNames: ['brand_id','brand_name','image','target','target_value','net_sale','net_value','remaining_target','ach','incentive_earned','min_incentive','max_incentive','unit_name'],
                item: function (valueNames,idx) {
                    return `
                    <div class="row pro-info">
                            <div class="col-8 d-flex">
                                <div class="pro-img"> <img src="${valueNames.image}"  alt=""> </div>
                                <div class="mt-auto mb-auto"><h4>${valueNames.brand_name}</h4>> </div>
                            </div>

                            <div class="col-4 mt-auto mb-auto text-right">
                                <div class="col unit-v pt-0 pr-0"><span><small>RS. </small> ${addCommas(valueNames.incentive_earned)} </span>Total Incentive</div>
                            </div>
                            <div class="col-12">
                                <div class="row unit-v pt-0 m-0">
                                    <div class="col-3 pr-gray-b">Target<span class="font22">${addCommas(valueNames.target)} ${valueNames.unit_name}</span></div>
                                    <div class="col-3 pr-gray-b">Net Sales<span class="font22">${addCommas(valueNames.net_sale)} ${valueNames.unit_name}</span></div>
                                    <div class="col-3 pr-gray-b">Achivement<span class="font22">${addCommas(valueNames.ach)}%</span></div>
                                    <div class="col-3 pr-gray-b">Remaining<span class="font22">${addCommas(valueNames.remaining_target)} ${valueNames.unit_name}</span></div>
                                </div>
                                <div class="row m-0">
                                    <div class="col-6 unit-v inc-b-box">Minimum Incentive <span><small>RS.</small> ${addCommas(valueNames.min_incentive)}</span></div>
                                    <div class="col-6 unit-v inc-b-box">Maximum Incentive <span><small>RS.</small> ${addCommas(valueNames.max_incentive)}</span></div>
                                </div>
                            </div>
                        </div>
            `;
                }
            }
            var listThumb = new List('brandthumb', optionsThumbBrands, valuesThumbBrands);
            if(valuesThumbBrands?.length < 1){
                $('.all_brands').append(prompt);
            }
        }
        function all_products_thumb(all_data){
            $('.tblLoaderProducts').hide();
            $('.all_products').empty();
            let cnt                     =   0;
            var achievement             =   0;
            var product_details         =   "";
            var product_name            =   "";
            var thumbnail               =   "";
            // debugger
            var filtered_products       =    all_data;
            var dynamic_search_val      =    $('#product_search').val().toLowerCase().trim();
            if(dynamic_search_val  != ''){
                filtered_products       =   filtered_products.filter(x=> x.item_name.toLowerCase().includes(dynamic_search_val));
            }
            // debugger
            valuesThumbProducts             =   filtered_products;
            var optionsThumbProducts        =   {
                page: 10,
                pagination: true,
                valueNames: ['item_id','sku','item_name','brand_name','image','target','target_value','net_sale','net_value','remaining_target','ach','incentive_earned','min_incentive','max_incentive','unit_name'],
                item: function (valueNames,idx) {
                    return `
                    <div class="row pro-info">
                            <div class="col-8 d-flex">
                                <div class="pro-img"> <img src="${valueNames.image}"  alt=""> </div>
                                <div class="mt-auto mb-auto"><h4>${valueNames.item_name}</h4>
                                    <p><strong>SKU: </strong> ${valueNames.sku}</p> </div>
                            </div>

                            <div class="col-4 mt-auto mb-auto text-right">
                                <div class="col unit-v pt-0 pr-0"><span><small>RS. </small> ${valueNames.incentive_earned} </span>Total Incentive</div>
                            </div>
                            <div class="col-12">
                                <div class="row unit-v pt-0 m-0">
                                    <div class="col-3 pr-gray-b">Target<span class="font22">${addCommas(valueNames.target)} ${valueNames.unit_name}</span></div>
                                    <div class="col-3 pr-gray-b">Net Sales<span class="font22">${addCommas(valueNames.net_sale)} ${valueNames.unit_name}</span></div>
                                    <div class="col-3 pr-gray-b">Achivement<span class="font22">${addCommas(valueNames.ach)}%</span></div>
                                    <div class="col-3 pr-gray-b">Remaining<span class="font22">${addCommas(valueNames.remaining_target)} ${valueNames.unit_name}</span></div>
                                </div>
                                <div class="row m-0">
                                    <div class="col-6 unit-v inc-b-box">Minimum Incentive <span><small>RS.</small> ${addCommas(valueNames.min_incentive)}</span></div>
                                    <div class="col-6 unit-v inc-b-box">Maximum Incentive <span><small>RS.</small> ${addCommas(valueNames.max_incentive)}</span></div>
                                </div>
                            </div>
                        </div>
                        `;
                }
            }
            var listThumb = new List('productthumb', optionsThumbProducts, valuesThumbProducts);

            if(valuesThumbProducts?.length < 1){
                $('.all_products').append(prompt);
            }
        }




        $.ajax({
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf_token"]').attr("content"),
            },
            url: `/incentive-report-details/${employee_id}`,
            type: 'POST',
            cache: false,
            dataType: "json",
            data: {
                start_month:start_month,
                end_month:end_month,
                employee_id:employee_id
            },
            success: function (response) {
                responseData    =   response;
                dashWidgetMeter(parseInt(response.data.overall_ach));

                $(`.total_incentive_earned`).html(`<h2 class="in-earn-t">Total Incentive Earned:</h2><small>Rs.</small> ${addCommas(response.data.total_incentive_earned)}`);
                $(`.total_min_incentive`).html(`<small>RS. </small> ${addCommas(response.data.total_min_incentive)} `);
                $(`.total_max_incentive`).html(`<small>RS. </small> ${addCommas(response.data.total_max_incentive)} `);
                $(`.overall_incentive_earned`).html(`<small>RS. </small> ${response.data.overall_incentive_earned == 'NA' ? response.data.overall_incentive_earned : addCommas(response.data.overall_incentive_earned)} `);
                $(`.brand_incentive_earned`).html(`<small>RS. </small> ${response.data.brand_incentive_earned == 'NA' ? response.data.brand_incentive_earned : addCommas(response.data.brand_incentive_earned)} `);
                $(`.product_incentive_earned`).html(`<small>RS. </small> ${response.data.product_incentive_earned == 'NA' ? response.data.product_incentive_earned : addCommas(response.data.product_incentive_earned)} `);
                $(`.overall_net_sale`).html(`${addCommas(response.data.overall_net_sale)} <small>${response.data.overall_unit_name}</small>`);
                $(`.overall_target_units`).html(`${addCommas(response.data.overall_target_units)} <small>${response.data.overall_unit_name}</small>`);
                $(`.overall_target_remaining`).html(`${addCommas(response.data.overall_target_remaining)} <small>${response.data.overall_unit_name}</small>`);
                $(`.overall_projected_sale`).html(`${addCommas(response.data.overall_projected_sale)} <small>${response.data.overall_unit_name}</small>`);
                $(`.overall_projected_ach`).html(`${addCommas(response.data.overall_projected_ach)} <small>${response.data.overall_unit_name}</small>`);
                $(`.overall_est_incentive`).html(`${addCommas(response.data.overall_est_incentive)} <small>${response.data.overall_unit_name}</small>`);
                $(`.overall_min_incentive`).html(`${addCommas(response.data.overall_min_incentive)} <small>${response.data.overall_unit_name}</small>`);
                $(`.overall_max_incentive`).html(`${addCommas(response.data.overall_max_incentive)} <small>${response.data.overall_unit_name}</small>`);
                debugger
                if(responseData.data.brands?.length > 0){
                    all_brands_thumb(responseData.data.brands);
                    $('#pills-2-tab').show();
                }else{
                    $('#pills-2-tab').hide();
                }
                if(responseData.data.products?.length > 0) {
                    all_products_thumb(responseData.data.products);
                    $('#pills-3-tab').show();
                }else{
                    $('#pills-3-tab').hide();
                }
            },
            error: function (error) {
                if (
                    error.ResponseHeader.ResponseCode == 422 ||
                    error.ResponseHeader.ResponseCode == 500
                ) {
                    $('#notifDiv').fadeIn();
                    $('#notifDiv').css('background', 'red');
                    $('#notifDiv').text('Some Error Occured, please try again.');
                    setTimeout(() => {
                        $('#notifDiv').fadeOut();
                    }, 3000);

                }
            },
        });



        $(document).on('input','#brand_search',function () {
            if(responseData.data.brands?.length > 0){
                all_brands_thumb(responseData.data.brands);
                $('#pills-2-tab').show();
            }else{
                $('#pills-2-tab').hide();
            }

        });
        $(document).on('input','#product_search',function () {
            if(responseData.data.products?.length > 0) {
                all_products_thumb(responseData.data.products);
                $('#pills-3-tab').show();
            }else{
                $('#pills-3-tab').hide();
            }
        });


        function dashWidgetMeter(ach) {
            var el = d3.select('#widget-meter');

            var needle, barWidth, chart, chartInset, degToRad, repaintGauge,
                height, numSections, padRad, percToDeg, percToRad,
                percent, radius, svg, totalPercent, width;

            percent = ( (ach > 100 ? 100:ach) / 100);
            numSections = 2;
            sectionPerc = 1 / numSections / 2;
            padRad = 0;
            chartInset = 0;

            // Orientation of gauge:
            totalPercent = .75;


            //width = el[0][0].offsetWidth - margin.left - margin.right;
            width = 100;
            height = width;
            radius = Math.min(width, height) / 2;
            barWidth = 80 * width / 360;

            var color = d3.scale.linear()
                .domain([0, 1, 1])
                .range(['#656565', '#24b314', '#656565']);

            /*
                   Utility methods
                   */
            percToDeg = function (perc) {
                return perc * 360;
            };

            percToRad = function (perc) {
                return degToRad(percToDeg(perc));
            };

            degToRad = function (deg) {
                return deg * Math.PI / 180;
            };

            // Create SVG element
            svg = el.append('svg').attr('viewBox', '0 0 ' + width + ' ' + height);

            // Add layer for the panel
            chart = svg.append('g').attr('transform', "translate(" + (width / 2) + ", " + (75) + ")");
            var arcFilled = chart.append('path').attr('class', "arc chart-filled"),
                arcEmpty = chart.append('path').attr('class', "arc chart-empty"),
                labelGroup = svg.append('g'),
                percLabel = svg.append('text')
                    .attr('class', 'label-percent')
                    .text(Math.round((ach / 100) * 100) + '%'),
                percLabelBBox = percLabel.node().getBBox();

            percLabel
                .attr('x', (width / 2) - (percLabelBBox.width / 2))
                .attr('y', 100);

            arc2 = d3.svg.arc().outerRadius(radius - chartInset).innerRadius(radius - chartInset - barWidth);
            arc1 = d3.svg.arc().outerRadius(radius - chartInset).innerRadius(radius - chartInset - barWidth);


            repaintGauge = function (perc) {
                var next_start = totalPercent,
                    arcStartRad1 = percToRad(next_start),
                    arcEndRad1 = arcStartRad1 + percToRad(perc / 2);

                arc1.startAngle(arcStartRad1).endAngle(arcEndRad1);

                next_start += perc / 2;

                arcStartRad2 = percToRad(next_start);
                arcEndRad2 = arcStartRad2 + percToRad((1 - perc) / 2);

                arc2.startAngle(arcStartRad2 + padRad).endAngle(arcEndRad2);

                arcFilled.attr('d', arc1)
                    .attr("fill", function () {
                        //console.log('color = ' + color(Math.round(perc * 100)));
                        return color(perc);
                    });
                arcEmpty.attr('d', arc2);

            };


            var Needle = (function () {

                /**
                 * Helper function that returns the `d` value
                 * for moving the needle
                 **/
                var recalcPointerPos = function (perc) {
                    var centerX, centerY, leftX, leftY, rightX, rightY, thetaRad, topX, topY;
                    thetaRad = percToRad(perc / 2);
                    centerX = 0;
                    centerY = 0;
                    topX = centerX - this.len * Math.cos(thetaRad);
                    topY = centerY - this.len * Math.sin(thetaRad);
                    leftX = centerX - this.radius * Math.cos(thetaRad - Math.PI / 2);
                    leftY = centerY - this.radius * Math.sin(thetaRad - Math.PI / 2);
                    rightX = centerX - this.radius * Math.cos(thetaRad + Math.PI / 2);
                    rightY = centerY - this.radius * Math.sin(thetaRad + Math.PI / 2);
                    return "M " + leftX + " " + leftY + " L " + topX + " " + topY + " L " + rightX + " " + rightY;
                };

                function Needle(el) {
                    this.el = el;
                    this.len = width / 2;
                    this.radius = this.len / 8;
                }

                Needle.prototype.render = function () {
                    this.el.append('circle').attr('class', 'needle-center').attr('cx', 0).attr('cy', 0).attr('r', this.radius);
                    return this.el.append('path').attr('class', 'needle').attr('d', recalcPointerPos.call(this, 0));
                };

                Needle.prototype.moveTo = function (perc) {
                    var self = this;
                    //oldValue = this.perc || 0;

                    this.perc = perc;
                    // Reset pointer position
                    //this.el.transition().ease('quad').duration(200).select('.needle').tween('reset-progress', function () {
                    //    return function (percentOfPercent) {
                    //        var progress = (1 - percentOfPercent) * oldValue;
                    //
                    //        //repaintGauge(progress);
                    //        return d3.select(this).attr('d', recalcPointerPos.call(self, progress));
                    //    };
                    //});

                    this.el.transition().duration(1500).select('.needle').tween('progress', function () {
                        return function (percentOfPercent) {
                            var progress = percentOfPercent * perc;

                            repaintGauge(progress);
                            return d3.select(this).attr('d', recalcPointerPos.call(self, progress));
                        };
                    });

                };

                return Needle;

            })();

            needle = new Needle(chart);
            needle.render();
            needle.moveTo(percent);
        }
    </script>
@endpush