<?php 

include 'load.php';



?>
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
	<meta name="description" content="POS - 
Eat More Resturant  
 | Pos & Invetory System | Dashboard">
	<meta name="keywords" content="
Eat More Resturant  
 | Pos & Invetory System | Dashboard">
	<meta name="author" content="
Eat More Resturant  
 | Pos & Invetory System | Dashboard">
	<meta name="robots" content="noindex, nofollow">
	<title>Add Booking | 
Eat More Resturant  
 | Pos & Invetory System | Dashboard</title>
	<?php require_once 'headercss.php';	?>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/js/select2.min.js"></script>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>
</head>

<body>
	<div id="global-loader">
		<div class="whirly-loader"> </div>
	</div>

	<div class="main-wrapper">
		<?php require_once 'header.php'; ?>
		<?php require_once 'navbar.php'; ?>

		<div class="page-wrapper">
			<div class="content">
				<div class="page-header_update">
					<div class="page-title">
						<h2>Check Availability</h2>
						<p>Room Availability</p>
					</div>
				</div>

				<div class="card">
					<div class="card-body">
						<form method="POST" enctype="multipart/form-data">
							<?php if (isset($errMSG)) { ?>
								<div class="alert alert-danger border-0 bg-danger alert-dismissible fade show py-2">
									<div class="d-flex align-items-center">
										<div class="font-35 text-white"><i class="bx bxs-message-square-x"></i>
										</div>
										<div class="ms-3">
											<h6 class="mb-0 text-white">Error Alerts</h6>
											<div class="text-white">
												<?php echo $errMSG; ?>!
											</div>
										</div>
									</div>
									<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
								</div>
							<?php } else if (isset($successMSG)) { ?>
								<div class="alert alert-success border-0 bg-success alert-dismissible fade show py-2">
									<div class="d-flex align-items-center">
										<div class="font-35 text-white"><i class="bx bxs-check-circle"></i>
										</div>
										<div class="ms-3">
											<h6 class="mb-0 text-white">Success Alerts</h6>
											<div class="text-white">
												<?php echo $successMSG; ?>!
											</div>
										</div>
									</div>
									<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
								</div>
							<?php } ?>
                            <script>

                                   /* document.addEventListener('DOMContentLoaded', function() {
                                    var calendarEl = document.getElementById('calendar');
                                    var calendar = new FullCalendar.Calendar(calendarEl, {
                                        initialView: 'dayGridMonth'
                                    });
                                    calendar.render();
                                    });
                                    */

                                    document.addEventListener('DOMContentLoaded', function() {
                                    const calendarEl = document.getElementById('calendar');

                                    
                                    fetch('get-bookings.php')
                                        .then(response => response.json())
                                        .then(data => {
                                            
                                            const calendar = new FullCalendar.Calendar(calendarEl, {
                                                initialView: 'dayGridMonth', 
                                                headerToolbar: {
                                                    left: 'prev,next today',
                                                    center: 'title',
                                                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                                                },
                                                events: data, 
                                                selectable: true, 
                                                dateClick: function(info) {
                                                    alert('Selected date: ' + info.dateStr);
                                                    
                                                },
                                            });

                                            calendar.render();
                                        })
                                        .catch(error => console.error('Error fetching booking data:', error));
                                });




</script>   
							<div class="row">
                                <div id='calendar'></div>
							</div>
						</form>
					</div>
				</div>

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

	</script>
	<?php
	require_once 'footerjs.php';
	?>
</body>

</html>