@extends('layouts.master')
<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 {
        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 !important;
        height: 54px !important;
        background: 0 0;
        position: relative
    }

    .total-progress .progress::after {
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 5px solid #eee !important;
        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 !important;
        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 !important;
        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: 13px;
        letter-spacing: 1px;
        padding-left: 18px;
        padding-right: 18px;
        margin-top: 25px
    }

    .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;
    }
    .w-100{
        width: 50px !important;
    }
    .h-100{
        height: 50px !importants;
    }

</style>
@section('content')
    <input type="hidden" id="apiBaseURL" value="{{ $apiBaseURL }}">
    <input type="hidden" id="apiToken" value="{{ $apiToken }}">

    <div id="blureEffct" class="container">

        <div class="row mt-2 mb-3">
            <div class="col-lg-6 col-md-6 col-sm-6">
                <h2 class="_head01">Target <span> Overview Report</span></h2>
            </div>

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

        <div class="row">
            <div class="col-md-12 mb-10">
                <div class="card ts-overview">

                    <div class="row">
                        <div class="col-5">
                            <h2 class="card-heading">Target <span> Sales Overview</span></h2>
                            <div class="net-sale">
                                <h2 class="ns-head">Total Sales</h2>
                                <div class="total-amount"><span id="total_sales"></span><small id="units"></small> <span id=""
                                        class="per-v">
                                        {{-- <i id="" class="fa fa-long-arrow-alt-up"></i> --}}
                                         </span>
                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <div class="tar-tgt-val">TGT: <span id="target"></span> <small>Units</small> </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="tar-tgt-val">Remaining: <span id="remaining"> <small>Units</small>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-2 pl-0">
                            <div class="widget-meter" id="achievement-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">Revenue:
                                 <span id="revenue"> </span>
                                </div>
                                <div class="col-6 tar-sa-val">Projected Sales: <span id="projected_sales">
                                        <small>Units</small> - <g style="color:#24b314;"></g></span></div>
                            </div>

                            <div class="row m-0">
                                <div class="col-6 targettil">
                                    Target Till <small   class="targettilldate date-sh" ></small>
                                    <span id="target_till"></span> <small id="TTunits"></small>
                                </div>
                                <div class="col-6 targettil">Achievement Till <span id="percentageofsale"
                                        style="float:right;padding: 0; display: inline-block; margin-top: -3px;"></span>
                                    <small class="targettilldate date-sh" ></small>
                                    <span id="ach_till"></span> <small id="ATunits">Units</small>
                                </div>
                            </div>
                            <div class="row m-0">
                                <div class="col-6 drr-value" style="border-right:solid 1px #fff">D.R.R. <span
                                        id="drr"></span>
                                </div>
                                <div class="col-6 drr-value">R.R.R. <span id="rrr"></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 id="divisionalreports" class="row m-0 divisionalreportsDiv" >
                        
                            
                         
                       
                    </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; line-height: normal">
                            <strong>Achievement</strong>
                        </div>
                    </div>

                    <div class="row m-0">
                        <div class="col" style="max-width:120px">Cartons</div>
                        <div id="UBStarget" class="col digit-v" style="max-width:150px"> <small></small></div>
                        <div  class="col digit-v"><span id="UBSachievment"></span>
                        
                            <div class="total-progress ml-10">
                                <div id="datavaluecartons" class="progress mx-auto" data-value=""><span
                                        class="progress-left"> <span class="progress-bar progress-barColor"> </span> </span>
                                    <span class="progress-right"> <span class="progress-bar progress-barColor"></span>
                                    </span>
                                    <div
                                        class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center">
                                        <div id="resultgraph1" class="digitVal"><small>%</small></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        
                    </div>

                    <div class="row m-0">
                        <div class="col" style="max-width:120px">Dozens</div>
                        <div id="UBSDtarget" class="col digit-v" style="max-width:150px"> <small></small></div>
                        <div  class="col digit-v"> <span id="UBSDachievment" ></span>
                        
                            <div class="total-progress ml-10">
                                <div id="datavaluesdozens" class="progress mx-auto" data-value=""><span class="progress-left"> <span
                                            class="progress-bar progress-barColor"> </span> </span> <span
                                        class="progress-right"> <span class="progress-bar progress-barColor"></span> </span>
                                    <div
                                        class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center">
                                        <div id="resultgraph2" class="digitVal"><small>%</small></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                           

                        

                    </div>

                    <div class="row m-0">
                        <div class="col" style="max-width:120px">Half Dozens</div>
                        <div id="UBSHDtarget" class="col digit-v" style="max-width:150px"><small></small></div>
                        <div  class="col digit-v"> <span id="UBSHDachievment"></span>
                         <div class="total-progress ml-10">
                                <div id="datavalueshalfdozens" class="progress mx-auto" data-value=""><span class="progress-left"> <span
                                            class="progress-bar progress-barColor"> </span> </span> <span
                                        class="progress-right"> <span class="progress-bar progress-barColor"></span> </span>
                                    <div
                                        class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center">
                                        <div id="resultgraph3" class="digitVal"><small>%</small></div>
                                    </div>
                                </div>
                            </div>
                        
                        
                        
                        </div>

                           

                        

                    </div>

                </div>
            </div>


            <div class="col-md-6 mb-10">
                <div class="card ts-overview" style="min-height:100%">
                    <h2 class="card-heading mb-0">Top <span>Performances </span></h2>

                    <div class="_report-Head">
                        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                            <li class="nav-item"> <a class="nav-link active" id="pills-home-tab" data-toggle="pill"
                                    href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Employee
                                </a> </li>
                            <li class="nav-item"> <a class="nav-link" id="pills-contact-tab" data-toggle="pill"
                                    href="#pills-contact" role="tab" aria-controls="pills-contact"
                                    aria-selected="false">Products</a> </li>
                            <li class="nav-item"> <a class="nav-link" id="pills-3-tab" data-toggle="pill" href="#pills-3"
                                    role="tab" aria-controls="pills-3" aria-selected="false">Regions </a> </li>
                        </ul>
                    </div>
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active showTopPerformance" id="pills-home" role="tabpanel"
                            aria-labelledby="pills-home-tab">

                            <div class="showTopPerformanceContent">

                            </div>




                            <div class="col-12 text-right p-0"><button class="btn btn-primary viewallbtn">View All <i
                                        class="fa fa-angle-right"></i></button></div>
                        </div>
                        <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">

                            <div id="productsview" >




                            </div>




                            <div class="col-12 text-right p-0"><button class="btn btn-primary viewallbtn">View All <i
                                        class="fa fa-angle-right"></i></button></div>

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







                            <div class="row pro-info" id="regions">

                                <div class="col-8 pr-0">
                                    <h4>Lahore</h4>
                                    <p><strong>RSM: </strong> UTBA AZIZ</p>
                                </div>
                                <div class="col-2 topreg-no"><span>03</span></div>

                                <div class="col-2 pl-0">

                                    <div class="total-progress">
                                        <div class="progress mx-auto" data-value="70"><span class="progress-left"> <span
                                                    class="progress-bar progress-barColor"> </span> </span> <span
                                                class="progress-right"> <span class="progress-bar progress-barColor"></span>
                                            </span>
                                            <div
                                                class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center">
                                                <div class="digitVal">70<small>%</small></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 text-right p-0"><button class="btn btn-primary viewallbtn">View All <i
                                        class="fa fa-angle-right"></i></button></div>
                        </div>
                    </div>





                </div>
            </div>

            <div class="col-md-6 mb-10">
                <div class="card ts-overview pb-0" style="min-height:100%">
                    <h2 class="card-heading mb-10">Additional <span>KPI's </span></h2>

                    <div class="row ad-kpi-div">
                        <div class="col-5">
                            <h2 class="card-heading mb-5 font16">Focused <span>Products</span></h2>
                            <div class="ad-kpi">
                                <div class="ak-val">Total Sales</div>
                                <span class="akvaluse" id="AKFPsales"><small>Units</small></span>
                                <div class="ak-val">TGT: <span id="AKFPtarget"> <small>Units</small></span></div>
                            </div>
                            <div class="widget-meter" id="focused-products-meter"></div>
                        </div>
                        {{-- <div class="widget-meter" id="focused-products-meter"> </div> --}}
                        <div class="col-7 position-relative pl-0"><a href="#" class="view-all">View Products <i
                                    class="fa fa-angle-right"></i></a>
                            
                        </div>
                    </div>

                    <div class="row ad-kpi-div">
                        <div class="col-5">
                            <h2 class="card-heading mb-5 font16">Focused <span>Brands</span></h2>
                            <div class="ad-kpi">
                                <div class="ak-val">Total Sales</div>
                                <span class="akvaluse" id="AKFBsales"> <small>Units</small></span>
                                <div class="ak-val">TGT: <span id="AKFBtarget"> <small>Units</small></span></div>
                                
                            
                            </div>
                         

                        </div>
                        
                        <div class="col-7 position-relative pl-0"><a href="#" class="view-all">View Brands <i
                                    class="fa fa-angle-right"></i></a>

                        </div>
                    </div>

                    <div class="row ad-kpi-div pb-0">
                        <div class="col-5">
                            <h2 class="card-heading mb-5 font16">Channels <span></span></h2>
                            <div class="ad-kpi">
                                <div class="ak-val">Total Sales</div>
                                <span class="akvaluse" id="AKFCsales"> <small>Units</small></span>
                                <div class="ak-val">TGT: <span id="AKFCtarget"> <small>Units</small></span></div>
                            </div>
                        </div>
                        <div class="col-7 position-relative pl-0"><a href="#" class="view-all">View Channels <i
                                    class="fa fa-angle-right"></i></a>
                            
                        </div>
                    </div>


                </div>
            </div>

        </div>
    </div>
    <script>



    </script>
@endsection