<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
  <!-- Morris chart -->
  <link rel="stylesheet" href="bower_components/morris.js/morris.css">
  <!-- jvectormap -->
  <link rel="stylesheet" href="bower_components/jvectormap/jquery-jvectormap.css">
  <!-- Date Picker -->
  <link rel="stylesheet" href="bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css">
  <!-- bootstrap wysihtml5 - text editor -->
  <link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
  <link href='    https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
  <link href=' https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css' rel='stylesheet'>

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
  $.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.7 -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->

<!-- Sparkline -->
<script src="bower_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="bower_components/jquery-knob/dist/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="bower_components/moment/min/moment.min.js"></script>
<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<!--<script src="dist/js/pages/dashboard.js"></script>-->
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<script src="../vendor/datatables/jquery.dataTables.js"></script>
    <script src="../vendor/datatables/dataTables.bootstrap4.js"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <?php include("header.php");?>
  <!-- Left side column. contains the logo and sidebar -->
  <aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <?php include("sidebar.php");?>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
  

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-md-12">
          <!-- Custom Tabs -->
          <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                 <li class="active"><a href="#tab_11" data-toggle="tab">View Hotel</a></li>
<!--              <li><a href="#tab_21" data-toggle="tab">View Hotel</a></li>-->
              <li class="rm"><a href="#tab_1" data-toggle="tab">View Rooms</a></li>
<!--              <li><a href="#tab_2" data-toggle="tab">View Rooms</a></li>-->
            
             
             
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab_11">
                    <button class='btn btn-primary' id='get_hotels'>Refresh</button>
                    <br>
                    <div id='hotels_div'></div>
              </div>
               <div class="tab-pane" id="tab_21">
                 
              </div>
                
              <div class="tab-pane " id="tab_1">
                Select Hotel:  <input type="text" id='rooms'>
                <br>
                <div id='rooms_div'></div>
              </div>
            
              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_2">
                 
              </div>
              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_3">
               
              </div>
              <!-- /.tab-pane -->
            </div>
            <!-- /.tab-content -->
          </div>
          <!-- nav-tabs-custom -->
        </div>
            
            
        </div>
        
        
        
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
 
  <!-- /.control-sidebar -->
  <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- jQuery 3 -->

</body>
</html>
<script src="jquery-ui.js"></script>
<link href='jquery-ui.css' rel='stylesheet'>
<script src='chosen.jquery.js'></script>

<link href='chosen.css' rel='stylesheet'>
<script>

    var $input = $("#rooms").autocomplete({
    /* select: function (event, ui) {
     var value = ui.item.name
     //ac_name=$("#acc_name_val").val();   
     member_id=ui.item.value;
     }, */
    select: function (event, ui) {
    $("#rooms").val(ui.item.label); //ui.item is your object from the array
   hotel_id=ui.item.value;
   
  get_rooms(hotel_id);
    return false;
    }, selectFirst: true,
            change: function (event, ui) {
            if (ui.item == null) {
            //here is null if entered value is not match in suggestion list
            $(this).val((ui.item ? ui.item.id : ""));
            }
            },
            response: function (event, ui) {
            if (!ui.content.length) {
            var noResult = {value: "", label: "No results found"};
            ui.content.push(noResult);
            }
            },
            // source: "car_model.php",
//            source: [
//                       
//                               
//                               
//                                {
//                                  label: "c",
//                            value: "c",
//                                },
//                         
//                            ],
            source: function( request, response ) {
        $.ajax({
          url: "get_room_admin.php",
          type:"POST",
          dataType: "json",
          data: {
            q: request.term
          },
          success: function( data ) {
            response( data );
          }
        });
      },
            minLength: 0,
    });
    $("<button class='align' type='button'>&nbsp;</button>")
            .attr("tabIndex", - 1)
            .attr("title", "Show All Items")
            .insertAfter($input)
            .button({
            icons: {
            primary: "ui-icon-triangle-1-s"
            },
                    text: false
            })
            .removeClass("ui-corner-all")
            .addClass("ui-corner-right ui-button-icon")
            .click(function () {
            // close if already visible                        
            if ($input.autocomplete("widget").is(":visible")) {
            $input.autocomplete("close");
            return;
            }
            $(this).blur();
            $input.autocomplete("search", "");
            $input.focus();
            });
     $("span.ui-dialog-title").text('My New Title');

