<?php
require 'includes/db.php';
session_start();

$user_id = $_SESSION['user_id'];
$admin_id = 1;

// SEND MESSAGE
if ($_SERVER['REQUEST_METHOD'] == 'POST') {

    $msg = trim($_POST['message']);

    if(!empty($msg)){
        $stmt = $conn->prepare("
            INSERT INTO messages (sender_id, receiver_id, message)
            VALUES (?, ?, ?)
        ");
        $stmt->bind_param("iis", $user_id, $admin_id, $msg);
        $stmt->execute();
    }
}

// FETCH CHAT (ONLY BETWEEN USER & ADMIN)
$res = mysqli_query($conn, "
    SELECT * FROM messages 
    WHERE 
        (sender_id='$user_id' AND receiver_id='$admin_id') 
        OR 
        (sender_id='$admin_id' AND receiver_id='$user_id')
    ORDER BY id ASC
");
?>

<!DOCTYPE html>
<html>
<head>
    <title>Support Chat</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        body {
            background: #f1f5f9;
        }

        .chat-box {
            height: 450px;
            overflow-y: auto;
            background: #ffffff;
            padding: 15px;
            border-radius: 10px;
        }

        .msg {
            padding: 10px 15px;
            border-radius: 15px;
            margin-bottom: 10px;
            max-width: 70%;
            word-wrap: break-word;
        }

        .me {
            background: #0d6efd;
            color: #fff;
            margin-left: auto;
            text-align: right;
        }

        .admin {
            background: #e9ecef;
            color: #000;
            margin-right: auto;
        }

        .chat-footer {
            background: #fff;
        }
    </style>
</head>

<body>

<div class="container mt-5">
    <div class="card shadow">

        <!-- HEADER -->
        <div class="card-header bg-primary text-white d-flex justify-content-between">
            <span>?? Support</span>
            <span class="small">Admin Online</span>
        </div>

        <!-- CHAT BODY -->
        <div class="card-body chat-box" id="chatBox">

            <?php while($row = mysqli_fetch_assoc($res)): ?>

                <?php if($row['sender_id'] == $user_id): ?>
                    <div class="msg me">
                        <?php echo htmlspecialchars($row['message']); ?>
                    </div>
                <?php else: ?>
                    <div class="msg admin">
                        <strong>Support:</strong><br>
                        <?php echo htmlspecialchars($row['message']); ?>
                    </div>
                <?php endif; ?>

            <?php endwhile; ?>

        </div>

        <!-- INPUT -->
        <div class="card-footer chat-footer">
            <form method="POST" class="d-flex gap-2">
                <input type="text" name="message" 
                       class="form-control" 
                       placeholder="Type your message..." required>
                <button class="btn btn-primary">Send</button>
            </form>
        </div>

    </div>
</div>

<!-- AUTO SCROLL -->
<script>
let chatBox = document.getElementById("chatBox");
chatBox.scrollTop = chatBox.scrollHeight;
</script>

</body>
</html>