	<?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("restaurant/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" style="top:23px">
                                                                  <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 id="dragThis">
                        <ul>
                            <li id="posX"></li>
                            <li id="posY"></li>
                        </ul>
                    </div>-->
                    
                </div>
                
            </div>
            
                
            </div>
          <div class="panel panel-default">
              <div class="panel-body">
              
                
                <div class="row">
                    <div class="col-md-9">
                        <div id="dragThis">
<!--  <ul>
    <li id="posX">x: <span></span></li>
    <li id="posY">y: <span></span></li>
    <li id="finalX">Final X: <span></span></li>
    <li id="finalY">Final Y: <span></span></li>
    <li id="width">Width: <span></span></li>
    <li id="height">Height: <span></span></li>
  </ul>-->
</div>
                        <div id="dropHere"></div>
                    </div>
                    <div class="col-md-3">
                        
                    </div>
                    
                    
                    <input type="hidden" name="position" id="position">
                    
                    <script src="<?php echo asset_url(); ?>js/form-validation-create_table.js"></script>
                    <?php 
                      
                    ?>
                    
                    
                </div>
            </div>
          </div>

          </div>
        </div>
      <!-- start grid -->
      
      
      </div>
                </div>
                </div>
                
                
</body>
<style>
#dragThis {
    width: 8em;
    height: 8em;
    padding: 0.5em;
    border: 3px solid #ccc;
    border-radius: 0 1em 1em 1em;
    background-color: #fff;
    background-color: rgba(255,255,255,0.5);
}

#dragThis span {
    float: right;
}

#dragThis span:after {
    content: "px";
}

/*li {
    clear: both;
    border-bottom: 1px solid #ccc;
    line-height: 1.2em;
}*/

#dropHere {
    width: 12em;
    height: 12em;
    padding: 0.5em;
    border: 3px solid #f90;
    border-radius: 1em;
    margin: 0 auto;
}
</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>
    $('#dragThis').draggable(
    {helper: "clone",
//        containment: $('body'),
        drag: function(){
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
            $('#posX > span').text(xPos);
            $('#posY > span').text(yPos);
        },
        stop: function(){
            var finalOffset = $(this).offset();
            var finalxPos = finalOffset.left;
            var finalyPos = finalOffset.top;

            $('#finalX > span').text(finalxPos);
            $('#finalY > span').text(finalyPos);
            $('#width > span').text($(this).width());
            $('#height > span').text($(this).height());
        },
        revert: 'invalid'
    });

$('#dropHere').droppable(
    {
        accept: '#dragThis',
        over : function(){
            $(this).animate({'border-width' : '5px',
                             'border-color' : '#0f0'
                            }, 500);
            $('#dragThis').draggable('option','containment',$(this));
        }
    });
</script>




