@extends('layouts.master')
@section('content')
<style>.cancellation {font-size: 14px; line-height: 1; background-color: #f3f3f3; 
	margin: 5px 15px 0px 15px; width: 100%; padding: 10px 10px 5px 10px;}
.cancellation span {font-size: 20px; float: right; margin-top:-4px;font-family: 'Rationale', sans-serif!important;}
.top-units-list{color: #5f5f5f; height: 100%; padding-top: 10px; padding-right: 15px;}
.head-font{font-size: 16px}
.top-units-list .font-digit{font-size: 16px; color: #282828}
.keytrend-lr{font-size: 16px;}
.keytrend-lr span{margin-top: 0;}
.keytrend-lr .col-12 {border-bottom: solid 1px #eaeaea; padding-top: 10px; padding-bottom: 10px;}
.divisional-reports h4 {font-size: 18px}	
.dis-vs-value span{font-size: 20px}
	
.dis-vs-value2{font-size: 14px; letter-spacing: normal; color: #747674; line-height:1}
.dis-vs-value2 span{color: #0038ba; font-size: 17px; font-family: 'Rationale', sans-serif!important;}
.val-row{border-bottom: solid 1px #e6e6e6; margin-bottom: 5px; padding-bottom: 5px; margin-left: -10px; margin-right: -10px;}
.val-row-list{border-bottom: solid 1px #e6e6e6; padding-bottom: 8px; padding-top:8px }
.pt-val{font-size: 13px; line-height:1; color: #939393}
.pt-val span{font-size: 16px; color: #282828;font-family: 'Rationale', sans-serif!important;}
.top-pro-lr{padding-top: 5px; padding-bottom: 5px;}	
.top-pro-lr img{height:49px;width:49px; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);}
.top-pro-lr .progressValue{font-size: 20px;}
.divisional-reports .progress{margin-top: 7px;}
._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;}
.viewallbtn {
    font-size: 13px;
    letter-spacing: 1px;
    padding-left: 18px;
    padding-right: 18px;
    margin-top: 30px;
}
.top-pr-list .progress{margin-top:4px;}
.tab-content .val-row-list{ padding: 15px 15px}
 .top-reg-info {
    background-color: #f3f3f3;
    padding: 10px 15px;
    margin-top: 5px;
    margin-bottom: 20px;
}	
.top-reg-info .card-heading {
    text-transform: none;
    margin-bottom: 0;
    font-size: 14px;
}
.card-heading span {
    font-family: 'proximanova-light', sans-serif !important;
    font-weight: normal;
}
.top-reg-info .card-heading:before {
	display: none
}
.divisional-reports {
    padding: 20px;
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 20px;
}
.Product-row{padding: 5px 8px; margin-bottom: -1px; box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
}
.Product-row-title{padding: 8px;}
.Product-IMG{margin-bottom: -5px}
.Product-IMG img {width: 35px; height: 35px; border-radius:50%;}	
.Product-Name{color: #808080; line-height:1;}	
.Product-Name strong{color: #282828; padding-bottom: 3px; display: block}
._ITEMNAME{height: auto;}
.font-no{font-size: 20px; line-height:1}
.ser-text{font-family:'Poppins', sans-serif; line-height: 1; font-size: 30px; font-weight: 800; color: #ececec; margin-bottom: -5px;}
.font-no{font-size: 20px; line-height:1; font-family: 'Rationale', sans-serif!important;}
.sm-progress{margin-bottom: -11px; margin-top: -2px;width: 50px; margin-left: -7px;}	
.sm-progress .progress {
    width: 38px;
    height: 38px; 
}
.sm-progress .progress .progress-value .digitVal{font-size: 14px;}
.sm-progress .progress .progress-bar{border-width: 3px;}
.sm-progress .progress::after {border-width: 3px;}
.ser-text{font-size: 38px}
.top-units-list .progressValue{margin-top:5px}
.top-units-list .progress{margin-bottom: 5px;}
.loader-div {
            position: absolute;
            display: inline-block;
            width: 50px;
            height: 50px;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
        .lds-ring {
            display: inline-block;
            position: relative;
            width: 47px;
            height: 47px;
            animation: lds-ring 10s linear infinite;
        }
        
        @media (max-width: 800px) {
        .top-units-list{padding-top: 20px !important; padding-bottom: 20px !important; padding-right: 0px !important;}
        .Product-IMG img{margin-right: 8px;}
        }
</style>
<input type="hidden" id="session"  value="{{$session}}">
<input type="hidden" id="apiBaseURL"  value="{{$apiBaseUrl}}">
<input type="hidden" id="type"  value="{{$report_type}}">
<input type="hidden" id="reportId"  value="{{$report_id}}">


<div id="product-cl-sec">	
    <a href="#" id="pl-close" class="close-btn-pl"></a> 
 <div class="pro-header-text">Employee <span>Detail</span></div>
  
   <div class="pc-cartlist">
  
     <div class="overflow-plist">
  
       <div class="plist-content">
       
     <div class="_left-filter pt-0"> 
     
     <div class="container">
         
         <div class="row">
             
             <div class="col-12">
              <div id="floating-label" class="card p-20 top_border mb-3">
               
  
             
                     <div class="row"> 
                     <div class="col-12 PB-20">
                         <h2 class="_head03">BOOKING VS  <span>EXECUTION</span></h2> 
                         <div class="row">
                            <div class="col-12">
                             <div class="row">								
                                 <div class="col-6 pr-0">						
                                     <div class="col ex-avg-booking">Total Booking
                                         <span class="avg-val"><small>Rs.</small> 0</span>
                                     </div>								
                                 </div>
                                 <div class="col-6 pr-0">
                                     <div class="col ex-avg-booking">Total Sale
                                         <span class="avg-val"><small>Rs.</small>0</span>
                                     </div>
                                 </div>							
                             </div>
                            </div>
                       
                            <div class="col-12 mt-20 PT-5">
                               <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">0<small>%</small><span>Execution</span></div>
                                   </div>
                                 </div>
                               </div>
                             </div> 
                             
                            <div class="cancellation">
                                Cancellation <span>0<small>%</small></span>
                            </div>
                             
                         </div>					
     
                     </div> 
                         
                     <div class="col-12">
                         <h2 class="_head03">Orders <span></span></h2>
                         <div class="row mb-30">
                            <div class="col-12">
                             <div class="row">								
                                 <div class="col-6 pr-0">						
                                     <div class="col ex-avg-booking">Booked Orders
                                         <span class="avg-val"><small>Rs.</small> 0</span>
                                     </div>								
                                 </div>
                                 <div class="col-6 pr-0">
                                     <div class="col ex-avg-booking">Delivered Orders
                                         <span class="avg-val"><small>Rs.</small> 0</span>
                                     </div>
                                 </div>							
                             </div>
                            </div>
                             
                            <div class="cancellation">
                                Cancelled Orders <span>0</span>
                            </div>
                         </div>	
  
                         <h2 class="_head03">Units <span></span></h2>
                         <div class="row">
                            <div class="col-12">
                             <div class="row">								
                                 <div class="col-6 pr-0">						
                                     <div class="col ex-avg-booking">Booked Units
                                         <span class="avg-val">0</span>
                                     </div>								
                                 </div>
                                 <div class="col-6 pr-0">
                                     <div class="col ex-avg-booking">Delivered Units
                                         <span class="avg-val">0</span>
                                     </div>
                                 </div>							
                             </div>
                            </div>
                             
                            <div class="cancellation">
                                Cancelled Units <span>0</span>
                            </div>
                         </div>	
                     </div>
                         
                         
                       </div>
  
                     
                     </div></div>
                      
  
              
  
             
         </div>
         
     </div>
 
             
             
     </div>
  
      
       </div>
  
     </div>
   </div>
   
   
   <div class="_cl-bottom">
 
                <button id="pl-close" type="submit" class="btn btn-cancel mr-2">Close</button>
      
     </div>
  
  
  
 </div>
<div id="blureEffct" class="container">  
           
    <div class="row mt-1 mb-0">        
            <div class="col-lg-6 col-md-6 col-sm-6">
                <h2 class="_head01">Daily <span>Execution Report - </span><span id="pageName"></span><span> Detail</span></h2> 
            </div>				
            <div class="col-lg-6 col-md-6 col-sm-6">
            <!--<a href="#" id="productlist01"><img style="width:23px;height:23px;float:right;margin-top:-3px;cursor:pointer" src="images/report-filters.svg" alt=""></a>-->
                <div class="dashboard-date" 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 id="upperCardData" class="col-12 PT-10">
            <div class="card divisional-reports pt-0" style="min-height: 338px">
            <div class="loader-div" >
                <div class="lds-ring" aria-role="none" >
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
        </div> 	 
 

 
<div class="col-md-12">
<div class="card ts-overview PB-15 mh-100" style="min-height: 100%; margin-bottom:0">
<h2 class="card-heading">Employees <span>List</span></h2>

<div  class="col-12 p-0">
                
            <div class="Product-row-title">
              <div class="row">				
                <div class="col colStyle h-auto" style="max-width:400px">Employee Name</div>
                <div class="col colStyle NO-WL800 h-auto" style="max-width:160px"></div>
                <div class="col colStyle h-auto" style="max-width:190px">Total Sales</div>					 
                <div class="col colStyle PR-WL800-set h-auto" style="max-width:130px">Execution</div>
                <div class="col colStyle h-auto" style="max-width:110px">Action</div> 
              </div>
            </div>
            <div id="employeesData">
            </div>
                 
         </div>               
            
    
           
    
    
           
    
            
    
    
            
    
    
            
    
            
    
       
    
    
            </div>


</div>	
</div>
 
    </div>
     

@endsection