@extends('layouts.master')
@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">Regions <span>Target Report</span></h2> 
            </div>				
            <div class="col-lg-6 col-md-6 col-sm-6">
                <ol class="breadcrumb">
                    <li><a href="#"><span>Target Report</span></a></li> 
                    <li><span>Regions List</span></li>
                </ol>
            </div>
    </div>
        
        
     <div class="row">        
            <div class="col-lg-12">
      <div class="header-tabs mb-10" style="min-height:47px">
        <div class="row">
          <div class="col">	
            <div class="CL-Product"><i class="fa fa-search"></i>
              <input type="text" class="form-control" id="" placeholder="Search">
            </div>
         </div>
        
              
<div class="col-auto">
<div class="dashboard-date">
 <input type="text" id="datepicker" class="form-control" placeholder="">
 <i class="fa fa-angle-down"></i>
 </div>
</div> 
<!--<div class="col-auto"><div class="dash-filter"><img src="images/report-filters.svg" alt=""></div>	</div>-->
            
</div>  
    

   
   </div>
    </div> 
    </div> 
    
    <div class="row">
    <div class="col-md-12 PT-10">			    	

     <div class="row">
    <div class="col-3">				
        <a href="#" class="productcard" style="min-height: 148px"><span class="emp-sno">01</span>
                <div class="col-12"><h4>Karachi </h4>
                <p><strong>RSM: </strong>  Utba Aziz</p> 
                </div>
                     
            <div class="col-12 PT-10">					
            <div class="row">
                <div class="col-8 pr-0">
                <div class="row productvalue">
                <div class="col-12 PB-5 pr-0">Target: <span>2000 <small>CTNs</small></span></div>
                <div class="col-12 PB-5 pr-0">Total Sales: <span><small>Rs.</small> 1,000,000</span></div>
                </div>
                </div>						
            <div class="col-4 p-0 text-center">
            <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>
        </a>			
    </div>
        

    <div class="col-3">				
        <a href="#" class="productcard" style="min-height: 148px"><span class="emp-sno">02</span>
                <div class="col-12"><h4>Lahore </h4>
                <p><strong>RSM: </strong>  Utba Aziz</p> 
                </div>
                     
            <div class="col-12 PT-10">					
            <div class="row">
                <div class="col-8 pr-0">
                <div class="row productvalue">
                <div class="col-12 PB-5 pr-0">Target: <span>2000 <small>CTNs</small></span></div>
                <div class="col-12 PB-5 pr-0">Total Sales: <span><small>Rs.</small> 1,000,000</span></div>
                </div>
                </div>						
            <div class="col-4 p-0 text-center">
            <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>
        </a>			
    </div>
     


        

    </div>
        
 
    </div>
@endsection