@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">Focused  <span>Products</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>Focused Products</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"><span class="emp-sno">01</span>
         <img style="width:30px;height:30px; position:absolute;top:-10px;right:-10px" src="images/badge-icon.svg" alt="">
            <div class="row">
                <div class="col-auto pl-25">				
                    <div class="pro-pic">
                        <img src="images/Dal_Chana_1594102079.jpg" alt="">
                    </div>
                </div>	
                <div class="col pl-0"><h4>Dal Chana Rs10 (12X24) [ZOOPLAY] Dal Chana Rs10 </h4>
                <p><strong>SKU:</strong> 125</p>
                <p><strong>Primary Unit:</strong> Carton</p>
                </div>
            </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>140 <small>CTNs</small></span></div>
                <div class="col-12 PB-5 pr-0">Net Sales: <span>140 <small>CTNs</small></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>	
            <strong style="font-size: 11px; display: block; line-height:1; margin-top: -2px">Achivement</strong>
            </div>					
            </div>				
            </div>
        </a>			
    </div>
        
<div class="col-3">				
        <a href="#" class="productcard"><span class="emp-sno">02</span>
     
            <div class="row">
                <div class="col-auto pl-25">				
                    <div class="pro-pic">
                        <img src="images/Dal_Chana_1594102079.jpg" alt="">
                    </div>
                </div>	
                <div class="col pl-0"><h4>Dal Chana Rs10 (12X24) </h4>
                <p><strong>SKU:</strong> 125</p>
                <p><strong>Primary Unit:</strong> Carton</p>
                </div>
            </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>140 <small>CTNs</small></span></div>
                <div class="col-12 PB-5 pr-0">Net Sales: <span>140 <small>CTNs</small></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>	
            <strong style="font-size: 11px; display: block; line-height:1; margin-top: -2px">Achivement</strong>
            </div>					
            </div>				
            </div>
        </a>			
    </div>
 
<div class="col-3">				
        <a href="#" class="productcard"><span class="emp-sno">03</span>
     
            <div class="row">
                <div class="col-auto pl-25">				
                    <div class="pro-pic">
                        <img src="images/Dal_Chana_1594102079.jpg" alt="">
                    </div>
                </div>	
                <div class="col pl-0"><h4>Dal Chana Rs10 (12X24) </h4>
                <p><strong>SKU:</strong> 125</p>
                <p><strong>Primary Unit:</strong> Carton</p>
                </div>
            </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>140 <small>CTNs</small></span></div>
                <div class="col-12 PB-5 pr-0">Net Sales: <span>140 <small>CTNs</small></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>	
            <strong style="font-size: 11px; display: block; line-height:1; margin-top: -2px">Achivement</strong>
            </div>					
            </div>				
            </div>
        </a>			
    </div>	
        
<div class="col-3">				
        <a href="#" class="productcard"><span class="emp-sno">04</span>
 
            <div class="row">
                <div class="col-auto pl-25">				
                    <div class="pro-pic">
                        <img src="images/Dal_Chana_1594102079.jpg" alt="">
                    </div>
                </div>	
                <div class="col pl-0"><h4>Dal Chana Rs10 (12X24) </h4>
                <p><strong>SKU:</strong> 125</p>
                <p><strong>Primary Unit:</strong> Carton</p>
                </div>
            </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>140 <small>CTNs</small></span></div>
                <div class="col-12 PB-5 pr-0">Net Sales: <span>140 <small>CTNs</small></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>	
            <strong style="font-size: 11px; display: block; line-height:1; margin-top: -2px">Achivement</strong>
            </div>					
            </div>				
            </div>
        </a>			
    </div>

<div class="col-3">				
        <a href="#" class="productcard"><span class="emp-sno">05</span>
 
            <div class="row">
                <div class="col-auto pl-25">				
                    <div class="pro-pic">
                        <img src="images/Dal_Chana_1594102079.jpg" alt="">
                    </div>
                </div>	
                <div class="col pl-0"><h4>Dal Chana Rs10 (12X24) </h4>
                <p><strong>SKU:</strong> 125</p>
                <p><strong>Primary Unit:</strong> Carton</p>
                </div>
            </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>140 <small>CTNs</small></span></div>
                <div class="col-12 PB-5 pr-0">Net Sales: <span>140 <small>CTNs</small></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>	
            <strong style="font-size: 11px; display: block; line-height:1; margin-top: -2px">Achivement</strong>
            </div>					
            </div>				
            </div>
        </a>			
    </div>	
        
<div class="col-3">				
        <a href="#" class="productcard"><span class="emp-sno">06</span>

            <div class="row">
                <div class="col-auto pl-25">				
                    <div class="pro-pic">
                        <img src="images/Dal_Chana_1594102079.jpg" alt="">
                    </div>
                </div>	
                <div class="col pl-0"><h4>Dal Chana Rs10 (12X24) </h4>
                <p><strong>SKU:</strong> 125</p>
                <p><strong>Primary Unit:</strong> Carton</p>
                </div>
            </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>140 <small>CTNs</small></span></div>
                <div class="col-12 PB-5 pr-0">Net Sales: <span>140 <small>CTNs</small></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>	
            <strong style="font-size: 11px; display: block; line-height:1; margin-top: -2px">Achivement</strong>
            </div>					
            </div>				
            </div>
        </a>			
    </div>
        
    </div>
        
 
    </div>
@endsection


	
	
	
<script>
	var apiData_overview;
      $.ajax({
          
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          type: 'get',
          url: '{{URL::to("/dashboard-target-report-overview-focused-products/".request()->route()->parameters['month']."/".request()->route()->parameters['year'])}}', // This is what I have updated
      }).done(function (msg) {
        debugger;
          apiData_overview = JSON.parse(msg);
      });
</script>