File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090009/shop/index.html

Back
<!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Aura Shop — Minimalist E-commerce</title> <!-- Google Fonts: Inter --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- Lucide Icons --> <script src="https://unpkg.com/lucide@latest"></script> <link rel="stylesheet" href="style.css"> </head> <body> <!-- Header Navigation --> <header class="app-header" id="app-header"> <div class="header-container"> <div class="logo" id="nav-logo"> <span class="logo-dot"></span> <span class="logo-text">aura.</span> </div> <nav class="nav-links" id="nav-menu"> <a href="#" class="nav-link active" data-target="products-view" id="nav-home"> <i data-lucide="home" class="nav-icon-mobile"></i> <!-- แปะแท็ก data-i18n="nav_home" --> <span class="nav-text-label" data-i18n="nav_home">หน้าแรก</span> </a> <a href="#" class="nav-link" data-target="cart-view" id="nav-cart-link"> <i data-lucide="shopping-bag" class="nav-icon-mobile"></i> <!-- แปะแท็ก data-i18n="nav_cart" --> <span class="nav-text-label" data-i18n="nav_cart">ตะกร้าสินค้า</span> </a> <a href="#" class="nav-link" data-target="seller-view" id="nav-seller-link"> <i data-lucide="store" class="nav-icon-mobile"></i> <!-- แปะแท็ก data-i18n="nav_seller" --> <span class="nav-text-label" data-i18n="nav_seller">ระบบผู้ขาย (Seller Centre)</span> </a> <!-- เพิ่มปุ่ม Admin ตรงนี้ (ซ่อนไว้ก่อนด้วย style="display: none;") --> <a href="#" class="nav-link" data-target="admin-view" id="nav-admin-link" style="display: none; color: #3b82f6; font-weight: 600;"> <i data-lucide="settings" class="nav-icon-mobile"></i> <span class="nav-text-label" data-i18n="nav_admin">🛠️ จัดการหลังบ้าน (Admin)</span> </a> </nav> <div class="header-actions"> <div class="user-profile" id="user-profile-badge" style="cursor: pointer;" title="เปิดโปรไฟล์ผู้ใช้"> <img id="header-avatar-img" src="" style="display:none; width:20px; height:20px; border-radius:50%; object-fit:cover; margin-right:4px;"> <i data-lucide="user" class="icon-sm" id="header-avatar-icon"></i> <span id="header-username" class="user-text-label"></span> </div> <button class="theme-toggle-btn" id="theme-toggle-btn" aria-label="สลับโหมดมืด/สว่าง" title="สลับธีม"> <i data-lucide="moon" id="theme-toggle-icon"></i> </button> <!-- ปุ่มเปลี่ยนภาษา --> <button class="theme-toggle-btn" id="lang-toggle-btn" title="เปลี่ยนภาษา / Change Language" style="display: flex; gap: 4px; padding: 0 10px; width: auto; border-radius: 20px;"> <i data-lucide="globe" style="width: 18px; height: 18px;"></i> <span id="current-lang-text" style="font-size: 13px; font-weight: 700;">TH</span> </button> <button class="wishlist-btn" id="header-wishlist-btn" aria-label="ดูสิ่งที่อยากได้"> <i data-lucide="heart"></i> <span class="wishlist-badge" id="wishlist-badge-count">0</span> </button> <button class="cart-btn" id="header-cart-btn" aria-label="ดูตะกร้าสินค้า"> <i data-lucide="shopping-bag"></i> <span class="cart-badge" id="cart-badge-count">0</span> </button> <button class="logout-btn" id="logout-btn" title="ออกจากระบบ" style="display: none;"> <i data-lucide="log-out"></i> </button> </div> </div> </header> <!-- Main Container --> <main class="app-container"> <!-- View 1: Login View --> <section id="login-view" class="view-section active"> <div class="login-card" style="position: relative;"> <div style="position: absolute; top: 16px; right: 16px;"> <button type="button" onclick="toggleLanguage()" style="background: none; border: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 13px; padding: 4px; border-radius: 6px; transition: 0.2s;"> <i data-lucide="globe" style="width: 16px; height: 16px;"></i> TH/EN </button> </div> <div class="login-header"> <div class="login-logo"> <span class="logo-dot"></span> <span class="logo-text">aura.</span> </div> <h1 data-i18n="login_title">ยินดีต้อนรับสู่ Aura Shop</h1> <p data-i18n="login_subtitle">เข้าสู่ระบบเพื่อเริ่มช้อปปิ้งสินค้าสไตล์มินิมอล</p> </div> <form id="login-form" class="login-form"> <div class="input-group"> <label for="username-input" data-i18n="login_username">ชื่อผู้ใช้งาน (Username)</label> <div class="input-wrapper"> <i data-lucide="user" class="input-icon"></i> <input type="text" id="username-input" placeholder="ใส่ชื่อผู้ใช้งานของคุณ..." data-i18n="login_ph_username" required autocomplete="off"> </div> </div> <div class="input-group"> <label for="password-input" data-i18n="login_password">รหัสผ่าน (Password)</label> <div class="input-wrapper" style="position: relative;"> <i data-lucide="lock" class="input-icon"></i> <input type="password" id="password-input" placeholder="ใส่รหัสผ่านของคุณ..." data-i18n="login_ph_password" required autocomplete="off" style="padding-right: 40px;"> <button type="button" onclick="togglePasswordVisibility('password-input', this)" style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; padding: 4px;"> <i data-lucide="eye" style="width: 18px; height: 18px;"></i> </button> </div> </div> <div id="login-error-msg" style="display: none; color: #ef4444; font-size: 14px; margin-bottom: 16px; text-align: center; font-weight: 500;"></div> <button type="submit" class="btn btn-primary btn-block"> <span data-i18n="login_btn">เข้าสู่ระบบ</span> <i data-lucide="arrow-right" class="icon-right"></i> </button> </form> <div class="auth-footer" style="text-align: center; margin-top: 20px; font-size: 14px; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: 12px;"> <div> <span data-i18n="login_no_account">ยังไม่มีบัญชีผู้ใช้งาน?</span> <a href="#" id="link-to-register" style="color: var(--primary); font-weight: 600; text-decoration: none;" data-i18n="login_register_link">สมัครสมาชิกที่นี่</a> </div> <button type="button" onclick="localStorage.clear(); window.location.reload();" style="background: none; border: none; font-size: 12px; color: #94a3b8; text-decoration: underline; cursor: pointer; margin-top: 8px;" > [Dev] Reset Database & Clear Cache </button> </div> </div> </section> <!-- View 1.5: Register View --> <section id="register-view" class="view-section"> <div class="login-card" style="position: relative;"> <div style="position: absolute; top: 16px; right: 16px;"> <button type="button" onclick="toggleLanguage()" style="background: none; border: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 13px; padding: 4px; border-radius: 6px; transition: 0.2s;"> <i data-lucide="globe" style="width: 16px; height: 16px;"></i> TH/EN </button> </div> <div class="login-header"> <div class="login-logo"> <span class="logo-dot"></span> <span class="logo-text">aura.</span> </div> <h1 data-i18n="reg_title">สร้างบัญชีผู้ใช้ใหม่</h1> <p data-i18n="reg_subtitle">กรอกข้อมูลด้านล่างเพื่อเริ่มช้อปปิ้งสินค้าสไตล์มินิมอล</p> </div> <form id="register-form" class="login-form"> <div class="input-group"> <label for="reg-username" data-i18n="reg_username">ชื่อผู้ใช้งาน (Username)</label> <div class="input-wrapper"> <i data-lucide="user" class="input-icon"></i> <input type="text" id="reg-username" placeholder="ตั้งชื่อผู้ใช้งาน..." data-i18n="reg_ph_username" required autocomplete="off"> </div> </div> <div class="input-group"> <label for="reg-email" data-i18n="reg_email">อีเมล (Email)</label> <div class="input-wrapper"> <i data-lucide="mail" class="input-icon"></i> <input type="email" id="reg-email" placeholder="เช่น yourname@email.com" data-i18n="reg_ph_email" required autocomplete="off"> </div> </div> <div class="input-group"> <label for="reg-password" data-i18n="reg_password">รหัสผ่าน (Password)</label> <div class="input-wrapper" style="position: relative;"> <i data-lucide="lock" class="input-icon"></i> <input type="password" id="reg-password" placeholder="ตั้งรหัสผ่านอย่างน้อย 6 ตัวอักษร..." data-i18n="reg_ph_password" required autocomplete="off" style="padding-right: 40px;"> <button type="button" onclick="togglePasswordVisibility('reg-password', this)" style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; padding: 4px;"> <i data-lucide="eye" style="width: 18px; height: 18px;"></i> </button> </div> </div> <div class="input-group"> <label for="reg-confirm-password" data-i18n="reg_confirm">ยืนยันรหัสผ่าน (Confirm Password)</label> <div class="input-wrapper" style="position: relative;"> <i data-lucide="check-circle-2" class="input-icon"></i> <input type="password" id="reg-confirm-password" placeholder="กรอกรหัสผ่านอีกครั้ง..." data-i18n="reg_ph_confirm" required autocomplete="off" style="padding-right: 40px;"> <button type="button" onclick="togglePasswordVisibility('reg-confirm-password', this)" style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; padding: 4px;"> <i data-lucide="eye" style="width: 18px; height: 18px;"></i> </button> </div> </div> <div id="register-error-msg" style="display: none; color: #ef4444; font-size: 14px; margin-bottom: 16px; text-align: center; font-weight: 500;"></div> <button type="submit" class="btn btn-primary btn-block"> <span data-i18n="reg_btn">สมัครสมาชิก</span> <i data-lucide="arrow-right" class="icon-right"></i> </button> </form> <div class="auth-footer" style="text-align: center; margin-top: 20px; font-size: 14px; color: var(--text-muted);"> <span data-i18n="reg_has_account">มีบัญชีผู้ใช้งานอยู่แล้ว?</span> <a href="#" id="link-to-login" style="color: var(--primary); font-weight: 600; text-decoration: none;" data-i18n="reg_login_link">เข้าสู่ระบบ</a> </div> </div> </section> <!-- View 2: Products/Home View --> <section id="products-view" class="view-section"> <div class="section-header"> <div> <h2 class="section-title" data-i18n="section_title">สินค้าแนะนำ</h2> <p class="section-subtitle" data-i18n="section_subtitle">คัดสรรดีไซน์เรียบง่าย ตอบโจทย์ทุกการใช้งาน</p> </div> </div> <!-- Home Banner & Promo Code Voucher Section --> <div class="promo-banner-card mb-6"> <div class="promo-banner-content"> <div class="promo-badge"> <i data-lucide="ticket"></i> <span data-i18n="promo_badge">คูปองส่วนลดพิเศษ</span> </div> <h3 id="home-promo-title" data-i18n="promo_title">รับส่วนลดพิเศษ 10% เมื่อช้อปวันนี้!</h3> <p id="home-promo-desc" data-i18n="promo_desc">รับโค้ดส่วนลด <strong>DISCOUNT10</strong> หรือ <strong>AURA20</strong> เพื่อใช้ลดราคาสินค้าในหน้าชำระเงิน</p> </div> <button type="button" class="btn btn-voucher" id="btn-claim-voucher" onclick="claimVoucher('DISCOUNT10')"> <i data-lucide="gift" class="icon-left"></i> <span data-i18n="claim_btn_text">รับโค้ดส่วนลด DISCOUNT10</span> </button> </div> <!-- Search and Category Filter Toolbar --> <div class="home-toolbar"> <div class="search-bar-wrapper"> <i data-lucide="search" class="search-icon"></i> <input type="text" id="product-search-input" placeholder="ค้นหาสินค้าตามชื่อ..." data-i18n="search_placeholder" autocomplete="off"> <button type="button" class="btn btn-primary btn-search" id="btn-search-product"> <span data-i18n="search_btn">ค้นหา</span> </button> </div> <div class="category-tabs" id="category-tabs"> <button class="category-tab active" data-category="all" data-i18n="cat_all">ทั้งหมด</button> <button class="category-tab" data-category="แก้วและจาน" data-i18n="cat_mugs">แก้ว & จาน</button> <button class="category-tab" data-category="กระเป๋า" data-i18n="cat_bags">กระเป๋า</button> <button class="category-tab" data-category="ของตกแต่งบ้าน" data-i18n="cat_decor">ของตกแต่งบ้าน</button> <button class="category-tab" data-category="ไอที/Gadget" data-i18n="cat_gadget">ไอที / Gadget</button> <button class="category-tab" data-category="แฟชั่น/นาฬิกา" data-i18n="cat_fashion">แฟชั่น / นาฬิกา</button> </div> </div> <!-- Products Grid --> <div class="products-grid" id="products-grid-container"> <!-- Products will be generated dynamically by JS --> </div> </section> <!-- View 3: Cart View --> <section id="cart-view" class="view-section"> <div class="section-header"> <div> <h2 class="section-title" data-i18n="cart_title">ตะกร้าสินค้าของคุณ</h2> <p class="section-subtitle" data-i18n="cart_subtitle">ตรวจสอบรายการและจำนวนสินค้าที่เลือก</p> </div> <button class="btn btn-text" id="btn-back-to-products"> <i data-lucide="arrow-left" class="icon-left"></i> <span data-i18n="cart_continue">ช้อปสินค้าต่อ</span> </button> </div> <div class="cart-layout"> <!-- Cart Items List --> <div class="cart-items-container" id="cart-items-list"> <!-- Cart items will be generated dynamically by JS --> </div> <!-- Order Summary Card --> <div class="summary-card" id="cart-summary-card"> <h3 data-i18n="cart_summary_title">สรุปยอดคำสั่งซื้อ</h3> <div class="summary-row"> <span data-i18n="cart_subtotal">ยอดรวมสินค้า</span> <span id="summary-subtotal">฿0.00</span> </div> <div class="summary-row"> <span data-i18n="cart_shipping">ค่าจัดส่ง</span> <span class="text-free" data-i18n="cart_free">ฟรี</span> </div> <hr class="divider"> <div class="summary-row total-row"> <span data-i18n="cart_total">ยอดรวมสุทธิ</span> <span id="summary-total" class="price-total">฿0.00</span> </div> <button class="btn btn-primary btn-block" id="btn-go-to-checkout"> <span data-i18n="cart_checkout_btn">ดำเนินการชำระเงิน</span> <i data-lucide="credit-card" class="icon-right"></i> </button> </div> </div> </section> <!-- View 4: Checkout View --> <section id="checkout-view" class="view-section"> <div class="section-header"> <div> <h2 class="section-title">ข้อมูลการจัดส่งและชำระเงิน</h2> <p class="section-subtitle">กรอกข้อมูลที่อยู่จัดส่งให้ถูกต้องเพื่อรับสินค้า</p> </div> <button class="btn btn-text" id="btn-back-to-cart"> <i data-lucide="arrow-left" class="icon-left"></i> กลับไปที่ตะกร้า </button> </div> <div class="checkout-layout"> <!-- Checkout Form --> <form id="checkout-form" class="checkout-form-card"> <!-- Saved Address Selection Component --> <div id="saved-address-select-box" style="margin-bottom: 20px; padding: 16px; background-color: var(--primary-light); border: 1px solid var(--primary-soft); border-radius: var(--radius-md);"> <label style="display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--primary); margin-bottom: 8px;"> <i data-lucide="map-pin" style="width: 18px; height: 18px;"></i> เลือกที่อยู่ที่บันทึกไว้ (Select Saved Address) </label> <select id="checkout-saved-address-dropdown" style="width: 100%; padding: 10px 12px; font-family: var(--font); font-size: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background-color: var(--white); cursor: pointer;"> <!-- Options generated dynamically from saved addresses --> </select> </div> <div class="form-grid"> <div class="input-group col-span-2"> <label for="shipping-name">ชื่อ-นามสกุล ผู้รับ</label> <input type="text" id="shipping-name" required placeholder="เช่น สมชาย ใจดี"> </div> <div class="input-group"> <label for="shipping-phone">เบอร์โทรศัพท์</label> <input type="tel" id="shipping-phone" required placeholder="เช่น 0891234567" pattern="[0-9]{9,10}"> </div> <div class="input-group"> <label for="shipping-email">อีเมล (ถ้ามี)</label> <input type="email" id="shipping-email" placeholder="เช่น somchai@email.com"> </div> <div class="input-group col-span-2"> <label for="shipping-address">ที่อยู่จัดส่ง</label> <textarea id="shipping-address" rows="3" required placeholder="บ้านเลขที่, ถนน, ตำบล/แขวง, อำเภอ/เขต..."></textarea> </div> <div class="input-group"> <label for="shipping-province">จังหวัด</label> <input type="text" id="shipping-province" required placeholder="เช่น กรุงเทพมหานคร"> </div> <div class="input-group"> <label for="shipping-zipcode">รหัสไปรษณีย์</label> <input type="text" id="shipping-zipcode" required placeholder="เช่น 10110" pattern="[0-9]{5}"> </div> </div> <div class="payment-methods"> <h4>วิธีการชำระเงิน</h4> <div class="payment-options"> <label class="payment-option-card active"> <input type="radio" name="payment-method" value="COD" checked> <span class="custom-radio"></span> <div class="option-info"> <span class="option-title">เก็บเงินปลายทาง (COD)</span> <span class="option-desc">ชำระเงินสดเมื่อได้รับสินค้า สะดวกและปลอดภัย</span> </div> <i data-lucide="truck" class="option-icon"></i> </label> <label class="payment-option-card"> <input type="radio" name="payment-method" value="PromptPay/QR Code"> <span class="custom-radio"></span> <div class="option-info"> <span class="option-title">PromptPay / QR Code</span> <span class="option-desc">สแกนชำระเงินผ่าน Mobile Banking ทุกธนาคาร</span> </div> <i data-lucide="qr-code" class="option-icon"></i> </label> <label class="payment-option-card"> <input type="radio" name="payment-method" value="Credit/Debit Card"> <span class="custom-radio"></span> <div class="option-info"> <span class="option-title">Credit / Debit Card</span> <span class="option-desc">รองรับ Visa, Mastercard, และ JCB</span> </div> <i data-lucide="credit-card" class="option-icon"></i> </label> <label class="payment-option-card"> <input type="radio" name="payment-method" value="Mobile Banking"> <span class="custom-radio"></span> <div class="option-info"> <span class="option-title">Mobile Banking</span> <span class="option-desc">ชำระผ่านแอปพลิเคชันธนาคารชั้นนำ</span> </div> <i data-lucide="smartphone" class="option-icon"></i> </label> </div> <!-- Dynamic Payment Interface Panel --> <div id="payment-details-panel" class="payment-details-panel"> <!-- Dynamically rendered via renderPaymentInterface() --> </div> </div> <button type="submit" class="btn btn-primary btn-block btn-lg" id="btn-confirm-order"> ยืนยันการสั่งซื้อสินค้า <i data-lucide="check-circle-2" class="icon-right"></i> </button> </form> <!-- Small Checkout Summary --> <div class="checkout-summary-card"> <h3>รายการสั่งซื้อของคุณ</h3> <div class="checkout-items-list" id="checkout-items-summary"> <!-- Summary items generated dynamically --> </div> <!-- Promo Code Input Field Section --> <div class="promo-code-section"> <label for="promo-code-input">กรอกโค้ดส่วนลด (Promo Code)</label> <div class="promo-code-input-group"> <input type="text" id="promo-code-input" placeholder="เช่น DISCOUNT10" autocomplete="off"> <button type="button" class="btn btn-primary" id="btn-apply-promo"> นำไปใช้ </button> </div> <div id="promo-code-msg" class="promo-code-msg"></div> </div> <hr class="divider"> <div class="summary-row"> <span>ยอดรวมสินค้า</span> <span id="checkout-subtotal-price">฿0.00</span> </div> <div class="summary-row" id="checkout-discount-row" style="display: none; color: #10b981; font-weight: 600;"> <span>ส่วนลด (<span id="applied-discount-code-name"></span>)</span> <span id="checkout-discount-price">-฿0.00</span> </div> <div class="summary-row total-row"> <span>ยอดชำระสุทธิ</span> <span id="checkout-total-price" class="price-total">฿0.00</span> </div> </div> </div> </section> <!-- View 5: Success View --> <section id="success-view" class="view-section"> <div class="success-card"> <div class="success-icon-wrapper"> <div class="success-icon-pulse"></div> <i data-lucide="check" class="success-icon"></i> </div> <h1>สั่งซื้อสินค้าสำเร็จ!</h1> <p class="success-message">ขอบคุณสำหรับการสั่งซื้อ เลขที่คำสั่งซื้อของคุณคือ <strong id="success-order-id">#AURA-98742</strong>. เราจะจัดเตรียมสินค้าและจัดส่งให้คุณโดยเร็วที่สุด</p> <div class="success-details-box"> <div class="detail-row"> <span>ผู้รับ:</span> <span id="success-name">-</span> </div> <div class="detail-row"> <span>สถานที่จัดส่ง:</span> <span id="success-address" class="text-right">-</span> </div> <div class="detail-row"> <span>ยอดรวมชำระปลายทาง:</span> <strong id="success-amount">฿0.00</strong> </div> </div> <button class="btn btn-primary btn-block" id="btn-success-home"> กลับสู่หน้าหลัก <i data-lucide="home" class="icon-right"></i> </button> </div> </section> <!-- View 5.5: Buyer Profile & Order History View --> <section id="profile-view" class="view-section"> <div class="section-header"> <div> <h2 class="section-title" data-i18n="profile_title">บัญชีของฉัน & ประวัติการสั่งซื้อ</h2> <p class="section-subtitle" data-i18n="profile_subtitle">จัดการข้อมูลส่วนตัวและตรวจสอบสถานะคำสั่งซื้อของคุณ</p> </div> </div> <div class="dashboard-2col-layout buyer-profile-layout"> <!-- Left Column Sidebar (Group 1, 2, 3) --> <aside class="dashboard-sidebar buyer-sidebar"> <div class="sidebar-profile-card" style="margin-bottom: 16px;"> <div class="avatar-circle" id="buyer-sidebar-avatar" style="overflow: hidden;"> <i data-lucide="user"></i> </div> <div class="profile-info"> <span class="sidebar-username" id="buyer-profile-username-display">beam</span> <span class="user-level-badge" style="font-size: 11px; background-color: var(--primary-soft); color: var(--primary); padding: 2px 8px; border-radius: var(--radius-full); font-weight: 600; display: inline-block; margin-top: 2px;">Silver Member</span> </div> </div> <nav class="buyer-sidebar-nav"> <!-- Group 1: Account --> <div class="buyer-nav-group"> <button class="buyer-nav-item buyer-group-header" data-buyer-nav="account"> <div class="nav-item-icon-box text-blue"> <i data-lucide="user"></i> </div> <span class="nav-item-text font-semibold" data-i18n="sidebar_account">บัญชีของฉัน</span> </button> <div class="buyer-subnav-list pl-8"> <button class="buyer-subnav-item active" data-buyer-sub="ประวัติ" data-i18n="sidebar_profile">ประวัติ</button> <button class="buyer-subnav-item" data-buyer-sub="บัญชีธนาคาร&บัตร" data-i18n="sidebar_banks">บัญชีธนาคาร&บัตร</button> <button class="buyer-subnav-item" data-buyer-sub="ที่อยู่" data-i18n="sidebar_address">ที่อยู่</button> <button class="buyer-subnav-item" data-buyer-sub="เปลี่ยนรหัสผ่าน" data-i18n="sidebar_password">เปลี่ยนรหัสผ่าน</button> <button class="buyer-subnav-item" data-buyer-sub="การตั้งค่าความเป็นส่วนตัว" data-i18n="sidebar_privacy">การตั้งค่าความเป็นส่วนตัว</button> <button class="buyer-subnav-item" data-buyer-sub="ตั้งค่าการแจ้งเตือน" data-i18n="sidebar_noti_settings">ตั้งค่าการแจ้งเตือน</button> <button class="buyer-subnav-item" data-buyer-sub="Order Settings" data-i18n="sidebar_order_settings">Order Settings</button> </div> </div> <!-- Group 2: Purchases --> <div class="buyer-nav-group" style="margin-top: 8px;"> <button class="buyer-nav-item" data-buyer-nav="purchases"> <div class="nav-item-icon-box text-blue"> <i data-lucide="clipboard-list"></i> </div> <span class="nav-item-text font-semibold" data-i18n="sidebar_purchases">การซื้อของฉัน</span> </button> </div> <!-- Group 3: Notifications --> <div class="buyer-nav-group" style="margin-top: 8px;"> <button class="buyer-nav-item" data-buyer-nav="notifications"> <div class="nav-item-icon-box text-orange"> <i data-lucide="bell"></i> </div> <span class="nav-item-text font-semibold" data-i18n="sidebar_notifications">การแจ้งเตือน</span> </button> <div class="buyer-subnav-list pl-8"> <button class="buyer-subnav-item" data-buyer-sub="อัปเดตคำสั่งซื้อ" data-i18n="sidebar_order_updates">อัปเดตคำสั่งซื้อ</button> </div> </div> </nav> </aside> <!-- Right Column Main Content Area (Dynamic Switch/Case View) --> <main class="dashboard-main-content" id="buyer-profile-content-area"> <!-- Views will be dynamically rendered here via renderBuyerProfile() --> </main> </div> </section> <!-- View 7: Seller Registration View --> <section id="seller-register-view" class="view-section"> <div class="seller-register-container" style="display: flex; justify-content: center; align-items: center; min-height: 70vh;"> <div class="form-container-card" style="max-width: 550px; width: 100%;"> <div class="login-header" style="margin-bottom: 24px;"> <div class="login-logo"> <span class="logo-dot"></span> <span class="logo-text">aura. seller</span> </div> <h1 data-i18n="seller_reg_title">สมัครเปิดร้านค้า</h1> <p data-i18n="seller_reg_subtitle">เริ่มต้นขายสินค้าออนไลน์กับเราในไม่กี่ขั้นตอน</p> </div> <form id="seller-register-form" class="seller-form"> <div class="input-group"> <label for="reg-shop-name" data-i18n="seller_shop_name">ชื่อร้านค้า (Shop Name)</label> <input type="text" id="reg-shop-name" required placeholder="เช่น Minimalist Decor Shop" data-i18n="seller_shop_name_ph"> </div> <div class="input-group"> <label for="reg-shop-phone" data-i18n="seller_shop_phone">เบอร์โทรศัพท์ติดต่อ</label> <input type="tel" id="reg-shop-phone" required placeholder="เช่น 0891234567" data-i18n="seller_shop_phone_ph" pattern="[0-9]{9,10}"> </div> <div class="input-group"> <label for="reg-shop-desc" data-i18n="seller_shop_desc">รายละเอียด/คำอธิบายร้านค้าสั้นๆ</label> <textarea id="reg-shop-desc" rows="3" required placeholder="อธิบายประเภทร้านค้าหรือสินค้าของคุณ..." data-i18n="seller_shop_desc_ph"></textarea> </div> <div class="input-group"> <label for="reg-shop-category" data-i18n="seller_shop_cat">หมวดหมู่สินค้าหลัก</label> <select id="reg-shop-category" required style="width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background-color: var(--background); font-family: var(--font); color: var(--text-main); font-size: 15px;"> <option value="" disabled selected data-i18n="seller_select_cat">เลือกหมวดหมู่สินค้า</option> <option value="เสื้อผ้า" data-i18n="seller_cat_clothes">เสื้อผ้า / แฟชั่น</option> <option value="ไอที/ไอที Gadget" data-i18n="seller_cat_gadget">ไอที / ไอที Gadget</option> <option value="ของใช้ในบ้าน" data-i18n="seller_cat_home">ของใช้ในบ้าน / ตกแต่งบ้าน</option> </select> </div> <div style="margin: 20px 0; border-top: 1px solid var(--border); padding-top: 20px;"> <h4 style="font-size: 14px; font-weight: 600; color: var(--text-main); margin-bottom: 12px;" data-i18n="seller_bank_info_header"> ข้อมูลบัญชีธนาคารสำหรับรับเงิน</h4> <div class="form-grid" style="margin-bottom: 0;"> <div class="input-group col-span-2"> <label for="reg-bank-name" data-i18n="seller_bank_name">ชื่อธนาคาร</label> <select id="reg-bank-name" required style="width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background-color: var(--background); font-family: var(--font); color: var(--text-main); font-size: 15px;"> <option value="" disabled selected data-i18n="seller_select_bank">เลือกธนาคาร</option> <option value="กสิกรไทย" data-i18n="seller_bank_kbank">ธนาคารกสิกรไทย (KBank)</option> <option value="ไทยพาณิชย์" data-i18n="seller_bank_scb">ธนาคารไทยพาณิชย์ (SCB)</option> <option value="กรุงเทพ" data-i18n="seller_bank_bbl">ธนาคารกรุงเทพ (BBL)</option> <option value="กรุงไทย" data-i18n="seller_bank_ktb">ธนาคารกรุงไทย (KTB)</option> <option value="กรุงศรีอยุธยา" data-i18n="seller_bank_bay">ธนาคารกรุงศรีอยุธยา (BAY)</option> </select> </div> <div class="input-group"> <label for="reg-bank-account" data-i18n="seller_bank_acc">เลขที่บัญชี</label> <input type="text" id="reg-bank-account" required placeholder="เช่น 123-4-56789-0" data-i18n="seller_bank_acc_ph"> </div> <div class="input-group"> <label for="reg-bank-holder" data-i18n="seller_bank_holder">ชื่อบัญชี</label> <input type="text" id="reg-bank-holder" required placeholder="เช่น สมชาย ใจดี" data-i18n="seller_bank_holder_ph"> </div> </div> </div> <div style="margin-bottom: 20px; display: flex; align-items: flex-start; gap: 10px;"> <input type="checkbox" id="reg-accept-terms" required style="width: 18px; height: 18px; margin-top: 3px; cursor: pointer;"> <label for="reg-accept-terms" style="font-size: 13px; color: var(--text-muted); cursor: pointer; user-select: none;" data-i18n="seller_accept_terms">ฉันยอมรับข้อตกลงและเงื่อนไขการเป็นผู้ขาย</label> </div> <button type="submit" class="btn btn-primary btn-block"> <span data-i18n="seller_open_shop_btn">เปิดร้านค้าเลย</span> <i data-lucide="arrow-right" class="icon-right"></i> </button> </form> </div> </div> </section> <!-- View 6: Seller Centre View --> <section id="seller-view" class="view-section"> <div class="dashboard-2col-layout"> <!-- Left Sidebar --> <aside class="dashboard-sidebar"> <!-- Profile Card --> <div class="sidebar-profile-card"> <div class="avatar-circle" id="seller-sidebar-avatar" style="overflow: hidden;"> <i data-lucide="user"></i> </div> <div class="profile-info"> <span class="sidebar-username" id="sidebar-username-display"></span> </div> </div> <!-- Vertical Navigation --> <nav class="sidebar-nav sidebar-nav-menu"> <button class="sidebar-nav-item active" data-sidebar-tab="seller-dashboard"> <i data-lucide="layout-dashboard"></i> <span>Dashboard</span> </button> <button class="sidebar-nav-item" data-sidebar-tab="seller-my-products"> <i data-lucide="package"></i> <span>สินค้าของฉัน (My Products)</span> </button> <button class="sidebar-nav-item" data-sidebar-tab="seller-orders"> <i data-lucide="clipboard-list"></i> <span>คำสั่งซื้อ (Orders)</span> <span class="sidebar-badge" id="sidebar-pending-count" style="display: none;">0</span> </button> <button class="sidebar-nav-item" data-sidebar-tab="seller-reports"> <i data-lucide="bar-chart-3"></i> <span>รายงาน (Reports)</span> </button> </nav> </aside> <!-- Main Content Area (Right Side) --> <main class="dashboard-main-content"> <!-- Header Banner --> <div class="dashboard-header-banner"> <div class="title-with-badge"> <h2 class="dashboard-title">ระบบจัดการผู้ขาย (Seller Centre) - <span id="dash-username-display"></span></h2> <span class="shop-tag-badge" id="seller-shop-name-display"></span> </div> <p class="dashboard-subtitle">จัดการข้อมูลสินค้า วิเคราะห์ยอดขาย และจัดการคำสั่งซื้อของลูกค้า </p> </div> <!-- Quick Action Tab Buttons --> <div class="quick-action-tabs"> <button class="action-tab-btn active" data-action-tab="seller-dashboard">แดชบอร์ด</button> <button class="action-tab-btn" data-action-tab="seller-add-product">+ เพิ่มสินค้าใหม่</button> <button class="action-tab-btn" data-action-tab="seller-orders">จัดการคำสั่งซื้อ</button> </div> <!-- Tab Contents Container --> <div class="seller-dashboard-views"> <!-- Sub-view 1: Dashboard View --> <div id="seller-dashboard" class="seller-sub-view active"> <!-- 2 Metric Summary Cards Grid --> <div class="metrics-grid-2col"> <div class="metric-card-styled"> <div class="metric-icon-box sales-box"> <i data-lucide="line-chart"></i> </div> <div class="metric-content"> <span class="metric-label">ยอดขายรวมทั้งหมด</span> <h3 class="metric-val-text" id="dashboard-total-sales">฿0</h3> </div> </div> <div class="metric-card-styled"> <div class="metric-icon-box orders-box"> <i data-lucide="package"></i> </div> <div class="metric-content"> <span class="metric-label">จำนวนคำสั่งซื้อทั้งหมด</span> <h3 class="metric-val-text" id="dashboard-total-orders">0 ออเดอร์</h3> </div> </div> </div> </div> <!-- Sub-view 2: My Products List --> <div id="seller-my-products" class="seller-sub-view"> <div class="my-products-header"> <h3>รายการสินค้าของฉัน</h3> <button class="btn btn-primary" onclick="switchSellerTab('seller-add-product')"> <i data-lucide="plus" class="icon-left"></i> เพิ่มสินค้าใหม่ </button> </div> <div class="my-products-grid" id="seller-products-list"> <!-- Rendered dynamically --> </div> </div> <!-- Sub-view 3: Add Product Form --> <div id="seller-add-product" class="seller-sub-view"> <div class="form-container-card"> <h3>เพิ่มรายการสินค้าชิ้นใหม่</h3> <p class="form-desc mb-20">กรอกข้อมูลสินค้าให้ครบถ้วนเพื่ออัปเดตขึ้นหน้าร้านค้าทันที</p> <form id="add-product-form" class="seller-form"> <div class="input-group"> <label for="product-name">ชื่อสินค้า</label> <input type="text" id="product-name" required placeholder="เช่น Minimalist Coffee Table"> </div> <div class="input-group"> <label for="product-price">ราคาขาย (บาท)</label> <input type="number" id="product-price" required min="1" placeholder="เช่น 2490"> </div> <div class="input-group"> <label for="product-image-url">ลิงก์รูปภาพสินค้า หรือชื่อไอคอน</label> <input type="text" id="product-image-url" placeholder="เช่น https://images.unsplash.com/photo... หรือชื่อไอคอนเช่น couch, tv, box"> <small class="input-hint">หากใส่ลิงก์รูปภาพ ระบบจะแสดงรูปภาพจริง หากปล่อยว่างหรือใส่คำ เช่น "couch" ระบบจะใช้ไอคอนแสดงผล</small> </div> <div class="input-group"> <label for="product-desc">คำอธิบายสินค้า</label> <textarea id="product-desc" rows="3" required placeholder="อธิบายรายละเอียดสินค้าเบื้องต้น..."></textarea> </div> <button type="submit" class="btn btn-primary btn-block"> <i data-lucide="save" class="icon-left"></i> บันทึกข้อมูลและวางขายสินค้า </button> </form> </div> </div> <!-- Sub-view 4: Order Management --> <div id="seller-orders" class="seller-sub-view"> <div class="orders-header"> <h3>รายการสั่งซื้อจากลูกค้า</h3> </div> <div class="orders-list-container" id="seller-orders-list"> <!-- Orders will be rendered here dynamically --> </div> </div> <!-- Sub-view 5: Reports --> <div id="seller-reports" class="seller-sub-view"> <div class="reports-container"> <h3>รายงานและสถิติการขาย</h3> <p class="form-desc mb-20">สรุปข้อมูลเชิงลึกสำหรับประเมินประสิทธิภาพร้านค้า</p> <div class="reports-summary-cards"> <div class="report-box"> <span class="report-box-title">อัตราการเติบโตยอดขาย</span> <span class="report-box-value text-green">+12.5%</span> </div> <div class="report-box"> <span class="report-box-title">คะแนนร้านค้า</span> <span class="report-box-value text-amber">4.9 / 5.0</span> </div> <div class="report-box"> <span class="report-box-title">เวลาตอบแชทเฉลี่ย</span> <span class="report-box-value text-blue">< 15 นาที</span> </div> </div> </div> </div> </div> </main> </div> <!-- Floating Action / Chat Button in Bottom Right Corner --> <button class="floating-chat-btn" title="ส่งข้อความ / สอบถามแชท" aria-label="Support Chat"> <i data-lucide="message-square"></i> </button> </section> <!-- View 8: Admin Dashboard View --> <section id="admin-view" class="view-section"> <div class="dashboard-header-banner mb-6"> <div class="title-with-badge"> <h2 class="dashboard-title" data-i18n="admin_title">🛠️ ระบบจัดการผู้ดูแลระบบ (Admin Dashboard)</h2> </div> <p class="dashboard-subtitle" data-i18n="admin_subtitle">จัดการข้อมูลสินค้า คำสั่งซื้อ ผู้ใช้งาน และสถิติภาพรวมของระบบ</p> </div> <!-- Admin Sub-view Navigation Tabs --> <div class="quick-action-tabs mb-6" id="admin-tabs"> <button class="action-tab-btn active" onclick="switchAdminTab('admin-overview')">📊 <span data-i18n="admin_tab_overview">สถิติภาพรวม (Overview)</span></button> <button class="action-tab-btn" onclick="switchAdminTab('admin-products')">📦 <span data-i18n="admin_tab_products">จัดการสินค้า (Products)</span></button> <button class="action-tab-btn" onclick="switchAdminTab('admin-orders')">🛒 <span data-i18n="admin_tab_orders">จัดการคำสั่งซื้อ (Orders)</span></button> <button class="action-tab-btn" onclick="switchAdminTab('admin-users')">👥 <span data-i18n="admin_tab_users">จัดการผู้ใช้งาน (Users)</span></button> <button class="action-tab-btn" onclick="switchAdminTab('admin-promos')"><span data-i18n="admin_tab_promos">🎟️ จัดการโค้ดส่วนลด (Vouchers)</span></button> <button class="action-tab-btn" onclick="switchAdminTab('admin-settings')">⚙️ <span data-i18n="admin_tab_settings">ตั้งค่าระบบ (Settings)</span></button> </div> <!-- Tab 1: Overview --> <div id="admin-overview" class="admin-sub-view active"> <div class="metrics-grid-2col" style="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px;"> <div class="metric-card-styled"> <div class="metric-icon-box sales-box"> <i data-lucide="dollar-sign"></i> </div> <div class="metric-content"> <span class="metric-label" data-i18n="admin_total_sales">ยอดขายรวมทั้งหมด (Total Sales)</span> <h3 class="metric-val-text" id="admin-total-sales">฿0</h3> </div> </div> <div class="metric-card-styled"> <div class="metric-icon-box orders-box"> <i data-lucide="shopping-bag"></i> </div> <div class="metric-content"> <span class="metric-label" data-i18n="admin_total_orders">จำนวนคำสั่งซื้อทั้งหมด (Total Orders)</span> <h3 class="metric-val-text" id="admin-total-orders">0 รายการ</h3> </div> </div> <div class="metric-card-styled"> <div class="metric-icon-box users-box" style="background-color: rgba(147, 51, 234, 0.1); color: #9333ea;"> <i data-lucide="users"></i> </div> <div class="metric-content"> <span class="metric-label" data-i18n="admin_total_users">จำนวนผู้ใช้งานทั้งหมด (Total Users)</span> <h3 class="metric-val-text" id="admin-total-users">0 คน</h3> </div> </div> </div> </div> <!-- Tab 2: Products --> <div id="admin-products" class="admin-sub-view" style="display: none;"> <div class="form-container-card"> <div style="display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px;"> <h3 style="font-weight: 600; font-size: 18px;" data-i18n="admin_manage_products_title">จัดการสินค้าในระบบ</h3> <div style="display: flex; gap: 10px; align-items: center;"> <div class="search-bar-wrapper" style="max-width: 300px; margin: 0;"> <i data-lucide="search" class="search-icon"></i> <input type="text" id="admin-search-products" placeholder="ค้นหาตามชื่อสินค้าหรือหมวดหมู่..." data-i18n="admin_search_product_ph" oninput="renderAdminProducts()"> </div> <button class="btn btn-primary" onclick="adminOpenAddProduct()" style="white-space: nowrap;"> <i data-lucide="plus" class="icon-left" style="width: 16px; height: 16px;"></i> <span data-i18n="admin_btn_add_product">เพิ่มสินค้าใหม่</span> </button> </div> </div> <div class="overflow-x-auto"> <table style="width: 100%; border-collapse: collapse; text-align: left;"> <thead> <tr style="background-color: var(--background); border-bottom: 1px solid var(--border);"> <th style="padding: 12px;" data-i18n="admin_th_id">ID</th> <th style="padding: 12px;" data-i18n="admin_th_image">รูปภาพ</th> <th style="padding: 12px;" data-i18n="admin_th_product_name">ชื่อสินค้า</th> <th style="padding: 12px;" data-i18n="admin_th_category">หมวดหมู่</th> <th style="padding: 12px;" data-i18n="admin_th_price">ราคา</th> <th style="padding: 12px; text-align: center;" data-i18n="admin_th_action">จัดการ</th> </tr> </thead> <tbody id="admin-products-tbody"> <!-- Rendered dynamically --> </tbody> </table> </div> </div> </div> <!-- Tab 3: Orders --> <div id="admin-orders" class="admin-sub-view" style="display: none;"> <div class="form-container-card"> <div style="display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px;"> <h3 style="font-weight: 600; font-size: 18px;" data-i18n="admin_manage_orders_title">จัดการคำสั่งซื้อทั้งหมด</h3> <div style="display: flex; gap: 10px; align-items: center;"> <div class="search-bar-wrapper" style="max-width: 300px; margin: 0;"> <i data-lucide="search" class="search-icon"></i> <input type="text" id="admin-search-orders" placeholder="ค้นตาม Order ID หรือชื่อผู้ซื้อ..." data-i18n="admin_search_order_ph" oninput="renderAdminOrders()"> </div> <button class="btn btn-primary" onclick="adminExportOrdersCSV()" style="white-space: nowrap; background-color: #10b981; border-color: #10b981;"> <i data-lucide="download" class="icon-left" style="width: 16px; height: 16px;"></i> <span data-i18n="admin_btn_export_csv">Export CSV</span> </button> </div> </div> <div class="overflow-x-auto"> <table style="width: 100%; border-collapse: collapse; text-align: left;"> <thead> <tr style="background-color: var(--background); border-bottom: 1px solid var(--border);"> <th style="padding: 12px;">Order ID</th> <th style="padding: 12px;" data-i18n="admin_th_buyer">ชื่อผู้ซื้อ</th> <th style="padding: 12px;" data-i18n="admin_th_total">ยอดรวม</th> <th style="padding: 12px;" data-i18n="admin_th_status">สถานะ</th> <th style="padding: 12px; text-align: center;" data-i18n="admin_th_action">จัดการ</th> </tr> </thead> <tbody id="admin-orders-tbody"> <!-- Rendered dynamically --> </tbody> </table> </div> </div> </div> <!-- Tab 4: Users --> <div id="admin-users" class="admin-sub-view" style="display: none;"> <div class="form-container-card"> <div style="display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px;"> <h3 style="font-weight: 600; font-size: 18px;" data-i18n="admin_manage_users_title">จัดการผู้ใช้งานในระบบ</h3> <div class="search-bar-wrapper" style="max-width: 300px; margin: 0;"> <i data-lucide="search" class="search-icon"></i> <input type="text" id="admin-search-users" placeholder="ค้นตาม Username หรือ Email..." data-i18n="admin_search_user_ph" oninput="renderAdminUsers()"> </div> </div> <div class="overflow-x-auto"> <table style="width: 100%; border-collapse: collapse; text-align: left;"> <thead> <tr style="background-color: var(--background); border-bottom: 1px solid var(--border);"> <th style="padding: 12px;" data-i18n="admin_th_username">Username</th> <th style="padding: 12px;" data-i18n="admin_th_email">Email</th> <th style="padding: 12px;" data-i18n="admin_th_role">Role</th> <th style="padding: 12px; text-align: center;" data-i18n="admin_th_action">จัดการ</th> </tr> </thead> <tbody id="admin-users-tbody"> <!-- Rendered dynamically --> </tbody> </table> </div> </div> </div> <!-- Tab 5: Promos --> <div id="admin-promos" class="admin-sub-view" style="display: none;"> <div class="dashboard-2col-layout" style="grid-template-columns: 1fr 2fr; gap: 20px;"> <!-- Add Promo Form --> <div class="form-container-card" style="margin: 0; align-self: start;"> <h3 style="font-weight: 600; font-size: 18px; margin-bottom: 16px;" data-i18n="admin_add_promo">เพิ่มโค้ดส่วนลดใหม่</h3> <form id="admin-add-promo-form" onsubmit="handleAddPromoSubmit(event)" style="display: flex; flex-direction: column; gap: 12px;"> <div class="input-group" style="margin-bottom: 0;"> <label data-i18n="admin_promo_code_label">โค้ดส่วนลด (เช่น SUMMER20)</label> <input type="text" id="new-promo-code" required style="text-transform: uppercase;"> </div> <div class="input-group" style="margin-bottom: 0;"> <label data-i18n="admin_promo_name_label">ชื่อแคมเปญ (เช่น ลด 20% ซัมเมอร์)</label> <input type="text" id="new-promo-name" required> </div> <div class="input-group" style="margin-bottom: 0;"> <label data-i18n="admin_promo_type">ประเภทส่วนลด</label> <select id="new-promo-type" required style="padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); font-family: var(--font);"> <option value="percent" data-i18n="admin_promo_type_percent">เปอร์เซ็นต์ (%)</option> <option value="amount" data-i18n="admin_promo_type_amount">จำนวนเงิน (บาท)</option> </select> </div> <div class="input-group" style="margin-bottom: 0;"> <label data-i18n="admin_promo_value">มูลค่าส่วนลด</label> <input type="number" id="new-promo-value" required min="1"> </div> <div class="input-group" style="margin-bottom: 0;"> <label><span data-i18n="admin_promo_expiry">วันหมดอายุ (Expiry Date)</span> <span style="font-weight:normal; font-size:12px; color:var(--text-light);" data-i18n="admin_promo_optional">(ไม่ระบุ = ไม่มีวันหมดอายุ)</span></label> <input type="date" id="new-promo-expiry" style="padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); font-family: var(--font); width: 100%;"> </div> <button type="submit" class="btn btn-primary" style="margin-top: 8px;"> <span data-i18n="admin_btn_save_promo">บันทึกโค้ดส่วนลด</span> </button> </form> </div> <!-- Promo List Table --> <div class="form-container-card" style="margin: 0;"> <h3 style="font-weight: 600; font-size: 18px; margin-bottom: 16px;" data-i18n="admin_manage_promos">จัดการโค้ดส่วนลดทั้งหมด</h3> <div class="overflow-x-auto"> <table style="width: 100%; border-collapse: collapse; text-align: left;"> <thead> <tr style="background-color: var(--background); border-bottom: 1px solid var(--border);"> <th style="padding: 12px;" data-i18n="admin_promo_code">โค้ด (Code)</th> <th style="padding: 12px;" data-i18n="admin_promo_name">ชื่อแคมเปญ</th> <th style="padding: 12px;" data-i18n="admin_promo_discount">ส่วนลด</th> <th style="padding: 12px;" data-i18n="admin_promo_expiry">วันหมดอายุ (Expiry)</th> <th style="padding: 12px; text-align: center;" data-i18n="admin_th_action">จัดการ</th> </tr> </thead> <tbody id="admin-promos-tbody"></tbody> </table> </div> </div> </div> </div> <!-- Tab 6: Settings --> <div id="admin-settings" class="admin-sub-view" style="display: none;"> <div class="form-container-card"> <h3 style="font-weight: 600; font-size: 18px; margin-bottom: 16px;" data-i18n="admin_tab_settings">ตั้งค่าระบบร้านค้า</h3> <form id="admin-settings-form" onsubmit="handleSaveAdminSettings(event)" style="display: flex; flex-direction: column; gap: 16px;"> <div class="input-group" style="margin-bottom: 0;"> <label>ข้อความหัวท๊อปแบนเนอร์โปรโมชัน (หน้าแรก)</label> <input type="text" id="setting-banner-title" placeholder="เช่น รับส่วนลดพิเศษ 10% เมื่อช้อปวันนี้!" required> </div> <div class="input-group" style="margin-bottom: 0;"> <label>รายละเอียดแบนเนอร์โปรโมชัน</label> <textarea id="setting-banner-desc" rows="2" placeholder="ใส่รายละเอียดคูปอง..." required></textarea> </div> <button type="submit" class="btn btn-primary" style="margin-top: 8px;">บันทึกการตั้งค่า</button> </form> </div> </div> </section> </main> <!-- Wishlist Modal --> <div class="modal-overlay" id="wishlist-modal"> <div class="modal-card"> <div class="modal-header"> <div class="modal-title"> <i data-lucide="heart" class="icon-red"></i> <h3 data-i18n="wishlist_modal_title">สิ่งที่อยากได้ (Wishlist)</h3> </div> <button class="modal-close-btn" id="btn-close-wishlist"> <i data-lucide="x"></i> </button> </div> <div class="modal-body" id="wishlist-modal-body"> <!-- Wishlist items list --> </div> </div> </div> <!-- Order Cancellation Reason Modal --> <div class="modal-overlay" id="cancel-order-modal"> <div class="modal-card"> <div class="modal-header"> <div class="modal-title"> <i data-lucide="alert-circle" class="icon-orange"></i> <h3>ระบุเหตุผลที่ยกเลิกคำสั่งซื้อ</h3> </div> <button class="modal-close-btn" id="btn-close-cancel-modal"> <i data-lucide="x"></i> </button> </div> <form id="cancel-order-form" class="modal-body"> <p class="modal-desc">โปรดเลือกหรือกรอกเหตุผลที่คุณต้องการยกเลิกคำสั่งซื้อ <strong id="cancel-modal-order-id">#AURA-XXXXX</strong></p> <div class="input-group"> <label for="cancel-reason-select">เลือกเหตุผล</label> <select id="cancel-reason-select" class="modal-select"> <option value="เปลี่ยนใจ / ไม่ต้องการสินค้าแล้ว">เปลี่ยนใจ / ไม่ต้องการสินค้าแล้ว</option> <option value="ต้องการแก้ไขที่อยู่จัดส่ง">ต้องการแก้ไขที่อยู่จัดส่ง</option> <option value="ต้องการเปลี่ยนรายการสินค้าหรือจำนวน">ต้องการเปลี่ยนรายการสินค้าหรือจำนวน</option> <option value="พบราคาที่ถูกกว่าที่อื่น">พบราคาที่ถูกกว่าที่อื่น</option> <option value="custom">อื่นๆ (ระบุในรายละเอียดด้านล่าง)</option> </select> </div> <div class="input-group"> <label for="cancel-reason-text">เหตุผลเพิ่มเติม (รายละเอียด)</label> <textarea id="cancel-reason-text" rows="3" placeholder="พิมพ์อธิบายเหตุผลในการยกเลิก..."></textarea> </div> <div class="modal-footer"> <button type="button" class="btn btn-text" id="btn-cancel-modal-dismiss">ยกเลิก</button> <button type="submit" class="btn btn-danger">ยืนยันการยกเลิก</button> </div> </form> </div> </div> <!-- Product Detail Modal (Quick View) --> <div class="modal-overlay" id="product-detail-modal"> <div class="modal-card product-detail-modal-card"> <div class="modal-header"> <div class="modal-title"> <i data-lucide="info" class="icon-blue"></i> <h3>รายละเอียดสินค้า (Product Details)</h3> </div> <button class="modal-close-btn" id="btn-close-product-detail"> <i data-lucide="x"></i> </button> </div> <div class="modal-body product-detail-modal-body" id="product-detail-content"> <!-- Dynamically populated by JS --> </div> </div> </div> <!-- Admin Edit Product Modal --> <div class="modal-overlay" id="admin-edit-product-modal"> <div class="modal-card"> <div class="modal-header"> <div class="modal-title"> <i data-lucide="edit" class="icon-blue"></i> <h3>แก้ไขข้อมูลสินค้า (Edit Product)</h3> </div> <button class="modal-close-btn" onclick="closeAdminEditModal()"> <i data-lucide="x"></i> </button> </div> <div class="modal-body"> <form id="admin-edit-product-form" onsubmit="handleAdminEditProductSubmit(event)"> <input type="hidden" id="admin-edit-product-id"> <div class="input-group"> <label for="admin-edit-product-name">ชื่อสินค้า</label> <input type="text" id="admin-edit-product-name" required> </div> <div class="input-group"> <label for="admin-edit-product-price">ราคา (บาท)</label> <input type="number" id="admin-edit-product-price" required min="0"> </div> <div class="input-group"> <label for="admin-edit-product-category">หมวดหมู่</label> <input type="text" id="admin-edit-product-category" required> </div> <div class="input-group"> <label for="admin-edit-product-image">URL รูปภาพสินค้า</label> <input type="text" id="admin-edit-product-image"> </div> <div class="modal-footer" style="margin-top: 20px; display: flex; justify-content: flex-end; gap: 10px;"> <button type="button" class="btn btn-text" onclick="closeAdminEditModal()">ยกเลิก</button> <button type="submit" class="btn btn-primary">บันทึกการแก้ไข</button> </div> </form> </div> </div> </div> <!-- Admin Add Product Modal --> <div class="modal-overlay" id="admin-add-product-modal"> <div class="modal-card"> <div class="modal-header"> <div class="modal-title"> <i data-lucide="plus-circle" class="icon-blue"></i> <h3 data-i18n="admin_btn_add_product">เพิ่มสินค้าใหม่</h3> </div> <button class="modal-close-btn" onclick="closeAdminAddModal()"> <i data-lucide="x"></i> </button> </div> <div class="modal-body"> <form id="admin-add-product-form" onsubmit="handleAdminAddProductSubmit(event)"> <div class="input-group"> <label>ชื่อสินค้า</label> <input type="text" id="admin-add-product-name" required> </div> <div class="input-group"> <label>ราคา (บาท)</label> <input type="number" id="admin-add-product-price" required min="0"> </div> <div class="input-group"> <label>หมวดหมู่</label> <input type="text" id="admin-add-product-category" required> </div> <div class="input-group"> <label>URL รูปภาพสินค้า</label> <input type="text" id="admin-add-product-image"> </div> <div class="modal-footer" style="margin-top: 20px; display: flex; justify-content: flex-end; gap: 10px;"> <button type="button" class="btn btn-text" onclick="closeAdminAddModal()">ยกเลิก</button> <button type="submit" class="btn btn-primary">บันทึกสินค้าใหม่</button> </div> </form> </div> </div> </div> <!-- Admin Order Details Modal --> <div class="modal-overlay" id="admin-order-details-modal"> <div class="modal-card" style="max-width: 600px;"> <div class="modal-header"> <div class="modal-title"> <i data-lucide="package" class="icon-blue"></i> <h3>รายละเอียดคำสั่งซื้อ (Order Details)</h3> </div> <button class="modal-close-btn" onclick="closeAdminOrderDetailsModal()"> <i data-lucide="x"></i> </button> </div> <div class="modal-body" id="admin-order-details-content"> <!-- Dynamically populated by JS --> </div> </div> </div> <!-- Toast Notifications Container --> <div class="toast-container" id="toast-container"></div> <!-- Script Entrypoint --> <script src="script.js"></script> </body> </html>

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.29 | proxy | phpinfo | Settings