<?php $this->load->view("restaurant/common/header"); ?>
<style type="text/css">
/*.table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td, .table-striped thead tr.primary:nth-child(2n+1) th {
	background-color: #428bca;
	border-color: #357ebd;
	border-top: 1px solid #357ebd;
	color: white;
	text-align: center;
}*/


.kot-grid {
	background-color: #FFF;
	font-weight: bold;
}
.kot-div {
	height: 400px;
	/*overflow-x: scroll;*/
	margin-bottom: 10px;
}
body, table, thead, tbody, td, th {
}
.parent {
	/*height: 100%;
	width: 100%;*/
	overflow: hidden;
}
.child {
	/*width: 100%;
	height: 100%;*/
	height: 400px;
	overflow-y: scroll;
	padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
	box-sizing: content-box; /* So the width will be 100% + 17px */
	margin-right: -22px;
}
.fixed-top-background{
	background-color:#FFF;
	height:30px;
	margin-top:-12px;
	margin-left:-10px;
	}
</style>
<!-- end: CSS REQUIRED FOR THIS PAGE ONLY -->
<!-- end: HEAD -->
<!-- start: BODY -->
<body>
<!-- start: HEADER -->
<div class="navbar navbar-inverse navbar-fixed-top"> 
  <!-- start: TOP NAVIGATION CONTAINER -->
  <div class="container">
    <div class="navbar-header"> 
      <!-- start: RESPONSIVE MENU TOGGLER -->
      <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button"> <span class="clip-list-2"></span> </button>
      <!-- end: RESPONSIVE MENU TOGGLER --> 
      <!-- start: LOGO -->
      <?php //$this->load->view("common/logo"); ?>
      <!-- end: LOGO --> 
    </div>
    <div class="navbar-tools"> 
      <!-- start: TOP NAVIGATION MENU -->
      <?php //$this->load->view("common/notifications.php"); ?>
      <!-- end: TOP NAVIGATION MENU --> 
    </div>
  </div>
  <!-- end: TOP NAVIGATION CONTAINER --> 
</div>
<!-- end: HEADER --> 
<!-- start: MAIN CONTAINER -->
<div class="main-container">
  <div class="col-sm-12">
    <?php for($i=1;$i <= 20; $i++){ ?>
    <div class="col-sm-3 alert alert-block alert-info parent">
    <div class="fixed-top-background"></div>
      <h4 class="alert-heading" style="position:absolute; top:8px; left:10px;"><i class="fa fa-info"></i> Table <?php echo $i; ?></h4>
      <div class="panel-tools"> <span class="label label-info" style="font-size:16px;"> <a class="" href="javascript:;" style="width:100%">Elpassed time :<span class="badge">3.00</span> Min</a></span> </div>
    
      <div class="">
        <div class="child">
          <div class="btn-group-vertical" style="width:100%"> <a class="btn btn-red active" href="javascript:;" style="display:none"> Started before <span class="badge">3.00</span> Min </a> <a class="btn btn-green" href="javascript:;" style="display:none"> Took <span class="badge">3.00</span> Min </a> </div>
          <p class="well"> Extra details goes here.... </p>
          <table class="table table-striped table-hover dataTable" id="table_<?php echo $i; ?>">
            <thead>
              <tr role="row">
                <th class=""><i class="fa fa-hashtag"></i></th>
                <th class="">Item</th>
                <th class="">Action</th>
              </tr>
            </thead>
            <tbody role="alert" aria-live="polite" aria-relevant="all">
              <?php for($d=1;$d <= rand(2,15); $d++){ ?>
              <tr class="">
                <td class=""><?php echo $d.'<br>'; ?></td>
                <td class="">Content Designer <?php echo $d.'<br>'; ?></td>
                <td class=""><!--<i class="fa fa-spinner fa-spin"></i>-->
                  <div class="btn"> <a href="" class="btn btn-xs btn-teal tooltips" data-placement="top" data-original-title="Edit"><i class="fa fa-edit"></i></a> <a href="" class="btn btn-xs btn-green tooltips" data-placement="top" data-original-title="Share"><i class="fa fa-share"></i></a> <a href="" class="btn btn-xs btn-bricky tooltips" data-placement="top" data-original-title="Remove"><i class="fa fa-times fa fa-white"></i></a> </div></td>
              </tr>
              <?php } ?>
            </tbody>
          </table>
        </div>
      </div>
      <p class="btn-group btn-group-justified" style="position:absolute; bottom:5px; margin-left: -17px"> <a href="" class="btn btn-bricky btn"> START <i class="fa fa-play"></i> </a> <a href="" class="btn btn-success" style="display: none; visibility: hidden;"> Its Done !! </a> </p>
    </div>
    <?php } ?>
  </div>
