	<?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 rotate_div" 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-sm-12" id="draggable1">
                          <div class="row">
                            <div id="signer-1" class="col-sm-6 col-sm-6 dragMe dragSigners" data-signer-id="1" data-document-id="1">
                              <span>First</span>
                              <span class="closeIt hideIt">x</span>
                            </div>
                            
                            <div id="signer-2" class="col-sm-6 col-sm-6 dragMe dragSigners" data-signer-id="2" data-document-id="1">
                              <span>second</span>
                              <span class="closeIt hideIt">x</span>
                            </div>
                          </div>
                      </div>
                    <div class="col-xs-12 col-sm-12">
                        <div class='document-reader' id="document-reader">
                          <div id='draggable-signature' class="fixed">
                            <!--<img src="http://s24.postimg.org/8mwl7v1ud/image.png">-->
                            <div class="page-number">1</div>
                            
                            <!--<img src="http://s24.postimg.org/8mwl7v1ud/image.png">-->
                            <div class="page-number">2</div>
                            
                            <!--<img src="http://s24.postimg.org/8mwl7v1ud/image.png">-->
                            <div class="page-number">2</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>
                        .navbar .btn, .navbar .btn-group {
    margin-top: 12px;
}

body{
    background: #EEE;   
}

header, .navbar-default{
    background: #FFF;
}

header{
    border-bottom: 2px solid #CCC;
}

.navbar-default{
    border: 0px;
}
/* end nav and body section every page*/



/*heading section every page*/
.headerbox {
    background-color: #EFEBFC;
    border: solid #E0DEDE 1px;
    color: #0C002E;
}

.bodybox {
    background-color: white;
    border: solid #E0DEDE 1px;
}
/* end heading section every page*/




/* button color */
.navbtnstyle {
    background-color: #24246B;
    color: white;
}
a.navbtnstyle:hover{color: white;}

.btnaddmore {
    background-color: #55555E;
    color: white;
}
a.btnaddmore:link{color: white;}
a.btnaddmore:hover{color: white;}
a.btnaddmore:visited{color:white;} 
a.btnaddmore:active{color: white;}


.btncancel {
    background-color: #31317A;
    color: white;
}
a.btncancel:link{color: white;}
a.btncancel:hover{color: white;}
a.btncancel:visited{color:white;} 
a.btncancel:active{color: white;}

.btnsave {
    background-color: #0E0E2B;
    color: white;
}
input.btnsave:hover {
    background: transparent;
    background-color: #0E0E2B;
    color: white;  
}

.btnloginsave {
    background-color: #31317A;
    color: white;
}
input.btnloginsave:hover {
    background: transparent;
    background-color: #31317A;
    color: white;  
}

.signinlink {
    color: #31317A;
}
a.signinlink:link{color: #31317A;}
a.signinlink:hover{color: #31317A;}
a.signinlink:visited{color:#31317A;} 
a.signinlink:active{color: #31317A;}
/* end button color */







/* errors in view page */
#error_explanation{
    border: 1px solid red;
    background-color: #FFDFDF;
    margin-bottom: 10px;
    padding: 5px 10px;
}

#error_explanation h2{
    font-size: 14px;
    font-weight: bold;
}

#error_explanation ul, #error_explanation li{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    color: red;
    font-size: 13px;
}

.error{
    color: red;
}
/* end errors in view page */




/*sortable drag drop*/
#sortable1, #sortable2 {
    border: 1px solid #eee;
    width: 142px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
}

#sortable1 li, #sortable2 li {
    margin: 0 5px 5px 5px;
    padding: 5px 15px;
    font-size: 1.2em;
    width: 120px;
    background: #2E2E33;
    color: #FFF;
    text-align: center;
    border-radius: 5px;
}

#ajax_loader_big_div {
    display:none;
    height:auto;
    left:35%;
    position:fixed;
    top:40%;
    z-index:999999999999;
    padding: 10px 30px;
    background: #F1F1F1;
    border: 1px solid #111;
}


/*end sortable drag drop*/





/*responsive iframe*/
#signthis-document-viewer{
    width: 100%;
    height: 600px;
}

.document-reader img{
    border: 1px solid #CCC;
}
.page-number{
    margin-bottom: 20px;
}

