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

<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="navbar-content">
				<!-- start: SIDEBAR -->
					<?php $this->load->view("restaurants/navigation"); ?>
				<!-- end: SIDEBAR -->
			</div>
                    <div class="main-content">
                    <div class="container">
					<!-- start: PAGE HEADER -->
					<div class="row">
						<div class="col-sm-12">
							<!-- start: PAGE TITLE & BREADCRUMB -->
							<ol class="breadcrumb">
								<li>
									<i class="clip-home-3"></i>
									<a href="#">
										Restaurant
									</a>
								</li>
								<li class="active">
									Table Management
								</li>
								<li class="search-box">
									<form class="sidebar-search">
										<div class="form-group">
											<input type="text" placeholder="Start Searching...">
											<button class="submit">
												<i class="fa fa-search"></i>
											</button>
										</div>
									</form>
								</li>
							</ol>
							<div class="page-header">
								<h1>Table Management <small>overview &amp; stats </small></h1>
							</div>
							<!-- end: PAGE TITLE & BREADCRUMB -->
						</div>
					</div>
                                              <!-- start: PAGE CONTENT --> 
                                              
                                              <div class="row">
                                                  <div class="col-md-12">
                                                      <div class="panel panel-default">
                                                          <div class="panel-heading"> <i class="fa fa-plus"></i> Table Management </div>
                                                          <div class="panel-body">
                                                              <form id="select_category_form" action="<?php echo base_url()."table_management/" ?>" method="get">
                                                              <?php if(sizeof($floors) > 0){ ?>
                                                              <div class="col-sm-4" id="floor_input">
                                                      	<div class="form-group">
															<label>Floors * </label>
                                                          <select id="floor_id" class="form-control" name="floor_id">
                                                                    <!--<option value="">-- Select Warehouse --</option>-->
																  <?php 
																  
                                                              foreach ($floors as $row)
                                                              {
								$sel='';
								if($row['floor_id']==$floor_id)
								{
								  $sel=' selected="selected"';
								  }
                                                              ?>  
                                                                        
									<option value="<?php echo $row['floor_id']; ?>"<?php echo $sel ?>>
										<?php echo $row['floor_name']; ?>
                                                                        </option>
                                                              <?php }?>
																		
							</select>
                                                             
							</div>
						</div>
                                                              <?php } ?>
                                                              <?php
                                                              $divcss = '';
                                                              if(sizeof($divisions) > 0){ 
                                                                  $divcss = "style='display:unset'";
                                                                }else{
                                                                    $divcss = "style='display:none'";
                                                                } ?>
                                                                  <div class="col-sm-4" id="division_input" <?php echo $divcss ?>>
                                                                  <div class="form-group">
															<label>Divisions * </label>
                                                          <select id="division_id" class="form-control" name="division_id">
                                                                    <!--<option value="">-- Select Warehouse --</option>-->
																  <?php 
																  
                                                              foreach ($divisions as $row)
                                                              {
								  $sel='';
								  if($row['division_id']==$division_id)
								  {
									  $sel=' selected="selected"';
								  }
                                                              ?>  
                                                                        
									<option value="<?php echo $row['division_id']; ?>"<?php echo $sel ?>>
										<?php echo $row['div_name']; ?>
                                                                        </option>
                                                              <?php }?>
																		
							</select>
                                                             
							</div>
						</div>
                                                              
                                                            
                                                                  <div class="col-md-4">
                                                                  <button type="submit" class="btn btn-blue ">Submit</button>
                                                              </div>
                                                              </form>
                                                          </div>
                                                      </div>
                                                  </div>
                                              </div>
                                              <input type="hidden" name="selected_floor_id" id="selected_floor_id" value="<?php echo $floor_id ?>">
                                              <input type="hidden" name="selected_division_id" id="selected_division_id" value="<?php echo $division_id ?>">
                                              
                                              <div class="row">
        <div class="col-md-12"> 
          <!-- start: DYNAMIC TABLE PANEL -->
          <div class="panel panel-default">
            <div class="panel-heading"> <i class="fa fa-plus"></i> Table Management </div>
            <div class="panel-body">
              <div class="alert alert-danger" style="display:none;">
                <button class="close" data-dismiss="alert"> × </button>
                <i class="fa fa-times-circle"></i> <strong></strong> <span class="errortxt"></span> </div>
              <div class="alert alert-success" style="display:none;">
                <button class="close" data-dismiss="alert"> × </button>
                <i class="fa fa-check-circle"></i> <strong></strong><span class="succetxt"></span> </div>
                
                <div class="row" id="items">
