<?php
    include ("sidebar.php");
    include ("header.php");
require_once('database.php');
$query="SELECT * from reservation";
$reservation_records=db::getRecords($query);
?>
<script src='jquery-3.1.1.min.js' type='text/javascript'></script>
<div class="content" >
        <div class="content">
          <div class="container-fluid" style="margin-top:-40px">
            <div class="row">
              <div class="col-md-12">
                <div class="card" style="min-height:550px;">
                    
                <div class="card-header card-header-info" style="background-color:#1FC1D5"   >
                  <h4 class="card-title "  style="color:white">Reservation</h4>
                </div>
                   <div class="material-datatables">          
  <table id="datatables" class="table table-striped table-no-bordered table-hover" style="width:100%">
    <thead>
      <tr>
        <th>Name</th>
        <th>Phone Number</th>
        <th>E-mail</th>
          <th>Person</th>
        <th>Date</th>
        <th>Time</th>
        <th>Message</th>
        <th>Remove</th>
      </tr>
    </thead>
    <tbody>
        <?php			if($reservation_records)
										{
											foreach($reservation_records as $record)
											{
												?>
        <tr>
        <td><?php echo $record['name']; ?></td>
        <td><?php echo $record['phone_number']; ?></td>
        <td><?php echo $record['email']; ?></td>
            <td><?php echo $record['person']; ?></td>
        <td><?php echo $record['date']; ?></td>
        <td><?php echo $record['time']; ?></td>
          <td><button data-id='<?php echo $record['id'];?>' class='userinfo btn btn-link'>Message</button></td>
        <td><a href="action.php?id_recordid=<?php echo $record['id'];?>"><i class="material-icons">close</i></a></td>
      </tr>
        <?php	}	} ?>
    </tbody>
  </table>
  </div>
                      
                   
                          </div>
                    
                          </div>
                          </div>
                        </div>
           
              
                      </div>
                    </div>
<div class="modal fade" id="empModal" role="dialog">
                <div class="modal-dialog">
                
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal">&times;</button>
                          <h4 class="modal-title">Message</h4>
                        </div>
                        <div class="modal-body">
                          
                        </div>
                    </div>
                  
                </div>
            </div>
 <script type='text/javascript'>
            $(document).ready(function(){

                $('.userinfo').click(function(){
                   
                    var userid = $(this).data('id');

                    // AJAX request
                    $.ajax({
                        url: 'ajax_modal_reservation.php',
                        type: 'post',
                        data: {userid: userid},
                        success: function(response){ 
                            // Add response in Modal body
                            $('.modal-body').html(response); 

                            // Display Modal
                            $('#empModal').modal('show'); 
                        }
                    });
                });
            });
            </script>
                  

<?php
    include ("footer.php");
?>
