<?php
session_start();

if (!isset($_SESSION["admin_id"])) {
    header("Location: login.php");
    exit;
}

require_once "../config/database.php";

$message_count = 0;

/* ================= GET CUSTOMER MESSAGES ================= */

$result = $conn->query("
    SELECT *
    FROM customer_messages
    ORDER BY id DESC
");

if ($result) {
    $message_count = $result->num_rows;
}
?>

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

<head>

    <meta charset="UTF-8">

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

    <title>
        Customer Messages - Muthu Jewellers
    </title>


    <style>

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }


        body {
            font-family: Arial, sans-serif;
            background: #f5f5f5;
            color: #333;
        }


        /* ================= HEADER ================= */

        header {
            background: #111;
            color: white;

            padding: 18px 25px;

            display: flex;
            justify-content: space-between;
            align-items: center;
        }


        .logo {
            font-size: 22px;
            font-weight: bold;
        }


        .header-right {
            display: flex;
            align-items: center;
            gap: 10px;
        }


        .back-btn {
            color: white;
            text-decoration: none;

            background: #555;

            padding: 9px 15px;

            border-radius: 6px;
        }


        .back-btn:hover {
            background: #777;
        }


        .logout {
            color: white;
            text-decoration: none;

            background: #b8860b;

            padding: 9px 15px;

            border-radius: 6px;
        }


        .logout:hover {
            background: #d4af37;
            color: #111;
        }


        /* ================= CONTAINER ================= */

        .container {
            max-width: 1200px;

            margin: auto;

            padding: 30px 25px;
        }


        h1 {
            margin-bottom: 8px;
        }


        .subtitle {
            color: #666;
            margin-bottom: 25px;
        }


        /* ================= MESSAGE COUNT ================= */

        .message-info {
            background: white;

            padding: 18px 20px;

            border-radius: 10px;

            margin-bottom: 25px;

            box-shadow:
                0 3px 12px
                rgba(0,0,0,0.08);
        }


        .message-info strong {
            color: #b8860b;
            font-size: 20px;
        }


        /* ================= MESSAGES ================= */

        .messages {
            display: grid;
            gap: 20px;
        }


        .message-card {
            background: white;

            padding: 25px;

            border-radius: 12px;

            box-shadow:
                0 3px 12px
                rgba(0,0,0,0.08);
        }


        .message-header {
            display: flex;

            justify-content: space-between;

            align-items: flex-start;

            gap: 20px;

            margin-bottom: 18px;
        }


        .customer-name {
            font-size: 21px;

            font-weight: bold;

            color: #222;
        }


        .message-date {
            color: #888;

            font-size: 13px;
        }


        /* ================= CUSTOMER DETAILS ================= */

        .customer-details {
            display: grid;

            grid-template-columns:
                repeat(2, 1fr);

            gap: 10px;

            margin-bottom: 20px;
        }


        .detail {
            background: #fafafa;

            padding: 12px;

            border-radius: 6px;
        }


        .detail strong {
            display: block;

            color: #777;

            font-size: 13px;

            margin-bottom: 4px;
        }


        .detail span {
            color: #222;

            word-break: break-word;
        }


        /* ================= MESSAGE BOX ================= */

        .message-box {
            background: #fffaf0;

            border-left: 4px solid #d4af37;

            padding: 18px;

            border-radius: 6px;

            margin-bottom: 20px;
        }


        .message-box strong {
            display: block;

            margin-bottom: 8px;

            color: #b8860b;
        }


        .message-box p {
            line-height: 1.6;

            white-space: pre-wrap;
        }


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

        .reply-section {
            margin-top: 15px;
        }


        .whatsapp-btn {
            display: inline-block;

            background: #25D366;

            color: white;

            text-decoration: none;

            padding: 12px 20px;

            border-radius: 7px;

            font-weight: bold;

            transition: 0.3s;
        }


        .whatsapp-btn:hover {
            background: #128C7E;

            transform: translateY(-2px);
        }


        .no-phone {
            display: inline-block;

            background: #eee;

            color: #777;

            padding: 12px 20px;

            border-radius: 7px;

            font-size: 14px;
        }


        /* ================= EMPTY ================= */

        .empty {
            background: white;

            padding: 50px;

            text-align: center;

            border-radius: 12px;

            box-shadow:
                0 3px 12px
                rgba(0,0,0,0.08);
        }


        .empty-icon {
            font-size: 50px;

            margin-bottom: 15px;
        }


        .empty h2 {
            margin-bottom: 8px;
        }


        .empty p {
            color: #777;
        }


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

        @media (max-width: 700px) {

            header {
                flex-direction: column;

                gap: 15px;

                align-items: flex-start;
            }


            .header-right {
                width: 100%;

                justify-content: space-between;
            }


            .customer-details {
                grid-template-columns: 1fr;
            }


            .message-header {
                flex-direction: column;
            }


            .whatsapp-btn {
                width: 100%;

                text-align: center;
            }

        }

    </style>