<!--                    <div class="col-md-1">
                        <div style="height: 50px; width: 50px; border: activecaption solid " id="item1" class="item">ddd</div>
                    </div>-->
                    <div class="col-md-1">
                        <div style="height: 40px; width: 40px; border: activecaption solid; border-radius: 30px; background-color: graytext" id="item2" class="item"></div>
                    </div>
                    <div class="col-md-1">
                        <div style="height: 30px; width: 50px; border: activecaption solid; background-color: graytext" id="item3" class="item"></div>
                    </div>
                    <div class="col-md-1">
                        <div style="height: 50px; width: 30px; border: activecaption solid; background-color: graytext" id="item4" class="item"></div>
                    </div>
                </div>
                
            </div>
            
                
            </div>
          <div class="panel panel-default">
              <div class="panel-body">
              
                
                <div class="row">
                    <table class="table-bordered" id="invention">
                        <?php
                        $count = 0;
                        for($i = 0; $i <10; $i++){ ?>
                        <tr>
                            <?php for($j = 0; $j<20; $j++){ 
                                $table_data = $this->table_mgmt_model->ge_table_by_position('cell'.$count,$floor_id,$division_id);
//                                print_r($table_data);
                                if(sizeof($table_data) > 0){
                                    if($table_data['table_cat_id'] == 1){ ?>
                            <td id="cell<?php echo $count ?>" class="">
                                            <div style="height: 50px; width: 30px; border: activecaption solid; background-color: graytext"  class="item ui-draggable ui-draggable-handle">
                                                <span id='close' value="<?php echo $table_data['table_id']; ?>" onclick='removechild(this); return false;'>x</span>
                                            </div>
                                        </td>
                                    <?php }else if($table_data['table_cat_id'] == 2){  ?>
                                        <td id="cell<?php echo $count ?>" class="">
                                        <div style="height: 40px; width: 40px; border: activecaption solid; border-radius: 30px; background-color: graytext"  class="item ui-draggable ui-draggable-handle"></div>
                                        </td>
                                    <?php  }else if($table_data['table_cat_id'] == 3){  ?>
                                        <td id="cell<?php echo $count ?>" class="">
                                        <div style="height: 30px; width: 50px; border: activecaption solid; background-color: graytext"  class="item ui-draggable ui-draggable-handle"></div>
                                        </td>
                                    <?php  }else{ ?>
                                        <td id="cell<?php echo $count ?>"></td>
                                    <?php }
                                }else{ ?>
                                    <td id="cell<?php echo $count ?>"></td>
                                <?php }
                                ?>
                            
                            
                            <?php
                            $count++;} ?>
                        </tr>
                        <?php } ?>
                        
                    </table>
                    <input type="hidden" name="position" id="position">
                    <div id="myModal" class="modal " tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
                        <?php 
$config = array('role' =>'form', 'class'=>'form-horizontal','id'=>'create_table_form', 'name'=>'create_table_form');
//echo form_open_multipart("",$config);
?>
                        <form>
    <div class="modal-body">
        

        <div class="row form-group">
            <div class="col-md-12">
                <h5>Table Category *</h5>
                <p>
                        <select class="form-control" name="table_cat" id="table_cat">
                            <?php // foreach ($table_cat as $row){ ?>
                            <option value="1">Small table</option>
                            <option value="2">Large Table</option>
                            <?php // } ?>
                        </select>
                    </p>
                    <h5>Number Of Chairs *</h5>
                    <p>
                    <input type="number" class="form-control" name="num_of_chairs" id="num_of_chairs" value="">
                    </p>
            </div>
        </div>
            
            <script src="<?php echo asset_url(); ?>js/form-validation-create_table.js"></script>
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button type="submit" name="add_table" class="btn btn-primary" >Save changes</button>
    </div>
                        </form>
</div>
                    <a data-toggle="contactAdmin" data-title="help" data-url="http:/www.mydomain.com/some-url" href="#">Contact Web team</a>
                    <style>
                        td{
                            height: 50px;
                            width: 50px;
                            text-align: -webkit-center;
                            
                        }
                        table, th, td {
  border: 1px solid #dddddd73 !important;
  
}
table{
    border-collapse: initial !important;
    border-spacing: 10px;
}
                    </style>
                </div>
            </div>
          </div>

          </div>
        </div>
      <!-- start grid -->
      
      
      </div>
                </div>
                </div>
                
                
