@include('theme_layout/header')
@include('theme_layout/nav')

<div class="app-main__outer">
 <div class="app-main__inner">
  <div class="app-page-title">
   <div class="page-title-wrapper">
    <div class="page-title-heading">
     <div class="page-title-icon">
	  <i class="pe-7s-car icon-gradient bg-mean-fruit">
	  </i>
     </div>
	 
		<div>Analytics Dashboard 
		</div>
	</div>
   </div>
  </div>
					
		<div class="tabs-animation">
		 <div class="row mb-1">
		  <div class="col-sm-3">
		   <div class="card mb-3 bg-premium-dark widget-chart widget-chart2 text-left">
		    <div class="widget-chat-wrapper-outer">
	         <div class="widget-chart-content">
		      <div class="widget-chart-flex">
			   <div class="widget-title font-bold">Gross Profit</div>
		     </div>
			 
	    <div class="widget-chart-flex m-t-15">
		 <div class="widget-numbers">
		  1288
		 </div>
		 
		<div class="widget-description ml-auto text-success">
		 <i class="fa fa-angle-up "></i>
		  <span class="pl-1">175.5%</span></div>
          </div>
         </div>
		 
	    <div class="widget-progress-wrapper">
		 <div class="progress-bar-sm progress-bar-animated-alt progress">
		  <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 65%;"></div>
		 </div>
	    </div>
       </div>
     </div>
    </div>
								 
	    <div class="col-sm-3">
	     <div class="card mb-3 bg-premium-dark widget-chart widget-chart2 text-left">
		  <div class="widget-chat-wrapper-outer">
		   <div class="widget-chart-content">
		    <div class="widget-chart-flex">
			 <div class="widget-title font-bold">Gross Profit %</div>
		   </div>

	    <div class="widget-chart-flex m-t-15">
		 <div class="widget-numbers">
		  1287
		  </div>
		  
		<div class="widget-description ml-auto text-success">
		 <i class="fa fa-angle-up "></i>
		 <span class="pl-1">175.5%</span></div>
        </div>
      </div>
	  
        <div class="widget-progress-wrapper">
	     <div class="progress-bar-sm progress-bar-animated-alt progress">
		  <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;"></div>
	     </div>
        </div>
      </div>
     </div>
    </div>
								
	    <div class="col-sm-3">
	     <div class="card mb-3 bg-premium-dark widget-chart widget-chart2 text-left">
		  <div class="widget-chat-wrapper-outer">
		   <div class="widget-chart-content">
		    <div class="widget-chart-flex">
		     <div class="widget-title font-bold">Cost Of Good Sold</div>
	       </div>
		   
	    <div class="widget-chart-flex m-t-15">
		  <div class="widget-numbers">
		   1283 
		  </div>
		  
		<div class="widget-description ml-auto text-success">
		 <i class="fa fa-angle-up "></i>
		  <span class="pl-1">175.5%</span></div>
	     </div>
        </div>
		
        <div class="widget-progress-wrapper">
	     <div class="progress-bar-sm progress-bar-animated-alt progress">
		  <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;"></div>
	   </div>
      </div>
     </div>
    </div>
   </div>
                                             
	    <div class="col-sm-3">
		 <div class="card mb-3 bg-premium-dark widget-chart widget-chart2 text-left">
		  <div class="widget-chat-wrapper-outer">
		   <div class="widget-chart-content">
		    <div class="widget-chart-flex">
			 <div class="widget-title font-bold">Net Profit</div>
		   </div>
		   
	    <div class="widget-chart-flex m-t-15">
		 <div class="widget-numbers">
		  1283
		 </div>
		 
		<div class="widget-description ml-auto text-success">
		 <i class="fa fa-angle-up "></i>
		  <span class="pl-1">175.5%</span></div>
	     </div>
        </div>
		
        <div class="widget-progress-wrapper">
	     <div class="progress-bar-sm progress-bar-animated-alt progress">
		  <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;"></div>
	     </div>
        </div>
       </div>
      </div>
     </div>
    </div>
						
		<div class="row mb-1">
		 <div class="col-sm-3">
		  <div class="card mb-3 bg-premium-dark widget-chart widget-chart2 text-left">
		   <div class="widget-chat-wrapper-outer">
		    <div class="widget-chart-content">
	         <div class="widget-chart-flex">
		      <div class="widget-title font-bold">Gross Sales</div>
	        </div>
			
	    <div class="widget-chart-flex m-t-15">
		 <div class="widget-numbers">
		   1283
		  </div>
		  
		<div class="widget-description ml-auto text-success">
		 <i class="fa fa-angle-up "></i>
		  <span class="pl-1">175.5%</span></div>
         </div>
        </div>
		
		<div class="widget-progress-wrapper">
		 <div class="progress-bar-sm progress-bar-animated-alt progress">
		  <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 65%;"></div>
	     </div>
		</div>
	   </div>
      </div>
     </div>
								
	    <div class="col-sm-3">
	     <div class="card mb-3 bg-premium-dark widget-chart widget-chart2 text-left">
		  <div class="widget-chat-wrapper-outer">
		   <div class="widget-chart-content">
		    <div class="widget-chart-flex">
			 <div class="widget-title font-bold">Net Sales</div>
		    </div>
			
        <div class="widget-chart-flex m-t-15">
	     <div class="widget-numbers">
		  1285
	     </div>
		 
	    <div class="widget-description ml-auto text-success">
		 <i class="fa fa-angle-up "></i>
		  <span class="pl-1">175.5%</span></div>
         </div>
        </div>
		
        <div class="widget-progress-wrapper">
	     <div class="progress-bar-sm progress-bar-animated-alt progress">
		  <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;"></div>
	     </div>
        </div>
       </div>
      </div>
     </div>
								 
		<div class="col-sm-3">
		 <div class="card mb-3 bg-premium-dark widget-chart widget-chart2 text-left">
		  <div class="widget-chat-wrapper-outer">
		   <div class="widget-chart-content">
	        <div class="widget-chart-flex">
		     <div class="widget-title font-bold">Collection</div>
	       </div>
		   
	    <div class="widget-chart-flex m-t-15">
		  <div class="widget-numbers">
			1283
		  </div>
		  
		<div class="widget-description ml-auto text-success">
		 <i class="fa fa-angle-up "></i>
		  <span class="pl-1">175.5%</span></div>
	     </div>
        </div>
		
        <div class="widget-progress-wrapper">
         <div class="progress-bar-sm progress-bar-animated-alt progress">
	      <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;"></div>
         </div>
        </div>
       </div>
     </div>
    </div> <!--col-sm-3-->
								 
        <div class="col-sm-3">
         <div class="card mb-3 bg-premium-dark widget-chart widget-chart2 text-left">
          <div class="widget-chat-wrapper-outer">
           <div class="widget-chart-content">
	        <div class="widget-chart-flex">
		     <div class="widget-title font-bold">Total Debt.</div>
	       </div>
		   
	    <div class="widget-chart-flex m-t-15">
		  <div class="widget-numbers">
			1283
		  </div>
		  
		<div class="widget-description ml-auto text-success">
		 <i class="fa fa-angle-up "></i>
		  <span class="pl-1">170.5%</span></div>
        </div>
       </div>
	   
        <div class="widget-progress-wrapper">
	     <div class="progress-bar-sm progress-bar-animated-alt progress">
		  <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;"></div>
	     </div>
        </div>
       </div>
      </div>
     </div> <!--col-sm-3-->
    </div> <!--row mb-1-->
                   
		<div class="row mb-1">
		 <div class="col-sm-3">
		  <div class="card mb-3 bg-premium-dark widget-chart widget-chart2 text-left">
		   <div class="widget-chat-wrapper-outer">
		    <div class="widget-chart-content">
		     <div class="widget-chart-flex">
	          <div class="widget-title font-bold">Inventory Value</div>
             </div>
			 
        <div class="widget-chart-flex m-t-15">
	     <div class="widget-numbers">
		  1283
	     </div>
		 
	    <div class="widget-description ml-auto text-success">
		 <i class="fa fa-angle-up "></i>
		  <span class="pl-1">175.5%</span></div>
         </div>
        </div>
		
        <div class="widget-progress-wrapper">
	     <div class="progress-bar-sm progress-bar-animated-alt progress">
		  <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 65%;"></div>
	     </div>
        </div>
       </div>
      </div> <!--card mb-3 bg-premium-dark widget-chart widget-chart2 text-left-->
     </div> <!--col-sm-3-->
								
		<div class="col-sm-3">
		 <div class="card mb-3 bg-premium-dark widget-chart widget-chart2 text-left">
		   <div class="widget-chat-wrapper-outer">
		    <div class="widget-chart-content">
	         <div class="widget-chart-flex">
		      <div class="widget-title font-bold">Total Discount</div>
	        </div>
			
	    <div class="widget-chart-flex m-t-15">
		  <div class="widget-numbers">
			1283
		  </div>
		  
		<div class="widget-description ml-auto text-success">
		 <i class="fa fa-angle-up "></i>
		  <span class="pl-1">175.5%</span></div>
         </div>
       </div>

        <div class="widget-progress-wrapper">
	     <div class="progress-bar-sm progress-bar-animated-alt progress">
		  <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;"></div>
	     </div>
        </div>
       </div>
      </div> <!--card mb-3 bg-premium-dark widget-chart widget-chart2 text-left-->
     </div> <!--col-sm-3-->
								  
		<div class="col-sm-3">
		 <div class="card mb-3 bg-premium-dark widget-chart widget-chart2 text-left">
		  <div class="widget-chat-wrapper-outer">
		   <div class="widget-chart-content">
		    <div class="widget-chart-flex">
	         <div class="widget-title font-bold">Total Returns</div>
            </div>
			
        <div class="widget-chart-flex m-t-15">
	     <div class="widget-numbers">
		  1283
	     </div>
		 
	    <div class="widget-description ml-auto text-success">
		 <i class="fa fa-angle-up "></i>
		  <span class="pl-1">175.5%</span></div>
         </div>
        </div>
		
        <div class="widget-progress-wrapper">
	     <div class="progress-bar-sm progress-bar-animated-alt progress">
		  <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;"></div>
	     </div>
        </div>
       </div>
      </div> <!--card mb-3 bg-premium-dark widget-chart widget-chart2 text-left-->
     </div> <!--col-sm-3-->
								  
		<div class="col-sm-3">
		 <div class="card mb-3 bg-premium-dark widget-chart widget-chart2 text-left">
		  <div class="widget-chat-wrapper-outer">
		   <div class="widget-chart-content">
		    <div class="widget-chart-flex">
			 <div class="widget-title font-bold">Total Expense</div>
		   </div>
		   
		<div class="widget-chart-flex m-t-15">
		  <div class="widget-numbers">
			1283
		   </div>
		   
		<div class="widget-description ml-auto text-success">
		 <i class="fa fa-angle-up "></i>
		  <span class="pl-1">175.5%</span></div>
	    </div>
	  </div>
	  
        <div class="widget-progress-wrapper">
	     <div class="progress-bar-sm progress-bar-animated-alt progress">
		  <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;"></div>
	     </div>
        </div>
       </div> <!--widget-chat-wrapper-outer-->
      </div> <!--card mb-3 bg-premium-dark widget-chart widget-chart2 text-left-->
     </div> <!--col-sm-3-->
    </div>  <!--row mb-1-->
   </div> <!--tabs-animation-->
						
		<div class="row">
		  <div class="col-lg-12 col-xl-6">
		   <div class="main-card mb-3 card">
		    <div class="card-body " style="height: 425px;"><h5 class="card-title">Yearly Sales</h5>
		    <div class="widget-chart-wrapper widget-chart-wrapper-lg opacity-10 m-0">
		     <div style="height: 227px;">
			  <canvas id="line-chart"></canvas>
		    </div>
		  </div>
		  
		<h5 class="card-title">Target Sales</h5>
		 <div class="mt-3 row">
		  <div class="col-sm-12 col-md-4">
		   <div class="widget-content p-0">
		    <div class="widget-content-outer">
		     <div class="widget-content-wrapper">
		      <div class="widget-content-left">
		       <div class="widget-numbers text-dark">65%</div>
		      </div>
		    </div>
			
	    <div class="widget-progress-wrapper mt-1">
		 <div class="progress-bar-xs progress-bar-animated-alt progress">
		   <div class="progress-bar bg-info" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;"></div>
		 </div>
		 
		<div class="progress-sub-label">
		  <div class="sub-label-left font-size-md">Sales</div>
		 </div>
	    </div>
       </div>
      </div>
     </div> <!--col-sm-12 col-md-4-->
											
		<div class="col-sm-12 col-md-4">
		 <div class="widget-content p-0">
		  <div class="widget-content-outer">
		    <div class="widget-content-wrapper">
		     <div class="widget-content-left">
		      <div class="widget-numbers text-dark">22%</div>
		     </div>
		   </div>
		   
		<div class="widget-progress-wrapper mt-1">
		 <div class="progress-bar-xs progress-bar-animated-alt progress">
		  <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100" style="width: 22%;"></div>
		 </div>
		 
		<div class="progress-sub-label">
		  <div class="sub-label-left font-size-md">Profiles</div>
		 </div>
		</div>
	   </div>
	  </div>
	</div> <!--col-sm-12 col-md-4-->
											
		<div class="col-sm-12 col-md-4">
		 <div class="widget-content p-0">
		  <div class="widget-content-outer">
		   <div class="widget-content-wrapper">
		    <div class="widget-content-left">
		     <div class="widget-numbers text-dark">84%</div>
		    </div>
		   </div>
		   
        <div class="widget-progress-wrapper mt-1">
	     <div class="progress-bar-xs progress-bar-animated-alt progress">
		  <div class="progress-bar bg-success" role="progressbar" aria-valuenow="83" aria-valuemin="0" aria-valuemax="100" style="width: 83%;"></div>
	     </div>
		 
	     <div class="progress-sub-label">
		   <div class="sub-label-left font-size-md">Tickets</div>
	      </div>
         </div>
        </div>
       </div> <!--widget-content p-0-->
      </div> <!--col-sm-12 col-md-4-->
     </div> <!--mt-3 row-->
    </div> <!--card-body-->
   </div> <!--main-card mb-3 card-->
  </div> <!--col-lg-12 col-xl-6-->
							
		<div class="col-lg-12 col-xl-6">
		 <div class="main-card mb-3 card">
		  <div class="card-body">
		   <h5 class="card-title">Gross Profit Graph</h5>
		    <div id="chart-apex-area"></div>
		   </div>
		  </div>
		 </div>
		</div> <!--row-->
                      
	    <div class="tabs-animation">
		 <div class="text-center mbg-3">
	      <button class="btn-wide btn-pill btn-shadow fsize-1 btn btn-focus btn-lg">
	       <span class="mr-2 opacity-7">
		    <i class="icon icon-anim-pulse ion-ios-analytics-outline"></i>
	         </span>
	          Comparison
	         </button>
            </div> 
		  
	    <div class="row"> 
	     <div class="col-lg-12 col-xl-6">
		  <div class="main-card mb-3 card">
		   <div class="card-body" style="height:425px;">
		    <h5 class="card-title"> Gross Sales By Month</h5>
		     <canvas class="mt-3" id="canvas" height="210"></canvas>
		    </div> 
		   </div>                              
	      </div>

	    <div class="col-lg-12 col-xl-6">   
	     <div class="main-card mb-3 card">
		  <div class="card-body">
		   <h5 class="card-title">Target Acheived By Month</h5>
		    <div id="chart-apex-negative"></div>
	       </div>
	      </div> 
	     </div>
	    </div> <!--row-->
 
	    <div class=" row">
		 <div class="col-lg-12 col-xl-6">   
          <div class="main-card mb-3 card">
	       <div class="card-body">
		    <h5 class="card-title">Comparison Of Expense</h5>
		     <canvas id="chart-horiz-bar"></canvas>
	       </div> 
          </div> 
	   </div>

        <div class="col-lg-12 col-xl-6">  
         <div class="main-card mb-3 card">
	      <div class="card-body">
		   <h5 class="card-title">Top Brand By Gross Sales</h5>
		    <canvas id="doughnut-chart"></canvas>
	       </div>
          </div> 
         </div> 
        </div> <!--row-->
       </div> <!--tabs-animation-->
      </div> <!--app-main__inner-->
    @include('theme_layout/footer')
   </div>	<!--app-main__outer-->			   
<div class="app-drawer-overlay d-none animated fadeIn"></div>
<script type="text/javascript" src="./assets/scripts/main.8d288f825d8dffbbe55e.js"></script>