	<?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: 55px; width: 55px; 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>
                
            </div>
            
                
            </div>
          <div class="panel panel-default">
              <div class="panel-body">
              
                
                <div class="row">
                    <div class="col-md-9">
                        <table class="table-bordered" id="invention">
                        <?php
                        $count = 0;
                        for($i = 0; $i <10; $i++){ ?>
                        <tr>
                            <?php for($j = 0; $j<10; $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){
                                    $paymentDate = strtotime(date("Y-m-d H:i:s"));
                    $contractDateBegin = strtotime($table_data['booking_start']);
                    $contractDateEnd = strtotime($table_data['booking_end']);

                    if($paymentDate > $contractDateBegin && $paymentDate < $contractDateEnd || $table_data['reservation_status'] == 'RES') {
//                        echo "is between";
                        $res = "id=reserved";
                    } else {
//                        echo "NO GO!";
                        $res = "";
                    }
//                                    echo $table_data['booking_start'];
                                    if($table_data['table_cat_id'] == 1){ ?>
                            <td id="cell<?php echo $count ?>" class="dropped">
                                <div  style="height: 55px; width: 55px; border: activecaption solid 1px; border-radius: 60px; background-color: #bcd6e9"  class="item ui-draggable ui-draggable-handle" <?php echo $res ?>>
                                                <!--<span id='close' value="<?php echo $table_data['table_id']; ?>" onclick='removechild(this); return false;'>x</span>-->
                                    <a href="#" class="close" value="<?php echo $table_data['id_of_table']; ?>" onclick='removechild(this); return false;'></a>
                                    <p onclick="table_info(<?php echo $table_data['id_of_table']; ?>)" id="t_data"><?php echo $table_data['description']; ?></p>
                                            </div>
                                        </td>
                                    <?php }else if($table_data['table_cat_id'] == 2){  ?>
                                        <td id="cell<?php echo $count ?>" class="dropped" added="yes">
                                        <div  style="height: 55px; width: 55px; border: activecaption solid 1px;  background-color: #bcd6e9" id="itemN"  class="item" tid="<?php echo $table_data['id_of_table']; ?>" <?php echo $res ?>>
                                        <!--<span id='close' value="<?php echo $table_data['table_id']; ?>" onclick='removechild(this); return false;'>x</span>-->
                                        <a href="#" class="close" value="<?php echo $table_data['id_of_table']; ?>" onclick='removechild(this); return false;'></a>
                                        <p onclick="table_info(<?php echo $table_data['id_of_table']; ?>)" id="t_data"><?php echo 'T '.$table_data['table_name']; ?></p>
                                        <div style="background-color:black;height:15px;width: 15px;border-radius: 10px;font-size: 8px; color:white"><?php echo $table_data['num_of_chairs']; ?></div>
                                        </div>
                                        </td>
                                    <?php  }else if($table_data['table_cat_id'] == 3){  ?>
                                        <td id="cell<?php echo $count ?>" class="dropped" added="yes">
                                        <div  style="height: 55px; width: 55px; border: activecaption solid 1px; background-color: #bcd6e9" id="item3"  class="item ui-draggable ui-draggable-handle" <?php echo $res ?>>
                                        <!--<span id='close' value="<?php echo $table_data['table_id']; ?>" onclick='removechild(this); return false;'>x</span>-->
                                        <a href="#" class="close" value="<?php echo $table_data['id_of_table']; ?>" onclick='removechild(this); return false;'></a>
                                        <p onclick="table_info(<?php echo $table_data['id_of_table']; ?>)" id="t_data"><?php echo $table_data['description']; ?></p>
                                        </div>
                                        </td>
                                        <?php }else if($table_data['table_cat_id'] == 4){ ?>
                                        <td id="cell<?php echo $count ?>" class="dropped" added="yes">
<!--                                        <div  style="height: 50px; width: 40px; border: activecaption solid 1px; background-color: #bcd6e9"  class="item ui-draggable ui-draggable-handle" <?php echo $res ?>>
                                        <span id='close' value="<?php echo $table_data['table_id']; ?>" onclick='removechild(this); return false;'>x</span>
                                        
                                        </div>-->
                                            <div style="height: 55px; width: 55px; border: activecaption solid 1px; background-color: #bcd6e9;z-index: 1111" id="item4" class="item rotate_div" ref="4">
                                                    <a href="#" class="close" value="<?php echo $table_data['id_of_table']; ?>" onclick='removechild(this); return false;'></a>
                                        <p onclick="table_info(<?php echo $table_data['id_of_table']; ?>)" id="t_data"><?php echo $table_data['description']; ?></p>
                            
                        </div>
                                        </td>
                                    <?php  }else if($table_data['table_cat_id'] == 5){ ?>
<!--                                        <td id="cell<?php echo $count ?>" class="dropped" added="yes">
                                        <div  style="height: 50px; width: 40px; border: activecaption solid 1px; background-color: #bcd6e9"  class="item ui-draggable ui-draggable-handle" <?php echo $res ?>>
                                        <span id='close' value="<?php echo $table_data['table_id']; ?>" onclick='removechild(this); return false;'>x</span>
                                        
                                        </div>
                                            <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="3">
                                                    <a href="#" class="close" value="<?php echo $table_data['id_of_table']; ?>" onclick='removechild(this); return false;'></a>
                                        <p onclick="table_info(<?php echo $table_data['id_of_table']; ?>)" id="t_data"><?php echo $table_data['description']; ?></p>
                                                </div>
                            
                        </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>
                    </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 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">
                    <input type="hidden" name="tbid" id="tbid">
                    
                    <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: 0px;
  top: 0px;
  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: 55px;
                            width: 55px;
                            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;
        margin-top: 18px;
    font-weight: 800;
}

#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;
    /*background-color: rgb(176, 108, 45);*/
    background: url("./thems/images/Wood-Tile-1.jpg") repeat; 
}
.ui-state-highlight{
    background: none !important;
}

                    </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;
}
</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;
                var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
                
