@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;
        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: 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;
    }	
        
    .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}	
    </style> 
@section('content')
<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>Report Region Detail</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 pt-0">

<div class="row">
<div class="col-12 top-reg-info">
<div class="row">
<div class="col-6"><h2 class="card-heading">Region: <span> Lahore Region</span></h2></div>
<div class="col-6 text-right"><h2 class="card-heading">RSM: <span> Utba Aziz Khan</span></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">Total Sales</h2>	
<div class="total-amount">155,000 <small>Units</small> <span class="per-v"><i class="fa fa-long-arrow-alt-up"></i> 32%</span></div>
<div class="row">
<div class="col-6"><div class="tar-tgt-val">TGT: <span>155,000 <small>Units</small> </span> </div></div>
<div class="col-6"><div class="tar-tgt-val">Remaining: <span>155,000 <small>Units</small> </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">Revenue: <span><small>Rs.</small> 80,00,00,000</span></div>
<div class="col-6 tar-sa-val">Projected Sales: <span>155,000 <small>Units</small> - <g style="color:#24b314;">52%</g></span></div> 
</div>

<div class="row m-0">
<div class="col-6 targettil">		
Target Till  <small class="date-sh">Date: December 3, 2019</small> 		
<span>155,000 <small>Units</small></span>
</div>		
<div class="col-6 targettil">Achievement Till <span style="float:right;padding: 0; display: inline-block; margin-top: -3px;">70%</span>
<small class="date-sh">Date: December 3, 2019</small>		
<span>155,000 <small>Units</small></span>
</div>		
</div> 
<div class="row m-0">
    <div class="col-6 drr-value" style="border-right:solid 1px #fff">D.R.R. <span>23,550</span></div>
    <div class="col-6 drr-value">R.R.R. <span>10,123,550</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="row font16">
<div class="col-6 pr-1"><div class="div-name"><strong>{{env('DIVISION_2')?env('DIVISION_2'):'Zain'}}</strong></div></div>
<div class="col-6 pl-0"><div class="div-name"><strong>{{env('DIVISION_1')?env('DIVISION_1'):'Shahi'}}</strong></div></div>

<div class="col-6"><div style="height:100px"> meter show here</div></div>
<div class="col-6"><div style="height:100px"> meter show here</div></div>

<div class="col-12 text-center PT-5 PB-5 font14"><strong>Total Sales</strong></div>

<div class="col-6 pr-0">
<div class="tv-div">
<span class="tvaluse">155,000 <small>Units</small></span>	
<div class="tr-val">TGT: <span>155,000 <small>Units</small></span></div>	
<div class="tr-val">Remaining: <span>155,000 <small>Units</small></span></div>
</div>
</div>

<div class="col-6 pl-0">
<div class="tv-div">
<span class="tvaluse">155,000 <small>Units</small></span>	
<div class="tr-val">TGT: <span>155,000 <small>Units</small></span></div>	
<div class="tr-val">Remaining: <span>155,000 <small>Units</small></span></div>
</div>
</div>

<div class="col-12 text-center  PT-5 PB-5 font14"><strong>Revenue</strong></div>

<div class="col-6 pr-0">
<div class="tv-div">
<span class="tvaluse pb-0 font20"><small>Rs.</small> 80,00,00,000</span> 
</div>
</div>

<div class="col-6 pl-0">
<div class="tv-div">
<span class="tvaluse pb-0 font20"><small>Rs.</small> 80,00,00,000</span>	
</div>
</div>

<div class="col-12 text-center PT-5 PB-5 font14"><strong>Projected Sales</strong></div>

<div class="col-6 pr-0">
<div class="tv-div">
<span class="tvaluse pb-0 font20">155,000 <small>Units</small> - <g style="color:#24b314;">52%</g></span> 
</div>
</div>

<div class="col-6 pl-0">
<div class="tv-div">
<span class="tvaluse pb-0 font20">155,000 <small>Units</small> - <g style="color:#24b314;">52%</g></span>	
</div>
</div>

</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 class="col digit-v" style="max-width:150px">999,999 <small>CTNS</small></div>	
<div class="col digit-v">999,999 <small>CTNS</small>

    <div class="total-progress ml-10">
      <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="row m-0">
<div class="col" style="max-width:120px">Dozens</div>
<div class="col digit-v" style="max-width:150px">999,999 <small>CTNS</small></div>	
<div class="col digit-v">999,999 <small>CTNS</small>
    
    <div class="total-progress ml-10">
      <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="row m-0">
