<?php
session_start();
if(!isset($_SESSION['user'])) {
	header("location: ../index.php");
	exit;
}

include "../dbconnect.php";
 
include"../header.php";

?>
<link href="../assets/css/analysis.css" rel="stylesheet">
						<div class="row">
							<div class="col-lg-12">

								<div class="card">
									<div class="card-header admin-feed">
										Order Insights
									</div>
									<div class="card-body">
										<div class="row">
											<div class="col-lg-12">
												<section style="min-height: 526px;">
												  	<div class="content-wrapper order-insight" style="overflow: initial;">
												    	<h4 class="mb-lg heading-sub-menu">
													        <span class="btn-group pull-right">
													          	<!-- <button type="button" class="btn text-md btn-menu dropdown-toggle pull-right js-range" id="ordins-date-range" data-toggle="dropdown" aria-expanded="false">
													          		<span class="caret"></span>
													          	</button> -->
													          	<input type="text" class="btn text-md btn-menu dropdown-toggle pull-right js-range" id="ordins-date-range" onchange="getOIGraphReportByDate( 'ordinsDate', document.getElementById('ordins-date-range').value )" >
													        </span>
													        <span class="text-xl">Order Insights</span>
													    </h4>

													    <!-- <ul class="nav nav-tabs nav-pills mb pl heading-border"  role="tablist">
													      	<li class="active ml">
													      		<a href="#insight-pills" data-toggle="tab">Insights</a>
													      	</li>
													      	<li>
													      		<a href="#order-pills" data-toggle="tab">List</a>
													      	</li>
													    </ul> -->


													    <div class="tab-content">
													      	<div id="insight-pills" class="tab-pane fade in active tab-custom" role="tabpanel">
													        	<div class="js-load" align="center" style="display: none;">
													          		<div class="loader graph-load mb-xl"></div>
													        	</div>

													        	<div class="row ml0 js-insights" style="">
													       			
													            	<blockquote class="js-new-low" style="">
													            		<span class="mb0 text-md" style="">
													                    Quick Tip : "Hey, you’re not acquiring new customers as many as before.  Check out Channel Insights to find out the most profitable channel of acquiring new customers."</span>
													                    <span><a href="report/channel-orders"><button class="btn btn-success" style="margin-left: 10px;" href="create-sms-campaign">Check Now</button></a></span>
													                    <!-- <a style="padding-left:20px" class="js-next-tip">Next Tip<i class="fa fa-arrow-right js-next-tip" aria-hidden="true" style="padding-left: 10px"></i></a> -->
													                </blockquote>
													            	<blockquote class="js-retention" style="display: none;">
													            		<span class="mb0 text-md js-low-retention-rate" style="">
												                        Quick Tip : "You have scope for improving your  business by reaching out to more customers, you can improve your customer retention upto industry standard by shooting a campaign.
												                        </span>
												                        <span class="mb0 text-md js-high-retention-rate" style="display: none">
												                        Quick Tip : "Customers aren't coming back as often as before. You can improve by shooting a campaign."</span>
												                        <a href="create-sms-campaign"><button class="btn btn-default js-low-retention-rate js-high-retention-rate" style="margin-left: 10px;">Create Now</button></a>
												                    </blockquote>

													            	<div class="analytic-numbers">
													            		<div class="row mt-lg ml0 mr0">
																		    
																		    <div class="col-lg-4 col-md-3">
																		      	<div class="panel widget b b-primary">
																			       	<div class="row row-table row-flush">
																			          	<div class="col-xs-4 bg-primary text-center">
																			            	<em class="fa fa-location-arrow fa-2x"></em>
																			          	</div>
																			          	<div class="col-xs-8">
																			             	<div class="panel-body text-center">
																			                	<h4 class="mt0 oic newcustomer"></h4>
																			                	<p class="mb0 text-muted text-md">NEW CUSTOMERS</p>
																			             	</div>
																			          	</div>
																			       	</div>
																		    	</div>
																		    	<!-- END panel-->
																		  	</div>
																		    <div class="col-lg-4 col-md-3">
																		      	<div class="panel widget b b-success">
																		       		<div class="row row-table row-flush">
																			          	<div class="col-xs-4 bg-success text-center">
																			           		<em class="fa fa-group fa-2x"></em>
																			          	</div>
																			          	<div class="col-xs-8">
																			             	<div class="panel-body text-center">
																			                	<h4 class="mt0 oic repeat-visits"></h4>
																			                	<p class="mb0 text-muted text-md">REPEAT VISITS</p>
																			             	</div>
																			          	</div>
																			       	</div>
																		    	</div>
																		    	<!-- END panel-->
																		  	</div>
																	        <div class="col-lg-4 col-md-3">
																	          	<div class="panel widget b b-info">
																	         		<div class="row row-table row-flush">
																			            <div class="col-xs-4 bg-info text-center">
																			             	<em class="fa fa-money fa-2x"></em>
																			            </div>
																			            <div class="col-xs-8">
																			               	<div class="panel-body text-center">
																			                  	<h4 class="mt0 oic amount-spent"> </h4>
																			                  	<p class="mb0 text-muted text-md">AMOUNT SPENT (INR)</p>
																			               	</div>
																			            </div>
																			        </div>
																		      	</div>
																		  	</div>
																		  	<div class="col-lg-3 col-md-3" style="display: none;">
																		      	<div class="panel widget b b-purple">
																		         	<div class="row row-table row-flush">
																		            	<div class="col-xs-4 bg-purple text-center">
																		             		<em class="fa fa-group fa-2x"></em>
																		            	</div>
																			            <div class="col-xs-8">
																			               	<div class="panel-body text-center">
																			                  	<h4 class="mt0">50 % <a href="#" title="Unknown Order(s): 2 " data-toggle="tooltip" class="text-gray-dark js-unknown-order-count"> <i class="fa fa-question" aria-hidden="true"></i></a></h4>
																			                  	<p class="mb0 text-muted text-md">DATA CAPTURE </p>
																			               	</div>
																			            </div>
																		         	</div>
																		      	</div>
																		  	</div>
													  
													  					</div>

																		<!-- <blockquote class="ml-lg">
																	  		<p>There are no orders in this time period</p>
																		</blockquote> -->
																	</div>

														            <div class="col-lg-8">
														            </div>
														            <div class="col-lg-4">
														              	<div class="btn-group pull-right mt10i">
														                 	<button type="button" class="btn btn-default js-report active" id="daily" onclick="orderInsightGraphData('daily')">Daily</button>
														                 	<button type="button" class="btn btn-default js-report" id="week" onclick="orderInsightGraphData('weekly')">Weekly</button>
														                 	<button type="button" class="btn btn-default js-report" id="month" onclick="orderInsightGraphData('monthly')">Monthly</button>
														              	</div>
														            </div>
													        	</div>
												        		<div class="js-insights" id="graphOrderInsight" style="min-width: 310px; height: 400px; margin: 0px auto;" data-highcharts-chart="2">
												        		</div>
												      		</div>

														    <!-- <div id="order-pills" class="tab-pane fade in tab-custom" role="tabpanel">
														      	<div class="js-load" align="center" style="display: none;">
														          	<div class="loader graph-load mb-xl"></div>
														        </div>
														        <div class="row ml0 mt-xl">
														            <div class="col-lg-12 mt-lg">
														              	<span class="btn-group mt mr mb text-md">
														                	<button type="button" class="btn btn-default dropdown-toggle pull-right js-filter" data-toggle="dropdown" aria-expanded="false">
														                  		All Customers
														                  		<span class="caret">
															                	</span>
															                </button>
															                <ul class="dropdown-menu" role="menu">
															                  	<li class="js-change-filter"><a href="javascript:void(0);">All Customers</a></li>
															                  	<li class="js-change-filter"><a href="javascript:void(0);">New Customers</a></li>
															                  	<li class="js-change-filter"><a href="javascript:void(0);">Repeat Customers</a></li>
															                </ul>
															            </span>
														                <button type="button" class="btn btn-menu js-export-csv"><em class="fa fa-download"></em> Export</button>
														            </div>
														        </div>
														        <div class="table-responsive ml-lg">
														          	<table class="table table-hover" id="report">
														             	<thead>
															                <tr>
															                  	<th>Date</th>
															                  	<th>Name</th>
															                  	<th>Phone</th>
															                  	<th class="hidden" data-tableexport-display="include">Email</th>
										                                      	<th>Amount</th>
										                                        <th class="hidden-xs">Points Earned</th>
										                                    	<th class="hidden-xs hidden-sm">User</th>
															                </tr>
														             	</thead>

														             	<tbody class="js-users"></tbody>
														          	</table>
														            <div class="row text-center">
														                <button type="button" class="btn btn-default js-load-more-report ladda-button" data-style="expand-left" data-page="2" data-type="" style="display: none;"><span class="ladda-label">Load More</span></button>
														            </div>
														        </div>
														    </div> -->
												    	</div>
												  	</div>
												</section>
											</div>
										</div>
									</div>
								</div>

							</div>
						</div>