.dragSigners, .dragMe{
    margin: 5px;
    padding: 5px;
    background: #2E2E33;
    color: #FFF;
    text-align: center;
    border-radius: 3px;
    cursor: move;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 12px;
}
.dragSigners{
    z-index: 999;
}
.dragMe{
    position: relative;
}
.closeIt{
    background: #FFF;
    color: #111;
    padding: 0 2px;
    cursor: pointer;
}
/*end responsive iframe*/

/*table rows color*/
.even{background-color: #F5F5F5;}
/*end table rows color*/

.error{
    color: red;
    font-size: 12px;
}

#handwriting_scroll {
    height: 100px;
    position: relative;
    overflow: auto;
}

.signature-section{
    border-left: 1px solid blue;
    border-top: 1px solid blue;
    border-bottom: 1px solid blue;
    border-radius: 5px;
    padding: 5px;
}
.signature-section img{
    max-width: 75px;
}

.main-wrapper{
    max-height: 600px;
    overflow: auto;
}

.sidebar{
    position: fixed;
}

.document-content{
    position: relative;
    left: 325px;
}
.drop-area {
    background-color:#afd1b2;
}
.hideIt {
    visibility: hidden;
}
                        
                        
                        
                        
                        
                        
                        
                        .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_info{
        position: fixed;
    width: 297px;
    left: 0;
    top: 0;
        top: 53px;
    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;
}*/
#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;
}

                    </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();
			});
                        
                          $(function(){
    DragSigner();
    DragMe();
  })

  //remove the dragsigner when click on close icon
  $(document).on("click", ".closeIt", function(){
    var parent = $(this).parent();
    parent.remove();
  });

function DragSigner(){

    $(".dragSigners").draggable({
      helper: 'clone',
      cursor: 'move',
      tolerance: 'fit',
      revert: true 
    });

    $("#document-reader").droppable({
      accept: '.dragSigners',
      activeClass: "drop-area",

      drop: function(e, ui) {
        dragEl = ui.helper.clone();
        ui.helper.remove();

        document_id   = dragEl.data("document-id");
        signer_id     = dragEl.data("signer-id");
        stopPosition  = ui.draggable.position();

        console.log(stopPosition)
        // debug current dropped position
        // this position is always (0, 0) OR (-5,-5)
        alert("top: " + stopPosition.top + ", left: " + stopPosition.left); 
        dragEl.data("signer-id", signer_id);

        dragEl.draggable({
          helper: 'original',
          cursor: 'move',
          tolerance: 'fit',
          drop: function (event, ui) {
            $(ui.draggable).remove();
          }
        });

        // append element to #document-reader
        dragEl.addClass("dragMe");
        dragEl.removeClass("dragSigners col-sm-6 parent");
        dragEl.find("span.closeIt").removeClass("hideIt");
        dragEl.appendTo('#document-reader');

        // update draged element position to database
        // updateDraggedPosition(dragEl, stopPosition, document_id, signer_id)

        // activate dragging for cloned element
        DragMe();
      }
    });
  }



  function DragMe(){
    var document_id;
    $(".dragMe").draggable({
      containment: "#document-reader",
      cursor: 'move',
      // opacity: 0.35,
      stack: $('#document-reader'),
      scroll: false,
      appendTo: $("#document-reader"),
      start: function(event, ui) {
        startPosition = $(this).position();
      },
      stop: function(event, ui) {
        dragEl        = $(this);
        stopPosition  = dragEl.position();
        document_id   = dragEl.data("document-id");
        signer_id     = dragEl.data("signer-id");
        
        // debug current dropped position
        // this position is working perfectly fine.
        // above drag, drop and clone position should behave like this
        alert("top: " + stopPosition.top + ", left: " + stopPosition.left); 
          
        console.log(dragEl.hasClass("parent"))
        if(!dragEl.hasClass("parent")){
         // updateDraggedPosition(dragEl, stopPosition, document_id, signer_id)
        }
      }
    });
  }

  // this function is simply for updating required fields to database
  // please ignore this for now
  function updateDraggedPosition(dragEl, stopPosition, document_id, signer_id){
    $.ajax({
      url: '/signers/drag_signer',
      data: {
        drag_signer: {
          top: stopPosition.top,
          left: stopPosition.left,
          signer_id: signer_id,
          document_id: document_id,
          id: dragEl.data("id")
        }
      },
      type: "POST",
      dataType: "script",
      success: function(data) {
        console.log(dragged_signer_id);
        console.log(dragEl);
        dragEl.data("id", dragged_signer_id);
      }
    })
  }
    

</script>

