	<?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 class="padding_vertical">
                        <div style="height: 50px; width: 50px; border: activecaption solid 1px; border-radius: 60px; background-color: #bcd6e9;z-index: 1111" id="item1" class="item" ref="1"></div>
                    </div>
                    <div class="padding_vertical">
                        <div style="height: 40px; width: 50px; border: activecaption solid 1px; background-color: #bcd6e9;z-index: 1111" id="item3" class="item" ref="2"></div>
                    </div>
                    <div class="padding_vertical">
                        <div style="height: 50px; width: 40px; border: activecaption solid 1px; background-color: #bcd6e9;z-index: 1111" id="item4" class="item" ref="3"></div>
                    </div>
                    <div class="padding_vertical">
                        <div style="height: 45px; width: 45px; border: activecaption solid 1px; background-color: #bcd6e9;z-index: 1111" id="item4" class="item rotate_div" ref="4"></div>
                    </div>
                    <div class="padding_vertical">
                        <div style="height: 50px; width: 40px; border: activecaption solid 1px; background-color: #bcd6e9;z-index: 1111" id="item4" class="item" ref="5">
                            <div style="height: 50px; width: 100px; border: activecaption solid 1px; background-color: #bcd6e9"  ref="4"></div>
                        </div>
                    </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="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 class="panel panel-default">
                                                          <div class="panel-heading"> <i class="fa fa-plus"></i> Table Description </div>
                                                          <div class="panel-body">
                                                              <table id="right_table">
                                                                  <tr>
                                                                      <td>Floor Name :</td>
                                                                      <td><?php echo $floors_info['floor_name'] ?></td>
                                                                  </tr>
                                                                  <?php if(isset($divisions_info['div_name'])){ ?>
                                                                      <tr>
                                                                      <td>Division Name :</td>
                                                                      <td><?php echo $divisions_info['div_name'] ?></td>
                                                                  </tr>
                                                                  <?php } ?>
                                                                  
                                                                  <tr>
                                                                      <td>Total Table :</td>
                                                                      <td><?php echo $table_count['count'] ?></td>
                                                                  </tr>
                                                              </table>
                                                          </div>
                                                      </div>
                    </div>
<!--                    <div id="collapse_info">
                        <a style="right: 2px; top: 0px" id="close_table" class="close_large"></a>
                        <div class="panel-body">
                                                              <table id="right_table_new1">
                                                                  
                                                              </table>
                                                          </div>
                    </div>-->
                    
                    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <!--<span aria-hidden="true">&times;</span>-->
        </button>
      </div>
      <div class="modal-body">
        <table id="right_table_new">
                                                                  
                                                              </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <!--<button type="button" class="btn btn-primary">Save changes</button>-->
      </div>
    </div>
  </div>
</div>
                    
                    <input type="hidden" name="position" id="position">
                    
                    <script src="<?php echo asset_url(); ?>js/form-validation-create_table.js"></script>
                    <?php 
                      
                    ?>
                    
                    <style>
                        .close {
                            float:right !important;
    display:inline-block !important;
    cursor: pointer !important;
  position: relative;
  right: -15px;
  top: -15px;
  width: 15px;
  height: 15px;
  opacity: 0.3;
}

.close_large {
                            float:right !important;
    display:inline-block !important;
    cursor: pointer !important;
  position: relative;
  right: 2px;
  top: 0px;
  width: 23px;
  height: 23px;
  opacity: 0.3;
}
.close:hover , .close_large:hover {
  opacity: 1;
}
.close:before, .close:after ,.close_large:before , .close_large:after {
  position: absolute;
  left: 7px;
  content: ' ';
  height: 14px;
  width: 2px;
  background-color: #333;
}

.close_large:before , .close_large:after {
  position: absolute;
  left: 7px;
  content: ' ';
  height: 26px;
  width: 3px;
  background-color: #333;
}
.close:before ,.close_large:before {
  transform: rotate(45deg);
}
.close:after , .close_large:after {
  transform: rotate(-45deg);
}
                        td{
                            height: 80px;
                            width: 80px;
                            text-align: -webkit-center;
                            
                        }
                        table, th, td {
  border: 1px solid #dddddd00 !important;
  
}
table{
    border-collapse: initial !important;
    border-spacing: 10px;
    /*background: #eaec8e8a;*/
}
#items{
    display: flex;
   align-items: center; 
   
   /*justify-content: center;*/
}
#reserved{
    background-color: #f1d6d6 !important
}
.verticle_align{
    display: flex;
   align-items: center; 
   justify-content: center;
}
.padding_vertical{
    padding-left: 10px;
    padding-right: 10px;
}


#right_table,#right_table_new{
    width: -webkit-fill-available;
    font-size: 13px
}
#t_data{
    font-size: 9px;
}

#collapse_info1{
        position: fixed;
    width: 273px;
    left: 0;
    /*top: 0;*/
        top: 139px;
    height: 700px !important;
    margin: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    height: 100%;
    height: calc(100% + 60px);
    height: -moz-calc(100%);
    padding-bottom: 60px;
    background-color: #f5caca;
    z-index: 999;
    overflow-y: auto;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-105%);
    transform: translateX(548%);
    transition-duration: 0.5s;
}
.rotate_div{
    -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Safari prior 9.0 */
  transform: rotate(45deg);
}
#invention{
    max-width: 750px;
}

#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>
                </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;*/
}
.modal{
    width: auto;
}
@media (min-width: 768px){
.modal-dialog {
    margin: 0px auto;
}}

#right_table_new td{
    height: 0px;
}

#dropHere {
  width: 35em;
  height: 35em;
  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>
    $('document').ready(function(){
        $('#dragThis').draggable({
//  containment: $('body'),
  helper:'clone',
  
  drag: function(event, ui) {
    var offset = $(ui.helper).offset();
    var xPos = offset.left;
    var yPos = offset.top;
    $('#posX > span').text(xPos);
    $('#posY > span').text(yPos);
  },
  stop: function(event, ui) {
    var finalOffset = $(ui.helper).offset();
    var finalxPos = finalOffset.left;
    var finalyPos = finalOffset.top;
    

    $('#finalX > span').text(finalxPos);
    $('#finalY > span').text(finalyPos);
    $('#width > span').text($(ui.helper).width());
    $('#height > span').text($(ui.helper).height());
  },
  revert: 'invalid'
}).data("id", "dragThis");
    
    $('#dropHere').droppable({
  accept: '#dragThis',
  over: function() {
    $(this).animate({
      'border-width': '5px',
      'border-color': '#0f0'
    }, 500);
//    $('#dragThis').draggable('option', 'containment', $(this));
  },
//  drop        : function(event, ui)
//      {
//         var dropedItem = $(ui.draggable).clone();
//         $(this).append($(ui.helper).clone());
////         ui.draggable.clone().attr('id','dropHere');
////            ui.draggable.attr('id','dropHere');
//      }
      drop        : function(event, ui)
      {var ele = $(this);
          var $item = $(ui.helper).clone();
          $(ui.helper).addClass('has-drop');
          $(ui.helper).attr('id','dragThis');
         var dropedItem = $(ui.draggable).clone();
         $(this).append($(ui.helper).clone());
//         ui.draggable.clone().attr('id','dropHere');
//            ui.draggable.attr('id','dropHere');
      }
});
    });
</script>