//                $('body').modalmanager('loading');
                
            }
//            stop: function(e, ui) {
//            
//          }
    });
    var d = {};
    jQuery("#invention tr td").find("#itemN").draggable({
//        revert: function(event, ui) {
//            $(this).droppable('disable');
//            return true;
//        },
//            helper: "clone",
            start: function(event, ui) {
                d.tr = this;
                d.helper = ui.helper;
//                var offset = $(this).offset();
//            var xPos = offset.left;
//            var yPos = offset.top;
                
//                $('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({
    
//    var eleattr  = $(this).attr('added');
//    alert(eleattr);
    
        accept: "#item1,#item2,#item3,#item4,#itemN",
        activeClass: "ui-state-highlight",
        drop: function(event, ui) {
            //triggered element
//            console.log( event.target.id );
console.log( ui.draggable.attr("id") );

            var form1           =   $('#webteamContactForm');
            var form = $(this).closest('form');
            var ele = $(this);
            var position = $(this).attr('id');
//            alert(position);
            $('#position').val(position);
            if(ui.draggable.attr("id") == 'itemN'){
                 $('#tbid').val(ui.draggable.attr("tid"));
                 update_table();
                 
            }else{
                var sel1="";
            var sel2="";
            var sel3="";
            var sel4="";
            //alert(ui.draggable.clone().attr('ref'));
                    var cat = ui.draggable.clone().attr('ref');
                    if(cat == 1){
                        sel1 ="selected=selected";
                    }else if(cat == 2){
                        sel2 ="selected=selected";
                    }else if(cat == 3){
                        sel3 ="selected=selected";
                    }else if(cat == 4){
                        sel4 ="selected=selected";
                    }
//            var $item = ui.draggable.clone();
//                    $(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>");
            bootbox.dialog({
        title: "Table admin",
        buttons: {
            close: {
                label: 'Close',
                className: "btn btn-sm btn-danger",
                callback: function () {}
            },
            success: {
                label: "Submit",
                className: "btn btn-sm btn-primary",
//                type:"submit",
                callback: function () {
                    var $item = ui.draggable.clone();
                    
                    ele.addClass('has-drop').html($item);
            ele.children(".ui-draggable").append("<a class='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'></a>");
                    return example();
                    
                    
//                    var theForm = $(this).closest('form');
//                    alert('ll');
//                    var form           =   $('#create_floor_form');
//                     if($("#webteamContactForm").valid()){
//                         theForm.submit();

//                    return $("#webteamContactForm").valid();
                }
            }
        },
        message: '<div class="">  ' +
            '<div class="col-md-12"> ' +
            '<form action="ggggg"  id="webteamContactForm" class="form-horizontal" method="post"> ' +
            '<p>Please get in touch if you wish to create table</p>' +
            '<div class="form-group"> ' +
            '<div class="col-md-12"> ' +
            
            '<div class="form-group requestTypeGroup"> ' +
            '<h5>Table type *</h5>'+
            '<p>'+
            '<select class="form-control" name="table_name_view" id="table_name_view" >'+
            '<option value="">Select Table Name</option>'+
            '<option value="1">Table 1</option>'+
            '<option value="2">Table 2</option>'+
            '<option value="3">Table 3</option>'+
            '<option value="4">Table 4</option>'+
            '<option value="5">Table 5</option>'+
            '<option value="6">Table 6</option>'+
            '</select>'+
//            '<select class="form-control" name="table_cat" id="table_cat" readonly="readonly">'+
//            '<option value="1"'+sel1+'>type 1</option>'+
//            '<option value="2"'+sel2+'>type 2</option>'+
//            '<option value="3"'+sel3+'>type 3</option>'+
//            '<option value="4"'+sel4+'>type 4</option>'+
//            '</select>'+
            '</p>'+
            '</div>'+
            
            '<div class="form-group requestTypeGroup"> ' +
            '<h5>Number Of Chairs *</h5>'+
            '<p>'+
            '<input type="number" class="form-control" name="num_of_chairs" id="num_of_chairs" value="">'+
            '</p>'+
            '</div>'+
            '</form> </div>  </div>'
    });
    
//    var FormValidator = function () {
//	
//    // function to initiate Validation Sample 1
//    var runValidator1 = function () {
    
    $("#webteamContactForm").validate({
        rules: {
//            requestType: {
//                required: true
//            },
            num_of_chairs:{
                required: true
            },
            table_name_view:{
                required: true
            }
        },
        messages: {
            num_of_chairs: {
                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();
//            save_table();
        }
//        submitHandler: function (form) {
//                    add_floor(form);
//                }
    });
            }
            
    
//    };
//    ;return {
//        //main function to initiate template pages
//        init: function () {
//            runValidator1();
//         }
//    };
//}();

                },
                over: function(event, ui){
            $( "#invention tr td.dropped" ).droppable( "disable" )
        },
    });
            
//  $('#invention tr').find('td').droppable({
//    
////    var eleattr  = $(this).attr('added');
////    alert(eleattr);
//    
//        accept: "#itemN",
//        activeClass: "ui-state-highlight",
//        drop: function(event, ui) {
//            //triggered element
////            console.log( event.target.id );
//            var form1           =   $('#webteamContactForm');
//            var form = $(this).closest('form');
//            var ele = $(this);
//            var position = $(this).attr('id');
//            $('#position').val(position);
//            var sel1="";
//            var sel2="";
//            var sel3="";
//            var sel4="";
//            //alert(ui.draggable.clone().attr('ref'));
//                    var cat = ui.draggable.clone().attr('ref');
//                    if(cat == 1){
//                        sel1 ="selected=selected";
//                    }else if(cat == 2){
//                        sel2 ="selected=selected";
//                    }else if(cat == 3){
//                        sel3 ="selected=selected";
//                    }else if(cat == 4){
//                        sel4 ="selected=selected";
//                    }
////            var $item = ui.draggable.clone();
////                    $(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>");
//            bootbox.dialog({
//        title: "Table admin",
//        buttons: {
//            close: {
//                label: 'Close',
//                className: "btn btn-sm btn-danger",
//                callback: function () {}
//            },
//            success: {
//                label: "Submit",
//                className: "btn btn-sm btn-primary",
////                type:"submit",
//                callback: function () {
//                    var $item = ui.draggable.clone();
//                    
//                    ele.addClass('has-drop').html($item);
//            ele.children(".ui-draggable").append("<a class='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'></a>");
//                    return example();
//                    
////                    var theForm = $(this).closest('form');
////                    alert('ll');
////                    var form           =   $('#create_floor_form');
////                     if($("#webteamContactForm").valid()){
////                         theForm.submit();
//
////                    return $("#webteamContactForm").valid();
//                }
//            }
//        },
//        message: '<div class="">  ' +
//            '<div class="col-md-12"> ' +
//            '<form action="ggggg"  id="webteamContactForm" class="form-horizontal" method="post"> ' +
//            '<p>Please get in touch if you wish to create table</p>' +
//            '<div class="form-group"> ' +
//            '<div class="col-md-12"> ' +
//            
//            '<div class="form-group requestTypeGroup"> ' +
//            '<h5>Table type *</h5>'+
//            '<p>'+
//            '<select class="form-control" name="table_name_view" id="table_name_view" >'+
//            '<option value="">Select Table Name</option>'+
//            '<option value="1">Table 1</option>'+
//            '<option value="2">Table 2</option>'+
//            '<option value="3">Table 3</option>'+
//            '<option value="4">Table 4</option>'+
//            '</select>'+
////            '<select class="form-control" name="table_cat" id="table_cat" readonly="readonly">'+
////            '<option value="1"'+sel1+'>type 1</option>'+
////            '<option value="2"'+sel2+'>type 2</option>'+
////            '<option value="3"'+sel3+'>type 3</option>'+
////            '<option value="4"'+sel4+'>type 4</option>'+
////            '</select>'+
//            '</p>'+
//            '</div>'+
//            
//            '<div class="form-group requestTypeGroup"> ' +
//            '<h5>Number Of Chairs *</h5>'+
//            '<p>'+
//            '<input type="number" class="form-control" name="num_of_chairs" id="num_of_chairs" value="">'+
//            '</p>'+
//            '</div>'+
//            '</form> </div>  </div>'
//    });
//    
////    var FormValidator = function () {
////	
////    // function to initiate Validation Sample 1
////    var runValidator1 = function () {
//    
//    $("#webteamContactForm").validate({
//        rules: {
////            requestType: {
////                required: true
////            },
//            num_of_chairs:{
//                required: true
//            }
//        },
//        messages: {
//            num_of_chairs: {
//                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();
////            save_table();
//        }
////        submitHandler: function (form) {
////                    add_floor(form);
////                }
//    });
//    
////    };
////    ;return {
////        //main function to initiate template pages
////        init: function () {
////            runValidator1();
////         }
////    };
////}();
//
//                },
//                over: function(event, ui){
//            $( "#invention tr td.dropped" ).droppable( "disable" )
//        },
//    });

});

