in this codes (<?php
// Include database connection
require_once '../db_connect.php'; // Adjust the path if necessary

// Verify that $conn is defined
if (!isset($conn)) {
    die("Database connection not established. Please check db_connect.php.");
}

// Initialize variables
$success = '';
$errors = [];

// Fetch packages for the form and JavaScript
$packages = [];

// Fetch packages from the database
$packageQuery = "SELECT id, package_name, description FROM packages";
$packageResult = $conn->query($packageQuery);

// Check for query error
if ($packageResult) {
    while ($row = $packageResult->fetch_assoc()) {
        $packages[] = $row;
    }
} else {
    $errors[] = "Failed to fetch packages: " . $conn->error;
}

// Handle form submission
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Collect input data
    $name = trim($_POST['name']);
    $email = trim($_POST['email']);
    $phone = trim($_POST['phone']);
    $age = intval($_POST['age']);
    $gender = $_POST['gender'];
    $address = trim($_POST['address']);
    $preferred_contact_method = $_POST['preferred_contact_method'];
    $package_id = $_POST['package_id'];
    $appointment_date = $_POST['appointment_date'];
    $additional_notes = trim($_POST['additional_notes']);

    // Validate inputs
    if (empty($name)) {
        $errors[] = "Please provide your full name.";
    }
    if (empty($email)) {
        $errors[] = "Please provide your email address.";
    }
    if (empty($phone)) {
        $errors[] = "Please provide your phone number.";
    }
    if (empty($age) || $age <= 0) {
        $errors[] = "Please provide a valid age.";
    }
    if (empty($gender)) {
        $errors[] = "Please select your gender.";
    }
    if (empty($address)) {
        $errors[] = "Please provide your address.";
    }
    if (empty($preferred_contact_method)) {
        $errors[] = "Please select your preferred contact method.";
    }
    if (empty($appointment_date)) {
        $errors[] = "Please select a preferred appointment date and time.";
    }
    if (empty($package_id)) {
        $errors[] = "Please select a package.";
    }

    // Ensure the appointment date is in the future
    $appointment_datetime = new DateTime($appointment_date);
    $current_datetime = new DateTime();
    if ($appointment_datetime <= $current_datetime) {
        $errors[] = "Please select a future date and time for your appointment.";
    }

    // Check for overlapping appointments (availability)
    if (empty($errors)) {
        // Appointment duration in minutes
        $duration = 60;
        $appointment_end = clone $appointment_datetime;
        $appointment_end->modify('+' . $duration . ' minutes');

        // Prepare and execute the availability query
        $availabilityQuery = "
            SELECT COUNT(*) as count FROM appointments
            WHERE appointment_date < ? AND DATE_ADD(appointment_date, INTERVAL ? MINUTE) > ?
        ";
        $stmt = $conn->prepare($availabilityQuery);
        if ($stmt) {
            $appointment_end_str = $appointment_end->format('Y-m-d H:i:s');
            $appointment_start_str = $appointment_datetime->format('Y-m-d H:i:s');
            $stmt->bind_param("sis", $appointment_end_str, $duration, $appointment_start_str);
            $stmt->execute();
            $stmt->bind_result($count);
            $stmt->fetch();
            $stmt->close();

            if ($count > 0) {
                $errors[] = "The selected time slot is not available. Please choose a different time.";
            }
        } else {
            $errors[] = "Database error during availability check: " . $conn->error;
        }
    }

    if (empty($errors)) {
        // Insert appointment
        $insertQuery = "INSERT INTO appointments
            (package_id, appointment_date, name, email, phone, age, gender, address, preferred_contact_method, additional_notes)
            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
        $stmt = $conn->prepare($insertQuery);
        if ($stmt) {
            $appointment_date_str = $appointment_datetime->format('Y-m-d H:i:s');
            $stmt->bind_param(
                "isssisssss",
                $package_id,
                $appointment_date_str,
                $name,
                $email,
                $phone,
                $age,
                $gender,
                $address,
                $preferred_contact_method,
                $additional_notes
            );
            if ($stmt->execute()) {
                $success = "Appointment requested successfully! We will contact you soon to confirm the details.";

                // Fetch selected package name for email
                $stmt_pkg = $conn->prepare("SELECT package_name FROM packages WHERE id = ?");
                if ($stmt_pkg) {
                    $stmt_pkg->bind_param("i", $package_id);
                    $stmt_pkg->execute();
                    $stmt_pkg->bind_result($package_name);
                    $stmt_pkg->fetch();
                    $stmt_pkg->close();

                    // Send confirmation email
                    $to = $email;
                    $subject = "Appointment Request Received";
                    $message = "Dear $name,\n\nThank you for requesting an appointment with Longeva.\n\nPackage: $package_name\nPreferred Date & Time: $appointment_date_str\n\nWe will contact you via $preferred_contact_method to confirm the details.\n\nBest regards,\nLongeva Team";
                    $headers = "From: info@longevacare.com";

                    // Suppress errors for mail() function
                    @mail($to, $subject, $message, $headers);
                } else {
                    $errors[] = "Failed to fetch package details for email: " . $conn->error;
                }
            } else {
                $errors[] = "Error scheduling appointment: " . $stmt->error;
            }
            $stmt->close();
        } else {
            $errors[] = "Database error during appointment scheduling: " . $conn->error;
        }
    }
}
?>
<!DOCTYPE html>
<html>
<head>
    <title>Request Appointment - Longeva</title>
    <!-- Include Bootstrap CSS and optional theme -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- Custom Styles -->
    <style>
        body {
            background-color: #121212; /* Dark background */
            color: #fff;
            font-family: 'Open Sans', sans-serif;
        }
        .container {
            margin-top: 50px;
            margin-bottom: 50px;
        }
        .card {
            background-color: #1e1e1e;
            border: none;
            border-radius: 8px;
        }
        .card-header {
            background-color: #1e1e1e;
            border-bottom: none;
            text-align: center;
            padding-top: 30px;
        }
        .card-header h2 {
            color: #D1C287; /* Gold color */
            font-weight: bold;
            text-transform: uppercase;
        }
        .form-control {
            background-color: #2e2e2e;
            border: 1px solid #444;
            color: #fff;
        }
        .form-control:focus {
            background-color: #2e2e2e;
            border-color: #D1C287;
            color: #fff;
        }
        .btn-gold {
            background-color: #D1C287;
            color: #000;
            border: none;
            font-weight: bold;
            text-transform: uppercase;
        }
        .btn-gold:hover {
            background-color: #b8a461;
            color: #000;
        }
        .package-details {
            padding: 15px;
            background-color: #2e2e2e;
            color: #fff;
            border-radius: 5px;
            margin-bottom: 20px;
            display: none;
        }
        .footer {
            background-color: #1e1e1e;
            color: #fff;
            padding: 20px;
            text-align: center;
        }
        .footer a {
            color: #D1C287;
            text-decoration: none;
        }
        .footer a:hover {
            text-decoration: underline;
        }
        .alert {
            background-color: #ff4d4d;
            color: #fff;
            border: none;
        }
        .modal-content {
            background-color: #1e1e1e;
            color: #fff;
            border: none;
        }
        .modal-header {
            border-bottom: none;
        }
        .modal-footer {
            border-top: none;
        }
        .close {
            color: #fff;
            opacity: 1;
        }
        .close:hover {
            color: #D1C287;
        }
        .contact-info {
            margin-top: 30px;
            text-align: center;
        }
        .contact-info p {
            margin-bottom: 5px;
        }
        .contact-info i {
            color: #D1C287;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Card -->
        <div class="card shadow">
            <div class="card-header">
                <h2>Request an Appointment</h2>
            </div>
            <div class="card-body">
                <?php
                if (!empty($success)) {
                    // Success Modal
                    echo "
                    <div class='modal' tabindex='-1' role='dialog' id='successModal'>
                      <div class='modal-dialog' role='document'>
                        <div class='modal-content'>
                          <div class='modal-header'>
                            <h5 class='modal-title'>Appointment Requested</h5>
                            <button type='button' class='close' data-dismiss='modal' aria-label='Close' onclick=\"window.location.href='public_appointment.php';\">
                              <span aria-hidden='true'>&times;</span>
                            </button>
                          </div>
                          <div class='modal-body'>
                            <p>$success</p>
                          </div>
                          <div class='modal-footer'>
                            <button type='button' class='btn btn-gold' onclick=\"window.location.href='public_appointment.php';\">Close</button>
                          </div>
                        </div>
                      </div>
                    </div>
                    ";
                }
                if (!empty($errors)) {
                    foreach ($errors as $error) {
                        echo "<div class='alert alert-danger'>$error</div>";
                    }
                }
                ?>
                <form method="POST" action="">
                    <div class="form-group">
                        <label for="name">Full Name</label>
                        <input type="text" name="name" class="form-control" placeholder="Enter your full name" required/>
                    </div>
                    <div class="form-group">
                        <label for="email">Email Address</label>
                        <input type="email" name="email" class="form-control" placeholder="Enter your email address" required/>
                    </div>
                    <div class="form-group">
                        <label for="phone">Phone Number</label>
                        <input type="text" name="phone" class="form-control" placeholder="Enter your phone number" required/>
                    </div>
                    <div class="form-group">
                        <label for="age">Age</label>
                        <input type="number" name="age" min="0" class="form-control" placeholder="Enter your age" required/>
                    </div>
                    <div class="form-group">
                        <label for="gender">Gender</label>
                        <select name="gender" class="form-control" required>
                            <option value="">Select Gender</option>
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="address">Address</label>
                        <input type="text" name="address" class="form-control" placeholder="Enter your address" required/>
                    </div>
                    <div class="form-group">
                        <label for="preferred_contact_method">Preferred Contact Method</label>
                        <select name="preferred_contact_method" class="form-control" required>
                            <option value="">Select Preferred Contact Method</option>
                            <option value="Email">Email</option>
                            <option value="Phone">Phone</option>
                            <option value="WhatsApp">WhatsApp</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="package_id">Select Package</label>
                        <select name="package_id" id="package_id" class="form-control" onchange="showPackageDetails()" required>
                            <option value="">Select Package</option>
                            <?php
                            foreach ($packages as $pkg) {
                                echo "<option value='" . $pkg['id'] . "'>" . htmlspecialchars($pkg['package_name']) . "</option>";
                            }
                            ?>
                        </select>
                    </div>
                    <div id="package_details" class="package-details">
                        <h5>Package Details</h5>
                        <p id="package_description"></p>
                    </div>
                    <div class="form-group">
                        <label for="appointment_date">Preferred Appointment Date & Time</label>
                        <input type="datetime-local" name="appointment_date" class="form-control" required/>
                    </div>
                    <div class="form-group">
                        <label for="additional_notes">Additional Notes</label>
                        <textarea name="additional_notes" class="form-control" rows="4" placeholder="Any additional information or special requests"></textarea>
                    </div>
                    <button type="submit" class="btn btn-gold btn-block">Request Appointment</button>
                </form>
            </div>
        </div>

        <!-- Contact Info -->
        <div class="contact-info">
            <p><i class="fas fa-envelope"></i> Email: info@longevacare.com</p>
            <p><i class="fas fa-phone"></i> Phone: +971 528 863 600</p>
            <p><i class="fab fa-whatsapp"></i> WhatsApp: +1 (702) 526-2050</p>
            <p><i class="fas fa-map-marker-alt"></i> Location: HDS Tower, Cluster M, JLT, Dubai</p>
        </div>
    </div>

    <!-- Footer -->
    <div class="footer">
        &copy; <?php echo date('Y'); ?> LONGEVA. All rights reserved.
    </div>

    <!-- Include Bootstrap JS and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        function showPackageDetails() {
            var packageSelect = document.getElementById('package_id');
            var packageId = packageSelect.value;
            var packageDetailsDiv = document.getElementById('package_details');
            var packageDescriptionP = document.getElementById('package_description');

            if (packageId) {
                var packages = <?php echo json_encode($packages); ?>;
                var selectedPackage = packages.find(function(pkg) { return pkg.id == packageId; });
                if (selectedPackage) {
                    packageDescriptionP.innerText = selectedPackage.description;
                    packageDetailsDiv.style.display = 'block';
                } else {
                    packageDetailsDiv.style.display = 'none';
                }
            } else {
                packageDetailsDiv.style.display = 'none';
            }
        }

        $(document).ready(function() {
            // Show the success modal if success message is set
            <?php if (!empty($success)) { ?>
                $('#successModal').modal('show');
            <?php } ?>

            // Initialize tooltips (optional)
            $('[data-toggle="tooltip"]').tooltip();
        });
    </script>
</body>
</html>) i need to change the form of   // Send confirmation email and make it liek this style codes (<?php
session_start();
require_once '../db_connect.php';

