244 lines
9.2 KiB
PHP
244 lines
9.2 KiB
PHP
<?php
|
||
session_start();
|
||
require_once 'db/config.php';
|
||
require_once 'header.php';
|
||
|
||
try {
|
||
$db = db();
|
||
$stmt = $db->query("SELECT question, answer FROM faqs ORDER BY sort_order ASC");
|
||
$faqs = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
||
} catch (PDOException $e) {
|
||
// Handle DB error gracefully
|
||
$faqs = [];
|
||
}
|
||
|
||
require_once 'includes/api_keys.php';
|
||
|
||
// GOOGLE_MAPS_API_KEY is needed for the map functionality.
|
||
$google_maps_api_key = defined('GOOGLE_MAPS_API_KEY') ? GOOGLE_MAPS_API_KEY : '';
|
||
|
||
?>
|
||
|
||
<style>
|
||
.hero-section {
|
||
background: linear-gradient(to bottom, #40E0D0, #FFFFFF);
|
||
padding: 60px 0;
|
||
text-align: center;
|
||
color: #fff;
|
||
}
|
||
.hero-section h1 {
|
||
font-weight: bold;
|
||
font-size: 3rem;
|
||
color: #343a40;
|
||
}
|
||
.hero-section p {
|
||
font-size: 1.25rem;
|
||
color: #555;
|
||
}
|
||
.tropical-header-image {
|
||
width: 100%;
|
||
height: 250px;
|
||
object-fit: cover;
|
||
border-radius: 15px;
|
||
margin-bottom: 30px;
|
||
}
|
||
.contact-form-section, .faq-section {
|
||
padding: 40px;
|
||
border-radius: 12px;
|
||
background-color: #ffffff;
|
||
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
|
||
}
|
||
#map {
|
||
height: 250px;
|
||
border-radius: 8px;
|
||
background-color: #e9ecef;
|
||
margin-top: 15px;
|
||
}
|
||
.accordion-button:not(.collapsed) {
|
||
color: #007bff;
|
||
background-color: #e7f1ff;
|
||
}
|
||
.accordion-button:focus {
|
||
box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
|
||
}
|
||
#confirmation-message {
|
||
display: none;
|
||
}
|
||
</style>
|
||
|
||
<div class="container-fluid hero-section">
|
||
<div class="container">
|
||
<h1>We’re here to help</h1>
|
||
<p>Whether you have a question, concern, or just want to say Iakwe! 🌴</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container my-5">
|
||
<img src="https://images.pexels.com/photos/1671325/pexels-photo-1671325.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Tropical Header" class="tropical-header-image shadow-lg">
|
||
|
||
<div id="confirmation-message" class="alert alert-success"></div>
|
||
|
||
<div class="row g-5">
|
||
<div class="col-lg-6">
|
||
<div class="contact-form-section">
|
||
<h3 class="mb-4">Send Us a Message</h3>
|
||
<form id="contact-form">
|
||
<div class="mb-3">
|
||
<label for="full_name" class="form-label">Full Name</label>
|
||
<input type="text" class="form-control" id="full_name" name="full_name" required>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="email" class="form-label">Email Address</label>
|
||
<input type="email" class="form-control" id="email" name="email" required>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="phone" class="form-label">Phone Number (Optional)</label>
|
||
<input type="tel" class="form-control" id="phone" name="phone">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="subject" class="form-label">Subject</label>
|
||
<select class="form-select" id="subject" name="subject" required>
|
||
<option value="" disabled selected>Select a subject</option>
|
||
<option value="Order Issue">Order Issue</option>
|
||
<option value="Account Help">Account Help</option>
|
||
<option value="Restaurant Inquiry">Restaurant Inquiry</option>
|
||
<option value="Feedback">Feedback</option>
|
||
</select>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="message" class="form-label">How can we help?</label>
|
||
<textarea class="form-control" id="message" name="message" rows="5" required></textarea>
|
||
</div>
|
||
|
||
<!-- Map Section -->
|
||
<div class="mb-3">
|
||
<label class="form-label">Optional: Pin your delivery location so we can assist you better.</label>
|
||
<?php if ($google_maps_api_key): ?>
|
||
<div id="map"></div>
|
||
<?php else: ?>
|
||
<div class="alert alert-warning">
|
||
Map functionality is currently unavailable. Please provide a Google Maps API key.
|
||
</div>
|
||
<?php endif; ?>
|
||
<input type="hidden" id="latitude" name="latitude">
|
||
<input type="hidden" id="longitude" name="longitude">
|
||
</div>
|
||
|
||
<div class="d-grid">
|
||
<button type="submit" class="btn btn-primary btn-lg">Send Message</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-6">
|
||
<div class="faq-section">
|
||
<h3 class="mb-4">Frequently Asked Questions</h3>
|
||
<div class="accordion" id="faqAccordion">
|
||
<?php if (!empty($faqs)): ?>
|
||
<?php foreach ($faqs as $index => $faq): ?>
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header" id="heading<?php echo $index; ?>">
|
||
<button class="accordion-button <?php echo $index > 0 ? 'collapsed' : ''; ?>" type="button" data-bs-toggle="collapse" data-bs-target="#collapse<?php echo $index; ?>" aria-expanded="<?php echo $index === 0 ? 'true' : 'false'; ?>" aria-controls="collapse<?php echo $index; ?>">
|
||
<?php echo htmlspecialchars($faq['question']); ?>
|
||
</button>
|
||
</h2>
|
||
<div id="collapse<?php echo $index; ?>" class="accordion-collapse collapse <?php echo $index === 0 ? 'show' : ''; ?>" aria-labelledby="heading<?php echo $index; ?>" data-bs-parent="#faqAccordion">
|
||
<div class="accordion-body">
|
||
<?php echo nl2br(htmlspecialchars($faq['answer'])); ?>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
<?php else: ?>
|
||
<p>No FAQs found.</p>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
const contactForm = document.getElementById('contact-form');
|
||
const confirmationMessage = document.getElementById('confirmation-message');
|
||
|
||
contactForm.addEventListener('submit', function (e) {
|
||
e.preventDefault();
|
||
|
||
const formData = new FormData(contactForm);
|
||
const submitButton = contactForm.querySelector('button[type="submit"]');
|
||
submitButton.disabled = true;
|
||
submitButton.textContent = 'Sending...';
|
||
|
||
fetch('/api/support.php', {
|
||
method: 'POST',
|
||
body: formData
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
confirmationMessage.textContent = data.message;
|
||
confirmationMessage.className = data.success ? 'alert alert-success' : 'alert alert-danger';
|
||
confirmationMessage.style.display = 'block';
|
||
|
||
if (data.success) {
|
||
contactForm.reset();
|
||
if (window.marker) {
|
||
window.marker.setMap(null); // Remove marker from map
|
||
}
|
||
}
|
||
|
||
window.scrollTo(0, 0);
|
||
})
|
||
.catch(error => {
|
||
confirmationMessage.textContent = 'An error occurred. Please try again.';
|
||
confirmationMessage.className = 'alert alert-danger';
|
||
confirmationMessage.style.display = 'block';
|
||
})
|
||
.finally(() => {
|
||
submitButton.disabled = false;
|
||
submitButton.textContent = 'Send Message';
|
||
});
|
||
});
|
||
|
||
<?php if ($google_maps_api_key): ?>
|
||
// Load Google Maps script
|
||
const script = document.createElement('script');
|
||
script.src = `https://maps.googleapis.com/maps/api/js?key=<?php echo $google_maps_api_key; ?>&callback=initMap`;
|
||
script.async = true;
|
||
script.defer = true;
|
||
document.head.appendChild(script);
|
||
<?php endif; ?>
|
||
});
|
||
|
||
function initMap() {
|
||
const majuro = { lat: 7.13, lng: 171.38 }; // Default center for Majuro
|
||
const map = new google.maps.Map(document.getElementById('map'), {
|
||
zoom: 12,
|
||
center: majuro,
|
||
});
|
||
|
||
window.marker = null;
|
||
|
||
map.addListener('click', (e) => {
|
||
placeMarker(e.latLng, map);
|
||
});
|
||
|
||
function placeMarker(latLng, map) {
|
||
if (window.marker) {
|
||
window.marker.setPosition(latLng);
|
||
} else {
|
||
window.marker = new google.maps.Marker({
|
||
position: latLng,
|
||
map: map,
|
||
});
|
||
}
|
||
document.getElementById('latitude').value = latLng.lat();
|
||
document.getElementById('longitude').value = latLng.lng();
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<?php require_once 'footer.php'; ?>
|