<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%= product.product_name %> | ASA SHOP</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/product.css">
<style>
/* --- Background และตัวอักษร --- */
body {
background-color: #f81c1c;
color: #ffffff;
font-family: Arial, sans-serif;
}
/* --- Container --- */
.container {
max-width: 800px;
margin-top: 50px;
background: #222;
padding: 24px;
border-radius: 12px;
box-shadow: 0 6px 12px rgba(255, 165, 0, 0.15);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.container:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(255, 165, 0, 0.25);
}
/* --- Product Image --- */
.product-image {
max-width: 100%;
border-radius: 12px;
object-fit: cover;
transition: transform 0.2s ease;
}
.product-image:hover {
transform: scale(1.03);
}
/* --- ปุ่ม Orange --- */
.btn-orange {
background-color: #fff0e1;
color: rgb(10, 10, 10);
border: none;
padding: 10px 18px;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
box-shadow: 0 4px 8px rgba(255, 102, 0, 0.3);
}
.btn-orange:hover {
background-color: #cc5200;
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(255, 102, 0, 0.4);
}
.btn-orange:active {
background-color: #b34700;
transform: translateY(0);
}
/* --- ปุ่ม Yellow --- */
.btn-yellow {
background-color: #ffcc00;
color: black;
padding: 10px 18px;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
box-shadow: 0 4px 8px rgba(255, 204, 0, 0.3);
}
.btn-yellow:hover {
background-color: #e6b800;
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(255, 204, 0, 0.4);
}
.btn-yellow:active {
background-color: #cca300;
transform: translateY(0);
}
/* --- ปุ่ม Danger --- */
.btn-danger {
background-color: #ff4d4d;
color: white;
padding: 10px 18px;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
box-shadow: 0 4px 8px rgba(255, 77, 77, 0.3);
}
.btn-danger:hover {
background-color: #e60000;
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(255, 77, 77, 0.4);
}
.btn-danger:active {
background-color: #cc0000;
transform: translateY(0);
}
</style>
</head>
<body>
<div class="container text-center">
<h1 class="mb-3"><%= product.product_name %></h1>
<img src="<%= product.image %>" alt="<%= product.product_name %>" class="product-image mb-3">
<p><strong>ราคา:</strong> <span class="text-warning"><%= product.price %> บาท</span></p>
<p><strong>รายละเอียด:</strong> <%= product.description || "ไม่มีรายละเอียด" %></p>
<p><strong>สร้างโดย:</strong> <%= product.owner %></p>
<% if (currentUserEmail === product.owner) { %>
<div class="d-flex justify-content-center gap-2">
<form action="/delete_product/<%= product.product_id %>" method="POST" onsubmit="return confirm('ยืนยันการลบสินค้านี้?');">
<button type="submit" class="btn btn-danger">ลบสินค้า</button>
</form>
<form action="/products/<%= product.product_id %>/edit" method="GET">
<button type="submit" class="btn btn-yellow">แก้ไขสินค้า</button>
</form>
</div>
<% } %>
<form action="/cart/add" method="POST" class="mt-3">
<input type="hidden" name="product_id" value="<%= product.product_id %>">
<input type="hidden" name="price" value="<%= product.price %>">
<div class="d-flex justify-content-center align-items-center gap-2">
<label>จำนวน:</label>
<input type="number" name="quantity" value="1" min="1" class="form-control w-25">
<button type="submit" class="btn btn-orange">เพิ่มลงตะกร้า</button>
</div>
</form>
<a href="/" class="btn btn-secondary mt-3">กลับหน้าหลัก</a>
</div>
<!-- Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>