	<?php $this->load->view("common/header"); ?>
	<!-- end: HEAD -->
		<!-- start: CSS REQUIRED FOR THIS PAGE ONLY -->
		<link rel="stylesheet" href="<?php echo asset_url(); ?>plugins/fullcalendar/fullcalendar/fullcalendar.css">
		<!-- end: CSS REQUIRED FOR THIS PAGE ONLY -->

	<!-- end: HEAD -->
	<!-- start: BODY -->
	<body>
		<!-- start: HEADER -->
		<div class="navbar navbar-inverse navbar-fixed-top">
			<!-- start: TOP NAVIGATION CONTAINER -->
			<div class="container">
				<div class="navbar-header">
					<!-- start: RESPONSIVE MENU TOGGLER -->
					<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
						<span class="clip-list-2"></span>
					</button>
					<!-- end: RESPONSIVE MENU TOGGLER -->
					<!-- start: LOGO -->
					<?php $this->load->view("common/logo"); ?>
					<!-- end: LOGO -->
				</div>
				<div class="navbar-tools">
					<!-- start: TOP NAVIGATION MENU -->
				<?php $this->load->view("common/notifications.php"); ?>
					<!-- end: TOP NAVIGATION MENU -->
				</div>
			</div>
			<!-- end: TOP NAVIGATION CONTAINER -->
		</div>
		<!-- end: HEADER -->
		<!-- start: MAIN CONTAINER -->
		<div class="main-container">
			<div class="navbar-content">
				<!-- start: SIDEBAR -->
					<?php $this->load->view("restaurants/navigation"); ?>
				<!-- end: SIDEBAR -->
			</div>
			<!-- start: PAGE -->
			<div class="main-content">
				<!-- start: PANEL CONFIGURATION MODAL FORM -->
				<div class="modal fade" id="panel-config" tabindex="-1" role="dialog" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
									&times;
								</button>
								<h4 class="modal-title">Panel Configuration</h4>
							</div>
							<div class="modal-body">
								Here will be a configuration form
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">
									Close
								</button>
								<button type="button" class="btn btn-primary">
									Save changes
								</button>
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
					<!-- /.modal-dialog -->
				</div>
				<!-- /.modal -->
				<!-- end: SPANEL CONFIGURATION MODAL FORM -->
				<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 --> 
      <!-- start grid -->
      
      <div class="row">
        <div class="col-md-12"> 
          <!-- start: DYNAMIC TABLE PANEL -->
          <div class="panel panel-default">
            <div class="panel-heading"> <i class="fa fa-plus"></i> Table Management </div>
            <div class="panel-body">
              <div class="alert alert-danger" style="display:none;">
                <button class="close" data-dismiss="alert"> × </button>
                <i class="fa fa-times-circle"></i> <strong></strong> <span class="errortxt"></span> </div>
              <div class="alert alert-success" style="display:none;">
                <button class="close" data-dismiss="alert"> × </button>
                <i class="fa fa-check-circle"></i> <strong></strong><span class="succetxt"></span> </div>
                
                <div class="row" id="items">
                    <div class="col-md-1">
                        <div style="height: 50px; width: 50px; border: activecaption solid " id="item1" class="item">ddd</div>
                    </div>
                    <div class="col-md-1">
                        <div style="height: 40px; width: 40px; border: activecaption solid; border-radius: 30px; background-color: graytext" id="item2" class="item"></div>
                    </div>
                    <div class="col-md-1">
                        <div style="height: 30px; width: 50px; border: activecaption solid; background-color: graytext" id="item3" class="item"></div>
                    </div>
                    <div class="col-md-1">
                        <div style="height: 50px; width: 30px; border: activecaption solid; background-color: graytext" id="item4" class="item"></div>
                    </div>
                </div>
                
            </div>
            
                
            </div>
          <div class="panel panel-default">
              <div class="panel-body">
              
                
                <div class="row">
                    <table class="table-bordered" id="invention">
                        <?php for($i = 0; $i <30; $i++){ ?>
                        <tr>
                            <?php for($j = 0; $j<20; $j++){ ?>
                            <td id="cell<?php echo $j ?>"></td>
                            <?php } ?>
                        </tr>
                        <?php } ?>
                        
                    </table>
                    <style>
                        td{
                            height: 50px;
                            width: 50px;
                            text-align: -webkit-center
                        }
                    </style>
                </div>
            </div>
          </div>

          </div>
        </div>
      </div>
					
					

					
			</div>
			<!-- end: PAGE -->
		</div>
		<!-- end: MAIN CONTAINER -->
		<!-- start: FOOTER --><!-- end: FOOTER -->
		
		<!-- start: MAIN JAVASCRIPTS -->
		<?php // $this->load->view("common/footer"); ?>
                <?php  $this->load->view("common/footer"); ?>
		<!-- end: MAIN JAVASCRIPTS -->
		<!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
		<!--<script src="<?php echo asset_url(); ?>plugins/jquery.sparkline/jquery.sparkline.js"></script>-->
		<!--<script src="<?php echo asset_url(); ?>plugins/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>-->
                <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>-->
		<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<?php 

//echo "<pre>"; print_r($current_month_best_sales);
//echo date("m",strtotime("-1 month"));
//?><link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <!--<link rel="stylesheet" href="/resources/demos/style.css">-->

		<!--<script src="<?php echo asset_url(); ?>js/highcharts.js"></script>-->
                <!--<script src="https://code.jquery.com/jquery-1.12.4.js"></script>-->
  <!--<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>-->
