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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Messages - Elfit Arabia</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="/style.css">
    <style>
        body {
            padding-top: 80px;
            padding-bottom: 40px;
        }

        .container {
            max-width: 1200px;
            padding: 0 15px;
        }

        .section {
            background: linear-gradient(145deg, var(--surface-card) 0%, var(--primary-800) 100%);
            border: 1px solid var(--surface-border);
            border-radius: var(--radius-lg);
            padding: 28px;
            margin-bottom: 24px;
            box-shadow: var(--shadow-md);
        }

        .section h2 {
            color: var(--text-primary);
            font-weight: 700;
        }

        .message-card {
            background: linear-gradient(145deg, var(--surface-card) 0%, var(--surface-elevated) 100%);
            border-radius: var(--radius-md);
            padding: 24px;
            margin-bottom: 16px;
            border: 1px solid var(--surface-border);
            transition: all 0.25s ease;
        }

        .message-card:hover {
            border-color: var(--accent-500);
            box-shadow: var(--shadow-glow);
        }

        .message-header {
            display: flex;
            justify-content: space-between;
            align-items: start;
            margin-bottom: 15px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .message-title {
            flex: 1;
            min-width: 200px;
        }

        .message-date {
            font-size: 0.85rem;
            color: var(--text-muted);
            white-space: nowrap;
        }

        .message-body {
            margin-bottom: 15px;
            line-height: 1.7;
            color: var(--text-secondary);
        }

        .message-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 15px;
        }

        .status-badge {
            display: inline-block;
            padding: 5px 14px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
            margin-top: 5px;
        }

        .status-quote-sent {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: #000;
        }

        .status-order-placed {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            color: #fff;
        }

        .status-dispatched {
            background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
            color: #fff;
        }

        .status-delivered {
            background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
            color: #fff;
        }

        .status-cancelled {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            color: #fff;
        }

        .zoomable-image {
            transition: transform 0.25s ease;
            border-radius: var(--radius-md);
            border: 2px solid var(--surface-border);
            cursor: pointer;
        }

        .zoomable-image:hover {
            transform: scale(1.03);
            border-color: var(--accent-500);
            box-shadow: var(--shadow-md);
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-expand-lg fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="/dashboard">Elfit Arabia Client Dashboard</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="/my-messages">
                            <i class="fas fa-envelope me-1"></i> My Messages
                            <% if (unread_count> 0) { %>
                                <span class="badge bg-danger rounded-pill ms-1 badge-notification">
                                    <%= unread_count %>
                                </span>
                                <% } %>
                        </a>
                    </li>
                    <li class="nav-item"><a class="nav-link" href="/my-orders"><i class="fas fa-shopping-cart me-1"></i>
                            My Orders</a></li>
                    <li class="nav-item"><a class="nav-link" href="/contact-us"><i class="fas fa-phone me-1"></i>
                            Contact Us</a></li>
                    <li class="nav-item"><a class="nav-link" href="/logout"><i class="fas fa-sign-out-alt me-1"></i>
                            Logout</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="section">
            <h2 class="mb-4"><i class="fas fa-inbox me-2"></i><strong>My Messages</strong></h2>

            <% const flashMsgs=getFlashedMessages(true); %>
                <% if (flashMsgs && flashMsgs.length> 0) { %>
                    <% flashMsgs.forEach(function(m) { %>
                        <div class="alert alert-<%= m.category === 'error' ? 'danger' : m.category %> alert-dismissible fade show"
                            role="alert">
                            <%= m.message %>
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                        <% }); %>
                            <% } %>

                                <% if (messages && messages.length> 0) { %>
                                    <% messages.forEach(function(msg) { %>
                                        <div class="message-card">
                                            <div class="message-header">
                                                <div class="message-title">
                                                    <h5 class="mb-1"><strong>
                                                            <i class="fas fa-file-alt me-1"></i>
                                                            <%= msg.subject %>
                                                        </strong></h5>
                                                    <div class="text-muted">
                                                        <%= msg.order_name %> (<%= msg.order_quantity %>)
                                                    </div>
                                                    <% if (msg.order_status && msg.order_status !=='unknown' ) { %>
                                                        <span
                                                            class="status-badge status-<%= msg.order_status.replace(/ /g, '-') %>">
                                                            <i class="fas fa-circle me-1"
                                                                style="font-size: 0.5rem;"></i>
                                                            <%= msg.order_status.replace(/_/g, ' ' ).replace(/\b\w/g,
                                                                l=> l.toUpperCase()) %>
                                                        </span>
                                                        <% } %>
                                                </div>
                                                <small class="message-date">
                                                    <i class="fas fa-clock me-1"></i>
                                                    <%= msg.created_at %>
                                                </small>
                                            </div>

                                            <div class="message-body">
                                                <%= msg.body %>
                                            </div>

                                            <% if (msg.attachment_name) { %>
                                                <div class="mb-3">
                                                    <img src="/uploads/products/<%= msg.attachment_name %>"
                                                        class="img-fluid zoomable-image"
                                                        style="max-height:200px; object-fit:contain;"
                                                        alt="Quotation attachment">
                                                </div>
                                                <% } %>

                                                    <div class="message-actions">
                                                        <% if (msg.order_id && msg.order_status==='quote sent' &&
                                                            msg.subject.includes('Quotation')) { %>
                                                            <a href="/place-order/<%= msg.order_id %>"
                                                                class="btn btn-success btn-sm"
                                                                onclick="return confirm('Are you sure you want to confirm this order? This will notify the admin.');">
                                                                <i class="fas fa-check me-1"></i> Confirm Order
                                                            </a>
                                                            <% } %>

                                                                <% if (msg.id && msg.order_id) { %>
                                                                    <a href="/talk-further/<%= msg.id %>"
                                                                        class="btn btn-primary btn-sm">
                                                                        <i class="fab fa-whatsapp me-1"></i> Discuss on
                                                                        WhatsApp
                                                                    </a>
                                                                    <% } %>

                                                                        <% if (msg.order_id &&
                                                                            msg.order_status==='order placed' ) { %>
                                                                            <button type="button"
                                                                                class="btn btn-danger btn-sm"
                                                                                data-bs-toggle="modal"
                                                                                data-bs-target="#cancelModal<%= msg.order_id %>">
                                                                                <i class="fas fa-times me-1"></i> Cancel
                                                                                Order
                                                                            </button>
                                                                            <% } %>
                                                    </div>
                                        </div>

                                        <% if (msg.order_id && msg.order_status==='order placed' ) { %>
                                            <div class="modal fade" id="cancelModal<%= msg.order_id %>" tabindex="-1"
                                                aria-hidden="true">
                                                <div class="modal-dialog modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title"><i
                                                                    class="fas fa-exclamation-triangle me-2"></i>Confirm
                                                                Order Cancellation</h5>
                                                            <button type="button" class="btn-close btn-close-white"
                                                                data-bs-dismiss="modal"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <p>Are you sure you want to cancel this order?</p>
                                                            <div class="alert alert-warning">
                                                                <strong><i class="fas fa-box me-1"></i>
                                                                    Product:</strong>
                                                                <%= msg.order_name %><br>
                                                                    <strong><i class="fas fa-cubes me-1"></i>
                                                                        Quantity:</strong>
                                                                    <%= msg.order_quantity %>
                                                            </div>
                                                            <p class="text-muted small"><i
                                                                    class="fas fa-info-circle me-1"></i> This action
                                                                will notify the
                                                                admin and cannot be undone.</p>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-outline-light"
                                                                data-bs-dismiss="modal">Keep Order</button>
                                                            <form method="POST"
                                                                action="/cancel-order/<%= msg.order_id %>"
                                                                style="display: inline;">
                                                                <button type="submit" class="btn btn-danger">
                                                                    <i class="fas fa-times me-1"></i> Yes, Cancel Order
                                                                </button>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <% } %>
                                                <% }); %>
                                                    <% } else { %>
                                                        <div class="text-center py-5">
                                                            <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                                                            <p class="text-muted fs-5">No messages yet.</p>
                                                            <p class="text-muted">Your order updates and quotations will
                                                                appear here.</p>
                                                        </div>
                                                        <% } %>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>