</div>
<!-- end: MAIN CONTAINER --> 
<!-- start: FOOTER --> 

<!-- end: FOOTER --> 
<!-- start: RIGHT SIDEBAR --> 
<!-- end: RIGHT SIDEBAR -->
<div id="event-management" class="modal fade" tabindex="-1" data-width="760" style="display: none;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times; </button>
        <h4 class="modal-title">Event Management</h4>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-light-grey"> Close </button>
        <button type="button" class="btn btn-danger remove-event no-display"> <i class='fa fa-trash-o'></i> Delete Event </button>
        <button type='submit' class='btn btn-success save-event'> <i class='fa fa-check'></i> Save </button>
      </div>
    </div>
  </div>
</div>

<!-- start ajax model -->
<div id="ajax-modal" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" style="display: none;"></div>
<!-- end ajax model --> 

<!-- start: MAIN JAVASCRIPTS -->
<?php $this->load->view("common/footer"); ?>
<!-- end: MAIN JAVASCRIPTS --> 
<script type="text/javascript" src="<?php echo asset_url(); ?>js/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="<?php echo asset_url(); ?>js/dataTables.bootstrap.min.js"></script> 
<script>
			jQuery(document).ready(function() {
				//TableData.init();
				loadGrid();
			});


			function loadGrid() {

					    $('#warehouse_table').DataTable({
					        "ajax": "<?php echo base_url('customers/list_customer') ?>",
					        "bDestroy": true,
					        "iDisplayLength": 10,
							 "order": [[ 0, "desc" ]]
					    });

					}
					
jQuery(document).ready(function() {
	
$( "#conirm" ).click(function() {
		var sel_id=$('#sel_id').val(); 
		var popup_type=$('#popup_type').val();
		var page=$('#page').val();
		var cus_id=sel_id;
		
	if(popup_type=='delete'){
			$.post( "customers/delete_customer", {cus_id:cus_id})
		  .done(function( data ) {
		  var obj = jQuery.parseJSON(data);
				loadGrid();// load customer data
				displayNotice('page','Customer has been deleted successfully!')
		  });
	}else if(popup_type=='disable') {
		$.post( "customers/disable_customer", {cus_id:cus_id})
		     .done(function( data ) {
		     var obj = jQuery.parseJSON(data);

			 loadGrid();// load customer data
			 displayNotice('page','Customer has been disabled successfully!')
	   });
	}
	else if(popup_type=='enable') {
		$.post( "customers/enable_customer", {cus_id:cus_id})
		     .done(function( data ) {
		     var obj = jQuery.parseJSON(data);
			 loadGrid();// load customer data
			 displayNotice('page','Customer has been enabled successfully!')
	   });
} //end page check
	
	});

});			

function deleteCustomerData(cus_id){
	$("#myModal4").modal();
	$('#sel_id').val(cus_id); 
	$('#popup_type').val('delete');
	$('#page').val('supp');
	$("#label").text("Are you sure you want to delete this customer?");
}

function disableCustomerData(cus_id){
	$("#myModal4").modal();
	$('#sel_id').val(cus_id); 
	$('#popup_type').val('disable');
	$('#page').val('supp');
	$("#label").text("Are you sure you want to disable this customer?");
}

function enableCustomerData(cus_id){
	$("#myModal4").modal();
	$('#sel_id').val(cus_id); 
	$('#page').val('supp');
	$('#popup_type').val('enable');
	$("#label").text("Are you sure you want to enable this customer?");
}

function click_customer_update_btn(cus_id){		
	var $modal = $('#ajax-modal');
	 $('body').modalmanager('loading');
			setTimeout(function () {
				$modal.load('<?php echo base_url("customers/create_customers?cus_id="); ?>'+cus_id, '', function () {
					$modal.modal();
					$("#country_id").select2();
					/*$(".search-select").select2({
				         placeholder: "Select a State",
				         allowClear: true
				    });*/
				});
			}, 1000);
}
		</script>
</body>
<!-- end: BODY -->
</html>