<div class="col" style="max-width:120px">Half Dozens</div>
<div class="col digit-v" style="max-width:150px">999,999 <small>CTNS</small></div>	
<div class="col digit-v">999,999 <small>CTNS</small>
    
    <div class="total-progress ml-10">
      <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>
</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">Areas </a> </li>
</ul>
</div>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">


<div class="row pro-info">

<div class="col-8 pr-0">
 <div class="pro-img"> <img src="images/employee.jpg" alt=""> </div>
<h4>Usama shahid khan</h4>
<p><strong>Territory: </strong> Lahore-1</p>
<p><strong>TSM: </strong> Utba Aziz</p>
</div>
<div class="col-2 topreg-no"><img style="position:absolute;z-index: 3; width:auto; height:30px; left:0px; top:13px;" class="badge-icon" src="images/badge-icon.svg" alt=""><span>01</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="row pro-info">

<div class="col-8 pr-0">
 <div class="pro-img"> <img src="images/employee.jpg" alt=""> </div>
<h4>Usama shahid khan</h4>
<p><strong>Territory: </strong> Lahore-1</p>
<p><strong>TSM: </strong> Utba Aziz</p>
</div>
<div class="col-2 topreg-no"> <span>02</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="row pro-info border-0">

<div class="col-8 pr-0">
 <div class="pro-img"> <img src="images/employee.jpg" alt=""> </div>
<h4>Usama shahid khan</h4>
<p><strong>Territory: </strong> Lahore-1</p>
<p><strong>TSM: </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 class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">

<div class="row pro-info">

<div class="col-8 pr-0">
<div class="pro-img border-radius-0"> <img class="border-radius-0" src="images/Dal_Chana_1594102079.jpg" alt=""> </div>
<h4>Chilli Chips without</h4>
<p><strong>Category: </strong> Chocolate</p>
<p><strong>Brand: </strong> Chocolate</p>
</div>
<div class="col-2 topreg-no"><img style="position:absolute;z-index: 3; width:auto; height:30px; left:0px; top:13px;" class="badge-icon" src="images/badge-icon.svg" alt=""><span>01</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="row pro-info">

<div class="col-8 pr-0">
<div class="pro-img border-radius-0"> <img class="border-radius-0" src="images/Dal_Chana_1594102079.jpg" alt=""> </div>
<h4>Chilli Chips without</h4>
<p><strong>Category: </strong> Chocolate</p>
<p><strong>Brand: </strong> Chocolate</p>
</div>
<div class="col-2 topreg-no"><span>02</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="row pro-info">

<div class="col-8 pr-0">
<div class="pro-img border-radius-0"> <img class="border-radius-0" src="images/Dal_Chana_1594102079.jpg" alt=""> </div>
<h4>Chilli Chips without</h4>
<p><strong>Category: </strong> Chocolate</p>
<p><strong>Brand: </strong> Chocolate</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 class="tab-pane fade" id="pills-3" role="tabpanel" aria-labelledby="pills-3">

          
<div class="row pro-info">

<div class="col-8 pr-0">
<h4>Lahore</h4>
<p><strong>RSM: </strong> UTBA AZIZ</p>
</div>
<div class="col-2 topreg-no"><img style="position:absolute;z-index: 3; width:auto; height:30px; left:0px; top:13px;" class="badge-icon" src="images/badge-icon.svg" alt=""><span>01</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="row pro-info">

<div class="col-8 pr-0">
<h4>Lahore</h4>
<p><strong>RSM: </strong> UTBA AZIZ</p>
</div>
<div class="col-2 topreg-no"><span>02</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="row pro-info">

<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">155,000 <small>Units</small></span>	
    <div class="ak-val">TGT: <span>155,000 <small>Units</small></span></div>
    </div>
        
    </div>
    <div class="col-7 position-relative pl-0"><a href="#" class="view-all">View Products <i class="fa fa-angle-right"></i></a>
    meter show here
    </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">155,000 <small>Units</small></span>	
    <div class="ak-val">TGT: <span>155,000 <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>
    meter show here
    </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">155,000 <small>Units</small></span>	
    <div class="ak-val">TGT: <span>155,000 <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>
    meter show here
    </div>
</div>
    

</div>
</div>		
 
</div>
</div>
@endsection