</script>
<script>
    function  get_hotels_admin(){
          $.ajax({
   url:"get_hotels_admin.php" ,
  
   type:"POST",
   dataType:"JSON",
  
   success:function(data1){
       var data=data1.data;
       var html="";
       html=html+"<table class='table' id='table1'>"
       +"<thead><tr><th>Sl No</th><th>Hotel Name</th><th>Address</th><th>City</th><th>Star</th><th>Created On</th><th>Action</th></tr></thead><tbody>";
    var k=1;  
    for(var i=0;i<data.length;i++){
           html=html+"<tr><td>"+ k++ +"</td>"
     +"<td>"+ data[i].hotel_name +"</td>"   
     +"<td>"+ data[i].address +"</td>"   
     +"<td>"+ data[i].city +"</td>"   
     +"<td>"+ data[i].star +"</td>"    
      +"<td>"+ data[i].created_on +"</td>"      
      +"<td><button value='"+ data[i].id +"' class='delete_hotel btn btn-primary'>Delete</button></td>"        
   +"</tr>"
        } 
         html=html   +"</tbody></table>";
       $("#hotels_div").html(html);
       $("#table1").DataTable();
    },
   error:function(xhr){
       alert(xhr.responseText);
   }
});
}
   $("#get_hotels").click(function(e){
       e.preventDefault();
   get_hotels_admin();
   });
   
   $("body").on("click",".delete_hotel",function(e){
      var id=$(this).val();
      if(confirm("Are Yu Sure?")){
          $.ajax({
   url:"delete_hotels_admin.php" ,
  data:{id:id},
   type:"POST",
   dataType:"JSON",
  
   success:function(data1){
       alert(data1 +" Row Deleted Successfully");
        get_hotels_admin();
       
   },
   error:function(xhr){
       alert(xhr.responseText);
   }
});
      }
   });
</script>


<script>
    function  get_rooms(hotel_id){
          $.ajax({
   url:"get_room_admin1.php" ,
  data:{hotel_id:hotel_id},
   type:"POST",
   dataType:"JSON",
  
   success:function(data1){
       var data=data1.data;
       var html="";
       html=html+"<table class='table' id='table11'>"
       +"<thead><tr><th>Sl No</th><th>Hotel Name</th><th>Room Type</th><th>Price</th><th>No Of Rooms</th><th>Facilities</th><th>Availabe</th><th>Booked</th><th>Action</th></tr></thead><tbody>";
    var k=1;  
    for(var i=0;i<data.length;i++){
           html=html+"<tr><td>"+ k++ +"</td>"
     +"<td>"+ data[i].hotel_name +"</td>"   
     +"<td>"+ data[i].room_type +"</td>"   
     +"<td>"+ data[i].price +"</td>"   
     +"<td>"+ data[i].total_no_of_rooms +"</td>"    
      +"<td>"+ data[i].facilities +"</td>"  
       +"<td>"+ data[i].available_rooms +"</td>"  
        +"<td>"+ data[i].booked_rooms +"</td>"      
      +"<td><button value='"+ data[i].id +"' class='delete_room btn btn-primary'>Delete</button></td>"        
   +"</tr>"
        } 
         html=html   +"</tbody></table>";
       $("#rooms_div").html(html);
       $("#table11").DataTable();
    },
   error:function(xhr){
       alert(xhr.responseText);
   }
});
}
   $("#get_hotels").click(function(e){
       e.preventDefault();
   get_hotels_admin();
   });
   
   $("body").on("click",".delete_room",function(e){
      var id=$(this).val();
      if(confirm("Are Yu Sure?")){
          $.ajax({
   url:"delete_rooms_admin.php" ,
  data:{id:id},
   type:"POST",
   dataType:"JSON",
  
   success:function(data1){
       alert(data1 +" Row Deleted Successfully");
        get_rooms(hotel_id)
       
   },
   error:function(xhr){
       alert(xhr.responseText);
   }
});
      }
   });
</script>