</script>
<script>
function save_table(){
        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();
            
            $.ajax({
            url : "<?php echo base_url('table_management/table_save'); ?>",
            type: "POST",
            data : {division_id:division_id,floor_id:floor_id,num_of_chairs:num_of_chairs,table_cat:table_cat,position:position},
            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>
    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>
    function update_table(){
        var position = $('#position').val();
        var tbid = $('#tbid').val();
        $.ajax({
            url : "<?php echo base_url('table_management/table_update'); ?>",
            type: "POST",
            data : {position:position,tbid:tbid},
            success: function(data){
            }
    });
    }
function example(){
//       alert('kk');
       if($("#webteamContactForm").valid()){
           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();
            var table_name_view = $('#table_name_view').val();
//            alert(table_name_view);
            
            $.ajax({
            url : "<?php echo base_url('table_management/table_save'); ?>",
            type: "POST",
            data : {division_id:division_id,floor_id:floor_id,num_of_chairs:num_of_chairs,table_cat:table_cat,position:position,table_name_view:table_name_view},
            success: function(data){
                
//                alert(event.srcElement.id);
//                obj.remove();
//                console.log(event.srcElement);
                if(data === true){
//                    jQuery(this).parent('ui-draggable').remove();
                    $(this).remove();
                    
                }
            }
        });
       }else{
           return false;
       }
   }    

</script>
<script>
    function table_info(tb_id){
        $.ajax({
            url : "<?php echo base_url('table_management/get_table_byid_ajax'); ?>",
            type: "POST",
            data : {table_id:tb_id},
            success: function(data){
                $('#right_table_new').empty();
                var records = JSON.parse(data);
                if(records.reservation_status == 'RES'){
                    var Status = 'Reserved';
                    $('#right_table_new').append('<tr>'+
                    '<td>Customer : </td>'+
                    '<td>'+records.cus_name+'</td>'+
                '</tr>');
                }else{
                    var Status = 'Not Reserved';
                    
                }
                $('#exampleModalCenter').modal({
                    show: 'false'
                });
//                alert(records.table_id);
//                $('#collapse_info').css('transform' , 'translateX(311%)');
//                $('#collapse_info').css('position' , 'absolute');
                $('#right_table_new').append('<tr>'+
                    '<td>Table Name : </td>'+
                    '<td>'+records.description+'</td>'+
                '</tr>');
        $('#right_table_new').append('<tr>'+
                    '<td>Chairs : </td>'+
                    '<td>'+records.num_of_chairs+'</td>'+
                '</tr>');
        $('#right_table_new').append('<tr>'+
                    '<td>Status : </td>'+
                    '<td>'+Status+'</td>'+
                '</tr>');
            }
    });
    }
</script>
<script>
$('#close_table').on('click', function(){
    $('#collapse_info').css('transform' , 'translateX(548%)');
    $('#collapse_info').css('position' , 'fixed');
    $('#right_table_new').empty();
});
</script>
