34968-vm/help.php

<?php
session_start();
require_once 'header.php';
?>

<style>
    .faq-section {
        background-color: #f8f9fa;
        padding: 40px;
        border-radius: 8px;
    }
    .faq-item {
        margin-bottom: 20px;
    }
    .faq-question {
        font-weight: bold;
        cursor: pointer;
        position: relative;
    }
    .faq-question::after {
        content: '+';
        position: absolute;
        right: 0;
        transition: transform 0.3s;
    }
    .faq-answer {
        display: none;
        margin-top: 10px;
        padding-left: 20px;
        border-left: 2px solid #007bff;
    }
    .faq-item.active .faq-question::after {
        transform: rotate(45deg);
    }
</style>

<div class="container my-5">
    <div class="text-center mb-5">
        <h1 class="display-4">Help & Support</h1>
        <p class="lead text-muted">We're here to help. Find answers to common questions or get in touch with our team.</p>
    </div>

    <?php if (isset($_SESSION['success_message'])): ?>
        <div class="alert alert-success">
            <?php echo $_SESSION['success_message']; unset($_SESSION['success_message']); ?>
        </div>
    <?php endif; ?>
    <?php if (isset($_SESSION['error_message'])): ?>
        <div class="alert alert-danger">
            <?php echo $_SESSION['error_message']; unset($_SESSION['error_message']); ?>
        </div>
    <?php endif; ?>

    <div class="row g-5">
        <div class="col-lg-6">
            <h3 class="mb-4">Contact Us</h3>
            <div class="card shadow-sm">
                <div class="card-body p-4">
                    <form action="help_process.php" method="POST">
                        <div class="mb-3">
                            <label for="name" class="form-label">Full Name</label>
                            <input type="text" class="form-control" id="name" name="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="message" class="form-label">How can we help?</label>
                            <textarea class="form-control" id="message" name="message" rows="5" required></textarea>
                        </div>
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg">Send Message</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <h3 class="mb-4">Frequently Asked Questions</h3>
            <div class="faq-section">
                <div class="faq-item">
                    <div class="faq-question">How do I track my order?</div>
                    <div class="faq-answer">
                        <p>You can track your order in real-time from the "Order Status" page. Once a driver is assigned, you'll see their location on the map.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">What payment methods do you accept?</div>
                    <div class="faq-answer">
                        <p>We accept all major credit cards, PayPal, and Stripe. You can save your payment method for faster checkout next time.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">How is the delivery fee calculated?</div>
                    <div class="faq-answer">
                        <p>The delivery fee is based on the distance between the restaurant and your location. You'll see the exact fee at checkout before you confirm your order.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">Can I change my delivery address?</div>
                    <div class="faq-answer">
                        <p>If the restaurant has not yet accepted your order, you may be able to cancel it and place a new one with the correct address. Once the order is being prepared, it cannot be changed.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const faqItems = document.querySelectorAll('.faq-item');
    faqItems.forEach(item => {
        const question = item.querySelector('.faq-question');
        question.addEventListener('click', () => {
            const answer = item.querySelector('.faq-answer');
            if (item.classList.contains('active')) {
                item.classList.remove('active');
                answer.style.display = 'none';
            } else {
                item.classList.add('active');
                answer.style.display = 'block';
            }
        });
    });
});
</script>

<?php require_once 'footer.php'; ?>