TwoTalesDev/4WDCSA.co.za
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

local changes.

Browse Source
This commit is contained in:
twotalesanimation
2025-07-24 07:20:51 +02:00
parent 53c29b62ca
commit b69f8f5f1b
24 changed files with 331 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
trip-details.php
View File

@@ -12,7 +12,7 @@ $trip_id = intval(decryptData($token, $salt)); // Ensures $trip_id is treated as
// Prepare the SQL query
$sql = "SELECT trip_id, trip_name, location, short_description, long_description, start_date, end_date,
vehicle_capacity, cost_members, cost_nonmembers, places_booked, booking_fee
vehicle_capacity, cost_members, cost_nonmembers, places_booked, booking_fee, cost_pensioner, cost_pensioner_member
FROM trips
WHERE trip_id = ?";
@@ -45,7 +45,10 @@ if ($stmt) {
$capacity = $row['vehicle_capacity'];
$cost_members = $row['cost_members'];
$cost_nonmembers = $row['cost_nonmembers'];
$cost_pensioner = $row['cost_pensioner'];
$cost_pensioner_member = $row['cost_pensioner_member'];
$member_discount = $cost_nonmembers - $cost_members;
$member_discount_pensioner = $cost_pensioner - $cost_pensioner_member;
$places_booked = $row['places_booked'];
$booking_fee = $row['booking_fee'];
$remaining_places = getAvailableSpaces($trip_id);
@@ -145,25 +148,52 @@ $conn->close();
/* Optional: makes non-member price stand out */
}
</style>
<!-- Page Banner Start -->
<section class="page-banner-two rel z-1">
<div class="container-fluid">
<hr class="mt-0">
<div class="container">
<div class="banner-inner pt-15 pb-25">
<h2 class="page-title mb-10" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50"><?php echo $trip_name; ?></h2>
<div class="banner-overlay"></div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb justify-content-center mb-20" data-aos="fade-right" data-aos-delay="200" data-aos-duration="1500" data-aos-offset="50">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item active">Tour Details</li>
</ol>
</nav>
</div>
<?php include_once('header02.php');
?>
<style>
.image {
width: 400px;
/* Set your desired width */
height: 350px;
/* Set your desired height */
overflow: hidden;
/* Hide any overflow */
display: block;
/* Ensure proper block behavior */
}
.image img {
width: 100%;
/* Image scales to fill the container */
height: 100%;
/* Image scales to fill the container */
object-fit: cover;
/* Fills the container while maintaining aspect ratio */
object-position: top;
/* Aligns the top of the image with the top of the container */
display: block;
/* Prevents inline whitespace issues */
}
</style>
<section class=" pt-50 pb-35 rel z-1 ">
<div class="container">
<div class="banner-inner text-black mb-50">
<h2 class="page-title mb-10" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50"><?php echo $trip_name; ?></h2>
<nav aria-label="breadcrumb">
<ol class="breadcrumb justify-content-center mb-20" data-aos="fade-right" data-aos-delay="200" data-aos-duration="1500" data-aos-offset="50">
<li class="breadcrumb-item"><a href="index.php">Home</a></li>
<li class="breadcrumb-item active">4WDCSA Trips</li>
</ol>
</nav>
</div>
</div>
</section>
<!-- Page Banner End -->
<!-- Tour Gallery start -->
@@ -215,23 +245,23 @@ $conn->close();
<div class="section-title pb-5">
<h2><?php echo $trip_name; ?></h2>
</div>
<div class="ratting">
<!-- <div class="ratting">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div> -->
</div>
<span class="subtitle mb-15"><?php echo $badge_text; ?></span>
</div>
<div class="col-xl-4 col-lg-5 text-lg-end" data-aos="fade-right" data-aos-duration="1500" data-aos-offset="50">
<!-- <div class="col-xl-4 col-lg-5 text-lg-end" data-aos="fade-right" data-aos-duration="1500" data-aos-offset="50">
<div class="tour-header-social mb-10">
<a href="#"><i class="far fa-share-alt"></i>Share tours</a>
<a href="#"><i class="fas fa-heart bgc-secondary"></i>Wish list</a>
</div>
</div>
</div> -->
</div>
<hr class="mt-50 mb-70">
</div>
@@ -263,7 +293,7 @@ $conn->close();
<h2 class="price">R <?php echo $booking_fee; ?></h2><span class="per-person">/club fee per vehicle</span>
</div>
</div>
<div class="row pb-55">
<!-- <div class="row pb-55">
<div class="col-md-6">
<div class="tour-include-exclude mt-30">
<h5>Included and Excluded</h5>
@@ -290,10 +320,10 @@ $conn->close();
</ul>
</div>
</div>
</div>
</div> -->
</div>
<h3>Activities</h3>
<!-- <h3>Activities</h3>
<div class="tour-activities mt-30 mb-45">
<div class="tour-activity-item">
<i class="flaticon-hiking"></i>
@@ -327,9 +357,9 @@ $conn->close();
<i class="flaticon-meditation"></i>
<b>Yoga</b>
</div>
</div>
</div> -->
<h3>Itinerary</h3>
<!-- <h3>Itinerary</h3>
<div class="accordion-two mt-25 mb-60" id="faq-accordion-two">
<div class="accordion-item">
<h5 class="accordion-header">
@@ -391,11 +421,11 @@ $conn->close();
</div>
</div>
</div>
</div>
</div> -->
<h3>Maps</h3>
<!-- <h3>Maps</h3> -->
<div class="tour-map mt-30 mb-50">
<iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d96777.16150026117!2d-74.00840582560909!3d40.71171357405996!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sbd!4v1706508986625!5m2!1sen!2sbd" style="border:0; width: 100%;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13894.816708766162!2d29.256367272652284!3d-29.46664742147583!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1ef37aefd73de6bd%3A0xf35ffec07e766685!2sDrakensberg!5e0!3m2!1sen!2sza!4v1750666087092!5m2!1sen!2sza" style="border:0; width: 100%;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
@@ -430,6 +460,7 @@ $conn->close();
<li>
Adults <span class="price"></span>
<select name="adults" id="adults">
<option value="0">00</option>
<option value="1" selected>01</option>
<option value="2">02</option>
<option value="3">03</option>
@@ -446,15 +477,24 @@ $conn->close();
<option value="3">03</option>
</select>
</li>
</ul>
<hr class="mb-25">
<h6>Extras:</h6>
<ul class="radio-filter pt-5">
<li>
<input class="form-check-input" type="checkbox" name="AddExtra" id="add-extra1" value="50" style="background:#fff;">
<label for="add-extra1">4WDCSA Handheld Radio Rental <span>R 50,00</span></label>
Pensioners <span class="price"></span>
<select name="pensioners" id="pensioners">
<option value="0" selected>00</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
</select>
</li>
</ul>
<!-- <hr class="mb-25"> -->
<!-- <h6>Extras:</h6> -->
<!-- <ul class="radio-filter pt-5">
<li>
<input class="form-check-input" type="checkbox" name="AddExtra" id="add-extra1" value="50" style="background:#fff;">
<label for="add-extra1">4WDCSA Pensioner Discount </label>
</li>
</ul> -->
<hr>
@@ -474,6 +514,34 @@ $conn->close();
<label for="add-extra1">4WDCSA Booking Fee <span id="booking_fee">R <?php echo $booking_fee; ?></span></label>
</li>
</ul>
<div style="margin: 20px 0;">
<div id="indemnityBox" style="border: 1px solid #ccc; padding: 10px; height: 150px; overflow-y: scroll; background: #f9f9f9; font-size: 12px;">
<p><strong>INDEMNITY AND WAIVER</strong></p>
<p>1. I agree to abide by the Code of Conduct as listed below, as well as any reasonable instructions given by any Member of the Committee of the Club, or any person appointed by the Club to organise or control any event (Club Officer).</p>
<p>2. I acknowledge that driving the off-road track is inherently dangerous, and that I am fully aware of the dangers thereof. I warrant that I will make all members of my party aware of such dangers prior to driving the track.</p>
<p>3. While I, or any member of my party, enjoy the facilities at Base 4 including overnight camping, picnicking, driving the track, using the swimming pool facility or activity or any other activity while at Base 4, I agree that under no circumstances shall the Club be liable for any loss or damage of any kind whatsoever (including consequential loss) which I or any of my party may suffer, regardless of how such loss or damage may have been caused or sustained, and whether or not as a result of the negligence or breach of contract (whether fundamental or otherwise) or other wrongful act of the Club, or any Club Officer, or any of the Club’s agents or contractors, and I hereby indemnify and hold harmless the Club and any Club Officer against all such loss or damage.</p>
<p>4. The expression, ‘member of my party’, means all persons who accompany me or attending any event at my specific invitation, request or suggestion, and includes without limitation, members of family, guests and invitees.</p>
<p>5. I understand that I am responsible for ensuring my vehicle and equipment and that all members of my party have adequate health and medical insurance to cover any and all likely occurrences.</p>
<p>6. This indemnity is irrevocable and shall apply to me and the members of my party for any Club events in which I may participate or attend.</p>
<p><strong>BASE 4 CODE OF CONDUCT</strong></p>
<p>1. No motorbikes or quadbikes.</p>
<p>2. No loud music (unless authorised by the Committee or its representatives).</p>
<p>3. Dogs to be controlled by their owners who take full responsibility for the animal’s behaviour.</p>
<p>4. No dogs belonging to non-members are allowed at Base 4 unless with the express permission of the Committee.</p>
<p>5. No person in the rear of open vehicles when driving on obstacles.</p>
<p>6. When driving the obstacles stay on the tracks.</p>
<p>7. Engage 4WD when driving the obstacles to minimise wear and damage to the track.</p>
<p>8. No alcohol to be consumed while driving the track.</p>
<p>9. No littering (please pick up cigarette butts etc.)</p>
<p>10. All rubbish is to be taken away with you when leaving. Dustbins and refuse collection is not provided.</p>
<p>11. Use water sparingly. Please bring your own water and a little extra for the Club.</p>
<p>I am a member of the Four Wheel Drive Club of Southern Africa and I will strive to uphold these Codes.</p>
</div>
<div style="margin-top: 10px;">
<input type="checkbox" id="agreeCheckbox" name="agree" disabled required>
<label for="agreeCheckbox" id="agreeLabel" style="color: #888;">I have read and agree to the indemnity terms</label>
</div>
</div>
<h6>Total: <span id="booking_total" class="price">-</span></h6>
<?php if ($remaining_places < 1): ?>
<button type="button" class="theme-btn style-two w-100 mt-15 mb-5" disabled>
@@ -487,7 +555,7 @@ $conn->close();
</button>
<?php endif; ?>
<div class="text-center">
<a href="contact.html">Need some help?</a> | Payments will be redirected to Payfast.
<a href="contact.php">Need some help?</a>
</div>
</form>
@@ -498,12 +566,12 @@ $conn->close();
<div class="widget widget-contact" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
<h5 class="widget-title">Need Help?</h5>
<ul class="list-style-one">
<li><i class="far fa-envelope"></i> <a href="mailto:4wdcsa@gmail.com">4wdcsa@gmail.com</a></li>
<li><i class="far fa-phone-volume"></i> <a href="#">+27 </a></li>
<li><i class="far fa-envelope"></i> <a href="mailto:info@4wdcsa.co.za">info@4wdcsa.co.za</a></li>
<li><i class="far fa-phone-volume"></i> <a href="#">+27 79 065 2795</a></li>
</ul>
</div>
<div class="widget widget-cta" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
<!-- <div class="widget widget-cta" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
<div class="content text-white">
<span class="h6">Explore The World</span>
<h3>Best Tourist Place</h3>
@@ -516,7 +584,7 @@ $conn->close();
<img src="assets/images/widgets/cta-widget.png" alt="CTA">
</div>
<div class="cta-shape"><img src="assets/images/widgets/cta-shape3.png" alt="Shape"></div>
</div>
</div> -->
</div>
</div>
@@ -528,40 +596,65 @@ $conn->close();
<!-- About Us Area end -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Shop Details Area end -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
const indemnityBox = document.getElementById('indemnityBox');
const agreeCheckbox = document.getElementById('agreeCheckbox');
const bookingForm = document.querySelector('form');
indemnityBox.addEventListener('scroll', function() {
const scrollTop = indemnityBox.scrollTop;
const scrollHeight = indemnityBox.scrollHeight;
const offsetHeight = indemnityBox.offsetHeight;
// Enable checkbox when scrolled to bottom
if (scrollTop + offsetHeight >= scrollHeight - 1) {
agreeCheckbox.disabled = false;
document.getElementById('agreeLabel').style.color = "#000"; // optional: make label active
}
});
bookingForm.addEventListener('submit', function(e) {
if (agreeCheckbox.disabled || !agreeCheckbox.checked) {
alert('Please read and agree to the indemnity terms before booking.');
e.preventDefault(); // stop form submission
}
});
</script>
<script>
$(document).ready(function() {
// Function to calculate booking total
function calculateTotal() {
// Get selected values from the form
var vehicles = parseInt($('#vehicles').val()) || 1; // Default to 1 vehicle if not selected
var adults = parseInt($('#adults').val()) || 1; // Default to 1 adult if not selected
var adults = parseInt($('#adults').val()) || 0; // Default to 1 adult if not selected
var pensioners = parseInt($('#pensioners').val()) || 0; // Default to 1 adult if not selected
var children = parseInt($('#children').val()) || 0; // Default to 0 children if not selected
var radio = $('#add-extra1').is(':checked') ? 50 : 0; // Extra cost for radio rental
// Fetch PHP variables
var isMember = <?php echo $is_member ? 'true' : 'false'; ?>;
var cost_members = <?php echo $cost_members; ?>;
var cost_nonmembers = <?php echo $cost_nonmembers; ?>;
var member_discount = <?php echo $member_discount; ?>;
var booking_fee = <?php echo $booking_fee; ?>;
const isMember = <?php echo isset($is_member) && $is_member ? 'true' : 'false'; ?>;
const cost_members = <?php echo $cost_members ?? 0; ?>;
const cost_nonmembers = <?php echo $cost_nonmembers ?? 0; ?>;
const cost_pensioner = <?php echo $cost_pensioner ?? 0; ?>;
const cost_pensioner_member = <?php echo $cost_pensioner_member ?? 0; ?>;
const member_discount = <?php echo $member_discount ?? 0; ?>;
const member_discount_pensioner = <?php echo $member_discount_pensioner ?? 0; ?>;
const booking_fee = <?php echo $booking_fee ?? 0; ?>;
// Calculate the total cost based on membership
var total = 0;
var discountAmount = 0;
let total = 0;
let discountAmount = 0;
// Calculate cost for members
if (isMember) {
total = ((adults + children) * cost_members) + radio + (vehicles * booking_fee);
discountAmount = ((adults + children) * member_discount); // Member discount
total = ((adults + children) * cost_members) + (pensioners * cost_pensioner_member) + radio + (vehicles * booking_fee);
discountAmount = ((adults + children) * member_discount) + (pensioners * member_discount_pensioner);
} else {
// Calculate cost for non-members
total = ((adults + children) * cost_nonmembers) + radio + (vehicles * booking_fee);
total = ((adults + children) * cost_nonmembers) + (pensioners * cost_pensioner) + radio + (vehicles * booking_fee);
}
// Update total price in the DOM
$('#booking_total').text('R ' + total.toFixed(2));
// If the user is a member, show the discount section
if (isMember) {
$('#discount_amount').text('R ' + discountAmount.toFixed(2));
$('#discount_section').show();
@@ -570,12 +663,7 @@ $conn->close();
}
}
// Event listeners to trigger recalculation when any form field changes
$('#vehicles, #adults, #children, #add-extra1').on('change', function() {
calculateTotal();
});
// Initial calculation on page load
$('#vehicles, #adults, #children, #pensioners, #add-extra1').on('change', calculateTotal);
calculateTotal();
});
</script>