<?php $this->load->view("restaurant/common/header"); ?>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<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;
}*/

.parent {
	/*height: 100%;
	width: 100%;*/
	overflow: hidden;
}
.child {
	/*width: 100%;
	height: 100%;*/
	height: 500px;
	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: -17px;
}
.fixed-top-background{
	background-color:#FFF;
	height:50px;
	margin-top:-12px;
	margin-left:-10px;
	}
.panel-tools{
	right:18px;
	}
.need-space-5{
	padding:5px;
	}
</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">
 <!-- print_r($data['chef_name_list']);-->
 <input type="hidden" id="nofc" name="nofc" value= "<?php echo sizeof($chef_name_list) ?> ">
    
    <?php //for($i=1;$i <= 20; $i++){ ?>
   <?php foreach ( $chef_name_list  as $key => $row){?>
   
    <div class="col-sm-3 alert alert-block alert-info parent parent-grid">
    <div class="fixed-top-background"></div>
      <h4 class="alert-heading" style="position:absolute; top:8px; left:10px;"><i class="fa fa-info"></i>  <?php echo $row->chef_Fname; ?></h4>
      <div class="panel-tools"> <span class="label label-info" style="font-size:16px;"> <a class="" href="javascript:;" style="width:100%;cursor:default;">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"> Extraaaaa details goes here.... </p>
          <table class="table table-striped table-hover dataTable" ref=<?php echo $row->chef_id;  ?> id="chef_add_item_table<?php echo $key ?>">
            <thead>
              <tr role="row">
                <!--<th class="col-xs-1"><i class="fa fa-hashtag"></i></th>-->
                <th class="col-xs-2">Item</th>
                <th class="col-xs-1">qty</th>
                <th class="col-xs-1">Time</th>
              
                
                <th class="col-xs-1">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=""><span class="timer">0.00</span></td>
                <td class=""><!--<i class="fa fa-spinner fa-spin"></i>-->
              <!-- <a class="btn btnA-bricky" href="#"><i class="fa fa-times fa fa-white"></i></a>-->
                  <?php /*?><div class="visible-md visible-lg hidden-sm hidden-xs"> <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><?php */?></td>
              </tr>
              
              <?php } ?>
              <?php// } ?>
              
              
            </tbody>
          </table>
        </div>
      </div>
      
      
      <p class="btn-group btn-group-justified" style="position:absolute; bottom:5px; left:0px;">
                    <a id="cbtn_table_avalable_status" class="btn btn-warning" href=""><i class="fa fa-lock"></i> | Freeze </a>
                    <a id="cbtn_complete" class="btn btn-green" href=""><i class="fa fa-arrow-circle-right"></i></a>
                    <a id="cbtn_clean_items" class="btn btn-blue" href=""><i class="fa fa-arrow-circle-up"></i></a>
                    <!--<a id="table_avalable_status_toggle_btn" class="btn btn-dark-grey" href=""><i class="fa fa-arrow-circle-down"></i></a>-->
	  </p>
      
      <p class="btn-group btn-group-justified" style="position:absolute; bottom:5px; margin-left: -17px; display:none">
      	<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 --> 
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-hidden="true">

				<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">Category info</h4>

					</div>

					<div class="modal-body">

						<p>

							Do you want to cook this item ?

						</p>

					</div>

					<div class="modal-footer">

						<button aria-hidden="true" data-dismiss="modal" class="btn btn-default">

							Close

						</button>

						<button class="btn btn-default" data-dismiss="modal" id="conf" sale-id="" status="" product_id="">

							Confirm

						</button>

					</div>

				</div>

		</div>

<!-- 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> 
<?php /*?><script type="text/javascript" src="<?php echo asset_url(); ?>js/accounting.js"></script> 
<script type="text/javascript" src="<?php echo asset_url(); ?>js/accounting.min.js"></script><?php */?>

<!--<script type="text/javascript" src="<?php// echo asset_url(); ?>plugins/timer/timer.jquery.min.js"></script>-->

<script>
jQuery(document).ready(function() {
	//TableData.init();
	loadGrid();
});

//$('.timer').timer();


			function loadGrid() {
				  var nofc=$('#nofc').val();
				  for(i=1;i <= nofc; i++)  {
					  var j = i-1;
					 // alert("dfdfg");
					  $('#chef_add_item_table'+j).DataTable({
							
					         "ajax": "<?php echo base_url('chef/load_order_items_chef?chef_id=') ?>"+$('#chef_add_item_table'+j).attr('ref'),
					        "bDestroy": true,
							"bLength":false,
							"bPaginate":false,
							"bFilter":false,
					        "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?");
}




//load_orderd_items_by_chef(34);
//function load_orderd_items_by_chef(chef_id){
	
//$.ajax({
    // type: "POST",
     //url:  "<?php  echo base_url('chef/load_order_items_chef?chef_id=') ?>"+chef_id,
     //data: "check",
     //success: function(response){
       // loadGrid(response);
    // }
//});

			function change_status(sale_id,item_status,product_id) {


                //alert('sdfghj');
	            $("#myModal3").modal();

	            $("button#conf").attr("sale-id",sale_id);

	            $("button#conf").attr("status",item_status);
				$("button#conf").attr("product_id",product_id);



			}





			jQuery("button#conf").click(function() {



				$.ajax({

				    url : "<?php echo base_url('chef/category_change_status'); ?>",

				    type: "POST",

				    data : {sale_id:$(this).attr("sale-id"),item_status:$(this).attr("status"),product_id:$(this).attr("product_id")},

				    success: function(data)

				    { 
					loadGrid();

                            var obj = jQuery.parseJSON(data);

                            if (obj.item_status=='Pending') 

                                {

                                    $('div#error').html('<div class="alert alert-block alert-danger fade in"><button type="button" class="close" data-dismiss="alert">×</button><h4 class="alert-heading"><i class="fa fa-times-circle"></i> Error!</h4>'+obj.validation+'</div>');

                                    $('body').modalmanager('removeLoading');

                                } 

                                else

                                {

                                    $('body').modalmanager('removeLoading');

                                    $('div#ajax-modal').modal('hide');

                                    set_message('categories notice!','Category status changed successfully');

                                   // category_load();

                                };

				    }

    			});



			});



//}

		</script>
        <script>
        var $dOut = $('#date'),
    $hOut = $('#hours'),
    $mOut = $('#minutes'),
    $sOut = $('#seconds'),
    $ampmOut = $('#ampm');
var months = [
  'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
];

var days = [
  'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'
];

function update(){
  var date = new Date();
  
  var ampm = date.getHours() < 12
             ? 'AM'
             : 'PM';
  
  var hours = date.getHours() == 0
              ? 12
              : date.getHours() > 12
                ? date.getHours() - 12
                : date.getHours();
  
  var minutes = date.getMinutes() < 10 
                ? '0' + date.getMinutes() 
                : date.getMinutes();
  
  var seconds = date.getSeconds() < 10 
                ? '0' + date.getSeconds() 
                : date.getSeconds();
  
  var dayOfWeek = days[date.getDay()];
  var month = months[date.getMonth()];
  var day = date.getDate();
  var year = date.getFullYear();
  
  var dateString = dayOfWeek + ', ' + month + ' ' + day + ', ' + year;
  
  $dOut.text(dateString);
  $hOut.text(hours);
  $mOut.text(minutes);
  $sOut.text(seconds);
  $ampmOut.text(ampm);
} 

update();
window.setInterval(update, 1000);
        </script>
</body>
<!-- end: BODY -->
</html>