// Include PHPMailer classes
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

// Autoload PHPMailer classes (if using Composer)
require '../vendor/autoload.php'; // Adjust the path to autoload.php

// Check if admin is logged in
if (!isset($_SESSION['admin_id'])) {
    header("Location: ../admin_login.php");
    exit();
}

// Get the appointment ID from GET parameters
if (!isset($_GET['id'])) {
    $_SESSION['error_message'] = "Appointment ID is missing.";
    header("Location: manage_appointments.php");
    exit();
}

$appointment_id = intval($_GET['id']); // Sanitize appointment ID

// Fetch appointment details
$stmt = $conn->prepare("
    SELECT a.*, p.package_name, p.description
    FROM appointments a
    LEFT JOIN packages p ON a.package_id = p.id
    WHERE a.id = ?
");
$stmt->bind_param("i", $appointment_id);
$stmt->execute();
$result = $stmt->get_result();
if ($result->num_rows === 0) {
    $_SESSION['error_message'] = "Appointment not found.";
    header("Location: manage_appointments.php");
    exit();
}
$appointment = $result->fetch_assoc();
$stmt->close();

// Determine the email content based on appointment status
$status = $appointment['status'];
$email_subject = '';
$status_message = '';

switch ($status) {
    case 'Pending':
        $email_subject = 'Your Appointment is Pending Confirmation';
        $status_message = 'Your appointment request is currently pending. We will review it and get back to you shortly.';
        break;
    case 'Confirmed':
        $email_subject = 'Your Appointment is Confirmed';
        $status_message = 'Great news! Your appointment has been confirmed. We look forward to seeing you.';
        break;
    case 'Completed':
        $email_subject = 'Thank You for Your Appointment';
        $status_message = 'Thank you for attending your appointment. We hope you had a great experience.';
        break;
    case 'Cancelled':
        $email_subject = 'Your Appointment has been Cancelled';
        $status_message = 'We regret to inform you that your appointment has been cancelled. Please contact us for further assistance.';
        break;
    default:
        $email_subject = 'Appointment Update';
        $status_message = 'There is an update regarding your appointment. Please see the details below.';
        break;
}

try {
    // Create a new PHPMailer instance
    $mail = new PHPMailer(true);

    // SMTP configuration
    $mail->isSMTP();
    $mail->Host       = 'smtp.hostinger.com'; // Replace with your SMTP server
    $mail->SMTPAuth   = true;
    $mail->Username   = 'info@longevacare.com'; // SMTP username
    $mail->Password   = '50495049.Info';    // SMTP password
    $mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS; // Use TLS or SSL encryption
    $mail->Port       = 465;                       // TCP port (use 587 for TLS)

// Recipients
    $mail->setFrom('info@longevacare.com', 'Longeva Health Center');
    $mail->addAddress($appointment['email'], $appointment['name']); // Patient's email and name

    // Attachments (Optional)
    // Uncomment and adjust the path if you want to attach a file
    // $mail->addAttachment('/path/to/file.pdf', 'AppointmentDetails.pdf');

    // Content
    $mail->isHTML(true);
    $mail->Subject = $email_subject;

    // Compose the email body with enhanced design
    $email_body = '
    <!DOCTYPE html>
    <html>
    <head>
        <title>' . htmlspecialchars($email_subject, ENT_QUOTES, 'UTF-8') . '</title>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
                font-family: Arial, sans-serif;
                background-color: #f7f7f7;
                color: #333333;
            }
            .email-container {
                background-color: #ffffff;
                margin: 0 auto;
                padding: 0;
                max-width: 600px;
            }
            .email-header {
                background-color: #4F3F02; /* Brown color */
                padding: 20px;
                text-align: center;
                color: #ffffff;
            }
            .email-header img {
                max-width: 150px;
                margin-bottom: 10px;
            }
            .email-header h1 {
                margin: 0;
                font-size: 24px;
                font-weight: normal;
            }
            .email-body {
                padding: 20px;
            }
            .email-body h2 {
                color: #4F3F02;
                margin-top: 0;
            }
            .email-body p {
                line-height: 1.6;
            }
            .appointment-details {
                margin-top: 20px;
                background-color: #f9f9f9;
                padding: 15px;
                border-radius: 5px;
            }
            .appointment-details h3 {
                margin-top: 0;
                color: #4F3F02;
            }
            .appointment-details p {
                margin: 5px 0;
            }
            .btn {
                display: inline-block;
                background-color: #D1C287; /* Light golden color */
                color: #4F3F02; /* Brown color */
                padding: 12px 20px;
                margin-top: 20px;
                text-decoration: none;
                border-radius: 5px;
                font-weight: bold;
            }
            .btn:hover {
                background-color: #4F3F02;
                color: #ffffff;
            }
            .email-footer {
                background-color: #f0f0f0;
                text-align: center;
                padding: 15px;
                font-size: 12px;
                color: #777777;
            }
            .email-footer p {
                margin: 5px 0;
            }
            .social-icons img {
                width: 24px;
                margin: 0 5px;
            }
            /* Responsive Design */
            @media only screen and (max-width: 600px) {
                .email-body, .appointment-details {
                    padding: 15px;
                }
                .email-header h1 {
                    font-size: 20px;
                }
                .email-body h2 {
                    font-size: 18px;
                }
            }
        </style>
    </head>
    <body>
        <div class="email-container">
            <!-- Email Header -->
            <div class="email-header">
                <img src="https://longevacare.com/wp-content/uploads/2024/09/white-logo.png" alt="Longeva Logo">
                <h1>' . htmlspecialchars($email_subject, ENT_QUOTES, 'UTF-8') . '</h1>
            </div>
            <!-- Email Body -->
            <div class="email-body">
                <p>Dear ' . htmlspecialchars($appointment['name'], ENT_QUOTES, 'UTF-8') . ',</p>
                
                <p>' . htmlspecialchars($status_message, ENT_QUOTES, 'UTF-8') . '</p>

                <!-- Appointment Details -->
                <div class="appointment-details">
                    <h3>Appointment Details</h3>
                    <p><strong>Appointment ID:</strong> ' . $appointment['id'] . '</p>
                    <p><strong>Package Selected:</strong> ' . htmlspecialchars($appointment['package_name'], ENT_QUOTES, 'UTF-8') . '</p>
                    <p><strong>Date & Time:</strong> ' . date('l, F j, Y \a\t g:i A', strtotime($appointment['appointment_date'])) . '</p>
                    <p><strong>Status:</strong> ' . htmlspecialchars($appointment['status'], ENT_QUOTES, 'UTF-8') . '</p>
                </div>

                <!-- Additional Information for Confirmed Appointments -->
                ' . ($status == 'Confirmed' ? '
                <p>Please arrive 10 minutes early to complete any necessary paperwork. If you need to reschedule, please contact us at least 24 hours in advance.</p>
                ' : '') . '

                <p>If you have any questions or need further assistance, feel free to contact us.</p>

                <p>Warm regards,<br>The Longeva Health Center Team</p>

                <a href="https://longevacare.com/contact" class="btn">Contact Us</a>
            </div>
            <!-- Email Footer -->
            <div class="email-footer">
                <p><strong>Longeva Health Center</strong></p>
                <p>Email: <a href="mailto:info@longevacare.com">info@longevacare.com</a></p>
                <p>Phone: +971 528 863 600</p>
                <p>WhatsApp: +1 (702) 526-2050</p>
                <p>Address: HDS Tower, Cluster M, JLT, Dubai</p>
                <div class="social-icons">
                    <!-- Social Media Icons (Optional) -->
                    <!-- Example: -->
                    <!-- <a href="https://www.facebook.com/YourPage"><img src="https://example.com/icons/facebook.png" alt="Facebook"></a> -->
                    <!-- <a href="https://www.twitter.com/YourProfile"><img src="https://example.com/icons/twitter.png" alt="Twitter"></a> -->
                </div>
            </div>
        </div>
    </body>
    </html>
    ';

    $mail->Body = $email_body;

    // For non-HTML email clients
    $mail->AltBody = 'Dear ' . $appointment['name'] . ',

' . strip_tags($status_message) . '

Appointment Details:
Appointment ID: ' . $appointment['id'] . '
Package Selected: ' . $appointment['package_name'] . '
Date & Time: ' . date('l, F j, Y \a\t g:i A', strtotime($appointment['appointment_date'])) . '
Status: ' . $appointment['status'] . '

If you have any questions or need further assistance, feel free to contact us.

Warm regards,
The Longeva Health Center Team

Email: info@longevacare.com
Phone: +971 528 863 600
WhatsApp: +1 (702) 526-2050
Address: HDS Tower, Cluster M, JLT, Dubai
';

    $mail->send();

    $_SESSION['success_message'] = 'Email sent successfully to ' . htmlspecialchars($appointment['email'], ENT_QUOTES, 'UTF-8') . '.';
} catch (Exception $e) {
    $_SESSION['error_message'] = 'Message could not be sent. Mailer Error: ' . $mail->ErrorInfo;
}

// Redirect back to manage_appointments.php
header("Location: manage_appointments.php");
exit();
?>) and type full codes