</body>
<style>
    
    #close {
    float:right;
    display:inline-block;
    cursor: pointer
    /*padding:2px 5px;*/
    /*background:#ccc;*/
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<link rel="stylesheet" type="text/css" href="<?php echo asset_url(); ?>drag/styles.css" />
<!--<script type="text/javascript" src="<?php echo asset_url(); ?>drag/js/jquery-1.3.2.js" ></script>-->
<!--<script type="text/javascript" src="<?php echo asset_url(); ?>drag/js/jquery-ui-1.7.2.custom.min.js" ></script>-->

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



<script>jQuery(document).ready(function() {
				FormValidator.init();
			});
    $(document).ready(function(){

    //this will hold reference to the tr we have dragged and its helper
    var c = {};

    jQuery("#item1,#item2,#item3,#item4").draggable({
//        revert: function(event, ui) {
//            $(this).droppable('disable');
//            return true;
//        },
            helper: "clone",
            start: function(event, ui) {
                c.tr = this;
                c.helper = ui.helper;
                
//                $('body').modalmanager('loading');
                
            },
            stop: function(e, ui) {
            
          }
    });
//    jQuery(".has-drop #item1").draggable({
//            helper: "clone",
//            start: function(event, ui) {
//                c.tr = this;
//                c.helper = ui.helper;
//            }
//    });
function add_table() {alert('kk');}
$('#invention tr td').droppable({
    
        accept: "#item1,#item2,#item3,#item4",
        activeClass: "ui-state-highlight",
        drop: function(event, ui) {
            
    
    
            var ele = $(this);
            bootbox.dialog({
        title: "Contact admin",
        buttons: {
            close: {
                label: 'Close',
                className: "btn btn-sm btn-danger",
                callback: function () {}
            },
            success: {
                label: "Submit",
                className: "btn btn-sm btn-primary",
                callback: function () {
                    return $("#webteamContactForm").valid();
                }
            }
        },
        message: '<div class="row">    </div>'
    });
//            alert('l');
//            $('.modal-body').load('getContent.php?id=2',function(){
        $('#myModal').modal({show:true});
//    });
//    $(window).on('load',function(){
//        $('#myModal').modal('show');
//    });
    $('#myModal').on('hidden.bs.modal', function() {
                    
                });
//                $('#save_table').click(function(){
function add_tableq() {
                    $('#myModal').modal('hide');
                    
                    var table_id = $("#table_id").val();
            var division_id = $('#selected_division_id').val();
            var floor_id = $('#selected_floor_id').val();
            var num_of_chairs = $('#num_of_chairs').val();
            var table_cat = $('#table_cat').val();
            var position = $('#position').val();
            
            
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
//                    alert('iuiu');
                    var $item = ui.draggable.clone();
            var position = $(this).attr('id');
            $('#position').val(position);
            ele.addClass('has-drop').html($item);
            ele.children(".ui-draggable").append("<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</span>");
//                });
                }
//                

//            alert('l');
                
                
                }
    });
                
//        if(abc() === false) {
//            alert('l');
//            var $item = ui.draggable.clone();
//            var position = $(this).attr('id');
////            alert(position);
//            $('#position').val(position);
//            $(this).addClass('has-drop').html($item);
//            jQuery(this).children(".ui-draggable").append("<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</span>");
//
//            // add child here
//        } else {
//            event.revert = true;
//        }
//        drop: function( event, ui ) {
//            // clone item to retain in original "list"
//            var $item = ui.draggable.clone();
//            var position = $(this).attr('id');
////            alert(position);
//            $('#position').val(position);
//            $(this).addClass('has-drop').html($item);
//            jQuery(this).children(".ui-draggable").append("<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</span>");
//
//
//
//                
////                $('#ajax-modal').on('hidden.bs.modal', function() {
////                    
////                });
//                
        

});

</script>
<script>
    function removechild(elem){
        var table_id = $(elem).attr("value");
//        alert(id);
        $(elem).parents('.ui-draggable').remove();
        $.ajax({
            url : "<?php echo base_url('table_management/delete_table'); ?>",
            type: "POST",
            data : {tableid:table_id},
            success: function(data){
//                alert(event.srcElement.id);
//                obj.remove();
//                console.log(event.srcElement);
                if(data === true){
//                    jQuery(this).parent('ui-draggable').remove();
                    $(this).remove();
                }
            }
        });
    }