</head>


<body>


    <!-- ================= HEADER ================= -->

    <header>

        <div class="logo">
            MUTHU JEWELLERS
        </div>


        <div class="header-right">

            <a
                href="dashboard.php"
                class="back-btn"
            >
                ← Dashboard
            </a>


            <a
                href="logout.php"
                class="logout"
            >
                Logout
            </a>

        </div>

    </header>



    <!-- ================= MAIN ================= -->

    <div class="container">


        <h1>
            Customer Messages 💬
        </h1>


        <p class="subtitle">
            View messages sent by customers
            through the Contact Us page.
        </p>



        <!-- ================= MESSAGE COUNT ================= -->

        <div class="message-info">

            Total Customer Messages:

            <strong>
                <?php echo $message_count; ?>
            </strong>

        </div>



        <!-- ================= MESSAGES ================= -->

        <div class="messages">


            <?php

            if ($result && $result->num_rows > 0) {

                while ($message = $result->fetch_assoc()) {

            ?>


                    <div class="message-card">


                        <!-- ================= MESSAGE HEADER ================= -->

                        <div class="message-header">


                            <div class="customer-name">

                                <?php

                                echo htmlspecialchars(
                                    $message["name"]
                                );

                                ?>

                            </div>


                            <div class="message-date">

                                <?php

                                if (isset($message["created_at"])) {

                                    echo htmlspecialchars(
                                        $message["created_at"]
                                    );

                                }

                                ?>

                            </div>


                        </div>



                        <!-- ================= CUSTOMER DETAILS ================= -->

                        <div class="customer-details">


                            <!-- EMAIL -->

                            <div class="detail">

                                <strong>
                                    Email
                                </strong>


                                <span>

                                    <?php

                                    echo htmlspecialchars(
                                        $message["email"]
                                    );

                                    ?>

                                </span>

                            </div>



                            <!-- PHONE -->

                            <div class="detail">

                                <strong>
                                    Phone
                                </strong>


                                <span>

                                    <?php

                                    if (
                                        isset($message["phone"])
                                        &&
                                        trim($message["phone"]) !== ""
                                    ) {

                                        echo htmlspecialchars(
                                            $message["phone"]
                                        );

                                    } else {

                                        echo "Not provided";

                                    }

                                    ?>

                                </span>

                            </div>


                        </div>



                        <!-- ================= CUSTOMER MESSAGE ================= -->

                        <div class="message-box">


                            <strong>
                                Message
                            </strong>


                            <p>

                                <?php

                                echo htmlspecialchars(
                                    $message["message"]
                                );

                                ?>

                            </p>


                        </div>



                        <!-- ================= REPLY ================= -->

                        <div class="reply-section">


                            <?php

                            if (
                                isset($message["phone"])
                                &&
                                trim($message["phone"]) !== ""
                            ) {

                                /*
                                 * Remove spaces, brackets and
                                 * other characters from phone number.
                                 */

                                $phone =
                                    preg_replace(
                                        "/[^0-9]/",
                                        "",
                                        $message["phone"]
                                    );


                                /*
                                 * Sri Lankan number:
                                 * 076xxxxxxx
                                 *
                                 * Convert to:
                                 * 9476xxxxxxx
                                 */

                                if (
                                    strlen($phone) === 10
                                    &&
                                    substr($phone, 0, 1) === "0"
                                ) {

                                    $phone =
                                        "94" .
                                        substr($phone, 1);

                                }


                                $customer_name =
                                    $message["name"];


                                $whatsapp_message =
                                    "Hello " .
                                    $customer_name .
                                    ", thank you for contacting Muthu Jewellers. We received your message and would be happy to help you.";


                                $whatsapp_url =
                                    "https://wa.me/" .
                                    $phone .
                                    "?text=" .
                                    urlencode(
                                        $whatsapp_message
                                    );

                            ?>


                                <a
                                    href="<?php echo htmlspecialchars($whatsapp_url); ?>"
                                    target="_blank"
                                    class="whatsapp-btn"
                                >

                                    💬 Reply via WhatsApp

                                </a>


                            <?php

                            } else {

                            ?>


                                <span class="no-phone">

                                    📵 Customer phone number
                                    not provided

                                </span>


                            <?php

                            }

                            ?>


                        </div>


                    </div>


            <?php

                }

            } else {

            ?>


                <div class="empty">


                    <div class="empty-icon">
                        💬
                    </div>


                    <h2>
                        No Messages
                    </h2>


                    <p>
                        There are currently no
                        customer messages.
                    </p>


                </div>


            <?php

            }

            ?>


        </div>


    </div>


</body>

</html>