<?php
session_start();

require_once "config/database.php";

$message_sent = false;
$error_message = "";

if ($_SERVER["REQUEST_METHOD"] === "POST") {

    $name = trim($_POST["name"] ?? "");
    $email = trim($_POST["email"] ?? "");
    $phone = trim($_POST["phone"] ?? "");
    $message = trim($_POST["message"] ?? "");


    if ($name === "" || $email === "" || $message === "") {

        $error_message = "Please fill in all required fields.";

    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {

        $error_message = "Please enter a valid email address.";

    } else {

        $stmt = $conn->prepare(
            "INSERT INTO customer_messages
             (name, email, phone, message)
             VALUES (?, ?, ?, ?)"
        );

        if ($stmt) {

            $stmt->bind_param(
                "ssss",
                $name,
                $email,
                $phone,
                $message
            );

            if ($stmt->execute()) {

                $message_sent = true;

            } else {

                $error_message =
                    "Failed to send your message. Please try again.";
            }

            $stmt->close();

        } else {

            $error_message =
                "Something went wrong. Please try again.";
        }
    }
}

?>

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>Contact Us - Muthu Jewellers</title>


    <style>

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }


        body {
            background-color: #fffaf5;
            color: #333;
        }


        /* ================= NAVIGATION ================= */

        nav {
            background-color: #111;

            padding: 18px 7%;

            display: flex;

            justify-content: space-between;

            align-items: center;
        }


        .logo {
            color: #d4af37;

            font-size: 28px;

            font-weight: bold;
        }


        nav ul {
            list-style: none;

            display: flex;

            gap: 30px;
        }


        nav ul li a {
            color: white;

            text-decoration: none;

            font-size: 16px;
        }


        nav ul li a:hover {
            color: #d4af37;
        }


        /* ================= CONTACT SECTION ================= */

        .contact-section {

            min-height: 75vh;

            padding: 70px 20px;

            display: flex;

            justify-content: center;

            align-items: flex-start;
        }


        .contact-container {

            width: 100%;

            max-width: 800px;

            background-color: white;

            padding: 40px;

            border-radius: 12px;

            box-shadow:
                0 5px 20px
                rgba(0, 0, 0, 0.12);
        }


        .contact-container h1 {

            text-align: center;

            font-size: 36px;

            color: #222;

            margin-bottom: 10px;
        }


        .contact-intro {

            text-align: center;

            color: #666;

            margin-bottom: 35px;

            line-height: 1.6;
        }


        /* ================= SUCCESS MESSAGE ================= */

        .success-message {

            background-color: #e8f7e8;

            color: #218838;

            border: 1px solid #b7dfb7;

            padding: 15px;

            border-radius: 6px;

            margin-bottom: 25px;

            text-align: center;
        }


        /* ================= ERROR MESSAGE ================= */

        .error-message {

            background-color: #ffe8e8;

            color: #c62828;

            border: 1px solid #f0b5b5;

            padding: 15px;

            border-radius: 6px;

            margin-bottom: 25px;

            text-align: center;
        }


        /* ================= FORM ================= */

        .form-group {

            margin-bottom: 20px;
        }


        .form-group label {

            display: block;

            font-weight: bold;

            margin-bottom: 8px;

            color: #222;
        }


        .form-group label span {

            color: #d4af37;
        }


        .form-group input,
        .form-group textarea {

            width: 100%;

            padding: 13px;

            border: 1px solid #ccc;

            border-radius: 6px;

            font-size: 16px;

            outline: none;

            background-color: white;
        }


        .form-group input:focus,
        .form-group textarea:focus {

            border-color: #d4af37;

            box-shadow:
                0 0 4px
                rgba(212, 175, 55, 0.3);
        }


        .form-group textarea {

            min-height: 150px;

            resize: vertical;
        }


        /* ================= BUTTON ================= */

        .submit-btn {

            width: 100%;

            background-color: #d4af37;

            color: #111;

            border: none;

            padding: 14px;

            border-radius: 6px;

            font-size: 17px;

            font-weight: bold;

            cursor: pointer;
        }


        .submit-btn:hover {

            background-color: #111;

            color: #d4af37;
        }


        /* ================= WHATSAPP ================= */

        .whatsapp-contact {

            margin-top: 25px;

            padding: 25px;

            background-color: #f5fff7;

            border: 1px solid #d8f3df;

            border-radius: 10px;

            text-align: center;
        }


        .whatsapp-contact h3 {

            color: #222;

            margin-bottom: 10px;

            font-size: 22px;
        }


        .whatsapp-contact p {

            color: #666;

            margin-bottom: 18px;

            line-height: 1.5;
        }


        .whatsapp-btn {

            display: inline-block;

            background-color: #25D366;

            color: #111;

            text-decoration: none;

            padding: 12px 22px;

            border-radius: 6px;

            font-weight: bold;

            transition: 0.3s;
        }


        .whatsapp-btn:hover {

            background-color: #1ebe5d;

            transform: translateY(-2px);
        }


        /* ================= FOOTER ================= */

        footer {

            background-color: #111;

            color: white;

            text-align: center;

            padding: 25px;

            margin-top: 20px;
        }


        footer span {

            color: #d4af37;

            font-weight: bold;
        }


        /* ================= RESPONSIVE ================= */

        @media (max-width: 600px) {

            nav {

                flex-direction: column;

                gap: 15px;
            }


            nav ul {

                gap: 15px;

                flex-wrap: wrap;

                justify-content: center;
            }


            .contact-section {

                padding: 40px 15px;
            }


            .contact-container {

                padding: 25px;
            }


            .contact-container h1 {

                font-size: 30px;
            }


            .whatsapp-contact {

                padding: 20px;
            }

        }

    </style>

