110c853945
- Updated 39 pages from old header01.php and header02.php includes - All pages now use single configurable header.php with $headerStyle variable - Light style (default): Most pages (login, register, trips, courses, etc.) - Dark style: Coming from header01 original usage Pages updated: - Admin pages: admin_*.php (10 files) - Booking pages: bookings.php, campsite_booking.php, etc. - Content pages: blog.php, blog_details.php, contact.php, events.php, etc. - User pages: account_settings.php, membership*.php, register.php, etc. - Utility pages: 404.php, payment_confirmation.php, reset_password.php, etc. All pages now maintain single header template source - easier to update navigation, styles, and functionality across the entire site.
217 lines
10 KiB
PHP
217 lines
10 KiB
PHP
<?php
|
|
$headerStyle = 'light';
|
|
include_once('header.php');
|
|
checkUserSession();
|
|
?>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Gallery Area start -->
|
|
<section class="gallery-slider-area pt-100 rel z-1">
|
|
|
|
<div class="gallery-slider-active">
|
|
<div class="gallery-three-item" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
|
|
<div class="image">
|
|
<img src="assets/images/gallery/gallery-slider1.jpg" alt="Gallery">
|
|
</div>
|
|
<div class="content">
|
|
<span class="category">Tour & Travel</span>
|
|
<h5><a href="destination-details.html">Brown Concrete Building</a></h5>
|
|
</div>
|
|
</div>
|
|
<div class="gallery-three-item" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
|
|
<div class="image">
|
|
<img src="assets/images/gallery/gallery-slider2.jpg" alt="Gallery">
|
|
</div>
|
|
<div class="content">
|
|
<span class="category">Tour & Travel</span>
|
|
<h5><a href="destination-details.html">Brown Concrete Building</a></h5>
|
|
</div>
|
|
</div>
|
|
<div class="gallery-three-item" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
|
|
<div class="image">
|
|
<img src="assets/images/gallery/gallery-slider3.jpg" alt="Gallery">
|
|
</div>
|
|
<div class="content">
|
|
<span class="category">Tour & Travel</span>
|
|
<h5><a href="destination-details.html">Brown Concrete Building</a></h5>
|
|
</div>
|
|
</div>
|
|
<div class="gallery-three-item" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
|
|
<div class="image">
|
|
<img src="assets/images/gallery/gallery-slider4.jpg" alt="Gallery">
|
|
</div>
|
|
<div class="content">
|
|
<span class="category">Tour & Travel</span>
|
|
<h5><a href="destination-details.html">Brown Concrete Building</a></h5>
|
|
</div>
|
|
</div>
|
|
<div class="gallery-three-item" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
|
|
<div class="image">
|
|
<img src="assets/images/gallery/gallery-slider5.jpg" alt="Gallery">
|
|
</div>
|
|
<div class="content">
|
|
<span class="category">Tour & Travel</span>
|
|
<h5><a href="destination-details.html">Brown Concrete Building</a></h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Gallery Area end -->
|
|
|
|
|
|
|
|
<!-- About Us Area start -->
|
|
<section class="about-us-area pt-90 pb-100 rel z-1">
|
|
<div class="container">
|
|
<div class="row gap-100 align-items-center">
|
|
<div class="col-lg-6">
|
|
<div class="destination-details-content rmb-55" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">
|
|
<div class="section-title mb-25">
|
|
<span class="h2 mb-15">Welcome to </span>
|
|
<h2>BASE4 Camping</h2>
|
|
</div>
|
|
<p>Escape to the ultimate outdoor adventure at BASE4, nestled right next to a tranquil stream. Enjoy the perfect blend of rugged exploration and relaxation with top-notch facilities, including braai areas, hot showers, and clean ablution blocks. Gather with friends under our spacious lapa or take a dip in the refreshing swimming pool after a day of off-road fun. Whether you're conquering trails or kicking back by the fire, our campsite offers the ideal setting for an unforgettable getaway. Book your spot today and experience nature at its finest!</p>
|
|
|
|
</div>
|
|
<div class="widget widget-booking" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
|
|
<h5 class="widget-title">Book your Campsite</h5>
|
|
<form action="process_camp_booking.php" method="POST">
|
|
<div class="date mb-25">
|
|
<b>From Date</b>
|
|
<input type="date" id="from_date" name="from_date">
|
|
</div>
|
|
<div class="date mb-25">
|
|
<b>To Date</b>
|
|
<input type="date" id="to_date" name="to_date">
|
|
</div>
|
|
<hr class="mb-25">
|
|
<ul class="tickets clearfix">
|
|
<li>
|
|
No. of Vehicles
|
|
<input style="border-color: #d7d7d7;width:auto;padding:10px;" type="number" id="vehicles" name="vehicles" value="1" min="1">
|
|
</li>
|
|
<li>
|
|
No. of Adults
|
|
<input style="border-color: #d7d7d7;width:auto;padding:10px;" type="number" id="adults" name="adults" value="1" min="1">
|
|
</li>
|
|
<li>
|
|
No. of Children
|
|
<input style="border-color: #d7d7d7;width:auto;padding:10px;" type="number" id="children" name="children" value="0" min="0">
|
|
</li>
|
|
</ul>
|
|
<hr class="mb-25">
|
|
<h6>Add Extra:</h6>
|
|
<ul class="radio-filter pt-5">
|
|
<li>
|
|
<input class="form-check-input" type="checkbox" name="AddExtra" id="add-extra1" value="50">
|
|
<label for="add-extra1">2 x 5kg Firewood <span>R 50,00</span></label>
|
|
</li>
|
|
</ul>
|
|
<hr>
|
|
|
|
<?php if ($is_member) : ?>
|
|
<div id="discount_section">
|
|
<h6>Discount:</h6>
|
|
<ul class="radio-filter pt-5">
|
|
<li>
|
|
<label for="add-extra1">4WDCSA Member Discount <span id="discount_amount">R 0,00</span></label>
|
|
</li>
|
|
</ul>
|
|
<hr>
|
|
</div>
|
|
<?php endif ?>
|
|
|
|
<h6>Total: <span id="booking_total" class="price">-</span></h6>
|
|
<input type="hidden" name="csrf_token" value="<?php echo generateCSRFToken(); ?>">
|
|
<button type="submit" class="theme-btn style-two w-100 mt-15 mb-5">
|
|
<span data-hover="Book Now">Book Now</span>
|
|
<i class="fal fa-arrow-right"></i>
|
|
</button>
|
|
<div class="text-center">
|
|
<a href="contact.html">Need some help?</a> | Payments will be redirected to Payfast.
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="col-lg-6" data-aos="fade-right" data-aos-duration="1500" data-aos-offset="50">
|
|
<div class="destination-map">
|
|
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d667.578212275918!2d28.000752737032542!3d-25.864032288240537!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1e95794b858a5427%3A0xcdb0a4b0055a9753!2sFour%20Wheel%20Drive%20Club%20of%20Southern%20Africa%20-FWDCSA%20GAUTENG%20-%20BASE%204!5e1!3m2!1sen!2sza!4v1726669599601!5m2!1sen!2sza" width="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- About Us Area end -->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Function to calculate booking total
|
|
function calculateTotal() {
|
|
var fromDate = new Date($('#from_date').val());
|
|
var toDate = new Date($('#to_date').val());
|
|
var vehicles = parseInt($('#vehicles').val()) || 1;
|
|
var firewoodCost = $('#add-extra1').is(':checked') ? 50 : 0;
|
|
var isMember = <?php echo $is_member ? 'true' : 'false'; ?>;
|
|
|
|
var perNightRate = 200;
|
|
if (isMember) {
|
|
perNightRate = 0; // 100% discount
|
|
}
|
|
|
|
// Calculate nights
|
|
var timeDifference = toDate.getTime() - fromDate.getTime();
|
|
var nights = Math.ceil(timeDifference / (1000 * 3600 * 24));
|
|
|
|
if (nights < 1) {
|
|
nights = 0; // If "To Date" is before "From Date", no charge
|
|
}
|
|
|
|
// Calculate total
|
|
var total = (nights * perNightRate * vehicles) + firewoodCost;
|
|
|
|
// Update total in the DOM
|
|
$('#booking_total').text('R ' + total.toFixed(2));
|
|
|
|
// Update discount section
|
|
if (isMember) {
|
|
var discountAmount = nights * 200 * vehicles; // Original rate * nights * vehicles
|
|
$('#discount_amount').text('R ' + discountAmount.toFixed(2));
|
|
}
|
|
}
|
|
|
|
// Function to restrict date selection
|
|
function restrictDates() {
|
|
var today = new Date().toISOString().split('T')[0]; // Get today's date in YYYY-MM-DD format
|
|
$('#from_date').attr('min', today); // Set min for from_date
|
|
|
|
var fromDate = $('#from_date').val();
|
|
if (fromDate) {
|
|
$('#to_date').attr('min', fromDate); // Set min for to_date based on from_date
|
|
} else {
|
|
$('#to_date').attr('min', today); // Default to today's date if no from_date is set
|
|
}
|
|
}
|
|
|
|
// Event listeners to trigger recalculation and date restriction
|
|
$('#from_date').on('change', function() {
|
|
restrictDates();
|
|
calculateTotal();
|
|
});
|
|
|
|
$('#to_date, #vehicles, #add-extra1').on('change', function() {
|
|
calculateTotal();
|
|
});
|
|
|
|
// Initial setup for date restrictions and calculation
|
|
restrictDates();
|
|
calculateTotal();
|
|
});
|
|
</script>
|
|
|
|
<?php include_once('insta_footer.php') ?>
|