order-details.ejs

<%- include('partials/header') %>
<div class="order-detail">
    <h2>Order #<%= order.id %> Details</h2>
    <div class="order-info">
        <div class="info-section">
            <h3>Order Information</h3>
            <p><strong>Date:</strong> <%= new Date(order.created_at).toLocaleString() %></p>
            <p><strong>Status:</strong> <span class="status-badge <%= order.status.toLowerCase() %>"><%= order.status %></span></p>
            <p><strong>Total Amount:</strong> ฿<%= order.total_amount.toLocaleString() %></p>
        </div>
        
        <div class="info-section">
            <h3>Shipping Address</h3>
            <p id="currentAddress"><%= order.shipping_address %></p>

            <!-- Input สำหรับแก้ไขที่อยู่ -->
            <input type="text" id="newAddress" placeholder="Enter new address">
            <button onclick="updateAddress(<%= order.id %>)">Update Address</button>
        </div>
    </div>

    <div class="order-items-detail">
        <h3>Order Items</h3>
        <div class="items-grid">
            <% items.forEach(item => { %>
                <div class="item-card">
                    <img src="<%= item.image_url %>" alt="<%= item.name %>">
                    <div class="item-info">
                        <h4><%= item.name %></h4>
                        <p>Quantity: <%= item.quantity %></p>
                        <p>Price per unit: ฿<%= item.price.toLocaleString() %></p>
                        <p>Subtotal: ฿<%= (item.price * item.quantity).toLocaleString() %></p>
                    </div>
                </div>
            <% }); %>
        </div>
    </div>

    <div class="order-actions">
        <a href="/order/history" class="back-btn">Back to Order History</a>
        <a href="/" class="continue-shopping">Continue Shopping</a>
    </div>
</div>

<script>
    function updateAddress(orderId) {
        const newAddress = document.getElementById("newAddress").value;
        
        if (!newAddress.trim()) {
            alert("Please enter a valid address.");
            return;
        }

        fetch(`/order/update-address/${orderId}`, {
            method: "PUT",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ shipping_address: newAddress })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById("currentAddress").innerText = newAddress;
                alert("Address updated successfully!");
            } else {
                alert("Failed to update address.");
            }
        })
        .catch(error => console.error("Error:", error));
    }
</script>