<?php
include"../footer.php";
?>

<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
 
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

<script type="text/javascript">
$(".js-report").on("click", function() {
  	var type = $(this).attr('id');
  	$("#daily").removeClass('active');
  	$("#week").removeClass('active');
  	$("#month").removeClass('active');
  	
  	$(this).addClass('active');
   	// getGraphReport(type);
});


/*$('.js-range').daterangepicker(
	{
	    locale: {
	      format: 'DD/MM/Y'
	    },
	    showDropdowns: true,
	    ranges: {
	     	'Today': [moment(), moment()],
	     	'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
	     	'Last 7 Days': [moment().subtract(6, 'days'), moment()],
	     	'Last 30 Days': [moment().subtract(29, 'days'), moment()],
	     	'This Month': [moment().startOf('month'), moment().endOf('month')],
	     	'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
	     	'Last 3 Months': [moment().subtract(3, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
	  	}
	}
);*/

$(document).ready(function() {

  	var start = moment().subtract(29, 'days');
  	var end = moment();

  	function cb(start, end) {

	    $('.js-range').html(start.format('DD/MM/Y') + ' - ' + end.format('DD/MM/Y'));

	}

  	$('.js-range').daterangepicker({
      	locale: {
          format: 'DD/MM/Y'
        },
        showDropdowns: true,
        startDate: start,
      	endDate: end,
      	ranges: {
         	'Today': [moment(), moment()],
         	'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
         	'Last 7 Days': [moment().subtract(6, 'days'), moment()],
         	'Last 30 Days': [moment().subtract(29, 'days'), moment()],
         	'This Month': [moment().startOf('month'), moment().endOf('month')],
         	'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
         	'Last 3 Months': [moment().subtract(3, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
      	}
  	}, cb);

  	cb(start, end);

});



</script>