</script>
<script>
    $('#floor_id').on('change', function(){
       
       var floor_id = $('#floor_id').val();
//       alert(division_id); 
       $.ajax({
            url : "<?php echo base_url('table_management/get_division_byid'); ?>",
            type: "POST",
            data : {floor_id:floor_id},
            success: function(data){
                var obj = JSON.parse(data);
//                console.log(obj[0].floor_id);
//                alert(obj);
                if(obj.length > 0){
                    $('#division_input').css("display","unset");
                    $('#division_id').empty();
                    for (var i = 0; i < obj.length; i++) {
                        $('#division_id').append('<option value='+obj[i].division_id+'>'+obj[i].div_name+'</option>');
                    }
                }else{
                    $('#division_input').css("display","none");
                    $('#division_id').empty();
                }
                
//                
            }
        });
    });
</script>
<script>
//$('#invention tr td').droppable({
//        accept: "#item1,#item2,#item3,#item4",
//        activeClass: "ui-state-highlight",
//        drop: function(event, ui) {
//            setTimeout(function () {
//                    $modal.load('<?php echo base_url("table_management/add_table"); ?>', '', function () { 
//
//                        $modal.modal();
//                        var $item = ui.draggable.clone();
//                        var position = $(this).attr('id');
//                    });
//                }, 1000);
//                var $item = ui.draggable.clone();
//            var position = $(this).attr('id');
//            $('#position').val(position);
//            $(this).addClass('has-drop').html($item);
//            jQuery(this).children(".ui-draggable").append("<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</span>");
//
////            alert('l');
//                
//                
//                }
//    });
</script>
<script>
$(document).on("click", "[data-toggle=\"contactAdmin\"]", function () {
    bootbox.dialog({
        title: "Contact admin",
        buttons: {
            close: {
                label: 'Close',
                className: "btn btn-sm btn-danger",
                callback: function () {}
            },
            success: {
                label: "Submit",
                className: "btn btn-sm btn-primary",
                callback: function () {
                    return $("#webteamContactForm").valid();
                }
            }
        },
        message: '<div class="row">  ' +
            '<div class="col-md-12"> ' +
            '<form id="webteamContactForm" class="form-horizontal" method="post"> ' +
            '<p>Please get in touch if you wish to delete this content</p>' +
            '<div class="form-group"> ' +
            '<div class="col-md-12"> ' +
            '<textarea id="message" name="message" class="form-control input-md" rows="3" cols="50">This email is to notify you the creator is putting a request for the following item\n\n' + this.attributes.getNamedItem("data-url").value + '\n\n' + '</textarea> ' +
            '<span class="help-block">Feel free to change the message and add more information. Please ensure you always provide the link.</span> </div> ' +
            '</div> ' +
            '<div class="form-group requestTypeGroup"> ' +
            '<label class="col-md-4 control-label" for="requestType">This request is for:</label> ' +
            '<div class="col-md-4"> <div class="radio"> <label for="Edit"> ' +
            '<input type="radio" name="requestType" id="requestType-0" value="Edit"> ' +
            'Editing </label> ' +
            '</div><div class="radio"> <label for="Delete"> ' +
            '<input type="radio" name="requestType" id="requestType-1" value="Delete"> Deletion</label> ' +
            '</div> ' +
            '</div> </div>' +
            '</form> </div>  </div>'
    });
    
    $("#webteamContactForm").validate({
        rules: {
            requestType: {
                required: true
            }
        },
        messages: {
            requestType: {
                required: "Please specify what your request is for",
            }
        },
        highlight: function (a) {
            $(a).closest(".form-group").addClass("has-error");
        },
        unhighlight: function (a) {
            $(a).closest(".form-group").removeClass("has-error");
        },
        errorElement: "span",
        errorClass: "help-blocks",
        errorPlacement: function (error, element) {
            if (element.is(":radio")) {
                error.appendTo(element.parents('.requestTypeGroup'));
            } else { // This is the default behavior 
                error.insertAfter(element);
            }
        },
        submitHandler: function (form) {
            //alert("Submitted!");
            console.log("Submitted!");
            var $form = $(form);
            $form.submit();
        }
    });
    
});
</script>