<?php require "../includes/header.php"; ?>
<?php require "../config/config.php"; ?>

<?php
// Redirect to login if not logged in
if (!isset($_SESSION['username'])) {
	echo "<script>alert('Please login to book a room'); window.location.href='" . APPURL . "index.php'</script>";
	exit;
}

if (isset($_GET['id'])) {
	$id = (int)$_GET['id'];
	$room = $conn->prepare("SELECT * FROM rooms WHERE status = 1 AND id = :id");
	$room->execute([':id' => $id]);
	$singleRoom = $room->fetch(PDO::FETCH_OBJ);
	if (!$singleRoom) {
		header("location: " . APPURL . "/404.php");
		exit;
	}
}

// Utilities
$utilities = $conn->prepare("SELECT * FROM utilities WHERE room_id = :id");
$utilities->execute([':id' => $id]);
$allUtilities = $utilities->fetchAll(PDO::FETCH_OBJ);
?>


<div class="hero-wrap js-fullheight" style="background-image: url('<?php echo APPURL; ?>images/<?php echo $singleRoom->image; ?>');" data-stellar-background-ratio="0.5">
	<div class="overlay"></div>
	<div class="container">
		<div class="row no-gutters slider-text js-fullheight align-items-center justify-content-start" data-scrollax-parent="true">
			<div class="col-md-7 ftco-animate">
				<h2 class="subheading">Welcome to Vacation Rental</h2>
				<h1 class="mb-4"><?php echo $singleRoom->name; ?></h1>
				<!-- <p><a href="#" class="btn btn-primary">Learn more</a> <a href="#" class="btn btn-white">Contact us</a></p> -->
			</div>
		</div>
	</div>
</div>

<section class="ftco-section ftco-book ftco-no-pt ftco-no-pb">
	<div class="container">
		<div class="row justify-content-end">
			<div class="col-lg-4">
				<form action="<?php echo APPURL; ?>/bookings/pay.php" method="POST" class="appointment-form" style="margin-top: -568px;">
					<h3 class="mb-3">Book this room</h3>
					<div class="row">
						<div class="col-md-12">
							<div class="form-group">
								<input type="text" name="email" class="form-control" placeholder="Email" required>
							</div>
						</div>

						<div class="col-md-12">
							<div class="form-group">
								<input type="text" name="full_name" class="form-control" placeholder="Full Name" required>
							</div>
						</div>

						<div class="col-md-12">
							<div class="form-group">
								<input type="text" name="phone_number" class="form-control" placeholder="Phone Number" required>
							</div>
						</div>

						<div class="col-md-6">
							<div class="form-group">
								<label style="font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#685D54; margin-bottom:6px; display:block;">Check-In Date</label>
								<input type="date"
								       id="check_in"
								       name="check_in"
								       class="form-control"
								       min="<?php echo date('Y-m-d'); ?>"
								       required
								       onchange="setMinCheckout(this.value)">
							</div>
						</div>

						<div class="col-md-6">
							<div class="form-group">
								<label style="font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#685D54; margin-bottom:6px; display:block;">Check-Out Date</label>
								<input type="date"
								       id="check_out"
								       name="check_out"
								       class="form-control"
								       min="<?php echo date('Y-m-d', strtotime('+1 day')); ?>"
								       required>
							</div>
						</div>

						<div class="col-md-12 mb-2">
							<p class="mb-0"><strong>Price per night:</strong> GH&#8373;<?php echo number_format($singleRoom->price ?? 0, 2); ?></p>
						</div>

						<!-- Hidden fields -->
						<input type="hidden" name="hotel_name" value="<?php echo htmlspecialchars($singleRoom->hotel_name ?? ''); ?>">
						<input type="hidden" name="room_name" value="<?php echo htmlspecialchars($singleRoom->name ?? ''); ?>">
						<input type="hidden" name="room_id" value="<?php echo $singleRoom->id ?? ''; ?>">
						<input type="hidden" name="price" value="<?php echo $singleRoom->price ?? 0; ?>">

						<div class="col-md-12">
							<div class="form-group">
								<input type="submit" name="submit" value="Book and Pay Now" class="btn btn-primary py-3 px-4">
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</section>






<section class="ftco-section bg-light">
	<div class="container">
		<div class="row no-gutters">
			<div class="col-md-6 wrap-about">
				<div class="img img-2 mb-4" style="background-image: url(<?php echo APPURL; ?>images/hotel-bg.jpg);">
				</div>
				<h2>The most recommended vacation rental</h2>
				<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
			</div>

			<div class="col-md-6 wrap-about ftco-animate">
				<div class="heading-section">
					<div class="pl-md-5">
						<h2 class="mb-2">What we offer</h2>
					</div>
				</div>
				<div class="pl-md-5">
					<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
					<div class="row">
						<?php foreach ($allUtilities as $utility) : ?>
							<div class="services-2 col-lg-6 d-flex w-100">
								<div class="icon d-flex justify-content-center align-items-center">
									<span class="<?php echo $utility->icon; ?>"></span>
								</div>
								<div class="media-body pl-3">
									<h3 class="heading"><?php echo $utility->name; ?></h3>
									<p><?php echo $utility->description; ?></p>
								</div>
							</div>
						<?php endforeach; ?>


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

<section class="ftco-intro" style="background-image: url(<?php echo APPURL; ?>images/hotel-bg.jpg);" data-stellar-background-ratio="0.5">
	<div class="overlay"></div>
	<div class="container">
		<div class="row justify-content-center">
			<div class="col-md-9 text-center">
				<h2>Ready to get started</h2>
				<p class="mb-4">Itâ€™s safe to book online with us! Get your dream stay in clicks or drop us a line with your questions.</p>
				<p class="mb-0"><a href="#" class="btn btn-primary px-4 py-3">Learn More</a> <a href="#" class="btn btn-white px-4 py-3">Contact us</a></p>
			</div>
		</div>
	</div>
</section>

<script>
// Ensure check-out is always at least the day after check-in
function setMinCheckout(checkinVal) {
    if (!checkinVal) return;
    var cin  = new Date(checkinVal);
    cin.setDate(cin.getDate() + 1);
    var y = cin.getFullYear();
    var m = String(cin.getMonth() + 1).padStart(2, '0');
    var d = String(cin.getDate()).padStart(2, '0');
    var minOut = y + '-' + m + '-' + d;
    var coEl = document.getElementById('check_out');
    coEl.min = minOut;
    // Reset check-out if it's now before the new minimum
    if (coEl.value && coEl.value < minOut) {
        coEl.value = minOut;
    }
}
</script>
<style>
/* Style the native date pickers to match the ShiaStay form theme */
input[type="date"].form-control {
    color: #232323;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    border: 2px solid #E5DED2;
    border-radius: 2px;
    padding: 12px 14px;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    cursor: pointer;
}
input[type="date"].form-control:focus {
    border-color: #A39382;
    box-shadow: 0 0 0 3px rgba(163,147,130,0.15);
    outline: none;
}
</style>

<?php require "../includes/footer.php"; ?>