<!--                <script>
                    ;(function($,undefined){
    // set up background images
    $('.item').each(function(i,o){
        $(o).css('background-image', 'url(' + $(o).data('src') + ')');
    });
    $('')
    
    
    $('.item').draggable({
        cancel: "a.ui-icon", // clicking an icon won't initiate dragging
        //revert: "invalid", // when not dropped, the item will revert back to its initial position
        revert: true, // bounce back when dropped
        helper: "clone", // create "copy" with original properties, but not a true clone
        cursor: "move"
        , revertDuration: 0 // immediate snap
    });
    
//    var $container;
$('#cell0').droppable({
        accept: "#items .item",
        activeClass: "ui-state-highlight",
        drop: function( event, ui ) {
            // clone item to retain in original "list"
            var $item = ui.draggable.clone();

            $(this).addClass('has-drop').html($item);

        }
    });
    
//    var $container;
//    $('#cell0').droppable({
//        accept: "#items .item",
//        activeClass: "ui-state-highlight",
//        drop: function( event, ui ) {
//            // clone item to retain in original "list"
//            var $item = ui.draggable.clone();
//
//            $(this).addClass('has-drop').html($item);
//
//        }
//    });
})(jQuery);
                </script>-->
                <!--<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>-->
<!--<link rel="stylesheet" type="text/css" href="<?php echo asset_url(); ?>drag/styles.css" />-->
                
                <script type="text/javascript" >
$(function(){
//	$('.dragbox')
//	.each(function(){
//		$(this).hover(function(){
//			$(this).find('h2').addClass('collapse');
//		}, function(){
//			$(this).find('h2').removeClass('collapse');
//		})
//		.find('h2').hover(function(){
//			$(this).find('.configure').css('visibility', 'visible');
//		}, function(){
//			$(this).find('.configure').css('visibility', 'hidden');
//		})
//		.click(function(){
//			$(this).siblings('.dragbox-content').toggle();
//		})
//		.end()
//		.find('.configure').css('visibility', 'hidden');
//	});
//	$('.column').sortable({
//		connectWith: '.column',
//		handle: 'h2',
//		cursor: 'move',
//		placeholder: 'placeholder',
//		forcePlaceholderSize: true,
//		opacity: 0.4,
//                beforeStop: function( event, ui ) {
//                    
//                },
//		stop: function(event, ui){
//			$(ui.item).find('h2').click();
//			var sortorder='';
//			$('.column').each(function(){
//				var itemorder=$(this).sortable('toArray');
//				var columnId=$(this).attr('id');
//				sortorder+=columnId+'='+itemorder.toString()+'&';
//			});
////			alert('SortOrder: '+sortorder);
//			/*Pass sortorder variable to server using ajax to save state*/
//		}
//	})
//	.disableSelection();
});
</script>
		

	<!--</body>-->
	<!-- end: BODY -->
<!--</html>-->	
		<!-- start: FOOTER --><!-- end: FOOTER -->
		
		<!-- start: MAIN JAVASCRIPTS -->
		<!-- end: MAIN JAVASCRIPTS -->
		<!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
		<!--<script src="<?php echo asset_url(); ?>plugins/jquery.sparkline/jquery.sparkline.js"></script>-->
		<!--<script src="<?php echo asset_url(); ?>plugins/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>-->
                <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>-->
		<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<!--<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">-->
  <!--<link rel="stylesheet" href="/resources/demos/style.css">-->

		<!--<script src="<?php echo asset_url(); ?>js/highcharts.js"></script>-->
                <!--<script src="https://code.jquery.com/jquery-1.12.4.js"></script>-->
  <!--<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>-->
                
                <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>
<link rel="stylesheet" type="text/css" href="<?php echo asset_url(); ?>drag/styles.css" />
                
                <script type="text/javascript" >
$(function(){
//	$('.dragbox')
//	.each(function(){
//		$(this).hover(function(){
//			$(this).find('h2').addClass('collapse');
//		}, function(){
//			$(this).find('h2').removeClass('collapse');
//		})
//		.find('h2').hover(function(){
//			$(this).find('.configure').css('visibility', 'visible');
//		}, function(){
//			$(this).find('.configure').css('visibility', 'hidden');
//		})
//		.click(function(){
//			$(this).siblings('.dragbox-content').toggle();
//		})
//		.end()
//		.find('.configure').css('visibility', 'hidden');
//	});
	
});
</script>
<script>
    $(document).ready(function(){

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

    $("#item1,#item2,#item3,#item4").draggable({
            helper: "clone",
            start: function(event, ui) {
                c.tr = this;
                c.helper = ui.helper;
            }
    });
    $(".has-drop#item1,.has-drop#item2,.has-drop#item3,.has-drop#item4").draggable({
            helper: "clone",
            start: function(event, ui) {
                c.tr = this;
                c.helper = ui.helper;
            }
    });


//    $("#invention tr").droppable({
//        drop: function(event, ui) {
//            var inventor = ui.draggable;
//            alert(inventor);
//            $(this).find("td").val(inventor);
//
//            $(c.tr).remove();
//            $(c.helper).remove();
//        }
//    });
//$("#invention tr #cell").droppable({
//                 accept: ".block",
//                 activeClass: 'droppable-active',
//                 hoverClass: 'droppable-hover',
//                 drop: function(ev, ui) { 
//                     console.dir(ui.draggable);
//                 }
//});
$('#invention tr td').droppable({
        accept: "#item1,#item2,#item3,#item4",
        activeClass: "ui-state-highlight",
        drop: function( event, ui ) {
            // clone item to retain in original "list"
            var $item = ui.draggable.clone();
//            alert($(event.target).attr("id"));

            $(this).addClass('has-drop').html($item);

        }
    });

});
</script>
		

	</body>
	<!-- end: BODY -->
</html>