<%- 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>
                <span id="shipping-address"><%= order.shipping_address %></span>
                <input type="text" id="new-address" value="<%= order.shipping_address %>" style="display:none;">
            </p>
            <button id="edit-btn">แก้ไขที่อยู่</button>
            <button id="save-btn" style="display:none;">บันทึก</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>
<%- include('partials/footer') %>

<script>
document.getElementById("edit-btn").addEventListener("click", function() {
    document.getElementById("new-address").style.display = "inline";
    document.getElementById("save-btn").style.display = "inline";
    document.getElementById("edit-btn").style.display = "none"; // ซ่อนปุ่มแก้ไข
});

document.getElementById("save-btn").addEventListener("click", async function() {
    const newAddress = document.getElementById("new-address").value.trim();
    if (!newAddress) {
        alert("กรุณากรอกที่อยู่ใหม่");
        return;
    }

    const orderId = "<%= order.id %>";

    const response = await fetch(`/order/update/${orderId}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ shipping_address: newAddress })
    });

    if (response.ok) {
        document.getElementById("shipping-address").innerText = newAddress;
        document.getElementById("new-address").style.display = "none";
        document.getElementById("save-btn").style.display = "none";
        document.getElementById("edit-btn").style.display = "inline"; // แสดงปุ่มแก้ไขกลับมา
        alert("อัปเดตที่อยู่สำเร็จ!");
    } else {
        alert("เกิดข้อผิดพลาด!");
    }
});
</script>