</head>


<body>


    <!-- ================= NAVIGATION ================= -->

    <nav>

        <div class="logo">
            Muthu Jewellers
        </div>


        <ul>

            <li>
                <a href="index.php">
                    Home
                </a>
            </li>


            <li>
                <a href="shop.php">
                    Shop
                </a>
            </li>


            <li>
                <a href="cart.php">
                    Cart 🛒
                </a>
            </li>


            <li>
                <a href="checkout.php">
                    Checkout
                </a>
            </li>


            <li>
                <a href="delivery.php">
                    Delivery
                </a>
            </li>


            <li>
                <a href="contact.php">
                    Contact
                </a>
            </li>

        </ul>

    </nav>



    <!-- ================= CONTACT ================= -->

    <section class="contact-section">


        <div class="contact-container">


            <h1>
                Contact Us 💬
            </h1>


            <p class="contact-intro">

                Have a question or need help?

                Send us a message and our team
                will get back to you.

            </p>



            <?php if ($message_sent): ?>

                <div class="success-message">

                    Your message has been sent successfully!

                    Thank you for contacting Muthu Jewellers. ❤️

                </div>

            <?php endif; ?>



            <?php if ($error_message !== ""): ?>

                <div class="error-message">

                    <?php
                    echo htmlspecialchars($error_message);
                    ?>

                </div>

            <?php endif; ?>



            <!-- ================= FORM ================= -->

            <form
                method="POST"
                action="contact.php"
            >


                <!-- NAME -->

                <div class="form-group">

                    <label>
                        Name <span>*</span>
                    </label>


                    <input
                        type="text"
                        name="name"
                        placeholder="Enter your name"
                        value="<?php
                            echo htmlspecialchars(
                                $_POST["name"] ?? ""
                            );
                        ?>"
                        required
                    >

                </div>



                <!-- EMAIL -->

                <div class="form-group">

                    <label>
                        Email <span>*</span>
                    </label>


                    <input
                        type="email"
                        name="email"
                        placeholder="Enter your email"
                        value="<?php
                            echo htmlspecialchars(
                                $_POST["email"] ?? ""
                            );
                        ?>"
                        required
                    >

                </div>



                <!-- PHONE -->

                <div class="form-group">

                    <label>
                        Phone
                    </label>


                    <input
                        type="text"
                        name="phone"
                        placeholder="Enter your phone number"
                        value="<?php
                            echo htmlspecialchars(
                                $_POST["phone"] ?? ""
                            );
                        ?>"
                    >

                </div>



                <!-- MESSAGE -->

                <div class="form-group">

                    <label>
                        Message <span>*</span>
                    </label>


                    <textarea
                        name="message"
                        placeholder="Write your message here..."
                        required
                    ><?php
                        echo htmlspecialchars(
                            $_POST["message"] ?? ""
                        );
                    ?></textarea>

                </div>



                <!-- SUBMIT -->

                <button
                    type="submit"
                    class="submit-btn"
                >
                    Send Message 📤
                </button>


            </form>



            <!-- ================= WHATSAPP CONTACT ================= -->

            <div class="whatsapp-contact">

                <h3>
                    Prefer WhatsApp? 💬
                </h3>


                <p>
                    Need a quick response?
                    Contact Muthu Jewellers directly on WhatsApp.
                </p>


                <a
                    href="https://wa.me/94764416123?text=Hello%20Muthu%20Jewellers%2C%20I%20would%20like%20to%20know%20more%20about%20your%20jewellery%20products."
                    target="_blank"
                    rel="noopener noreferrer"
                    class="whatsapp-btn"
                >
                    📱 Chat on WhatsApp
                </a>

            </div>


        </div>


    </section>



    <!-- ================= FOOTER ================= -->

    <footer>

        <p>

            &copy;
            <?php echo date("Y"); ?>

            <span>
                Muthu Jewellers
            </span>

            . All Rights Reserved.

        </p>

    </footer>


</body>

</html>