File manager - Edit - /home/webapp69.cm.in.th/u69319090006/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>SkyMall | Premium Multi-Category Marketplace</title> <!-- Google Fonts --> <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=Outfit:wght@300;400;500;600;700&family=Sarabun:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- FontAwesome Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- Chart.js Library --> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script> <!-- Canvas Confetti Library --> <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script> <!-- Main Style Sheet --> <link rel="stylesheet" href="style.css"> </head> <body> <!-- MAIN APP CONTAINER --> <div id="app"> <!-- Top Global Announcement Bar --> <div id="globalAnnouncementBar" class="global-announcement-bar" style="display: none;"> <div class="container announcement-content"> <span class="announcement-badge" id="announcementBadge"><i class="fa-solid fa-bullhorn"></i> ประกาศ</span> <span id="announcementText">ข้อความประกาศจากทางแพลตฟอร์ม</span> <button class="announcement-close" onclick="document.getElementById('globalAnnouncementBar').style.display='none'">×</button> </div> </div> <!-- ========================================== --> <!-- CLIENT NAVIGATION & HEADER --> <!-- ========================================== --> <header class="app-header" id="clientHeader"> <div class="header-container container"> <a href="#" class="logo" id="logoLink"> <span class="logo-icon"><i class="fa-solid fa-store"></i></span> <span class="logo-text">Sky<span>Mall</span></span> </a> <!-- Global Search Bar inside Navbar --> <div class="header-search-bar"> <input type="text" id="globalSearchBar" placeholder="ค้นหา สินค้า แบรนด์ หรือหมวดหมู่ที่ต้องการ..."> <button id="globalSearchBtn"><i class="fa-solid fa-magnifying-glass"></i></button> </div> <nav class="nav-menu" id="navMenu"> <a href="#" class="nav-link active" data-page="home"><i class="fa-solid fa-bag-shopping"></i> <span>ร้านค้า</span></a> <a href="#" class="nav-link" data-page="wishlist" id="navWishlistLink"><i class="fa-solid fa-heart"></i> <span>ถูกใจ</span> (<span id="wishlistCountLabel">0</span>)</a> <a href="#" class="nav-link" data-page="history" id="navHistoryLink"><i class="fa-solid fa-receipt"></i> <span>ประวัติสั่งซื้อ</span></a> </nav> <div class="header-actions"> <div class="auth-status" id="authStatusHeader"> <!-- Filled by JS --> </div> <a href="#" class="cart-trigger" id="cartTrigger" data-page="cart"> <i class="fa-solid fa-cart-shopping"></i> <span class="cart-badge" id="cartBadgeCount">0</span> </a> </div> </div> </header> <!-- ========================================== --> <!-- ADMIN NAVIGATION & HEADER --> <!-- ========================================== --> <header class="app-header admin-header" id="adminHeader" style="display: none;"> <div class="header-container container admin-header-container"> <div class="logo"> <span class="logo-icon"><i class="fa-solid fa-lock"></i></span> <span class="logo-text">Sky<span>Admin</span></span> </div> <nav class="nav-menu admin-nav-menu"> <a href="#" class="nav-link active" data-admin-page="dashboard"><i class="fa-solid fa-chart-line"></i> <span>แดชบอร์ด</span></a> <a href="#" class="nav-link" data-admin-page="stock"><i class="fa-solid fa-boxes-stacked"></i> <span>คลังสินค้า</span></a> <a href="#" class="nav-link" data-admin-page="orders"><i class="fa-solid fa-clipboard-list"></i> <span>ออเดอร์</span></a> <a href="#" class="nav-link" data-admin-page="coupons"><i class="fa-solid fa-ticket"></i> <span>คูปอง</span></a> <a href="#" class="nav-link" data-admin-page="sellers"><i class="fa-solid fa-users-gear"></i> <span>ผู้ใช้ & ผู้ขาย</span></a> <a href="#" class="nav-link" data-admin-page="reviews"><i class="fa-solid fa-star-half-stroke"></i> <span>จัดการรีวิว</span></a> <a href="#" class="nav-link" data-admin-page="financials"><i class="fa-solid fa-file-invoice-dollar"></i> <span>การเงิน & ถอนเงิน</span></a> <a href="#" class="nav-link" data-admin-page="banners"><i class="fa-solid fa-images"></i> <span>แบนเนอร์ & ประกาศ</span></a> <a href="#" class="nav-link" data-admin-page="sales-report"><i class="fa-solid fa-chart-pie"></i> <span>รายงานยอดขาย</span></a> <a href="#" class="nav-link" data-admin-page="orders-report"><i class="fa-solid fa-file-invoice"></i> <span>รายงานคำสั่งซื้อ</span></a> </nav> <div class="header-actions admin-header-actions"> <span class="admin-profile-badge" title="สถานะผู้ดูแลระบบ"><i class="fa-solid fa-user-gear"></i> <span class="badge-text">Admin</span></span> <button class="btn btn-sky-outline btn-xs" onclick="openQuickSwitchAccountModal()" title="สลับบัญชีใช้งาน"><i class="fa-solid fa-users-gear"></i> <span class="btn-text">สลับบัญชี</span></button> <button class="btn btn-danger-outline btn-xs" id="adminLogoutBtn" title="ออกจากระบบผู้ดูแล"><i class="fa-solid fa-sign-out-alt"></i> <span class="btn-text">ออกระบบ</span></button> </div> </div> </header> <!-- ========================================== --> <!-- SELLER NAVIGATION & HEADER --> <!-- ========================================== --> <header class="app-header seller-header" id="sellerHeader" style="display: none; background: linear-gradient(135deg, #0f766e, #0d9488);"> <div class="header-container container"> <div class="logo"> <span class="logo-icon"><i class="fa-solid fa-store"></i></span> <span class="logo-text">Sky<span>Seller</span></span> </div> <nav class="nav-menu"> <a href="#" class="nav-link active" data-seller-page="dashboard"><i class="fa-solid fa-chart-line"></i> <span>แดชบอร์ดผู้ขาย</span></a> <a href="#" class="nav-link" data-seller-page="stock"><i class="fa-solid fa-boxes-stacked"></i> <span>จัดการสินค้าของฉัน</span></a> <a href="#" class="nav-link" data-seller-page="orders"><i class="fa-solid fa-clipboard-list"></i> <span>จัดการออเดอร์ร้านค้า</span></a> <a href="#" class="nav-link" data-seller-page="profile"><i class="fa-solid fa-store-gear"></i> <span>ตั้งค่าร้านค้า</span></a> </nav> <div class="header-actions"> <span class="seller-profile-badge" id="sellerProfileBadge" style="background: rgba(255,255,255,0.15); padding: 4px 10px; border-radius: 4px; color: #fff; font-size: 13px;"><i class="fa-solid fa-user-tie"></i> ร้านค้า</span> <button class="btn btn-sm" onclick="openQuickSwitchAccountModal()" style="border: 1px solid rgba(255,255,255,0.5); color: #fff; background: transparent;"><i class="fa-solid fa-users-gear"></i> <span>สลับบัญชี</span></button> <button class="btn btn-danger-outline btn-sm" id="sellerLogoutBtn"><i class="fa-solid fa-sign-out-alt"></i> <span>ออกระบบ</span></button> </div> </div> </header> <!-- ========================================== --> <!-- VIEW CONTAINERS --> <!-- ========================================== --> <main class="app-content container"> <!-- ------------------------------------------ --> <!-- CLIENT VIEW: AUTHENTICATION --> <!-- ------------------------------------------ --> <section id="page-auth" class="page-section" style="display: none;"> <div class="auth-wrapper"> <div class="auth-back-to-shop mb-3"> <a href="#" onclick="navigateTo('home')" class="btn btn-sky-outline btn-sm"> <i class="fa-solid fa-arrow-left"></i> <span>กลับไปยังหน้าร้านค้า</span> </a> </div> <div class="auth-card"> <div class="auth-tabs"> <button class="auth-tab-btn active" id="tabLoginBtn">เข้าสู่ระบบ</button> <button class="auth-tab-btn" id="tabRegisterBtn">สมัครสมาชิกใหม่</button> </div> <!-- Login Form --> <form id="loginForm" class="auth-form"> <h2><span>เข้าสู่ระบบสมาชิก</span></h2> <p class="auth-subtitle">เข้าสู่ระบบเพื่อดำเนินการสั่งซื้อและตรวจสอบสถานะพัสดุ</p> <!-- Saved Accounts Container --> <div id="savedAccountsAuthContainer" class="saved-accounts-auth-container mb-3" style="display: none;"> <!-- Filled dynamically via JS --> </div> <div class="form-group"> <label for="loginUsername">ชื่อผู้ใช้ (หรือพิมพ์ admin)</label> <input type="text" id="loginUsername" class="form-control" required placeholder="เช่น customer1 หรือ admin"> </div> <div class="form-group"> <label for="loginPassword">รหัสผ่าน</label> <div class="password-input-wrapper"> <input type="password" id="loginPassword" class="form-control" required placeholder="••••••••"> <i class="fa-solid fa-eye toggle-password-btn" data-target="loginPassword" title="แสดง/ซ่อนรหัสผ่าน"></i> </div> </div> <button type="submit" class="btn btn-sky w-100">เข้าสู่ระบบ</button> <div class="auth-tip"> <i class="fa-solid fa-circle-info"></i> <span>พิมพ์ไอดี admin เพื่อเข้าสู่ระบบแอดมินจำลอง</span> </div> </form> <!-- Register Form --> <form id="registerForm" class="auth-form" style="display: none;"> <h2><span>สร้างบัญชีใหม่</span></h2> <p class="auth-subtitle">สมัครสมาชิกเพื่อรับสิทธิพิเศษและบันทึกที่อยู่จัดส่ง</p> <div class="form-group"> <label for="regUsername">ชื่อผู้ใช้</label> <input type="text" id="regUsername" class="form-control" required placeholder="ระบุชื่อผู้ใช้ภาษาอังกฤษ"> </div> <div class="form-group"> <label for="regName">ชื่อ-นามสกุลจริง</label> <input type="text" id="regName" class="form-control" required placeholder="เช่น นายสมชาย ใจดี"> </div> <div class="form-group"> <label for="regRole">บทบาทผู้ใช้งาน (Role)</label> <select id="regRole" class="form-control"> <option value="client">ลูกค้า (Customer)</option> <option value="seller">ผู้ขาย (Seller / Merchant)</option> </select> </div> <div class="form-group"> <label for="regPassword">รหัสผ่าน</label> <div class="password-input-wrapper"> <input type="password" id="regPassword" class="form-control" required placeholder="สร้างรหัสผ่านของคุณ"> <i class="fa-solid fa-eye toggle-password-btn" data-target="regPassword" title="แสดง/ซ่อนรหัสผ่าน"></i> </div> </div> <button type="submit" class="btn btn-sky w-100">สมัครสมาชิกใหม่</button> </form> </div> </div> </section> <!-- ------------------------------------------ --> <!-- CLIENT VIEW: CATALOG HOME --> <!-- ------------------------------------------ --> <section id="page-home" class="page-section"> <!-- Banner Slider Mock --> <!-- Premium Hero Banner Slider System --> <!-- Premium Hero Banner Slider System (Dynamic) --> <div class="hero-banner-slider-container"> <div class="hero-banner-slider" id="heroBannerSlider"> <!-- Loaded dynamically via JS --> </div> <!-- Slider Arrow Controls --> <button class="slider-arrow prev-arrow" id="prevHeroSlideBtn"><i class="fa-solid fa-chevron-left"></i></button> <button class="slider-arrow next-arrow" id="nextHeroSlideBtn"><i class="fa-solid fa-chevron-right"></i></button> <!-- Slider Dot Navigation --> <div class="slider-dots" id="heroSliderDots"> <!-- Loaded dynamically via JS --> </div> </div> <!-- Coupon Showcase Section --> <div class="coupon-showcase-section"> <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 10px;"> <h3 style="margin-bottom: 0;"><i class="fa-solid fa-ticket"></i> <span>คูปองส่วนลดพิเศษสำหรับคุณ</span></h3> <button class="btn btn-sky-outline btn-sm" id="collectAllCouponsBtn"> <i class="fa-solid fa-layer-group"></i> <span>เก็บคูปองทั้งหมด</span> </button> </div> <div class="coupon-cards-container" id="couponCardsContainer"> <!-- Loaded dynamically via JS --> </div> </div> <!-- Shopee/Lazada Style Multi-Category Icon Navigation Bar --> <div class="market-category-nav" id="marketCategoryNav"> <!-- Loaded dynamically via JS --> </div> <div id="catalog-start" class="catalog-container"> <!-- Filters Sidebar (Modern Redesign) --> <aside class="catalog-filters"> <div class="filter-header"> <h3><i class="fa-solid fa-sliders"></i> <span>คัดกรองรายละเอียด</span></h3> <button class="btn-clear-filters" id="clearFiltersBtn"><i class="fa-solid fa-rotate-left"></i> <span>ล้างตัวกรอง</span></button> </div> <!-- Filter Category (Accordion) --> <div class="filter-group"> <div class="filter-group-header"> <label><i class="fa-solid fa-layer-group"></i> <span>หมวดหมู่หลัก</span></label> <i class="fa-solid fa-chevron-right filter-toggle-icon"></i> </div> <div class="filter-group-content"> <select id="filterCategory" class="form-control"> <option value="all">หมวดหมู่ทั้งหมด</option> <!-- Loaded dynamically --> </select> </div> </div> <!-- Filter Seller (Accordion) --> <div class="filter-group"> <div class="filter-group-header"> <label><i class="fa-solid fa-store"></i> <span>ร้านค้าผู้ขาย</span></label> <i class="fa-solid fa-chevron-right filter-toggle-icon"></i> </div> <div class="filter-group-content"> <select id="filterSeller" class="form-control"> <option value="all">ร้านค้าทั้งหมด</option> <!-- Loaded dynamically --> </select> </div> </div> <!-- Promotions & Perks Filter (Accordion) --> <div class="filter-group"> <div class="filter-group-header"> <label><i class="fa-solid fa-gift"></i> <span>โปรโมชั่น & สิทธิพิเศษ</span></label> <i class="fa-solid fa-chevron-right filter-toggle-icon"></i> </div> <div class="filter-group-content"> <div class="promotion-filter-chips"> <label class="promo-chip" id="chipFreeShipping"> <input type="checkbox" id="filterFreeShipping" value="freeShipping"> <span>🚚 <span>ฟรีค่าจัดส่ง</span></span> </label> <label class="promo-chip" id="chipHasCoupon"> <input type="checkbox" id="filterHasCoupon" value="hasCoupon"> <span>🎟️ <span>มีคูปองส่วนลด</span></span> </label> </div> </div> </div> <!-- Price Range Filter with Presets (Accordion) --> <div class="filter-group"> <div class="filter-group-header"> <label><i class="fa-solid fa-tags"></i> <span>ช่วงราคา (บาท)</span></label> <i class="fa-solid fa-chevron-right filter-toggle-icon"></i> </div> <div class="filter-group-content"> <div class="price-range-inputs mb-2"> <input type="number" id="filterPriceMin" class="form-control" placeholder="ต่ำสุด" min="0"> <span class="price-separator">-</span> <input type="number" id="filterPriceMax" class="form-control" placeholder="สูงสุด" min="0"> </div> <div class="quick-price-chips"> <button type="button" class="quick-price-chip" data-min="0" data-max="500">< ฿500</button> <button type="button" class="quick-price-chip" data-min="500" data-max="2000">฿500 - ฿2k</button> <button type="button" class="quick-price-chip" data-min="2000" data-max="">> ฿2,000</button> </div> </div> </div> <!-- Rating Filter (Accordion) --> <div class="filter-group"> <div class="filter-group-header"> <label><i class="fa-solid fa-star"></i> <span>คะแนนรีวิว</span></label> <i class="fa-solid fa-chevron-right filter-toggle-icon"></i> </div> <div class="filter-group-content"> <!-- Rating Search Mode Toggle --> <div class="rating-mode-toggle mb-2"> <label class="rating-mode-btn active" id="btnRatingModeMin"> <input type="radio" name="ratingMode" value="min" checked> <span>แบบขั้นต่ำ</span> </label> <label class="rating-mode-btn" id="btnRatingModeExact"> <input type="radio" name="ratingMode" value="exact"> <span>เจาะจงดาว</span> </label> </div> <div class="rating-chips-row" id="filterRatingGroup"> <label class="rating-chip active" data-rating="0"> <input type="radio" name="filterRating" value="0" checked> <span>ทั้งหมด</span> </label> <label class="rating-chip" data-rating="5"> <input type="radio" name="filterRating" value="5"> <span>5★</span> </label> <label class="rating-chip" data-rating="4"> <input type="radio" name="filterRating" value="4"> <span>4★</span> </label> <label class="rating-chip" data-rating="3"> <input type="radio" name="filterRating" value="3"> <span>3★</span> </label> <label class="rating-chip" data-rating="2"> <input type="radio" name="filterRating" value="2"> <span>2★</span> </label> <label class="rating-chip" data-rating="1"> <input type="radio" name="filterRating" value="1"> <span>1★</span> </label> </div> </div> </div> </aside> <!-- Product Grid Wrapper --> <div class="catalog-main"> <div class="catalog-results-header"> <span id="resultsCount">กำลังโหลดรายการสินค้า...</span> <select id="sortBy" class="form-control width-auto"> <option value="default">จัดเรียง: แนะนำ</option> <option value="price-asc">ราคา: ต่ำไปสูง</option> <option value="price-desc">ราคา: สูงไปต่ำ</option> <option value="rating-desc">คะแนนรีวิว: สูงสุด</option> </select> </div> <!-- Active Filter Tags Bar --> <div class="active-filter-tags-wrapper" id="activeFilterTagsWrapper" style="display: none;"> <span class="active-filter-label"><i class="fa-solid fa-filter"></i> ตัวกรองที่เลือก:</span> <div class="active-filter-tags" id="activeFilterTagsContainer"></div> <button class="btn-clear-all-tags" id="clearAllTagsBtn">ล้างทั้งหมด</button> </div> <!-- Seller Store Header Banner --> <div id="sellerStoreHeaderContainer"></div> <!-- Products Grid --> <div class="products-grid" id="productsGrid"> <!-- Filled Dynamically --> </div> </div> </div> </section> <!-- ------------------------------------------ --> <!-- CLIENT VIEW: WISHLIST --> <!-- ------------------------------------------ --> <section id="page-wishlist" class="page-section" style="display: none;"> <div class="section-header"> <h2><i class="fa-solid fa-heart text-danger"></i> รายการสินค้าที่คุณถูกใจ (Wishlist)</h2> </div> <div class="products-grid" id="wishlistGrid"> <!-- Filled dynamically --> </div> </section> <!-- ------------------------------------------ --> <!-- CLIENT VIEW: SHOPPING CART --> <!-- ------------------------------------------ --> <section id="page-cart" class="page-section" style="display: none;"> <div class="section-header"> <h2><i class="fa-solid fa-cart-shopping"></i> ตะกร้าสินค้าของคุณ</h2> </div> <div class="cart-layout"> <!-- Cart items list --> <div class="cart-items-panel" id="cartItemsPanel"> <!-- Dynamically filled --> </div> </div> </section> <!-- ------------------------------------------ --> <!-- CLIENT VIEW: CHECKOUT --> <!-- ------------------------------------------ --> <section id="page-checkout" class="page-section" style="display: none;"> <div class="section-header"> <h2><i class="fa-solid fa-truck-fast"></i> ข้อมูลจัดส่งและชำระเงิน</h2> </div> <div class="checkout-layout"> <!-- Checkout details form --> <form id="checkoutForm" class="checkout-form-panel"> <div class="checkout-card"> <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;"> <h3><i class="fa-solid fa-map-location-dot"></i> เลือกที่อยู่สำหรับจัดส่งพัสดุ *</h3> <button type="button" class="btn btn-sky-outline btn-xs" id="checkoutAddAddressBtn"><i class="fa-solid fa-plus"></i> เพิ่มที่อยู่จัดส่งใหม่</button> </div> <div id="checkoutAddressContainer" class="checkout-address-list mt-3"> <!-- Saved address cards loaded dynamically via JS --> </div> </div> <!-- Payment Method Selector --> <div class="checkout-card mt-4"> <h3><i class="fa-solid fa-wallet"></i> เลือกวิธีการชำระเงิน *</h3> <div class="payment-method-selector mb-3"> <label class="payment-method-label"> <input type="radio" name="paymentOption" value="promptpay" checked> <div class="payment-method-info"> <strong>โอนเงินชำระทันที (PromptPay QR)</strong> <p class="mb-0">สแกนจ่ายเงินและแนบสลิปเพื่อเริ่มแพ็กของทันที</p> </div> </label> <label class="payment-method-label mt-2"> <input type="radio" name="paymentOption" value="credit_card"> <div class="payment-method-info"> <strong>บัตรเครดิต / บัตรเดบิต</strong> <p class="mb-0">ชำระผ่านระบบบัตรปลอดภัยระดับสากล</p> </div> </label> <label class="payment-method-label mt-2"> <input type="radio" name="paymentOption" value="pay_later"> <div class="payment-method-info"> <strong>โอนเงินภายหลัง (แนบสลิป)</strong> <p class="mb-0 text-success">สั่งซื้อและชำระเงินพร้อมแนบสลิปในภายหลัง (สถานะ: รอชำระเงิน)</p> </div> </label> <label class="payment-method-label mt-2"> <input type="radio" name="paymentOption" value="cod"> <div class="payment-method-info"> <strong>เก็บเงินปลายทาง (COD)</strong> <p class="mb-0 text-success">ชำระเงินสดให้กับพนักงานจัดส่งเมื่อได้รับสินค้า</p> </div> </label> </div> <!-- 1. PromptPay section --> <div id="checkoutPromptPayArea"> <div class="payment-qr-container"> <div class="qr-box"> <div class="promptpay-badge"> <span class="pp-p">Prompt</span><span class="pp-pay">Pay</span> </div> <div class="qr-mock-img" id="checkoutQrImage"> <i class="fa-solid fa-qrcode"></i> <div class="qr-target-amount" id="qrTargetAmount">฿0.00</div> </div> <p class="qr-tip">บัญชี: บริษัท สกายมอลล์ จำกัด<br>คิวอาร์รองรับการสแกนด้วยแอปธนาคารทุกประเภท</p> </div> <div class="slip-upload-box"> <label for="slipFileInput" class="slip-upload-label" id="slipUploadLabel"> <i class="fa-solid fa-cloud-arrow-up"></i> <span>คลิกเพื่อแนบภาพสลิปชำระเงิน *</span> <input type="file" id="slipFileInput" accept="image/*" style="display: none;"> </label> <div class="slip-preview-container" id="slipPreviewContainer" style="display: none;"> <span class="badge badge-sky"><i class="fa-solid fa-file-image"></i> ตรวจพบสลิป</span> <img src="" id="slipPreviewImg" alt="Payment Slip"> <button type="button" class="btn btn-danger-outline btn-xs" id="removeSlipBtn"><i class="fa-solid fa-trash"></i> ลบภาพ</button> </div> </div> </div> </div> <!-- 2. Credit Card Section --> <div id="checkoutCreditCardArea" style="display: none;"> <div class="credit-card-form mt-3"> <div class="form-group"> <label for="cardNum">หมายเลขบัตรเครดิต *</label> <input type="text" id="cardNum" class="form-control" placeholder="1234 5678 1234 5678"> </div> <div class="row"> <div class="col-md-6 form-group"> <label for="cardExpiry">วันหมดอายุ (ดด/ปป) *</label> <input type="text" id="cardExpiry" class="form-control" placeholder="12/29"> </div> <div class="col-md-6 form-group"> <label for="cardCvv">CVV *</label> <input type="password" id="cardCvv" class="form-control" placeholder="•••"> </div> </div> </div> </div> </div> <div class="checkout-actions"> <button type="submit" class="btn btn-sky w-100 btn-lg"><i class="fa-solid fa-circle-check"></i> ยืนยันและทำการสั่งซื้อ</button> </div> </form> <!-- Summary Column --> <div class="checkout-summary-panel"> <div class="summary-card"> <h3>สรุปยอดสั่งซื้อ</h3> <div class="checkout-mini-list" id="checkoutMiniList"> <!-- Generated Dynamically --> </div> <hr> <div class="summary-row"> <span>ราคารวมสินค้า</span> <span id="checkoutSubtotal">฿0.00</span> </div> <div class="summary-row text-success" id="checkoutDiscountRow" style="display: none;"> <span>ส่วนลด (<span id="activeCheckoutCouponCode"></span>)</span> <span id="checkoutDiscount">-฿0.00</span> </div> <div class="summary-row"> <span>ค่าจัดส่ง</span> <span class="text-success">ฟรีจัดส่ง</span> </div> <hr> <div class="summary-row total-row"> <span>ยอดชำระสุทธิ</span> <span id="checkoutTotal">฿0.00</span> </div> <!-- Coupon Box moved from Cart Page --> <div class="coupon-box mt-3"> <label for="couponInput">กรอกรหัสส่วนลด</label> <div class="coupon-input-group"> <input type="text" id="couponInput" placeholder="เช่น SKYSALE10"> <button class="btn btn-sky" id="applyCouponBtn" type="button">ใช้งาน</button> </div> <div class="coupon-status" id="couponStatusMessage"></div> </div> </div> </div> </div> </section> <!-- ------------------------------------------ --> <!-- CLIENT VIEW: ORDER SUCCESS --> <!-- ------------------------------------------ --> <section id="page-success" class="page-section" style="display: none;"> <div class="success-screen-wrapper text-center"> <div class="success-icon"><i class="fa-solid fa-circle-check"></i></div> <h2>ทำสั่งซื้อเสร็จสมบูรณ์!</h2> <p class="success-subtitle">ขอบคุณสำหรับความไว้วางใจในการเลือกสั่งซื้อสินค้ากับ SkyMall</p> <div class="success-details-card mt-4"> <div class="success-details-row"> <span>เลขคำสั่งซื้อจำลอง (Order ID)</span> <strong id="successOrderId">OD-XXXXX</strong> </div> <div class="success-details-row"> <span>ยอดรวมสุทธิ</span> <strong id="successOrderTotal" class="text-success">฿0.00</strong> </div> <div class="success-details-row"> <span>วิธีชำระเงิน</span> <span id="successPaymentMethod">PromptPay</span> </div> </div> <div class="success-actions mt-4"> <button class="btn btn-sky" onclick="navigateTo('history')"><i class="fa-solid fa-clock-rotate-left"></i> ไปหน้าประวัติและติดตามพัสดุ</button> <button class="btn btn-sky-outline mt-2" onclick="navigateTo('home')"><i class="fa-solid fa-house"></i> กลับหน้าแรกเพื่อช้อปต่อ</button> </div> </div> </section> <!-- ------------------------------------------ --> <!-- CLIENT VIEW: ORDER HISTORY & TRACKING --> <!-- ------------------------------------------ --> <section id="page-history" class="page-section" style="display: none;"> <div class="section-header"> <h2><i class="fa-solid fa-history"></i> <span>ประวัติคำสั่งซื้อและสถานะพัสดุ</span></h2> </div> <!-- Order Status Tabs (Shopee Style) --> <div class="order-status-tabs-container"> <div class="order-status-tab active" data-status="all"><span>ทั้งหมด</span> <span class="tab-badge" id="badge-all">0</span></div> <div class="order-status-tab" data-status="Unpaid"><span>ที่ต้องชำระ</span> <span class="tab-badge" id="badge-Unpaid">0</span></div> <div class="order-status-tab" data-status="Pending"><span>รอตรวจสอบ</span> <span class="tab-badge" id="badge-Pending">0</span></div> <div class="order-status-tab" data-status="Paid_Preparing"><span>ที่ต้องจัดส่ง</span> <span class="tab-badge" id="badge-Paid_Preparing">0</span></div> <div class="order-status-tab" data-status="Shipped"><span>ที่ต้องได้รับ</span> <span class="tab-badge" id="badge-Shipped">0</span></div> <div class="order-status-tab" data-status="Success"><span>สำเร็จแล้ว</span> <span class="tab-badge" id="badge-Success">0</span></div> <div class="order-status-tab" data-status="Cancelled"><span>ยกเลิกแล้ว</span> <span class="tab-badge" id="badge-Cancelled">0</span></div> </div> <div class="history-container" id="historyListContainer"> <!-- Generated Dynamically --> </div> </section> <!-- ------------------------------------------ --> <!-- CLIENT VIEW: USER PROFILE & ADDRESS SETTINGS --> <!-- ------------------------------------------ --> <section id="page-profile" class="page-section" style="display: none;"> <div class="section-header"> <h2><i class="fa-solid fa-user-gear"></i> การตั้งค่าโปรไฟล์ส่วนตัวและที่อยู่จัดส่ง</h2> </div> <div class="row"> <!-- Left: Personal Information & Avatar --> <div class="col-md-5"> <div class="profile-card"> <h3><i class="fa-solid fa-id-card"></i> ข้อมูลส่วนตัว</h3> <form id="clientProfileForm" class="mt-3"> <div class="profile-avatar-container mb-3"> <img src="" id="clientAvatarPreview" class="profile-avatar-img" alt="Avatar"> <label for="clientAvatarInput" class="btn btn-sky-outline btn-xs" style="cursor: pointer;"> <i class="fa-solid fa-camera"></i> เปลี่ยนรูปโปรไฟล์ <input type="file" id="clientAvatarInput" accept="image/*" style="display: none;"> </label> </div> <div class="form-group"> <label for="clientProfileName">ชื่อ-นามสกุลจริง *</label> <input type="text" id="clientProfileName" class="form-control" required placeholder="เช่น นายสมชาย ใจดี"> </div> <div class="row"> <div class="col-md-6 form-group"> <label for="clientProfileAge">อายุ (ปี)</label> <input type="number" id="clientProfileAge" class="form-control" min="1" max="120" placeholder="เช่น 25"> </div> <div class="col-md-6 form-group"> <label for="clientProfileGender">เพศ</label> <select id="clientProfileGender" class="form-control"> <option value="unspecified">ไม่ระบุ</option> <option value="male">ชาย</option> <option value="female">หญิง</option> <option value="other">อื่นๆ</option> </select> </div> </div> <button type="submit" class="btn btn-sky w-100 mt-2"><i class="fa-solid fa-floppy-disk"></i> บันทึกข้อมูลส่วนตัว</button> </form> </div> </div> <!-- Right: Shipping Address Management --> <div class="col-md-7"> <div class="profile-card"> <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;"> <h3><i class="fa-solid fa-location-dot"></i> ที่อยู่จัดส่งของฉัน</h3> <button type="button" class="btn btn-sky btn-sm" id="openAddAddressModalBtn"><i class="fa-solid fa-plus"></i> เพิ่มที่อยู่ใหม่</button> </div> <div class="address-cards-grid" id="clientAddressList"> <!-- Loaded dynamically via JS --> </div> </div> </div> </div> </section> <!-- ------------------------------------------ --> <!-- ADMIN VIEW: DASHBOARD OVERVIEW --> <!-- ------------------------------------------ --> <section id="admin-page-dashboard" class="page-section admin-section" style="display: none;"> <div class="section-header"> <h2><i class="fa-solid fa-chart-pie"></i> <span>ภาพรวมหลังบ้านแอดมิน (Dashboard)</span></h2> </div> <!-- KPI Cards Grid --> <div class="admin-kpi-grid"> <div class="kpi-card"> <div class="kpi-icon"><i class="fa-solid fa-sack-dollar"></i></div> <div class="kpi-info"> <h4>ยอดขายรวมทั้งหมด</h4> <span class="kpi-value" id="kpiTotalRevenue">฿0.00</span> </div> </div> <div class="kpi-card"> <div class="kpi-icon"><i class="fa-solid fa-boxes-packing"></i></div> <div class="kpi-info"> <h4>ยอดคำสั่งซื้อทั้งหมด</h4> <span class="kpi-value" id="kpiTotalOrders">0 ออเดอร์</span> </div> </div> <div class="kpi-card danger"> <div class="kpi-icon"><i class="fa-solid fa-triangle-exclamation"></i></div> <div class="kpi-info"> <h4>สินค้าใกล้หมดสต็อก (< 5 ชิ้น)</h4> <span class="kpi-value" id="kpiLowStockAlert">0 รายการ</span> </div> </div> </div> <!-- Category Stats --> <div class="admin-dashboard-layout mt-4 category-stats-layout"> <div class="admin-dashboard-card"> <h3><i class="fa-solid fa-bell"></i> <span>สถิติสต็อกแยกตามหมวดหมู่สินค้า</span></h3> <div class="admin-table-container"> <table class="table"> <thead> <tr> <th>หมวดหมู่ (Category)</th> <th>จำนวนชิ้นในสต็อกรวม</th> <th>สถานะคลังสินค้า</th> </tr> </thead> <tbody id="categoryStatsTableBody"> <!-- Filled by JS --> </tbody> </table> </div> </div> <div class="admin-dashboard-card chart-container-card"> <h3><i class="fa-solid fa-chart-bar"></i> <span>กราฟสถิติคลังสินค้า</span></h3> <div class="chart-wrapper" style="height: 250px; position: relative;"> <canvas id="adminStockChart" width="400" height="180"></canvas> </div> </div> </div> <!-- Payment Verification Queue --> <div class="admin-dashboard-layout mt-4"> <div class="admin-dashboard-card w-100" style="border: 1px solid var(--color-sky-brand); box-shadow: 0 0 10px rgba(2, 132, 199, 0.15);"> <h3 style="color: var(--color-sky-brand);"><i class="fa-solid fa-qrcode"></i> <span>ตรวจสอบสลิปการโอนเงิน (PromptPay Verification Queue)</span></h3> <div class="admin-table-container"> <table class="table"> <thead> <tr> <th>เลขที่ออเดอร์</th> <th>ลูกค้า / วันเวลา</th> <th>ยอดโอนสุทธิ</th> <th>รูปสลิปหลักฐาน</th> <th>การจัดการ</th> </tr> </thead> <tbody id="adminDashboardPendingOrdersTableBody"> <!-- Filled dynamically by JS --> </tbody> </table> </div> </div> </div> </section> <!-- ------------------------------------------ --> <!-- ADMIN VIEW: STOCK MANAGEMENT --> <!-- ------------------------------------------ --> <section id="admin-page-stock" class="page-section admin-section" style="display: none;"> <div class="section-header"> <h2><i class="fa-solid fa-boxes-stacked"></i> การจัดการคลังสินค้า & Catalog</h2> <button class="btn btn-sky" id="openAddProductModalBtn"><i class="fa-solid fa-plus"></i> เพิ่มสินค้าใหม่</button> </div> <div class="admin-card"> <div class="table-actions"> <input type="text" id="adminStockSearch" class="form-control width-auto" placeholder="ค้นหาชื่อสินค้า..."> <select id="adminStockFilterCategory" class="form-control width-auto"> <option value="all">ทุกหมวดหมู่</option> <!-- Category items dynamically loaded --> </select> <select id="adminStockFilterSeller" class="form-control width-auto"> <option value="all">ทุกร้านค้าผู้ขาย</option> </select> <select id="adminStockFilterStatus" class="form-control width-auto"> <option value="all">ทุกสถานะสต็อก</option> <option value="available">พร้อมขาย (> 5 ชิ้น)</option> <option value="low">เหลือน้อย (1-5 ชิ้น)</option> <option value="out">สินค้าหมดคลัง (0 ชิ้น)</option> </select> </div> <div class="admin-table-container mt-3"> <table class="table stock-table"> <thead> <tr> <th>รูปภาพ</th> <th>ชื่อสินค้า / หมวดหมู่ / ร้านค้า</th> <th>ราคาจำหน่าย</th> <th>คุณลักษณะสินค้า & สต๊อกในคลัง</th> <th>สถานะร้าน</th> <th>การจัดการ</th> </tr> </thead> <tbody id="adminStockTableBody"> <!-- Generated Dynamically --> </tbody> </table> </div> </div> </section> <!-- ------------------------------------------ --> <!-- ADMIN VIEW: ORDER MANAGEMENT --> <!-- ------------------------------------------ --> <section id="admin-page-orders" class="page-section admin-section" style="display: none;"> <div class="section-header"> <h2><i class="fa-solid fa-clipboard-list"></i> <span>รายการคำสั่งซื้อและหลักฐานชำระเงิน</span></h2> </div> <div class="admin-card"> <!-- Order Status Filter Tabs --> <div class="admin-order-tabs mb-3" id="adminOrderTabs"> <button class="admin-tab-btn active" data-status="all"><i class="fa-solid fa-layer-group"></i> <span>ทั้งหมด</span></button> <button class="admin-tab-btn" data-status="Pending"><i class="fa-solid fa-qrcode"></i> <span>รอตรวจสลิป</span></button> <button class="admin-tab-btn" data-status="Preparing"><i class="fa-solid fa-box-open"></i> <span>เตรียมจัดส่ง</span></button> <button class="admin-tab-btn" data-status="Shipped"><i class="fa-solid fa-truck-fast"></i> <span>อยู่ระหว่างจัดส่ง</span></button> <button class="admin-tab-btn" data-status="Success"><i class="fa-solid fa-circle-check"></i> <span>จัดส่งสำเร็จ</span></button> <button class="admin-tab-btn" data-status="Cancelled"><i class="fa-solid fa-ban"></i> <span>ยกเลิก/ล้มเหลว</span></button> </div> <div class="admin-table-container"> <table class="table orders-table"> <thead> <tr> <th>เลขออเดอร์ / วันเวลา</th> <th>ลูกค้า / ที่อยู่ผู้รับ</th> <th>รายการสินค้า</th> <th>ราคารวม</th> <th>หลักฐาน (คลิกขยาย)</th> <th>สถานะปัจจุบัน</th> <th>การจัดการ & อัปเดต</th> </tr> </thead> <tbody id="adminOrdersTableBody"> <!-- Generated Dynamically --> </tbody> </table> </div> </div> </section> <!-- ------------------------------------------ --> <!-- ADMIN VIEW: COUPON MANAGER --> <!-- ------------------------------------------ --> <section id="admin-page-coupons" class="page-section admin-section" style="display: none;"> <div class="section-header"> <h2><i class="fa-solid fa-ticket"></i> จัดการคูปองส่วนลด</h2> </div> <div class="coupon-manager-layout"> <!-- Create Coupon Form --> <div class="admin-card"> <h3>สร้างคูปองใหม่</h3> <form id="createCouponForm" class="mt-3"> <div class="form-group"> <label for="newCouponCode">รหัสคูปอง (ตัวอักษรใหญ่ภาษาอังกฤษ/ตัวเลข)</label> <input type="text" id="newCouponCode" class="form-control" required placeholder="เช่น SKYSUMMER"> </div> <div class="row"> <div class="col-md-6 form-group"> <label for="couponDiscountType">ประเภทส่วนลด</label> <select id="couponDiscountType" class="form-control"> <option value="amount">หักจำนวนเงิน (บาท)</option> <option value="percent">หักเปอร์เซ็นต์ (%)</option> </select> </div> <div class="col-md-6 form-group"> <label for="newCouponValue">มูลค่าส่วนลด</label> <input type="number" id="newCouponValue" class="form-control" required min="1" placeholder="เช่น 100 หรือ 10"> </div> </div> <div class="row"> <div class="col-md-6 form-group"> <label for="newCouponMinSpend">ยอดซื้อขั้นต่ำ (บาท)</label> <input type="number" id="newCouponMinSpend" class="form-control" min="0" value="0" placeholder="เช่น 300"> </div> <div class="col-md-6 form-group"> <label for="newCouponExpiryDate">วันหมดอายุคูปอง</label> <input type="date" id="newCouponExpiryDate" class="form-control"> </div> </div> <button type="submit" class="btn btn-sky w-100"><i class="fa-solid fa-plus"></i> เพิ่มคูปอง</button> </form> </div> <!-- Coupons Table --> <div class="admin-card"> <h3>รายการคูปองที่ใช้งานได้</h3> <div class="admin-table-container mt-3"> <table class="table"> <thead> <tr> <th>รหัสคูปอง</th> <th>รูปแบบส่วนลด</th> <th>ยอดซื้อขั้นต่ำ</th> <th>วันหมดอายุ</th> <th>จำนวนครั้งที่ใช้</th> <th>การใช้งาน</th> </tr> </thead> <tbody id="adminCouponTableBody"> <!-- Generated Dynamically --> </tbody> </table> </div> </div> </div> </section> <!-- ------------------------------------------ --> <!-- ADMIN VIEW: USER, SELLER & BAN MANAGEMENT --> <!-- ------------------------------------------ --> <section id="admin-page-sellers" class="page-section admin-section" style="display: none;"> <div class="section-header"> <h2><i class="fa-solid fa-users-gear"></i> จัดการผู้ใช้งาน ร้านค้า และประวัติการแบน (User, Seller & Ban Management)</h2> <button class="btn btn-sky" id="openAddSellerModalBtn"><i class="fa-solid fa-user-plus"></i> เพิ่มผู้ขายใหม่</button> </div> <!-- 0. Pending Seller Applications Queue Card --> <div class="admin-card mb-4" style="border: 1px solid var(--color-sky-brand); box-shadow: 0 0 10px rgba(2, 132, 199, 0.12);"> <h3 style="color: var(--color-sky-brand);"><i class="fa-solid fa-user-clock"></i> 0. คิวรออนุมัติสมัครร้านค้าใหม่ (Pending Seller Applications Queue)</h3> <div class="admin-table-container mt-2"> <table class="table"> <thead> <tr> <th>ชื่อผู้ใช้ (Username)</th> <th>ชื่อร้านค้า / บริษัท</th> <th>ประเภทผู้ขาย</th> <th>เบอร์โทร & เอกสาร</th> <th>วันที่ยื่นสมัคร</th> <th>การจัดการ</th> </tr> </thead> <tbody id="adminPendingSellerAppsTableBody"> <!-- Generated Dynamically --> </tbody> </table> </div> </div> <!-- 1. Client Accounts Table Card --> <div class="admin-card mb-4"> <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;" class="mb-3"> <h3 style="margin: 0;"><i class="fa-solid fa-users"></i> 1. รายชื่อลูกค้าในระบบ (Client Accounts)</h3> <input type="text" id="adminClientSearch" class="form-control width-auto" placeholder="ค้นหา Username หรือชื่อลูกค้า..."> </div> <div class="admin-table-container mt-2"> <table class="table"> <thead> <tr> <th>ชื่อผู้ใช้ (Username)</th> <th>ชื่อ-นามสกุลจริง</th> <th>รหัสผ่าน (Password)</th> <th>อายุ</th> <th>เพศ</th> <th>จำนวนที่อยู่จัดส่ง</th> <th>สถานะบัญชี</th> <th>การจัดการ</th> </tr> </thead> <tbody id="adminClientTableBody"> <!-- Generated Dynamically --> </tbody> </table> </div> </div> <!-- 2. Seller Accounts Table Card --> <div class="admin-card mb-4"> <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;" class="mb-3"> <h3 style="margin: 0;"><i class="fa-solid fa-store"></i> 2. รายชื่อผู้ขายในระบบ (Seller Accounts)</h3> <input type="text" id="adminSellerSearch" class="form-control width-auto" placeholder="ค้นหา Username หรือชื่อร้านค้า..."> </div> <div class="admin-table-container mt-2"> <table class="table"> <thead> <tr> <th>ชื่อผู้ใช้ (Username)</th> <th>ชื่อร้านค้า (Store Name)</th> <th>รหัสผ่าน (Password)</th> <th>ชื่อบริษัท / นิติบุคคล</th> <th>ระดับผู้ขาย (Seller Level)</th> <th>สถานะบัญชี</th> <th>การจัดการ</th> </tr> </thead> <tbody id="adminSellerTableBody"> <!-- Generated Dynamically --> </tbody> </table> </div> </div> <!-- 3. Banned Accounts History Log Card --> <div class="admin-card"> <h3><i class="fa-solid fa-user-slash"></i> 3. ประวัติการแบนบัญชี (Banned Accounts History Log)</h3> <div class="admin-table-container mt-3"> <table class="table"> <thead> <tr> <th>ชื่อผู้ใช้ (Username)</th> <th>ชื่อผู้ใช้งาน / ร้านค้า</th> <th>ประเภทบัญชี</th> <th>วันเวลาที่ถูกแบน</th> <th>การจัดการ</th> </tr> </thead> <tbody id="adminBannedTableBody"> <!-- Generated Dynamically --> </tbody> </table> </div> </div> </section> <!-- ------------------------------------------ --> <!-- ADMIN VIEW: REVIEW MODERATION --> <!-- ------------------------------------------ --> <section id="admin-page-reviews" class="page-section admin-section" style="display: none;"> <div class="section-header"> <h2><i class="fa-solid fa-star-half-stroke"></i> ตรวจสอบและจัดการรีวิวสินค้า (Review Moderation)</h2> </div> <div class="admin-card"> <div class="table-actions mb-3" style="display: flex; gap: 10px; flex-wrap: wrap;"> <input type="text" id="adminReviewSearch" class="form-control width-auto" placeholder="ค้นหาชื่อสินค้า หรือ Username..."> <select id="adminReviewFilterRating" class="form-control width-auto"> <option value="all">ทุกระดับคะแนนดาว</option> <option value="5">5 ดาว</option> <option value="4">4 ดาว</option> <option value="3">3 ดาว</option> <option value="2">2 ดาว</option> <option value="1">1 ดาว</option> </select> </div> <div class="admin-table-container"> <table class="table"> <thead> <tr> <th>สินค้า</th> <th>ผู้รีวิว</th> <th>คะแนน</th> <th>วันที่</th> <th>ข้อความรีวิว</th> <th>การจัดการ</th> </tr> </thead> <tbody id="adminReviewsTableBody"> <!-- Generated Dynamically --> </tbody> </table> </div> </div> </section> <!-- ------------------------------------------ --> <!-- ADMIN VIEW: FINANCIALS & PAYOUTS --> <!-- ------------------------------------------ --> <section id="admin-page-financials" class="page-section admin-section" style="display: none;"> <div class="section-header"> <h2><i class="fa-solid fa-file-invoice-dollar"></i> ค่าธรรมเนียมแพลตฟอร์มและการถอนเงิน (Commission & Payout Management)</h2> </div> <div class="row mb-4" style="display: grid; grid-template-columns: 1fr 2fr; gap: 20px;"> <!-- Commission Setting Card --> <div class="admin-card"> <h3><i class="fa-solid fa-percent text-sky"></i> ตั้งค่าอัตราค่าธรรมเนียม</h3> <form id="platformCommissionForm" class="mt-3"> <div class="form-group"> <label for="commissionRateInput">อัตราค่าธรรมเนียมแพลตฟอร์ม (%)</label> <input type="number" id="commissionRateInput" class="form-control" min="0" max="50" step="0.5" value="5" required> <small style="color: var(--color-sky-slate); font-size: 11px; margin-top: 4px; display: block;">* จะถูกหักจากยอดคำขอถอนเงินของผู้ขายโดยอัตโนมัติ</small> </div> <button type="submit" class="btn btn-sky w-100"><i class="fa-solid fa-floppy-disk"></i> บันทึกอัตราค่าธรรมเนียม</button> </form> </div> <!-- Financial Overview Stats --> <div class="admin-card" style="background: linear-gradient(135deg, rgba(14,165,233,0.08), rgba(2,132,199,0.04)); border: 1px solid var(--color-sky-light);"> <h3><i class="fa-solid fa-wallet text-sky"></i> สรุปรายได้และคิวถอนเงิน</h3> <div class="admin-kpi-grid mt-3" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;"> <div class="kpi-card" style="background: var(--color-white); border: 1px solid var(--color-border);"> <div class="kpi-icon"><i class="fa-solid fa-hand-holding-dollar"></i></div> <div class="kpi-info"> <h4>ค่าธรรมเนียมสะสมรวม</h4> <span class="kpi-value" id="totalCommissionAccumulated">฿0.00</span> </div> </div> <div class="kpi-card warning" style="background: var(--color-white); border: 1px solid var(--color-border);"> <div class="kpi-icon"><i class="fa-solid fa-hourglass-half"></i></div> <div class="kpi-info"> <h4>ยอดคำขอถอนเงินที่รอโอน</h4> <span class="kpi-value" id="pendingPayoutTotal">฿0.00</span> </div> </div> </div> </div> </div> <!-- Seller Payouts Table Card --> <div class="admin-card"> <h3><i class="fa-solid fa-money-bill-transfer"></i> รายการคำขอถอนเงินของผู้ขาย (Seller Withdrawal Requests)</h3> <div class="admin-table-container mt-3"> <table class="table"> <thead> <tr> <th>ร้านค้าผู้ขาย</th> <th>ยอดขอถอนเงิน</th> <th>หักค่าธรรมเนียม</th> <th>ยอดโอนสุทธิ (Net Payout)</th> <th>บัญชีรับเงิน</th> <th>วันเวลาที่ขอ</th> <th>สถานะ & การโอนเงิน</th> </tr> </thead> <tbody id="adminWithdrawalsTableBody"> <!-- Generated Dynamically --> </tbody> </table> </div> </div> </section> <!-- ------------------------------------------ --> <!-- ADMIN VIEW: BANNERS & BROADCAST ANNOUNCEMENT --> <!-- ------------------------------------------ --> <section id="admin-page-banners" class="page-section admin-section" style="display: none;"> <div class="section-header d-flex justify-content-between align-items-center"> <h2><i class="fa-solid fa-images"></i> จัดการแบนเนอร์หน้าแรกและประกาศข่าวสาร (Banners & Broadcast)</h2> <button class="btn btn-sky" id="openAddBannerModalBtn"><i class="fa-solid fa-plus"></i> เพิ่มแบนเนอร์สไลด์ใหม่</button> </div> <!-- Broadcast Announcement Card --> <div class="admin-card mb-4" style="border-left: 4px solid var(--color-sky-brand);"> <h3><i class="fa-solid fa-bullhorn text-sky"></i> ประกาศข่าวสารบนแถบหน้าแรก (Platform Broadcast Announcement)</h3> <form id="broadcastAnnouncementForm" class="mt-3"> <div class="row"> <div class="col-md-8 form-group"> <label for="announcementTextInput">ข้อความประกาศประชาสัมพันธ์</label> <input type="text" id="announcementTextInput" class="form-control" placeholder="เช่น ⚡ โปรโมชัน Flash Sale 8.8 เริ่มแล้ว! โค้ดลดสูงสุด 50% ทุกหมวดหมู่" required> </div> <div class="col-md-4 form-group"> <label for="announcementTypeSelect">รูปแบบสีและไอคอน</label> <select id="announcementTypeSelect" class="form-control"> <option value="info">ฟ้า (Info / ทั่วไป)</option> <option value="success">เขียว (Success / โปรโมชัน)</option> <option value="warning">ส้ม (Warning / แจ้งเตือน)</option> <option value="danger">แดง (Urgent / ด่วนที่สุด)</option> </select> </div> </div> <div class="d-flex align-items-center justify-content-between mt-2"> <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;"> <input type="checkbox" id="announcementActiveCheck" checked> <strong>เปิดใช้งานแสดงแถบประกาศบนหน้าแรกทันที (Active)</strong> </label> <button type="submit" class="btn btn-sky"><i class="fa-solid fa-paper-plane"></i> บันทึกและส่งประกาศ</button> </div> </form> </div> <!-- Hero Banners Manager Card --> <div class="admin-card"> <h3><i class="fa-solid fa-layer-group"></i> รายการแบนเนอร์สไลด์หน้าแรก (Hero Slider Banners)</h3> <div class="admin-table-container mt-3"> <table class="table"> <thead> <tr> <th>ลำดับ</th> <th>ป้ายกำกับ (Badge Label)</th> <th>หัวข้อ (Title) & รายละเอียด</th> <th>โค้ดส่วนลด / ลิงก์</th> <th>สถานะ</th> <th>การจัดการ</th> </tr> </thead> <tbody id="adminBannersTableBody"> <!-- Generated Dynamically --> </tbody> </table> </div> </div> </section> <!-- ------------------------------------------ --> <!-- ADMIN VIEW: SALES REPORT PAGE --> <!-- ------------------------------------------ --> <section id="admin-page-sales-report" class="page-section admin-section" style="display: none;"> <div class="section-header d-flex justify-content-between align-items-center"> <h2><i class="fa-solid fa-chart-pie"></i> รายงานสรุปยอดขายแพลตฟอร์ม (Sales Analytics Report)</h2> <button class="btn btn-sky-outline btn-sm" onclick="exportSalesCSV()"><i class="fa-solid fa-file-csv"></i> Export Sales CSV</button> </div> <!-- Sales KPI Overview Cards --> <div class="admin-kpi-grid mb-4"> <div class="kpi-card" style="background: linear-gradient(135deg, #0284c7, #0369a1); color: white;"> <div class="kpi-icon"><i class="fa-solid fa-sack-dollar"></i></div> <div class="kpi-info"> <h4 style="color: rgba(255,255,255,0.85);">รายได้ยอดขายสะสมรวม</h4> <span class="kpi-value" id="salesReportTotalRev" style="color: white;">฿0.00</span> </div> </div> <div class="kpi-card" style="background: linear-gradient(135deg, #059669, #047857); color: white;"> <div class="kpi-icon"><i class="fa-solid fa-box-open"></i></div> <div class="kpi-info"> <h4 style="color: rgba(255,255,255,0.85);">จำนวนสินค้าที่ขายได้</h4> <span class="kpi-value" id="salesReportTotalItems" style="color: white;">0 ชิ้น</span> </div> </div> <div class="kpi-card" style="background: linear-gradient(135deg, #7c3aed, #6d28d9); color: white;"> <div class="kpi-icon"><i class="fa-solid fa-receipt"></i></div> <div class="kpi-info"> <h4 style="color: rgba(255,255,255,0.85);">จำนวนออเดอร์ที่สำเร็จ</h4> <span class="kpi-value" id="salesReportTotalPaidOrders" style="color: white;">0 ออเดอร์</span> </div> </div> </div> <!-- Sales Breakdown Table Card --> <div class="admin-card mb-4"> <h3><i class="fa-solid fa-list-check text-sky"></i> ตารางสรุปยอดขายแยกตามหมวดหมู่สินค้า</h3> <div class="admin-table-container mt-3"> <table class="table"> <thead> <tr> <th>หมวดหมู่สินค้า</th> <th>จำนวนสินค้าในระบบ</th> <th>ชิ้นที่ขายได้รวม</th> <th>ยอดขายรวมสุทธิ</th> <th>สัดส่วนยอดขาย (%)</th> </tr> </thead> <tbody id="salesReportCategoryTableBody"> <!-- Generated Dynamically --> </tbody> </table> </div> </div> <!-- Sales Transactions Audit Table Card --> <div class="admin-card"> <div class="d-flex justify-content-between align-items-center mb-3"> <h3 style="margin: 0;"><i class="fa-solid fa-table-list text-sky"></i> ประวัติรายการขายล่าสุด (Sales Transactions Log)</h3> <input type="text" id="salesReportSearchInput" class="form-control width-auto" placeholder="ค้นหา Order ID หรือชื่อลูกค้า..."> </div> <div class="admin-table-container"> <table class="table"> <thead> <tr> <th>เลขที่คำสั่งซื้อ (Order ID)</th> <th>วันที่สั่งซื้อ</th> <th>ชื่อผู้ซื้อ</th> <th>วิธีชำระเงิน</th> <th>ส่วนลด</th> <th>ยอดชำระสุทธิ</th> <th>สถานะ</th> </tr> </thead> <tbody id="salesReportTransactionsTableBody"> <!-- Generated Dynamically --> </tbody> </table> </div> </div> </section> <!-- ------------------------------------------ --> <!-- ADMIN VIEW: ORDERS AUDIT REPORT --> <!-- ------------------------------------------ --> <section id="admin-page-orders-report" class="page-section admin-section" style="display: none;"> <div class="section-header d-flex justify-content-between align-items-center"> <h2><i class="fa-solid fa-file-invoice"></i> รายงานคำสั่งซื้อและประวัติการจัดส่ง (Orders Audit Report)</h2> <button class="btn btn-sky-outline btn-sm" onclick="exportOrdersCSV()"><i class="fa-solid fa-file-csv"></i> Export Orders CSV</button> </div> <div class="admin-card"> <div class="table-actions mb-3" style="display: flex; gap: 10px; flex-wrap: wrap;"> <input type="text" id="ordersReportSearchInput" class="form-control width-auto" placeholder="ค้นหา Order ID, ชื่อลูกค้า หรือเบอร์โทร..."> <select id="ordersReportFilterStatus" class="form-control width-auto"> <option value="all">ทุกสถานะคำสั่งซื้อ</option> <option value="Unpaid">รอชำระเงิน</option> <option value="Pending">รอตรวจสอบสลิป</option> <option value="Paid">ชำระเงินแล้ว</option> <option value="Preparing">กำลังเตรียมส่ง</option> <option value="Shipped">อยู่ระหว่างจัดส่ง</option> <option value="Success">จัดส่งสำเร็จ</option> <option value="Cancelled">ยกเลิกแล้ว</option> </select> </div> <div class="admin-table-container"> <table class="table"> <thead> <tr> <th>เลขที่ออเดอร์ & วันที่</th> <th>ข้อมูลลูกค้า & ที่อยู่จัดส่ง</th> <th>รายการสินค้าที่สั่งซื้อ</th> <th>ยอดรวมสุทธิ</th> <th>การชำระเงิน</th> <th>เลขพัสดุ (Tracking No.)</th> <th>สถานะปัจจุบัน</th> </tr> </thead> <tbody id="ordersReportTableBody"> <!-- Generated Dynamically --> </tbody> </table> </div> </div> </section> <!-- ------------------------------------------ --> <!-- SELLER VIEW: DASHBOARD OVERVIEW --> <!-- ------------------------------------------ --> <section id="seller-page-dashboard" class="page-section seller-section" style="display: none;"> <div class="section-header"> <h2><i class="fa-solid fa-chart-pie"></i> ภาพรวมร้านค้าผู้ขาย (Seller Dashboard)</h2> </div> <!-- KPI Cards Grid --> <div class="admin-kpi-grid"> <div class="kpi-card" style="background: linear-gradient(135deg, #115e59, #0f766e); color: white;"> <div class="kpi-icon"><i class="fa-solid fa-sack-dollar"></i></div> <div class="kpi-info"> <h4 style="color: rgba(255,255,255,0.8);">ยอดขายร้านของฉัน</h4> <span class="kpi-value" id="kpiSellerTotalRevenue" style="color: white;">฿0.00</span> </div> </div> <div class="kpi-card" style="background: linear-gradient(135deg, #0d9488, #14b8a6); color: white;"> <div class="kpi-icon"><i class="fa-solid fa-boxes-packing"></i></div> <div class="kpi-info"> <h4 style="color: rgba(255,255,255,0.8);">ยอดออเดอร์ของร้าน</h4> <span class="kpi-value" id="kpiSellerTotalOrders" style="color: white;">0 ออเดอร์</span> </div> </div> <div class="kpi-card danger"> <div class="kpi-icon"><i class="fa-solid fa-triangle-exclamation"></i></div> <div class="kpi-info"> <h4>สินค้าใกล้หมดสต็อก (< 5 ชิ้น)</h4> <span class="kpi-value" id="kpiSellerLowStockAlert">0 รายการ</span> </div> </div> </div> <!-- Top Selling Products Section --> <div class="admin-card mt-4"> <h3 style="font-size: 1.15rem; margin-bottom: 15px; display: flex; align-items: center; gap: 8px;"> <i class="fa-solid fa-fire" style="color: #ef4444;"></i> 3 อันดับสินค้าขายดีของร้าน </h3> <div style="overflow-x: auto;"> <table class="admin-table"> <thead> <tr> <th>อันดับ</th> <th>ชื่อสินค้า</th> <th style="text-align: center;">จำนวนชิ้นที่ขายได้</th> <th style="text-align: right;">ยอดขายรวม</th> </tr> </thead> <tbody id="sellerTopProductsBody"> <!-- Loaded dynamically via JS --> </tbody> </table> </div> </div> </section> <!-- ------------------------------------------ --> <!-- SELLER VIEW: STOCK MANAGEMENT --> <!-- ------------------------------------------ --> <section id="seller-page-stock" class="page-section seller-section" style="display: none;"> <div class="section-header"> <h2><i class="fa-solid fa-boxes-stacked"></i> การจัดการคลังสินค้าของร้าน</h2> <button class="btn btn-sky" id="openSellerAddProductModalBtn"><i class="fa-solid fa-plus"></i> เพิ่มสินค้าใหม่ของฉัน</button> </div> <div class="admin-card"> <div class="table-actions"> <input type="text" id="sellerStockSearch" class="form-control width-auto" placeholder="ค้นหาชื่อสินค้าของฉัน..."> <select id="sellerStockFilterCategory" class="form-control width-auto"> <option value="all">ทุกหมวดหมู่</option> </select> </div> <div class="admin-table-container mt-3"> <table class="table stock-table"> <thead> <tr> <th>รูปภาพ</th> <th>ชื่อสินค้า / หมวดหมู่ / ร้านค้า</th> <th>ราคาจำหน่าย</th> <th>คุณลักษณะสินค้า & สต๊อกในคลัง</th> <th>สถานะร้าน</th> <th>การจัดการ</th> </tr> </thead> <tbody id="sellerStockTableBody"> <!-- Generated Dynamically --> </tbody> </table> </div> </div> </section> <!-- ------------------------------------------ --> <!-- SELLER VIEW: ORDER MANAGEMENT --> <!-- ------------------------------------------ --> <section id="seller-page-orders" class="page-section seller-section" style="display: none;"> <div class="section-header"> <h2><i class="fa-solid fa-clipboard-list"></i> คำสั่งซื้อเฉพาะสินค้าของร้าน</h2> </div> <div class="admin-card"> <div class="admin-table-container"> <table class="table orders-table"> <thead> <tr> <th>เลขออเดอร์ / วันเวลา</th> <th>ลูกค้า / ที่อยู่ผู้รับ</th> <th>รายการสินค้าของฉัน</th> <th>ราคารวมเฉพาะส่วน</th> <th>หลักฐาน (คลิกขยาย)</th> <th>สถานะปัจจุบัน</th> <th>การจัดการ & อัปเดต</th> </tr> </thead> <tbody id="sellerOrdersTableBody"> <!-- Generated Dynamically --> </tbody> </table> </div> </div> </section> <!-- ------------------------------------------ --> <!-- SELLER VIEW: STORE PROFILE & SHOP SETTINGS --> <!-- ------------------------------------------ --> <section id="seller-page-profile" class="page-section seller-section" style="display: none;"> <div class="section-header"> <h2><i class="fa-solid fa-store-gear"></i> การตั้งค่าโปรไฟล์และข้อมูลร้านค้าผู้ขาย (Shop Settings) </h2> </div> <form id="sellerProfileForm"> <div class="seller-settings-grid"> <!-- CARD 1: BRANDING & HEADERS --> <div class="seller-settings-card"> <h3><i class="fa-solid fa-paintbrush" style="color: var(--color-sky-brand);"></i> 1. แบรนด์ดิ้งและภาพร้านค้า (Branding)</h3> <label style="font-size:12px; font-weight:600; color:var(--color-sky-slate); margin-bottom:4px; display:block;">ภาพแบนเนอร์ปกหน้าร้านค้า (Store Banner Cover)</label> <div class="seller-banner-upload-box"> <img src="" id="sellerBannerPreview" class="seller-banner-preview-img" alt="Cover Banner" style="display:none;"> <label for="sellerBannerInput" class="seller-banner-upload-overlay"> <i class="fa-solid fa-camera"></i> เปลี่ยนภาพปกแบนเนอร์ <input type="file" id="sellerBannerInput" accept="image/*" style="display: none;"> </label> </div> <div style="display:flex; align-items:center; gap:16px; margin-bottom:16px;"> <div class="profile-avatar-container" style="padding:8px;"> <img src="" id="sellerLogoPreview" class="profile-avatar-img" alt="Store Logo" style="border-radius: 50%; width: 80px; height: 80px;"> <label for="sellerLogoInput" class="btn btn-sky-outline btn-xs mt-1" style="cursor: pointer;"> <i class="fa-solid fa-camera"></i> เปลี่ยนโลโก้ <input type="file" id="sellerLogoInput" accept="image/*" style="display: none;"> </label> </div> <div style="flex:1;"> <div class="form-group mb-2"> <label for="sellerProfileStoreName">ชื่อร้านค้า (Store Name) *</label> <input type="text" id="sellerProfileStoreName" class="form-control" required placeholder="เช่น SkyTech Official Store"> </div> <div class="form-group mb-0"> <label for="sellerProfileSlogan">สโลแกน / คำอธิบายสั้น *</label> <input type="text" id="sellerProfileSlogan" class="form-control" placeholder="เช่น ผู้นำอุปกรณ์ไอที ประกันศูนย์แท้ 100%"> </div> </div> </div> </div> <!-- CARD 2: CONTACT & WAREHOUSE --> <div class="seller-settings-card"> <h3><i class="fa-solid fa-warehouse" style="color: #0d9488;"></i> 2. ข้อมูลติดต่อและคลังสินค้า</h3> <div class="row mb-2"> <div class="col-md-6 form-group"> <label for="sellerProfilePhone">เบอร์โทรติดต่อร้านค้า *</label> <input type="text" id="sellerProfilePhone" class="form-control" required placeholder="เช่น 081-444-5555"> </div> <div class="col-md-6 form-group"> <label for="sellerProfileEmail">อีเมลติดต่อร้านค้า</label> <input type="email" id="sellerProfileEmail" class="form-control" placeholder="เช่น skythreads@gmail.com"> </div> </div> <div class="form-group mb-2"> <label for="sellerAddressDetail">ที่อยู่คลังสินค้า (บ้านเลขที่, ถนน, ซอย)</label> <textarea id="sellerAddressDetail" rows="2" class="form-control" placeholder="เช่น 456 ตลาดประตูน้ำ ถนนเพชรบุรี"></textarea> </div> <div class="row mb-2"> <div class="col-md-6 form-group"> <label for="sellerSubdistrict">ตำบล / แขวง</label> <input type="text" id="sellerSubdistrict" class="form-control" placeholder="เช่น ถนนเพชรบุรี"> </div> <div class="col-md-6 form-group"> <label for="sellerDistrict">อำเภอ / เขต</label> <input type="text" id="sellerDistrict" class="form-control" placeholder="เช่น ราชเทวี"> </div> </div> <div class="row mb-2"> <div class="col-md-6 form-group"> <label for="sellerProvince">จังหวัด</label> <input type="text" id="sellerProvince" class="form-control" placeholder="เช่น กรุงเทพมหานคร"> </div> <div class="col-md-6 form-group"> <label for="sellerZipcode">รหัสไปรษณีย์</label> <input type="text" id="sellerZipcode" class="form-control" placeholder="เช่น 10400"> </div> </div> <div class="form-group mb-0"> <label for="sellerStoreMapUrl"><i class="fa-solid fa-map-pin text-info"></i> พิกัดปักหมุดหน้าร้าน / Google Maps URL</label> <input type="text" id="sellerStoreMapUrl" class="form-control" placeholder="เช่น https://maps.app.goo.gl/..."> </div> <input type="hidden" id="sellerProfileAddress"> </div> <!-- CARD 3: SHIPPING & GUARANTEE POLICIES --> <div class="seller-settings-card"> <h3><i class="fa-solid fa-truck-ramp-box" style="color: #f59e0b;"></i> 3. นโยบายการจัดส่งและรับประกัน</h3> <div class="row"> <div class="col-md-6 form-group"> <label for="sellerCutoffTime">เวลาตัดรอบจัดส่งประจำวัน</label> <input type="text" id="sellerCutoffTime" class="form-control" placeholder="เช่น 12:00 น."> </div> <div class="col-md-6 form-group"> <label for="sellerPrimaryCarrier">ขนส่งหลักที่ใช้</label> <select id="sellerPrimaryCarrier" class="form-control"> <option value="J&T Express">J&T Express</option> <option value="Kerry Express (KEX)">Kerry Express (KEX)</option> <option value="Flash Express">Flash Express</option> <option value="ไปรษณีย์ไทย (EMS)">ไปรษณีย์ไทย (EMS)</option> </select> </div> </div> <div class="form-group mb-0"> <label for="sellerWarrantyPolicy">นโยบายการรับประกันและการคืนสินค้า</label> <textarea id="sellerWarrantyPolicy" rows="2" class="form-control" placeholder="เช่น รับประกันสินค้า 1 ปีเต็ม / เปลี่ยนสินค้าได้ภายใน 7 วัน..."></textarea> </div> </div> <!-- CARD 4: PAYOUT BANK ACCOUNT --> <div class="seller-settings-card"> <h3><i class="fa-solid fa-building-columns" style="color: #6366f1;"></i> 4. บัญชีรับเงินยอดขาย (Payout Account)</h3> <div class="row"> <div class="col-md-6 form-group"> <label for="sellerBankName">ธนาคารพาณิชย์</label> <select id="sellerBankName" class="form-control"> <option value="ธนาคารกสิกรไทย (KBANK)">ธนาคารกสิกรไทย (KBANK)</option> <option value="ธนาคารไทยพาณิชย์ (SCB)">ธนาคารไทยพาณิชย์ (SCB)</option> <option value="ธนาคารกรุงเทพ (BBL)">ธนาคารกรุงเทพ (BBL)</option> <option value="ธนาคารกรุงไทย (KTB)">ธนาคารกรุงไทย (KTB)</option> <option value="ธนาคารกรุงศรีอยุธยา (BAY)">ธนาคารกรุงศรีอยุธยา (BAY)</option> </select> </div> <div class="col-md-6 form-group"> <label for="sellerBankAccountNo">เลขที่บัญชีธนาคาร</label> <input type="text" id="sellerBankAccountNo" class="form-control" placeholder="เช่น 012-3-45678-9"> </div> </div> <div class="row"> <div class="col-md-6 form-group mb-0"> <label for="sellerBankAccountName">ชื่อบัญชีรับเงิน</label> <input type="text" id="sellerBankAccountName" class="form-control" placeholder="เช่น บริษัท สกายเทค จำกัด"> </div> <div class="col-md-6 form-group mb-0"> <label for="sellerPromptPay">เบอร์ PromptPay ร้านค้า</label> <input type="text" id="sellerPromptPay" class="form-control" placeholder="เช่น 0812345678"> </div> </div> </div> <!-- CARD 5: VACATION MODE TOGGLE --> <div class="seller-settings-card" style="grid-column: 1 / -1;"> <h3><i class="fa-solid fa-plane-departure" style="color: #ef4444;"></i> 5. สถานะเปิด-ปิดร้านค้า (Vacation Mode)</h3> <div class="vacation-switch-box"> <div> <strong style="font-size:0.95rem; color:var(--color-sky-dark);"><i class="fa-solid fa-umbrella-beach"></i> เปิดโหมดพักร้อนชั่วคราว (Vacation Mode)</strong> <p style="font-size:0.85rem; color:var(--color-sky-slate); margin-top:2px; margin-bottom:0;"> เมื่อเปิดโหมดนี้ ร้านค้าของท่านจะแสดงป้ายพักร้อน และระบบจะปิดปุ่มกดสั่งซื้อสินค้าชั่วคราวเพื่อป้องกันออเดอร์ค้างส่ง </p> </div> <label class="switch"> <input type="checkbox" id="sellerVacationMode"> <span class="slider"></span> </label> </div> </div> </div> <div style="text-align: right; margin-top: 10px;"> <button type="submit" class="btn btn-sky btn-lg" style="min-width: 240px;"><i class="fa-solid fa-floppy-disk"></i> บันทึกการตั้งค่าร้านค้าทั้งหมด</button> </div> </form> </section> </main> <!-- MOBILE BOTTOM NAVIGATION BAR --> <nav class="mobile-bottom-nav"> <a href="#" class="bottom-nav-item active" data-page="home"><i class="fa-solid fa-store"></i><span>หน้าร้าน</span></a> <a href="#" class="bottom-nav-item" data-page="wishlist"><i class="fa-solid fa-heart"></i><span>ถูกใจ</span></a> <a href="#" class="bottom-nav-item" data-page="cart"><i class="fa-solid fa-cart-shopping"></i><span>ตะกร้า</span></a> <a href="#" class="bottom-nav-item" data-page="history"><i class="fa-solid fa-receipt"></i><span>ออเดอร์</span></a> <a href="#" class="bottom-nav-item" data-page="profile"><i class="fa-solid fa-user"></i><span>ฉัน</span></a> </nav> <!-- ========================================== --> <!-- SYSTEM FOOTER --> <!-- ========================================== --> <footer class="app-footer"> <div class="container footer-content"> <p>© 2026 SkyMall Co., Ltd. สงวนลิขสิทธิ์ระบบจัดซื้อต้นแบบ Enterprise Marketplace Prototype</p> <div class="footer-links"> <a href="#" id="termsLinkBtn">เงื่อนไขการใช้งาน</a> <a href="#" id="privacyLinkBtn">นโยบายความเป็นส่วนตัว</a> </div> </div> </footer> </div> <!-- ========================================== --> <!-- MODALS & PORTALS (OVERLAYS) --> <!-- ========================================== --> <!-- PDPA Banner Popup --> <div class="pdpa-banner" id="pdpaBanner" style="display: none;"> <div class="container pdpa-container"> <p><i class="fa-solid fa-cookie-bite"></i> <span>เว็บไซต์นี้ใช้คุกกี้เพื่อเพิ่มประสิทธิภาพการช้อปปิ้งออนไลน์ของคุณและมอบประสบการณ์ที่ดีที่สุด</span> <a href="#" id="pdpaPrivacyLink">อ่านนโยบายความเป็นส่วนตัวเพิ่มเติม</a> </p> <button class="btn btn-sky btn-sm" id="acceptPdpaBtn">ยอมรับคุกกี้ทั้งหมด</button> </div> </div> <!-- 1. PRODUCT DETAIL MODAL (CLIENT) --> <div class="modal-overlay" id="productDetailModal" style="display: none;"> <div class="modal-card modal-lg"> <button class="modal-close" id="closeProductDetailModalBtn">×</button> <div class="product-detail-layout" id="modalProductDetailContent"> <!-- Filled Dynamically by script.js --> </div> </div> </div> <!-- 1.5 STORE PROFILE MODAL (CLIENT) --> <div class="modal-overlay" id="storeProfileModal" style="display: none;"> <div class="modal-card store-profile-card"> <button class="modal-close" id="closeStoreProfileModalBtn">×</button> <div id="storeProfileModalContent"> <!-- Filled Dynamically by script.js --> </div> </div> </div> <!-- 1.6 QUICK SWITCH ACCOUNT SELECTION MODAL --> <div class="modal-overlay" id="quickSwitchAccountModal" style="display: none;"> <div class="modal-card modal-md text-center"> <button class="modal-close" id="closeQuickSwitchAccountModalBtn">×</button> <h3 class="modal-title mb-1"><i class="fa-solid fa-users-gear text-sky"></i> เลือกบัญชีที่ต้องการสลับ</h3> <p class="text-muted mb-3" style="font-size: 0.85rem;"> คลิกเลือกบัญชีเพื่อสลับการใช้งานทันทีโดยไม่ต้องกรอกรหัสผ่านใหม่</p> <div id="quickSwitchAccountListContainer" class="quick-switch-account-grid" style="display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; padding-right: 4px;"> <!-- Filled dynamically by JS --> </div> <div class="mt-3 pt-3" style="border-top: 1px dashed var(--color-border); display: flex; justify-content: space-between; align-items: center;"> <button type="button" class="btn btn-sky-outline btn-sm" id="quickSwitchAddAccountBtn"> <i class="fa-solid fa-user-plus"></i> เข้าสู่ระบบด้วยบัญชีอื่น </button> <button type="button" class="btn btn-white btn-sm" id="closeQuickSwitchAccountModalBottomBtn"> ปิดหน้าต่าง </button> </div> </div> </div> <!-- 1.7 TERMS OF SERVICE MODAL --> <div class="modal-overlay" id="termsModal" style="display: none;"> <div class="modal-card modal-lg"> <button class="modal-close" id="closeTermsModalBtn">×</button> <h3 class="modal-title mb-3"><i class="fa-solid fa-file-contract text-sky"></i> ข้อตกลงและเงื่อนไขการใช้งาน (Terms of Service)</h3> <div style="max-height: 420px; overflow-y: auto; text-align: left; font-size: 0.9rem; line-height: 1.6; color: var(--color-sky-dark); padding-right: 8px;"> <p class="mb-2">ยินดีต้อนรับสู่ <strong>SkyMall Enterprise Marketplace</strong> โปรดอ่านข้อตกลงและเงื่อนไขการใช้งานฉบับนี้โดยละเอียดก่อนทำรายการซื้อขายสินค้าบนแพลตฟอร์ม</p> <h4 class="mt-3 mb-1" style="font-size: 1rem; color: var(--color-sky-brand);"><i class="fa-solid fa-user-check"></i> 1. การสมัครสมาชิกและการดูแลรักษาบัญชี</h4> <p>ผู้ใช้งานต้องกรอกข้อมูลที่เป็นจริง ข้อมูลบัญชีผู้ใช้ถือเป็นความรับผิดชอบส่วนบุคคลของผู้สมัคร ห้ามนำบัญชีไปใช้ในทางที่ผิดกฎหมาย แอบอ้างบุคคลอื่น หรือฉ้อโกงผู้อื่น</p> <h4 class="mt-3 mb-1" style="font-size: 1rem; color: var(--color-sky-brand);"><i class="fa-solid fa-credit-card"></i> 2. นโยบายการสั่งซื้อและการชำระเงิน</h4> <p>คำสั่งซื้อจะมีผลสมบูรณ์เมื่อได้รับการยืนยันการชำระเงินผ่านหลักฐานโอนเงิน (สลิป PromptPay) หรือช่องทางที่ระบบกำหนด ผู้ซื้อต้องตรวจสอบยอดชำระเงินและข้อมูลที่อยู่ให้ถูกต้องก่อนกดยืนยัน</p> <h4 class="mt-3 mb-1" style="font-size: 1rem; color: var(--color-sky-brand);"><i class="fa-solid fa-truck-fast"></i> 3. การจัดส่งสินค้าและการคืนสินค้า</h4> <p>ร้านค้าผู้ขายมีหน้าที่จัดเตรียมและจัดส่งสินค้าภายในระยะเวลาที่กำหนด สินค้าชำรุด เสียหาย หรือส่งผิดรายการสามารถยื่นเรื่องขอยกเลิกและรับเงินคืนได้ตามเงื่อนไขการรับประกันสินค้า 7 วัน</p> <h4 class="mt-3 mb-1" style="font-size: 1rem; color: var(--color-sky-brand);"><i class="fa-solid fa-triangle-exclamation text-danger"></i> 4. ข้อห้ามและบทลงโทษสำหรับร้านค้าผู้ขาย</h4> <p>ห้ามลงขายสินค้าที่ผิดกฎหมาย ละเมิดลิขสิทธิ์ สินค้าอันตราย หรือหลอกลวงผู้บริโภค หากตรวจพบระบบมีสิทธิ์ระงับการใช้งาน (Banned) บัญชีผู้ขายดังกล่าวทันทีโดยไม่ต้องแจ้งให้ทราบล่วงหน้า </p> </div> <div class="mt-4 text-end"> <button class="btn btn-sky" id="acceptTermsBtn"><i class="fa-solid fa-check-circle"></i> รับทราบและเข้าใจเงื่อนไข</button> </div> </div> </div> <!-- 1.8 PRIVACY POLICY MODAL --> <div class="modal-overlay" id="privacyModal" style="display: none;"> <div class="modal-card modal-lg"> <button class="modal-close" id="closePrivacyModalBtn">×</button> <h3 class="modal-title mb-3"><i class="fa-solid fa-shield-halved text-sky"></i> นโยบายความเป็นส่วนตัว (Privacy Policy & PDPA)</h3> <div style="max-height: 420px; overflow-y: auto; text-align: left; font-size: 0.9rem; line-height: 1.6; color: var(--color-sky-dark); padding-right: 8px;"> <p class="mb-2">SkyMall ให้ความสำคัญสูงสุดกับการคุ้มครองข้อมูลส่วนบุคคลของคุณ ตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล (PDPA)</p> <h4 class="mt-3 mb-1" style="font-size: 1rem; color: var(--color-sky-brand);"><i class="fa-solid fa-database"></i> 1. ข้อมูลที่เราจัดเก็บ</h4> <p>ระบบจะจัดเก็บเฉพาะข้อมูลที่จำเป็นสำหรับการให้บริการ ได้แก่ ชื่อ-นามสกุลจริง, เบอร์โทรศัพท์ติดต่อ, ที่อยู่จัดส่งพัสดุ, ประวัติคำสั่งซื้อ และรูปภาพโปรไฟล์/สลิปโอนเงินที่ท่านอัปโหลด</p> <h4 class="mt-3 mb-1" style="font-size: 1rem; color: var(--color-sky-brand);"><i class="fa-solid fa-bullseye"></i> 2. วัตถุประสงค์ในการใช้ข้อมูล</h4> <p>เพื่อใช้ในการดำเนินคำสั่งซื้อ การจัดส่งสินค้าโดยผู้ให้บริการขนส่ง การติดต่อสื่อสารแจ้งสถานะพัสดุ และการปรับปรุงประสบการณ์การใช้งานระบบให้ดียิ่งขึ้น</p> <h4 class="mt-3 mb-1" style="font-size: 1rem; color: var(--color-sky-brand);"><i class="fa-solid fa-lock"></i> 3. การรักษาความปลอดภัยของข้อมูล</h4> <p>ข้อมูลทั้งหมดจะถูกจัดเก็บด้วยมาตรการรักษาความปลอดภัยขั้นสูง มีการเข้ารหัสข้อมูลสำคัญ และจะไม่มีการนำข้อมูลของท่านไปขายหรือเปิดเผยแก่บุคคลภายนอกโดยไม่ได้รับอนุญาต</p> <h4 class="mt-3 mb-1" style="font-size: 1rem; color: var(--color-sky-brand);"><i class="fa-solid fa-user-shield"></i> 4. สิทธิของผู้เจ้าของข้อมูลส่วนบุคคล</h4> <p>ท่านมีสิทธิในการเข้าถึง ขอแก้ไข ลบ หรือระงับการใช้ข้อมูลส่วนบุคคลของท่านได้ตลอดเวลา โดยสามารถจัดการได้ผ่านเมนูตั้งค่าโปรไฟล์ส่วนตัวในระบบ</p> </div> <div class="mt-4 text-end"> <button class="btn btn-sky" id="acceptPrivacyBtn"><i class="fa-solid fa-check-circle"></i> ยอมรับนโยบายความเป็นส่วนตัว</button> </div> </div> </div> <!-- 2. ADD PRODUCT MODAL (ADMIN) --> <div class="modal-overlay" id="addProductModal" style="display: none;"> <div class="modal-card modal-md"> <button class="modal-close" id="closeAddProductModalBtn">×</button> <h3><i class="fa-solid fa-plus"></i> เพิ่มสินค้าใหม่เข้าร้าน</h3> <form id="addProductForm" class="mt-3"> <div class="form-group"> <label for="newProdName">ชื่อสินค้า *</label> <input type="text" id="newProdName" class="form-control" required placeholder="เช่น iPhone 17 Pro Max"> </div> <div class="row"> <div class="col-md-6 form-group"> <label for="newProdCategory">หมวดหมู่ *</label> <select id="newProdCategory" class="form-control" required> <!-- Dynamically loaded --> </select> </div> <div class="col-md-6 form-group"> <label for="newProdPrice">ราคาจำหน่าย (บาท) *</label> <input type="number" id="newProdPrice" class="form-control" required min="1" placeholder="เช่น 32900"> </div> </div> <div class="row"> <div class="col-md-6 form-group"> <label for="newProdBrand">ร้านค้า/ผู้ขาย *</label> <input type="text" id="newProdBrand" class="form-control" required placeholder="เช่น ร้านอุปกรณ์ไอที SkyTech"> </div> <div class="col-md-6 form-group"> <label for="newProdCondition">สภาพสินค้า *</label> <select id="newProdCondition" class="form-control"> <option value="new">ของใหม่ (New)</option> <option value="used">ของมือสอง (Used)</option> </select> </div> </div> <div class="form-group"> <label for="newProdDescription">รายละเอียดสินค้า & Specification</label> <textarea id="newProdDescription" class="form-control" rows="2" placeholder="สเปกสินค้า หรือรายละเอียดสินค้าแบบย่อ..."></textarea> </div> <div class="form-group"> <label for="newProdColors">ตัวเลือกรูปแบบหลัก (เช่น สี, รุ่น, สายพันธุ์ คั่นด้วยเครื่องหมาย ,)</label> <input type="text" id="newProdColors" class="form-control" placeholder="เช่น Black, White, Titan หรือ ปลาคาร์ป, ปลาทอง"> </div> <div class="form-group"> <label for="newProdSizes">คุณลักษณะย่อย (เช่น ไซส์, ขนาด, ความจุ คั่นด้วยเครื่องหมาย ,)</label> <input type="text" id="newProdSizes" class="form-control" placeholder="เช่น S, M, L หรือ 128GB, 256GB หรือ 500กรัม"> </div> <div class="form-group"> <label for="newProdSingleStock">จำนวนสต็อกเริ่มต้นสินค้า (สำหรับรูปแบบสินค้า)</label> <input type="number" id="newProdSingleStock" class="form-control" min="0" value="50"> </div> <div class="form-group"> <button type="button" class="btn btn-sky-outline btn-sm w-100" id="btnGenVariants" style="margin-top: 10px; margin-bottom: 10px;"> <i class="fa-solid fa-gears"></i> สร้างรายการตัวเลือกสินค้า (Generate Variants) </button> </div> <div class="form-group" id="newProdVariantsWrapper" style="display: none;"> <label style="color:var(--color-sky-brand); font-weight:bold;">สต็อกและราคาสำหรับแต่ละตัวเลือก:</label> <div id="newProdVariantsList" style="max-height: 180px; overflow-y: auto; border: 1px solid var(--color-border); padding: 10px; border-radius: 4px; background: #fafafa; display: flex; flex-direction: column; gap: 8px;"> <!-- Dynamic variant rows populated by JS --> </div> </div> <div class="form-group"> <label>รูปภาพสินค้า (อัปโหลดได้หลายรูป) *</label> <div class="image-upload-manager"> <div class="image-upload-grid" id="newProdImageGrid"> <label for="newProdImage" class="upload-add-card"> <i class="fa-solid fa-cloud-arrow-up"></i> <span>+ เพิ่มรูปภาพ</span> <input type="file" id="newProdImage" class="form-control" accept="image/*" multiple style="display: none;"> </label> </div> <small class="form-text text-muted" style="font-size: 11px; color: var(--color-sky-slate); margin-top: 6px; display: block;"> * รองรับไฟล์ .jpg, .png (แนะนำสัดส่วน 1:1) รูปแรกสุดจะถูกใช้เป็นรูปภาพหลักของสินค้า </small> </div> </div> <button type="submit" class="btn btn-sky w-100"><i class="fa-solid fa-circle-check"></i> บันทึกเพิ่มสินค้า</button> </form> </div> </div> <!-- 3. SLIP EXPANSION OVERLAY MODAL --> <div class="modal-overlay" id="slipOverlayModal" style="display: none;"> <div class="modal-card modal-md text-center" style="max-width: 480px; padding: 1.5rem;"> <button class="modal-close" id="closeSlipOverlayBtn">×</button> <h3 class="mb-3"><i class="fa-solid fa-receipt text-sky"></i> สลิปหลักฐานการชำระเงิน</h3> <div class="text-center"> <img src="" id="expandedSlipImg" class="expanded-slip-img" alt="Expanded Payment Slip"> </div> <div class="mt-3 d-flex justify-content-center gap-2"> <a href="#" target="_blank" id="btnOpenSlipNewTab" class="btn btn-sky-outline btn-sm"> <i class="fa-solid fa-up-right-from-square"></i> เปิดดูภาพขนาดใหญ่ในแท็บใหม่ </a> </div> </div> </div> <!-- 3.5 ADMIN PROMPTPAY SLIP VERIFICATION MODAL --> <div class="modal-overlay" id="adminSlipVerifyModal" style="display: none;"> <div class="modal-card modal-md" style="max-width: 520px; padding: 1.5rem;"> <button class="modal-close" id="closeAdminSlipVerifyModalBtn">×</button> <h3 class="mb-3"><i class="fa-solid fa-qrcode text-sky"></i> ตรวจสอบสลิปการโอนเงิน (PromptPay Slip)</h3> <div class="text-center"> <img src="" id="adminSlipVerifyImg" class="expanded-slip-img" alt="PromptPay Slip"> <div class="mt-2"> <a href="#" target="_blank" id="btnOpenAdminSlipNewTab" class="btn btn-sky-outline btn-xs"> <i class="fa-solid fa-up-right-from-square"></i> เปิดดูภาพขนาดใหญ่ในแท็บใหม่ </a> </div> <div id="adminSlipVerifyOrderInfo" class="mt-3 text-start p-3" style="background: var(--color-bg-gray); border-radius: 8px; font-size: 0.9rem;"> <!-- Filled dynamically --> </div> <div class="form-group text-start mt-3"> <label for="adminSlipRejectReason"><strong>เหตุผลที่ปฏิเสธสลิป (เฉพาะกรณีปฏิเสธ):</strong></label> <input type="text" id="adminSlipRejectReason" class="form-control mt-1" placeholder="ระบุเหตุผล เช่น ยอดเงินไม่ตรง, สลิปปลอม/ซ้ำ ฯลฯ"> </div> <div class="mt-3" style="display: flex; gap: 10px;"> <button class="btn btn-sky w-100" id="btnAdminApproveSlipInModal"><i class="fa-solid fa-circle-check"></i> อนุมัติการชำระเงิน</button> <button class="btn btn-danger w-100" id="btnAdminRejectSlipInModal"><i class="fa-solid fa-circle-xmark"></i> ปฏิเสธสลิป</button> </div> </div> </div> </div> <!-- 4. EDIT PRODUCT MODAL (ADMIN) --> <div class="modal-overlay" id="editProductModal" style="display: none;"> <div class="modal-card modal-md"> <button class="modal-close" id="closeEditProductModalBtn">×</button> <h3><i class="fa-solid fa-pen-to-square"></i> แก้ไขข้อมูลสินค้า</h3> <form id="editProductForm" class="mt-3"> <input type="hidden" id="editProdId"> <div class="form-group"> <label for="editProdName">ชื่อสินค้า *</label> <input type="text" id="editProdName" class="form-control" required> </div> <div class="row"> <div class="col-md-6 form-group"> <label for="editProdCategory">หมวดหมู่ *</label> <select id="editProdCategory" class="form-control" required> <!-- Dynamically loaded --> </select> </div> <div class="col-md-6 form-group"> <label for="editProdPrice">ราคาจำหน่าย (บาท) *</label> <input type="number" id="editProdPrice" class="form-control" required min="1"> </div> </div> <div class="row"> <div class="col-md-6 form-group"> <label for="editProdBrand">ร้านค้า/ผู้ขาย *</label> <input type="text" id="editProdBrand" class="form-control" required> </div> <div class="col-md-6 form-group"> <label for="editProdCondition">สภาพสินค้า</label> <select id="editProdCondition" class="form-control"> <option value="new">ของใหม่ (New)</option> <option value="used">ของมือสอง (Used)</option> </select> </div> </div> <div class="form-group"> <label for="editProdDescription">รายละเอียดสินค้า</label> <textarea id="editProdDescription" class="form-control" rows="3" required></textarea> </div> <div class="form-group"> <label>รูปภาพสินค้า (อัปโหลดได้หลายรูป) *</label> <div class="image-upload-manager"> <div class="image-upload-grid" id="editProdImageGrid"> <label for="editProdImage" class="upload-add-card"> <i class="fa-solid fa-cloud-arrow-up"></i> <span>+ เพิ่มรูปภาพ</span> <input type="file" id="editProdImage" class="form-control" accept="image/*" multiple style="display: none;"> </label> </div> <small class="form-text text-muted" style="font-size: 11px; color: var(--color-sky-slate); margin-top: 6px; display: block;"> * รองรับไฟล์ .jpg, .png (แนะนำสัดส่วน 1:1) รูปแรกสุดจะถูกใช้เป็นรูปภาพหลักของสินค้า </small> </div> </div> <button type="submit" class="btn btn-sky w-100"><i class="fa-solid fa-circle-check"></i> บันทึกข้อมูลที่แก้ไข</button> </form> </div> </div> <!-- 6. ORDER TRACKING MODAL (CLIENT) --> <div class="modal-overlay modal" id="orderTrackingModal" style="display: none;"> <div class="modal-card modal-lg"> <button class="modal-close" id="closeOrderTrackingModalBtn">×</button> <h3 class="modal-title"><i class="fa-solid fa-file-invoice"></i> รายละเอียดคำสั่งซื้อและสถานะพัสดุ</h3> <div class="tracking-details-container"> <div class="tracking-stepper"> <div class="tracking-step" id="trackStep1"> <div class="step-circle">1</div> <div class="step-label">คำสั่งซื้อเสร็จสมบูรณ์</div> </div> <div class="step-line" id="trackLine1"></div> <div class="tracking-step" id="trackStep2"> <div class="step-circle">2</div> <div class="step-label">กำลังจัดเตรียมพัสดุ</div> </div> <div class="step-line" id="trackLine2"></div> <div class="tracking-step" id="trackStep3"> <div class="step-circle">3</div> <div class="step-label">อยู่ระหว่างการจัดส่ง</div> </div> <div class="step-line" id="trackLine3"></div> <div class="tracking-step" id="trackStep4"> <div class="step-circle">4</div> <div class="step-label">จัดส่งสำเร็จ</div> </div> </div> <div class="tracking-info-box mb-4" id="trackingInfoBox"> <!-- Loaded dynamically via JS --> </div> <!-- Expanded details grid --> <div class="order-modal-grid"> <!-- Left: Shipping Address & Payment --> <div class="order-modal-col"> <div class="order-info-card"> <h4><i class="fa-solid fa-map-location-dot"></i> ข้อมูลการจัดส่ง</h4> <div class="order-info-content" id="orderModalShippingInfo"> <!-- Loaded dynamically via JS --> </div> </div> <div class="order-info-card mt-3"> <h4><i class="fa-solid fa-credit-card"></i> การชำระเงิน</h4> <div class="order-info-content" id="orderModalPaymentInfo"> <!-- Loaded dynamically via JS --> </div> </div> </div> <!-- Right: Items list & Totals --> <div class="order-modal-col"> <div class="order-info-card"> <h4><i class="fa-solid fa-basket-shopping"></i> รายการสินค้า</h4> <div class="order-modal-items" id="orderModalItems"> <!-- Loaded dynamically via JS --> </div> <div class="order-modal-totals mt-3" id="orderModalTotals"> <!-- Loaded dynamically via JS --> </div> </div> </div> </div> </div> </div> </div> <!-- 7. PRODUCT REVIEW SUBMISSION MODAL (CLIENT) --> <div class="modal-overlay modal" id="productReviewModal" style="display: none;"> <div class="modal-card modal-md"> <button class="modal-close" id="closeProductReviewModalBtn">×</button> <h3 class="modal-title"><i class="fa-solid fa-star"></i> เขียนรีวิวสินค้า</h3> <form id="productReviewForm" class="mt-3"> <input type="hidden" id="reviewProductId"> <div class="form-group"> <label>คะแนนรีวิว *</label> <div class="star-rating-input" style="display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 8px; font-size: 28px; margin-top: 5px;"> <input type="radio" name="reviewRating" value="5" id="star5" required style="display:none;"> <label for="star5" class="star-label" style="cursor: pointer;"><i class="fa-solid fa-star"></i></label> <input type="radio" name="reviewRating" value="4" id="star4" style="display:none;"> <label for="star4" class="star-label" style="cursor: pointer;"><i class="fa-solid fa-star"></i></label> <input type="radio" name="reviewRating" value="3" id="star3" style="display:none;"> <label for="star3" class="star-label" style="cursor: pointer;"><i class="fa-solid fa-star"></i></label> <input type="radio" name="reviewRating" value="2" id="star2" style="display:none;"> <label for="star2" class="star-label" style="cursor: pointer;"><i class="fa-solid fa-star"></i></label> <input type="radio" name="reviewRating" value="1" id="star1" style="display:none;"> <label for="star1" class="star-label" style="cursor: pointer;"><i class="fa-solid fa-star"></i></label> </div> </div> <div class="form-group"> <label for="reviewComment">ความเห็นเพิ่มเติม *</label> <textarea id="reviewComment" class="form-control" rows="4" placeholder="แบ่งปันความคิดเห็นของคุณเกี่ยวกับคุณภาพของสินค้า บริการ การจัดส่ง..." required></textarea> </div> <div style="display: flex; gap: 10px; margin-top: 20px;"> <button type="button" class="btn btn-secondary w-50" id="cancelReviewBtn">ยกเลิก</button> <button type="submit" class="btn btn-sky w-50"><i class="fa-solid fa-paper-plane"></i> ส่งรีวิว</button> </div> </form> </div> </div> <!-- 8. ADD SELLER ACCOUNT MODAL (ADMIN) --> <div class="modal-overlay" id="addSellerModal" style="display: none;"> <div class="modal-card modal-md"> <button class="modal-close" id="closeAddSellerModalBtn">×</button> <h3><i class="fa-solid fa-user-plus"></i> เพิ่มและอนุมัติบัญชีผู้ขายใหม่</h3> <form id="addSellerForm" class="mt-3"> <div class="form-group"> <label for="addSellerUsername">ชื่อผู้ใช้ (Username) *</label> <input type="text" id="addSellerUsername" class="form-control" required placeholder="ระบุชื่อผู้ใช้ภาษาอังกฤษ เช่น skycorporate1"> </div> <div class="form-group"> <label for="addSellerPassword">รหัสผ่าน (Password) *</label> <div class="password-input-wrapper"> <input type="password" id="addSellerPassword" class="form-control" required placeholder="••••••••"> <i class="fa-solid fa-eye toggle-password-btn" data-target="addSellerPassword" title="แสดง/ซ่อนรหัสผ่าน"></i> </div> </div> <div class="form-group"> <label for="addSellerStoreName">ชื่อร้านค้า (Store Name) *</label> <input type="text" id="addSellerStoreName" class="form-control" required placeholder="เช่น ร้านค้าอย่างเป็นทางการ SkyCorp"> </div> <div class="form-group"> <label for="addSellerCompanyName">ชื่อบริษัท / นิติบุคคล (Company Name)</label> <input type="text" id="addSellerCompanyName" class="form-control" placeholder="เช่น บริษัท สกาย คอร์ปอเรชั่น จำกัด"> </div> <div class="form-group"> <label for="addSellerType">ระดับ / ประเภทผู้ขาย (Seller Level) *</label> <select id="addSellerType" class="form-control" required> <option value="corporate">ผู้ขายรายใหญ่/บริษัท (Corporate Official Seller)</option> <option value="regular">ผู้ขายปกติ (Regular Seller)</option> </select> </div> <button type="submit" class="btn btn-sky w-100"><i class="fa-solid fa-circle-check"></i> สร้างบัญชีผู้ขาย</button> </form> </div> </div> <!-- Add / Edit Shipping Address Modal --> <div class="modal-overlay" id="addressModal" style="display: none;"> <div class="modal-card" style="max-width: 550px; position: relative;"> <button class="modal-close-btn" id="closeAddressModalBtn">×</button> <div class="modal-header"> <h3 id="addressModalTitle"><i class="fa-solid fa-location-dot"></i> เพิ่มที่อยู่จัดส่งใหม่</h3> </div> <div class="modal-body"> <form id="addressForm"> <input type="hidden" id="addressId"> <div class="row mb-2"> <div class="col-md-6 form-group"> <label for="addressName">ชื่อ-นามสกุล ผู้รับ *</label> <input type="text" id="addressName" class="form-control" required placeholder="ระบุชื่อผู้รับ"> </div> <div class="col-md-6 form-group"> <label for="addressPhone">เบอร์โทรศัพท์ *</label> <input type="text" id="addressPhone" class="form-control" required placeholder="เช่น 0891234567"> </div> </div> <div class="form-group mb-2"> <label for="addressDetail">บ้านเลขที่ / ถนน / ซอย / จุดสังเกต *</label> <textarea id="addressDetail" rows="2" class="form-control" required placeholder="เช่น 176 หมู่ 10 ซอยวัดหนองหาร ถนนเชียงใหม่-พร้าว"></textarea> </div> <div class="row mb-2"> <div class="col-md-6 form-group"> <label for="addressSubdistrict">ตำบล / แขวง *</label> <input type="text" id="addressSubdistrict" class="form-control" required placeholder="เช่น หนองหาร หรือ คลองเตย"> </div> <div class="col-md-6 form-group"> <label for="addressDistrict">อำเภอ / เขต *</label> <input type="text" id="addressDistrict" class="form-control" required placeholder="เช่น สันทราย หรือ คลองเตย"> </div> </div> <div class="row mb-2"> <div class="col-md-6 form-group"> <label for="addressProvince">จังหวัด *</label> <input type="text" id="addressProvince" class="form-control" required placeholder="เช่น เชียงใหม่ หรือ กรุงเทพมหานคร"> </div> <div class="col-md-6 form-group"> <label for="addressZipcode">รหัสไปรษณีย์ *</label> <input type="text" id="addressZipcode" class="form-control" required placeholder="เช่น 50290"> </div> </div> <div class="form-group mb-2"> <label for="addressGpsLocation"><i class="fa-solid fa-location-crosshairs text-sky"></i> พิกัด GPS / ลิงก์ Google Maps (ถ้ามี)</label> <input type="text" id="addressGpsLocation" class="form-control" placeholder="เช่น https://maps.app.goo.gl/... หรือ 18.8931, 99.0123"> </div> <div class="form-group mt-2"> <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;"> <input type="checkbox" id="addressIsDefault"> <span style="font-size:13px;">ตั้งเป็นที่อยู่จัดส่งหลัก (Default Shipping Address)</span> </label> </div> <div class="modal-actions mt-4" style="display: flex; justify-content: flex-end; gap: 10px;"> <button type="button" class="btn btn-sky-outline btn-sm" id="cancelAddressModalBtn">ยกเลิก</button> <button type="submit" class="btn btn-sky btn-sm"><i class="fa-solid fa-save"></i> บันทึกที่อยู่</button> </div> </form> </div> </div> </div> <!-- CUSTOMER ORDER CANCELLATION MODAL --> <div class="modal-overlay" id="customerCancelModal" style="display: none;"> <div class="modal-card modal-md"> <div class="modal-header"> <h3><i class="fa-solid fa-ban text-danger"></i> ขอยกเลิกคำสั่งซื้อ</h3> <button class="modal-close-btn" id="closeCustomerCancelModalBtn">×</button> </div> <div class="modal-body mt-2"> <form id="customerCancelForm"> <input type="hidden" id="cancelOrderId"> <div class="alert alert-info py-2" style="font-size: 13px; margin-bottom: 15px;"> <i class="fa-solid fa-circle-info"></i> คำสั่งซื้อ: <strong id="cancelOrderIdDisplay"></strong> </div> <div class="form-group"> <label for="customerCancelReason"><strong>เหตุผลในการยกเลิกคำสั่งซื้อ *</strong></label> <select id="customerCancelReason" class="form-control" required> <option value="">-- กรุณาเลือกเหตุผล --</option> <option value="เปลี่ยนใจ / สั่งซื้อผิดพลาด">เปลี่ยนใจ / สั่งซื้อผิดพลาด</option> <option value="ต้องการเปลี่ยนที่อยู่จัดส่ง">ต้องการเปลี่ยนที่อยู่จัดส่ง</option> <option value="ต้องการเปลี่ยนตัวเลือกสินค้า (สี/ไซส์)">ต้องการเปลี่ยนตัวเลือกสินค้า (สี/ไซส์)</option> <option value="พบสินค้าราคาถูกกว่าที่อื่น">พบสินค้าราคาถูกกว่าที่อื่น</option> <option value="เหตุผลอื่นๆ">เหตุผลอื่นๆ (ระบุเพิ่มเติม)</option> </select> </div> <div class="form-group" id="customerCancelDetailGroup" style="display: none;"> <label for="customerCancelDetail">รายละเอียดเพิ่มเติม</label> <textarea id="customerCancelDetail" class="form-control" rows="2" placeholder="ระบุเหตุผลเพิ่มเติม..."></textarea> </div> <!-- Refund Information Section (For Paid/Preparing orders) --> <div id="refundInfoSection" class="refund-info-box mt-3" style="display: none;"> <h4 style="font-size: 13px; color: var(--color-sky-brand); margin-bottom: 10px; display: flex; align-items: center; gap: 6px;"> <i class="fa-solid fa-building-columns"></i> ข้อมูลบัญชีสำหรับรับเงินคืน (Refund Information) </h4> <div class="row"> <div class="col-md-6 form-group mb-2"> <label for="refundBankName" style="font-size:12px;">ธนาคาร / PromptPay *</label> <input type="text" id="refundBankName" class="form-control" placeholder="เช่น กสิกรไทย / PromptPay"> </div> <div class="col-md-6 form-group mb-2"> <label for="refundAccountNo" style="font-size:12px;">เลขบัญชี / เบอร์ PromptPay *</label> <input type="text" id="refundAccountNo" class="form-control" placeholder="เช่น 012-3-45678-9"> </div> </div> <div class="form-group mb-0"> <label for="refundAccountName" style="font-size:12px;">ชื่อบัญชีผู้รับเงิน *</label> <input type="text" id="refundAccountName" class="form-control" placeholder="ระบุชื่อ-นามสกุล เจ้าของบัญชี"> </div> </div> <div class="modal-actions mt-4" style="display: flex; justify-content: flex-end; gap: 10px;"> <button type="button" class="btn btn-sky-outline btn-sm" id="cancelCustomerCancelBtn">ปิด / ยกเลิก</button> <button type="submit" class="btn btn-danger btn-sm"><i class="fa-solid fa-check-circle"></i> ยืนยันการยกเลิก</button> </div> </form> </div> </div> </div> <!-- SELLER & ADMIN ORDER CANCELLATION MODAL --> <div class="modal-overlay" id="sellerAdminCancelModal" style="display: none;"> <div class="modal-card modal-md"> <div class="modal-header"> <h3><i class="fa-solid fa-triangle-exclamation text-danger"></i> ยกเลิกออเดอร์ / ปฏิเสธการจัดส่ง</h3> <button class="modal-close-btn" id="closeSellerAdminCancelModalBtn">×</button> </div> <div class="modal-body mt-2"> <form id="sellerAdminCancelForm"> <input type="hidden" id="sellerAdminCancelOrderId"> <div class="alert alert-warning py-2" style="font-size: 13px; margin-bottom: 15px;"> <i class="fa-solid fa-circle-info"></i> คำสั่งซื้อ: <strong id="sellerAdminCancelOrderIdDisplay"></strong> </div> <div class="form-group"> <label for="sellerAdminCancelReason"><strong>เหตุผลในการยกเลิก *</strong></label> <select id="sellerAdminCancelReason" class="form-control" required> <option value="">-- กรุณาเลือกเหตุผล --</option> <option value="สินค้าหมดสต็อก / สต็อกไม่ถูกต้อง">สินค้าหมดสต็อก / สต็อกไม่ถูกต้อง</option> <option value="ไม่สามารถจัดส่งตามที่อยู่ผู้รับได้">ไม่สามารถจัดส่งตามที่อยู่ผู้รับได้ </option> <option value="ไม่ได้รับยอดชำระเงิน / สลิปไม่ถูกต้อง">ไม่ได้รับยอดชำระเงิน / สลิปไม่ถูกต้อง </option> <option value="เหตุผลอื่นๆ">เหตุผลอื่นๆ (ระบุเพิ่มเติม)</option> </select> </div> <div class="form-group" id="sellerAdminCancelDetailGroup" style="display: none;"> <label for="sellerAdminCancelDetail">รายละเอียดเพิ่มเติม</label> <textarea id="sellerAdminCancelDetail" class="form-control" rows="2" placeholder="ระบุเหตุผลเพิ่มเติม..."></textarea> </div> <div class="modal-actions mt-4" style="display: flex; justify-content: flex-end; gap: 10px;"> <button type="button" class="btn btn-sky-outline btn-sm" id="cancelSellerAdminCancelBtn">ปิด / ยกเลิก</button> <button type="submit" class="btn btn-danger btn-sm"><i class="fa-solid fa-check-circle"></i> ยืนยันการยกเลิกคำสั่งซื้อ</button> </div> </form> </div> </div> </div> <!-- ADD / EDIT HERO BANNER MODAL --> <div class="modal-overlay" id="addBannerModal" style="display: none;"> <div class="modal-card modal-md"> <button class="modal-close" id="closeAddBannerModalBtn">×</button> <h3 id="addBannerModalTitle"><i class="fa-solid fa-image text-sky"></i> เพิ่มแบนเนอร์สไลด์หน้าแรก</h3> <form id="addBannerForm" class="mt-3"> <input type="hidden" id="bannerEditIndex" value="-1"> <div class="form-group"> <label for="bannerTitleInput">หัวข้อสไลด์ (Title) *</label> <input type="text" id="bannerTitleInput" class="form-control" placeholder="เช่น ก้าวสู่อนาคตกับ SkyTech Gadgets" required> </div> <div class="form-group"> <label for="bannerSubtitleInput">ข้อความอธิบาย (Subtitle)</label> <textarea id="bannerSubtitleInput" class="form-control" rows="2" placeholder="รายละเอียดโปรโมชันสั้นๆ..."></textarea> </div> <div class="row"> <div class="col-md-6 form-group"> <label for="bannerBadgeTextInput">ข้อความป้าย (Badge Label)</label> <input type="text" id="bannerBadgeTextInput" class="form-control" placeholder="เช่น Tech Deals 2026"> </div> <div class="col-md-6 form-group"> <label for="bannerCouponCodeInput">โค้ดส่วนลดประจำสไลด์</label> <input type="text" id="bannerCouponCodeInput" class="form-control" placeholder="เช่น TECH100"> </div> </div> <div class="form-group mb-3"> <label><strong><i class="fa-solid fa-palette text-sky"></i> ปรับแต่งสีพื้นหลังสไลด์ (Banner Background Generator)</strong></label> <!-- Real-time Preview Box --> <div id="bannerBgPreviewBox" class="banner-bg-preview-box mb-2" style="background: linear-gradient(135deg, #e0f2fe, #bae6fd);"> <span class="preview-text"><i class="fa-solid fa-eye"></i> ตัวอย่างสีพื้นหลังสไลด์ (Real-time Preview)</span> </div> <!-- Dual Color Pickers & Direction Selector --> <div class="row g-2 align-items-center mb-2"> <div class="col-4"> <label for="bannerStartColor" class="small-label mb-1">สีเริ่มต้น</label> <div class="color-picker-input-group"> <input type="color" id="bannerStartColor" value="#e0f2fe" class="form-control form-control-color"> <input type="text" id="bannerStartColorText" value="#e0f2fe" class="form-control form-control-sm text-uppercase" placeholder="#e0f2fe"> </div> </div> <div class="col-4"> <label for="bannerEndColor" class="small-label mb-1">สีปลายทาง</label> <div class="color-picker-input-group"> <input type="color" id="bannerEndColor" value="#bae6fd" class="form-control form-control-color"> <input type="text" id="bannerEndColorText" value="#bae6fd" class="form-control form-control-sm text-uppercase" placeholder="#bae6fd"> </div> </div> <div class="col-4"> <label for="bannerGradientAngle" class="small-label mb-1">ทิศทางการไล่สี</label> <select id="bannerGradientAngle" class="form-control form-control-sm"> <option value="135deg">135° (เฉียงลงขวา)</option> <option value="90deg">90° (ซ้ายไปขวา)</option> <option value="180deg">180° (บนลงล่าง)</option> <option value="45deg">45° (เฉียงขึ้นขวา)</option> <option value="radial">Radial (วงกลม)</option> </select> </div> </div> <!-- Expanded 10 Gradient Presets Chips --> <label class="small-label mb-1"><i class="fa-solid fa-wand-magic-sparkles"></i> โทนสีสำเร็จรูปยอดนิยม (10 Gradient Presets):</label> <div class="gradient-presets-grid mb-2"> <button type="button" class="gradient-preset-btn" data-style="linear-gradient(135deg, #e0f2fe, #bae6fd, #e0f2fe)" style="background: linear-gradient(135deg, #e0f2fe, #bae6fd, #e0f2fe);" title="Sky Blue">Sky</button> <button type="button" class="gradient-preset-btn" data-style="linear-gradient(135deg, #fef2f2, #fecdd3, #fef2f2)" style="background: linear-gradient(135deg, #fef2f2, #fecdd3, #fef2f2);" title="Rose Pink">Rose</button> <button type="button" class="gradient-preset-btn" data-style="linear-gradient(135deg, #e0f2f1, #a7ffeb, #e0f2f1)" style="background: linear-gradient(135deg, #e0f2f1, #a7ffeb, #e0f2f1);" title="Emerald Teal">Teal</button> <button type="button" class="gradient-preset-btn" data-style="linear-gradient(135deg, #fff7ed, #ffedd5, #fff7ed)" style="background: linear-gradient(135deg, #fff7ed, #ffedd5, #fff7ed);" title="Amber Gold">Amber</button> <button type="button" class="gradient-preset-btn" data-style="linear-gradient(135deg, #faf5ff, #f3e8ff, #faf5ff)" style="background: linear-gradient(135deg, #faf5ff, #f3e8ff, #faf5ff);" title="Royal Purple">Purple</button> <button type="button" class="gradient-preset-btn" data-style="linear-gradient(135deg, #0f172a, #1e293b, #0f172a)" style="background: linear-gradient(135deg, #0f172a, #1e293b, #0f172a); color: #fff;" title="Dark Midnight">Dark</button> <button type="button" class="gradient-preset-btn" data-style="linear-gradient(135deg, #fef3c7, #fde047, #fef3c7)" style="background: linear-gradient(135deg, #fef3c7, #fde047, #fef3c7);" title="Gold Luxury">Gold</button> <button type="button" class="gradient-preset-btn" data-style="linear-gradient(135deg, #ffe4e6, #fecdd3, #ffe4e6)" style="background: linear-gradient(135deg, #ffe4e6, #fecdd3, #ffe4e6);" title="Crimson Red">Crimson</button> <button type="button" class="gradient-preset-btn" data-style="linear-gradient(135deg, #dcfce7, #86efac, #dcfce7)" style="background: linear-gradient(135deg, #dcfce7, #86efac, #dcfce7);" title="Fresh Mint">Mint</button> <button type="button" class="gradient-preset-btn" data-style="linear-gradient(135deg, #e0f2fe, #38bdf8, #0284c7)" style="background: linear-gradient(135deg, #e0f2fe, #38bdf8, #0284c7); color: #fff;" title="Ocean Deep">Ocean</button> </div> <!-- Raw CSS Input & Target Link Dropdown --> <div class="row g-2"> <div class="col-md-6"> <label for="bannerBgStyleInput" class="small-label mb-1">สไตล์ CSS (Gradient / Solid)</label> <input type="text" id="bannerBgStyleInput" class="form-control form-control-sm" placeholder="linear-gradient(135deg, #e0f2fe, #bae6fd)"> </div> <div class="col-md-6"> <label for="bannerSellerTargetInput" class="small-label mb-1">เลือกร้านค้าเพื่อเชื่อมโยง (ถ้ามี)</label> <select id="bannerSellerTargetInput" class="form-control form-control-sm"> <option value="all">ทุกร้านค้า (หมวดหมู่รวม)</option> <option value="seller1">ร้านอุปกรณ์ไอที SkyTech</option> <option value="seller2">ร้านแฟชั่น SkyThreads</option> </select> </div> </div> </div> <div class="form-group"> <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;"> <input type="checkbox" id="bannerActiveCheck" checked> <strong>เปิดใช้งานแสดงผลสไลด์นี้บนหน้าแรก (Active)</strong> </label> </div> <button type="submit" class="btn btn-sky w-100"><i class="fa-solid fa-floppy-disk"></i> บันทึกข้อมูลแบนเนอร์</button> </form> </div> </div> <!-- PASSWORD PROMPT MODAL --> <div class="modal-overlay" id="passwordPromptModal" style="display: none; z-index: 300;"> <div class="modal-card modal-sm text-center"> <button class="modal-close" onclick="document.getElementById('passwordPromptModal').style.display='none'">×</button> <h3 class="modal-title mb-3"><i class="fa-solid fa-lock text-sky"></i> ยืนยันรหัสผ่าน</h3> <p class="text-muted mb-3" style="font-size: 0.85rem;" id="passwordPromptMessage"> กรุณากรอกรหัสผ่านสำหรับบัญชี</p> <form id="passwordPromptForm"> <input type="hidden" id="passwordPromptUsername"> <div class="form-group text-start"> <div class="password-input-wrapper"> <input type="password" id="passwordPromptInput" class="form-control" placeholder="••••••••" required> <i class="fa-solid fa-eye toggle-password-btn" data-target="passwordPromptInput" title="แสดง/ซ่อนรหัสผ่าน"></i> </div> </div> <button type="submit" class="btn btn-sky w-100"><i class="fa-solid fa-right-to-bracket"></i> ยืนยันการสลับบัญชี</button> </form> </div> </div> <!-- FOMO PURCHASE NOTIFICATION POPUP --> <div id="fomoNotification" class="fomo-notification" style="display: none;"> <img id="fomoImg" src="" alt="Product"> <div class="fomo-content"> <div class="fomo-title"><strong id="fomoUser">คุณสมชาย</strong> เพิ่งสั่งซื้อ!</div> <div class="fomo-prod" id="fomoProdName">ชื่อสินค้า</div> <div class="fomo-time" id="fomoTime">เมื่อ 2 นาทีที่แล้ว</div> </div> </div> <!-- Application Modular Scripts --> <script src="db.js"></script> <script src="ui-utils.js"></script> <script src="auth.js"></script> <script src="catalog.js"></script> <script src="cart-checkout.js"></script> <script src="admin-seller.js"></script> <script src="app.js"></script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.27 |
proxy
|
phpinfo
|
Settings