<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
/**
 * public/checkout.php
 * หน้าชำระเงินและระบุที่อยู่จัดส่ง
 * ปรับปรุง: ใช้ระบบบัญชีธนาคารกลาง (Central Bank Account) สำหรับรับโอนเงินยอดรวมทั้งหมด (Grand Total)
 */
require_once __DIR__ . '/../config/config.php';
require_once __DIR__ . '/../includes/auth.php';
require_once __DIR__ . '/../includes/image_helper.php';

// Custom Fallback Function สำหรับ sanitize()
if (!function_exists('safe_sanitize')) {
    function safe_sanitize($string) {
        if (function_exists('sanitize')) {
            return sanitize($string);
        }
        return htmlspecialchars((string)$string, ENT_QUOTES, 'UTF-8');
    }
}

requireLogin();

try {
    $db = getDBConnection();
    $userId = (int)($_SESSION['user']['id'] ?? 0);
    $sessionId = session_id();

    // ดึงข้อมูลตะกร้าจากตาราง cart_items (Sync Database เข้า Session)
    $stmtCart = $db->prepare("
        SELECT c.*, p.name, p.price, p.main_image as image, p.vendor_id 
        FROM cart_items c 
        JOIN products p ON c.product_id = p.id 
        WHERE c.user_id = ? OR (c.session_id = ? AND c.user_id IS NULL)
    ");
    $stmtCart->execute([$userId, $sessionId]);
    $cartFromDb = $stmtCart->fetchAll();

    if (!empty($cartFromDb)) {
        $_SESSION['cart'] = $cartFromDb;
    }

    $cart = $_SESSION['cart'] ?? [];
    if (empty($cart)) {
        header('Location: ' . (defined('SITE_URL') ? rtrim(SITE_URL, '/') : '') . '/cart.php');
        exit;
    }

    $subtotal = 0;
    foreach ($cart as $item) {
        $subtotal += ($item['price'] ?? 0) * ($item['quantity'] ?? 0);
    }
    $shippingFee = 50.00;
    $grandTotal = $subtotal + $shippingFee;


    // ดึงข้อมูลบัญชีธนาคารกลางที่ Admin เปิดใช้งานอยู่ (lower_case SQL)
    $centralBanks = $db->query("select * from system_bank_accounts where is_active = 1 order by sort_order asc, id asc")->fetchAll();

    // ตรวจสอบและแมป vendor_id สำหรับสินค้าในตะกร้า ป้องกันปัญหา Foreign Key Constraint
    $vendorIdsInCart = [];
    // หา default vendor เผื่อไว้กรณีฉุกเฉิน (lower_case SQL)
    $defaultVendorId = (int)($db->query("select id from vendors order by id asc limit 1")->fetchColumn() ?: 1);

    foreach ($cart as $k => $item) {
        $vId = !empty($item['vendor_id']) ? (int)$item['vendor_id'] : 0;
        
        // ตรวจสอบว่า vendor_id ปัจจุบันมีในตาราง vendors หรือไม่
        $vCheckStmt = $db->prepare("select id from vendors where id = ?");
        $vCheckStmt->execute([$vId]);
        $vendorExists = $vCheckStmt->fetchColumn();
        
        if (!$vendorExists) {
            // หากไม่มี vendor_id นี้ ให้ลองค้นหาจากตาราง products
            $pStmt = $db->prepare("select vendor_id from products where id = ?");
            $pStmt->execute([$item['product_id'] ?? 0]);
            $prodVendorId = $pStmt->fetchColumn();
            
            if ($prodVendorId) {
                $vCheckStmt->execute([$prodVendorId]);
                if ($vCheckStmt->fetchColumn()) {
                    $vId = (int)$prodVendorId;
                } else {
                    $vId = $defaultVendorId;
                }
            } else {
                $vId = $defaultVendorId;
            }
        }
        
        $cart[$k]['vendor_id'] = $vId;
        $vendorIdsInCart[$vId] = $vId;
    }
    $_SESSION['cart'] = $cart;

    // ดึงข้อมูลที่อยู่ล่าสุดของสมาชิก หรือ ที่อยู่ที่ตั้งเป็นค่าเริ่มต้น
    $stmtAddrFetch = $db->prepare("select * from addresses where user_id = ? order by is_default desc, id desc limit 1");
    $stmtAddrFetch->execute([$_SESSION['user']['id'] ?? 0]);
    $userAddress = $stmtAddrFetch->fetch();
    if ($userAddress) {
        $userAddress = array_map(function($val) {
            return is_string($val) ? html_entity_decode($val, ENT_QUOTES, 'UTF-8') : $val;
        }, $userAddress);
    }

    $error = '';

    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        if (function_exists('verifyCSRFToken')) {
            verifyCSRFToken($_POST['csrf_token'] ?? '');
        }
        
        // ใช้ trim แทน sanitize ตอนบันทึกลง DB เพื่อป้องกันการแปลง HTML Entities ซ้ำซ้อน (Double Encoding) 
        $recipient_name = trim($_POST['recipient_name'] ?? '');
        $phone          = trim($_POST['phone'] ?? '');
        $address_line   = trim($_POST['address_line'] ?? '');
        $province       = trim($_POST['province'] ?? '');
        $amphoe         = trim($_POST['amphoe'] ?? '');
        $district       = trim($_POST['district'] ?? '');
        $zipcode        = trim($_POST['zipcode'] ?? '');
        $payment_method = trim($_POST['payment_method'] ?? 'bank_transfer');

        if (empty($recipient_name) || empty($phone) || empty($address_line) || empty($province)) {
            $error = 'กรุณากรอกข้อมูลที่อยู่จัดส่งให้ครบถ้วน';
        } else {
            $slipPath = null;

            // อัปโหลดสลิปการโอนเงิน (กรณีโอนเงิน หรือ PromptPay)
            if (in_array($payment_method, ['bank_transfer', 'promptpay'])) {
                if (isset($_FILES['payment_slip']) && $_FILES['payment_slip']['error'] === UPLOAD_ERR_OK) {
                    if (function_exists('processAndUploadImage')) {
                        $uploadResult = processAndUploadImage($_FILES['payment_slip'], 'slips');
                        if ($uploadResult['success']) {
                            $slipPath = $uploadResult['main_path'];
                        } else {
                            $error = 'การอัปโหลดสลิปขัดข้อง: ' . ($uploadResult['error'] ?? 'Unknown Error');
                        }
                    } else {
                        $error = 'ระบบไม่พบฟังก์ชันสำหรับการอัปโหลดไฟล์';
                    }
                } else {
                    $error = 'กรุณาแนบหลักฐานการโอนเงิน (สลิปชำระเงิน)';
                }
            }

            if (empty($error)) {
                $db->beginTransaction();

                try {
                    // บันทึกที่อยู่ไว้ใช้ครั้งต่อไป
                    if (isset($_POST['save_address'])) {
                        $stmtCheckAddr = $db->prepare("select id from addresses where user_id = ? and recipient_name = ? and phone = ? and address_line = ? and province = ? and amphoe = ? and district = ? and zipcode = ? limit 1");
                        $stmtCheckAddr->execute([$_SESSION['user']['id'], $recipient_name, $phone, $address_line, $province, $amphoe, $district, $zipcode]);
                        if (!$stmtCheckAddr->fetchColumn()) {
                            $stmtAddr = $db->prepare("insert into addresses (user_id, recipient_name, phone, address_line, province, amphoe, district, zipcode) values (?, ?, ?, ?, ?, ?, ?, ?)");
                            $stmtAddr->execute([$_SESSION['user']['id'], $recipient_name, $phone, $address_line, $province, $amphoe, $district, $zipcode]);
                        }
                    }

                    $orderNo = 'ORD' . date('YmdHis') . rand(100, 999);
                    $fullShippingAddr = "$address_line ต.$district อ.$amphoe จ.$province $zipcode";

                    // บันทึกคำสั่งซื้อหลัก (orders)
                    $stmtOrder = $db->prepare("insert into orders (order_no, user_id, total_amount, shipping_fee, payment_method, payment_status, order_status, payment_slip, shipping_name, shipping_phone, shipping_address) values (?, ?, ?, ?, ?, 'pending', 'pending', ?, ?, ?, ?)");
                    $stmtOrder->execute([$orderNo, $_SESSION['user']['id'], $grandTotal, $shippingFee, $payment_method, $slipPath, $recipient_name, $phone, $fullShippingAddr]);
                    $orderId = $db->lastInsertId();

                    // Multi-Vendor Order Splitting Logic
                    $groupedByVendor = [];
                    foreach ($cart as $item) {
                        $vId = (int)($item['vendor_id'] ?? 0);
                        $groupedByVendor[$vId][] = $item;
                    }

                    $stmtVendorOrder = $db->prepare("insert into vendor_orders (order_id, vendor_id, subtotal, commission, vendor_earning, status) values (?, ?, ?, ?, ?, 'pending')");
                    $stmtItem = $db->prepare("insert into order_items (order_id, vendor_order_id, product_id, vendor_id, product_name, variant_info, price, quantity, subtotal) values (?, ?, ?, ?, ?, ?, ?, ?, ?)");

                    foreach ($groupedByVendor as $vId => $vItems) {
                        $vSubtotal = 0;
                        foreach ($vItems as $vi) {
                            $vSubtotal += ($vi['price'] ?? 0) * ($vi['quantity'] ?? 0);
                        }

                        $vCommStmt = $db->prepare("select commission_rate from vendors where id = ?");
                        $vCommStmt->execute([$vId]);
                        $commRate = (float)($vCommStmt->fetchColumn() ?: 0.00);

                        $commission = round($vSubtotal * ($commRate / 100), 2);
                        $vendorEarning = $vSubtotal - $commission;

                        $stmtVendorOrder->execute([$orderId, $vId, $vSubtotal, $commission, $vendorEarning]);
                        $vendorOrderId = $db->lastInsertId();

                        foreach ($vItems as $item) {
                            $variantInfo = "Size: " . ($item['size'] ?? '') . " | Color: " . ($item['color'] ?? '');
                            $itemSubtotal = ($item['price'] ?? 0) * ($item['quantity'] ?? 0);
                            $stmtItem->execute([
                                $orderId,
                                $vendorOrderId,
                                $item['product_id'] ?? 0,
                                $vId,
                                $item['name'] ?? '',
                                $variantInfo,
                                $item['price'] ?? 0,
                                $item['quantity'] ?? 0,
                                $itemSubtotal
                            ]);
                        }
                    }

                    // ลบข้อมูลตะกร้าสินค้าในฐานข้อมูล
                    $stmtClearCart = $db->prepare("DELETE FROM cart_items WHERE user_id = ? OR (session_id = ? AND user_id IS NULL)");
                    $stmtClearCart->execute([$_SESSION['user']['id'] ?? 0, session_id()]);

                    $db->commit();

                    unset($_SESSION['cart']);
                    $_SESSION['flash_success'] = "สั่งซื้อสินค้าสำเร็จ! หมายเลขคำสั่งซื้อ: $orderNo";
                    header('Location: ' . (defined('SITE_URL') ? rtrim(SITE_URL, '/') : '') . '/order_detail.php?id=' . $orderId);
                    exit;

                } catch (Exception $e) {
                    $db->rollBack();
                    $error = 'เกิดข้อผิดพลาดในการสร้างคำสั่งซื้อ: ' . $e->getMessage();
                }
            }
        }
    }

    $pageTitle = "ชำระเงินและระบุที่อยู่";
    require_once __DIR__ . '/../includes/header.php';
    ?>

    <!-- Checkout Page Scoped Styles -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
      /* ═══════════════════════════════════════════
         CHECKOUT PAGE — Premium Dark Theme v2
      ═══════════════════════════════════════════ */
      .ck-page { font-family: 'Noto Sans Thai', 'Inter', sans-serif; }
      .ck-page *, .ck-page *::before, .ck-page *::after { box-sizing: border-box; }

      /* ── Breadcrumb ── */
      .ck-breadcrumb {
        display: flex; align-items: center; gap: 8px;
        margin-bottom: 20px; font-size: .82rem;
      }
      .ck-breadcrumb a {
        color: var(--ck-muted, #94a3b8); text-decoration: none;
        transition: color .2s;
      }
      .ck-breadcrumb a:hover { color: #818cf8; }
      .ck-breadcrumb .ck-bc-sep { color: var(--ck-muted, #64748b); font-size: .7rem; }
      .ck-breadcrumb .ck-bc-current { color: var(--ck-text, #f1f5f9); font-weight: 600; }

      /* ── Step Indicator ── */
      .ck-steps {
        display: flex; align-items: center; justify-content: center;
        gap: 0; margin-bottom: 28px;
        background: var(--ck-card, #182235);
        border: 1px solid var(--ck-border, rgba(99,102,241,.12));
        border-radius: 14px; padding: 16px 24px;
      }
      .ck-step {
        display: flex; align-items: center; gap: 10px;
        font-size: .82rem; color: var(--ck-muted, #64748b);
        white-space: nowrap;
      }
      .ck-step.--active { color: var(--ck-text, #f1f5f9); font-weight: 600; }
      .ck-step.--done { color: #34d399; }
      .ck-step-num {
        width: 28px; height: 28px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: .75rem; font-weight: 700; flex-shrink: 0;
        border: 2px solid var(--ck-border, #334155);
        color: var(--ck-muted, #64748b);
        transition: all .2s;
      }
      .ck-step.--done .ck-step-num {
        background: #34d399; border-color: #34d399; color: #fff;
      }
      .ck-step.--active .ck-step-num {
        background: #6366f1; border-color: #6366f1; color: #fff;
        box-shadow: 0 0 0 4px rgba(99,102,241,.2);
      }
      .ck-step-line {
        width: 48px; height: 2px; margin: 0 8px;
        background: var(--ck-border, #334155);
        border-radius: 1px;
      }
      .ck-step.--done + .ck-step-line { background: #34d399; }

      /* Layout */
      .ck-grid { display: grid; grid-template-columns: 1fr 420px; gap: 28px; align-items: start; }
      @media(max-width:991px) { .ck-grid { grid-template-columns: 1fr; } }

      /* Section Card */
      .ck-card {
        background: var(--ck-card, #182235);
        border: 1px solid var(--ck-border, rgba(99,102,241,.12));
        border-radius: 16px;
        padding: 28px;
        transition: border-color .2s;
      }
      .ck-card:hover { border-color: rgba(99,102,241,.25); }

      /* Section Headers */
      .ck-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
      .ck-section-icon {
        width: 44px; height: 44px; border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.15rem; flex-shrink: 0;
      }
      .ck-section-title { font-size: 1.1rem; font-weight: 700; color: var(--ck-text, #f1f5f9); margin: 0; }
      .ck-section-sub { font-size: .8rem; color: var(--ck-muted, #94a3b8); margin: 0; }

      /* Form Inputs */
      .ck-label { font-size: .82rem; font-weight: 600; color: var(--ck-muted, #94a3b8); margin-bottom: 6px; display: block; }
      .ck-label .req { color: #f87171; }
      .ck-input, .ck-select, .ck-textarea {
        width: 100%; padding: 12px 14px; border-radius: 10px;
        border: 1px solid var(--ck-input-border, #2d3a4e);
        background: var(--ck-input-bg, #0f1a2e);
        color: var(--ck-text, #f1f5f9); font-size: .9rem;
        font-family: inherit; transition: border-color .2s, box-shadow .2s;
        outline: none;
      }
      .ck-input:focus, .ck-select:focus, .ck-textarea:focus {
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99,102,241,.15);
      }
      .ck-input::placeholder, .ck-textarea::placeholder { color: #4a5568; }
      .ck-textarea { resize: vertical; min-height: 72px; }
      .ck-select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer;
      }
      .ck-select option { background: var(--ck-card, #182235); color: var(--ck-text, #f1f5f9); }
      .ck-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
      .ck-field { margin-bottom: 16px; }

      /* Form validation visuals */
      .ck-input:invalid:not(:placeholder-shown):not(:focus),
      .ck-textarea:invalid:not(:placeholder-shown):not(:focus) {
        border-color: rgba(239,68,68,.4);
      }
      .ck-select:invalid:not(:focus) {
        border-color: rgba(239,68,68,.25);
      }

      /* Checkbox */
      .ck-check-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; cursor: pointer; }
      .ck-check-row input[type="checkbox"] {
        width: 18px; height: 18px; accent-color: #6366f1; cursor: pointer; flex-shrink: 0;
        border-radius: 4px;
      }
      .ck-check-label { font-size: .82rem; color: var(--ck-muted, #94a3b8); cursor: pointer; }

      /* Divider */
      .ck-divider { border: none; border-top: 1px solid var(--ck-border, rgba(99,102,241,.1)); margin: 28px 0; }

      /* ── Payment Method Cards ── */
      .ck-pm-card {
        border: 1.5px solid var(--ck-border, rgba(99,102,241,.1));
        border-radius: 14px; padding: 18px 20px;
        cursor: pointer; transition: all .2s ease;
        background: var(--ck-card, #182235);
        position: relative; margin-bottom: 12px;
      }
      .ck-pm-card:hover { border-color: rgba(99,102,241,.35); background: rgba(99,102,241,.04); }
      .ck-pm-card.--selected {
        border-color: #6366f1;
        background: rgba(99,102,241,.06);
        box-shadow: 0 0 0 3px rgba(99,102,241,.12), 0 4px 20px rgba(99,102,241,.08);
      }
      .ck-pm-header { display: flex; align-items: center; gap: 14px; }
      .ck-pm-radio {
        width: 20px; height: 20px; border-radius: 50%;
        border: 2px solid #4a5568; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        transition: border-color .2s, background .2s;
      }
      .ck-pm-card.--selected .ck-pm-radio { border-color: #6366f1; background: #6366f1; }
      .ck-pm-card.--selected .ck-pm-radio::after { content: ''; width: 8px; height: 8px; background: #fff; border-radius: 50%; }
      .ck-pm-icon {
        width: 42px; height: 42px; border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.1rem; flex-shrink: 0;
      }
      .ck-pm-icon.--bank { background: rgba(59,130,246,.12); color: #60a5fa; }
      .ck-pm-icon.--pp { background: rgba(16,185,129,.12); color: #34d399; }
      .ck-pm-icon.--cod { background: rgba(251,191,36,.12); color: #fbbf24; }
      .ck-pm-info { flex: 1; }
      .ck-pm-name { font-size: .92rem; font-weight: 600; color: var(--ck-text, #f1f5f9); }
      .ck-pm-desc { font-size: .78rem; color: var(--ck-muted, #94a3b8); margin-top: 2px; }

      /* Hidden radio — actual form element */
      .ck-pm-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

      /* ── Payment Details Panel ── */
      .ck-pm-detail {
        margin-top: 18px; padding-top: 18px;
        border-top: 1px solid var(--ck-border, rgba(99,102,241,.1));
        animation: ckFadeIn .25s ease;
      }
      @keyframes ckFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

      /* Amount Highlight */
      .ck-amount-card {
        background: linear-gradient(135deg, rgba(251,191,36,.08), rgba(245,158,11,.04));
        border: 1px solid rgba(251,191,36,.2);
        border-radius: 12px; padding: 16px 20px;
        display: flex; align-items: center; gap: 14px;
        margin-bottom: 18px;
      }
      .ck-amount-icon { font-size: 1.6rem; flex-shrink: 0; }
      .ck-amount-label { font-size: .8rem; color: #b45309; font-weight: 500; }
      .ck-amount-value { font-size: 1.35rem; font-weight: 800; color: #92400e; letter-spacing: -.02em; }
      .ck-amount-hint { font-size: .75rem; color: var(--ck-muted, #94a3b8); margin-top: 2px; }
      /* Dark mode amount text */
      [data-theme="dark"] .ck-amount-label { color: #fbbf24; }
      [data-theme="dark"] .ck-amount-value { color: #fde68a; }

      /* Bank Account Card */
      .ck-bank-card {
        background: var(--ck-input-bg, #0f1a2e);
        border: 1px solid var(--ck-border, rgba(99,102,241,.12));
        border-radius: 12px; padding: 18px;
        display: flex; align-items: center; gap: 16px;
        margin-bottom: 12px;
        transition: border-color .2s;
      }
      .ck-bank-card:hover { border-color: rgba(59,130,246,.3); }
      .ck-bank-avatar {
        width: 52px; height: 52px; border-radius: 12px;
        object-fit: cover; cursor: pointer; flex-shrink: 0;
        border: 1px solid rgba(99,102,241,.15);
      }
      .ck-bank-avatar-placeholder {
        width: 52px; height: 52px; border-radius: 12px;
        background: rgba(99,102,241,.1); display: flex;
        align-items: center; justify-content: center;
        font-size: 1.3rem; flex-shrink: 0;
      }
      .ck-bank-info { flex: 1; min-width: 0; }
      .ck-bank-name { font-size: .85rem; font-weight: 600; color: var(--ck-text, #f1f5f9); }
      .ck-bank-acct { font-size: 1.15rem; font-weight: 700; color: #60a5fa; letter-spacing: .5px; margin: 4px 0; font-family: 'SF Mono', 'Fira Code', monospace; }
      .ck-bank-holder { font-size: .8rem; color: var(--ck-muted, #94a3b8); }
      .ck-copy-btn {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 8px 16px; border-radius: 8px;
        background: rgba(59,130,246,.12); color: #60a5fa;
        border: 1px solid rgba(59,130,246,.2);
        font-size: .8rem; font-weight: 600; cursor: pointer;
        transition: all .2s; white-space: nowrap; flex-shrink: 0;
        font-family: inherit;
      }
      .ck-copy-btn:hover { background: rgba(59,130,246,.2); border-color: rgba(59,130,246,.4); }
      .ck-copy-btn.--copied { background: rgba(16,185,129,.15); color: #34d399; border-color: rgba(16,185,129,.3); }

      /* PromptPay QR */
      .ck-qr-wrap { text-align: center; padding: 8px 0; }
      .ck-qr-img {
        width: 200px; height: 200px; border-radius: 14px;
        border: 1px solid var(--ck-border, rgba(99,102,241,.15));
        background: #fff; padding: 8px; object-fit: contain;
        margin: 0 auto 14px; display: block;
        box-shadow: 0 4px 16px rgba(0,0,0,.15);
      }
      .ck-qr-label { font-size: .82rem; color: var(--ck-muted, #94a3b8); }
      .ck-qr-label strong { color: var(--ck-text, #f1f5f9); }

      /* ── Upload Slip ── */
      .ck-upload-zone {
        border: 2px dashed rgba(99,102,241,.25);
        border-radius: 14px; padding: 32px 20px;
        text-align: center; cursor: pointer;
        transition: all .2s; position: relative;
        background: rgba(99,102,241,.03);
      }
      .ck-upload-zone:hover { border-color: rgba(99,102,241,.45); background: rgba(99,102,241,.06); }
      .ck-upload-zone.--has-file { border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.04); }
      .ck-upload-zone.--drag-over { border-color: rgba(99,102,241,.7); background: rgba(99,102,241,.1); transform: scale(1.01); }
      .ck-upload-icon { font-size: 2rem; color: #6366f1; margin-bottom: 10px; }
      .ck-upload-text { font-size: .88rem; color: var(--ck-text, #f1f5f9); font-weight: 500; }
      .ck-upload-hint { font-size: .76rem; color: var(--ck-muted, #94a3b8); margin-top: 6px; }
      .ck-upload-zone input[type="file"] {
        position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
      }
      /* Preview */
      .ck-slip-preview {
        margin-top: 16px; text-align: center;
        animation: ckFadeIn .3s ease;
      }
      .ck-slip-img {
        max-height: 220px; border-radius: 12px;
        border: 1px solid var(--ck-border, rgba(99,102,241,.15));
        box-shadow: 0 4px 20px rgba(0,0,0,.2);
      }
      .ck-slip-meta { font-size: .78rem; color: #34d399; font-weight: 500; margin-top: 10px; }
      .ck-slip-remove {
        display: inline-flex; align-items: center; gap: 4px;
        margin-top: 8px; padding: 6px 14px; border-radius: 8px;
        background: rgba(239,68,68,.1); color: #f87171;
        border: 1px solid rgba(239,68,68,.2);
        font-size: .78rem; cursor: pointer; transition: all .2s;
        font-family: inherit;
      }
      .ck-slip-remove:hover { background: rgba(239,68,68,.2); }

      /* ── CTA Button ── */
      .ck-submit-btn {
        width: 100%; padding: 16px 24px; border: none;
        border-radius: 14px; font-size: 1rem; font-weight: 700;
        font-family: inherit; cursor: pointer;
        background: linear-gradient(135deg, #6366f1, #4f46e5);
        color: #fff; letter-spacing: -.01em;
        transition: all .2s; position: relative;
        box-shadow: 0 4px 20px rgba(99,102,241,.3);
        display: flex; align-items: center; justify-content: center; gap: 8px;
      }
      .ck-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(99,102,241,.4); background: linear-gradient(135deg, #818cf8, #6366f1); }
      .ck-submit-btn:active { transform: translateY(0); }
      .ck-submit-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
      .ck-submit-btn .ck-spinner { display: none; width: 20px; height: 20px; border: 2.5px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: ckSpin .6s linear infinite; }
      .ck-submit-btn.--loading .ck-spinner { display: inline-block; }
      .ck-submit-btn.--loading .ck-btn-text { display: none; }
      @keyframes ckSpin { to { transform: rotate(360deg); } }

      /* ── Order Summary Sidebar ── */
      .ck-summary { position: sticky; top: 80px; }
      .ck-summary-mobile-toggle {
        display: none; width: 100%;
        padding: 14px 18px; border-radius: 14px;
        background: var(--ck-card, #182235);
        border: 1px solid var(--ck-border, rgba(99,102,241,.12));
        cursor: pointer; font-family: inherit;
        color: var(--ck-text, #f1f5f9);
      }
      .ck-summary-toggle-row { display: flex; justify-content: space-between; align-items: center; }
      .ck-summary-toggle-left { display: flex; align-items: center; gap: 10px; }
      .ck-summary-toggle-left i { color: #6366f1; }
      .ck-summary-toggle-label { font-weight: 600; font-size: .92rem; }
      .ck-summary-toggle-price { font-weight: 800; font-size: 1.05rem; color: #818cf8; }
      .ck-summary-toggle-arrow { color: var(--ck-muted, #94a3b8); transition: transform .2s; font-size: .85rem; }
      .ck-summary-toggle-arrow.--open { transform: rotate(180deg); }

      /* Product Items */
      .ck-item {
        display: flex; align-items: center; gap: 14px;
        padding: 14px 0;
        border-bottom: 1px solid var(--ck-border, rgba(99,102,241,.08));
      }
      .ck-item:last-child { border-bottom: none; }
      .ck-item-img {
        width: 56px; height: 56px; border-radius: 10px;
        object-fit: cover; flex-shrink: 0;
        border: 1px solid var(--ck-border, rgba(99,102,241,.12));
        background: var(--ck-input-bg, #0f1a2e);
      }
      .ck-item-info { flex: 1; min-width: 0; }
      .ck-item-name { font-size: .85rem; font-weight: 600; color: var(--ck-text, #f1f5f9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .ck-item-variant { font-size: .75rem; color: var(--ck-muted, #94a3b8); margin-top: 2px; }
      .ck-item-price { font-size: .88rem; font-weight: 700; color: var(--ck-text, #f1f5f9); white-space: nowrap; flex-shrink: 0; }
      .ck-item-qty { font-size: .72rem; color: var(--ck-muted, #94a3b8); background: rgba(99,102,241,.08); padding: 2px 8px; border-radius: 6px; margin-left: 6px; }

      /* Custom scrollbar for cart list */
      .ck-scroll::-webkit-scrollbar { width: 4px; }
      .ck-scroll::-webkit-scrollbar-track { background: transparent; }
      .ck-scroll::-webkit-scrollbar-thumb { background: rgba(99,102,241,.2); border-radius: 4px; }
      .ck-scroll::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,.4); }
      .ck-scroll { scrollbar-width: thin; scrollbar-color: rgba(99,102,241,.2) transparent; }

      /* Price breakdown */
      .ck-price-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; }
      .ck-price-label { font-size: .85rem; color: var(--ck-muted, #94a3b8); }
      .ck-price-val { font-size: .88rem; font-weight: 600; color: var(--ck-text, #f1f5f9); }
      .ck-price-divider { border: none; border-top: 1px dashed var(--ck-border, rgba(99,102,241,.15)); margin: 10px 0; }
      .ck-total-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0 4px; }
      .ck-total-label { font-size: .9rem; font-weight: 700; color: var(--ck-text, #f1f5f9); }
      .ck-total-val { font-size: 1.35rem; font-weight: 800; color: #818cf8; letter-spacing: -.02em; }

      /* Security badge */
      .ck-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; padding: 12px; border-radius: 10px; background: rgba(16,185,129,.06); border: 1px solid rgba(16,185,129,.12); }
      .ck-secure i { color: #34d399; font-size: .9rem; }
      .ck-secure span { font-size: .76rem; color: #94a3b8; }

      /* Toast notification */
      .ck-toast {
        position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px);
        padding: 14px 24px; border-radius: 12px; font-size: .88rem; font-weight: 600;
        z-index: 10000; opacity: 0; pointer-events: none;
        transition: all .3s ease; font-family: 'Noto Sans Thai', sans-serif;
        box-shadow: 0 8px 30px rgba(0,0,0,.3);
      }
      .ck-toast.--show { opacity: 1; transform: translateX(-50%) translateY(0); }
      .ck-toast.--success { background: #065f46; color: #d1fae5; border: 1px solid rgba(16,185,129,.3); }

      /* Error alert */
      .ck-error {
        background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2);
        border-radius: 12px; padding: 14px 18px; margin-bottom: 20px;
        display: flex; align-items: center; gap: 10px;
        color: #fca5a5; font-size: .88rem;
      }
      .ck-error i { color: #f87171; font-size: 1rem; flex-shrink: 0; }

      /* ═══ Responsive ═══ */
      /* Tablet 768–991 */
      @media(max-width:991px) {
        .ck-summary-mobile-toggle { display: block; margin-bottom: 16px; }
        .ck-summary-body.--collapsed { display: none; }
        .ck-grid { gap: 16px; }
        .ck-card { padding: 22px; }
        .ck-summary { position: static; }
        .ck-col-left { order: 2; }
        .ck-col-right { order: 1; }
        .ck-steps { padding: 14px 16px; gap: 0; }
        .ck-step-line { width: 32px; }
      }
      /* Mobile ≤575 */
      @media(max-width:575px) {
        .ck-row { grid-template-columns: 1fr; gap: 0; }
        .ck-card { padding: 18px; border-radius: 14px; }
        .ck-pm-card { padding: 14px 16px; }
        .ck-bank-card { flex-direction: column; align-items: stretch; gap: 12px; text-align: center; }
        .ck-bank-avatar, .ck-bank-avatar-placeholder { margin: 0 auto; }
        .ck-bank-info { text-align: center; }
        .ck-copy-btn { width: 100%; justify-content: center; }
        .ck-steps { flex-wrap: wrap; gap: 4px; justify-content: center; }
        .ck-step-line { width: 20px; }
        .ck-step span:not(.ck-step-num) { display: none; }
        .ck-breadcrumb { font-size: .76rem; }
      }
      /* Sticky mobile CTA */
      @media(max-width:768px) {
        .ck-submit-wrap {
          position: sticky; bottom: 0; left: 0; right: 0;
          background: linear-gradient(to top, var(--ck-card, #182235) 60%, transparent);
          padding: 16px 0 4px; margin: 0 -18px -18px; padding-left: 18px; padding-right: 18px;
          z-index: 100;
        }
      }

      /* ═══ Light Theme Full Overrides ═══ */
      [data-theme="light"] .ck-page {
        --ck-card: #ffffff; --ck-border: #e2e8f0; --ck-text: #1e293b;
        --ck-muted: #64748b; --ck-input-bg: #f8fafc; --ck-input-border: #e2e8f0;
      }
      [data-theme="light"] .ck-pm-card { background: #fff; }
      [data-theme="light"] .ck-pm-card:hover { background: #f8fafc; }
      [data-theme="light"] .ck-pm-card.--selected { background: rgba(99,102,241,.03); }
      [data-theme="light"] .ck-pm-radio { border-color: #cbd5e1; }
      [data-theme="light"] .ck-amount-card { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-color: #fde68a; }
      [data-theme="light"] .ck-amount-label { color: #b45309; }
      [data-theme="light"] .ck-amount-value { color: #92400e; }
      [data-theme="light"] .ck-amount-hint { color: #78716c; }
      [data-theme="light"] .ck-bank-card { background: #f8fafc; }
      [data-theme="light"] .ck-bank-acct { color: #2563eb; }
      [data-theme="light"] .ck-bank-name { color: #1e293b; }
      [data-theme="light"] .ck-bank-holder { color: #64748b; }
      [data-theme="light"] .ck-copy-btn { background: rgba(59,130,246,.08); color: #2563eb; border-color: rgba(59,130,246,.15); }
      [data-theme="light"] .ck-total-val { color: #4f46e5; }
      [data-theme="light"] .ck-summary-toggle-price { color: #4f46e5; }
      [data-theme="light"] .ck-qr-img { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
      [data-theme="light"] .ck-qr-label { color: #64748b; }
      [data-theme="light"] .ck-qr-label strong { color: #1e293b; }
      [data-theme="light"] .ck-upload-zone { background: rgba(99,102,241,.02); border-color: #cbd5e1; }
      [data-theme="light"] .ck-upload-zone:hover { border-color: #818cf8; background: rgba(99,102,241,.04); }
      [data-theme="light"] .ck-upload-icon { color: #4f46e5; }
      [data-theme="light"] .ck-toast.--success { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
      [data-theme="light"] .ck-error { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
      [data-theme="light"] .ck-error i { color: #dc2626; }
      [data-theme="light"] .ck-secure { background: #f0fdf4; border-color: #bbf7d0; }
      [data-theme="light"] .ck-secure span { color: #64748b; }
      [data-theme="light"] .ck-secure i { color: #16a34a; }
      [data-theme="light"] .ck-select option { background: #fff; color: #1e293b; }
      [data-theme="light"] .ck-step-num { border-color: #e2e8f0; color: #94a3b8; }
      [data-theme="light"] .ck-steps { background: #fff; border-color: #e2e8f0; }
      [data-theme="light"] .ck-step-line { background: #e2e8f0; }
      [data-theme="light"] .ck-item-img { background: #f1f5f9; }
      @media(max-width:768px) {
        [data-theme="light"] .ck-submit-wrap {
          background: linear-gradient(to top, #ffffff 60%, transparent);
        }
      }
    </style>

    <div class="ck-page">
      <!-- Breadcrumb -->
      <div class="ck-breadcrumb">
        <a href="<?php echo defined('SITE_URL') ? rtrim(SITE_URL, '/') : ''; ?>/index.php"><i class="fas fa-home"></i> หน้าหลัก</a>
        <span class="ck-bc-sep"><i class="fas fa-chevron-right"></i></span>
        <a href="<?php echo defined('SITE_URL') ? rtrim(SITE_URL, '/') : ''; ?>/cart.php">ตะกร้าสินค้า</a>
        <span class="ck-bc-sep"><i class="fas fa-chevron-right"></i></span>
        <span class="ck-bc-current">ชำระเงิน</span>
      </div>

      <!-- Step Indicator -->
      <div class="ck-steps">
        <div class="ck-step --done">
          <span class="ck-step-num"><i class="fas fa-check" style="font-size:.65rem"></i></span>
          <span>ตะกร้าสินค้า</span>
        </div>
        <div class="ck-step-line" style="background:#34d399"></div>
        <div class="ck-step --active">
          <span class="ck-step-num">2</span>
          <span>ชำระเงิน</span>
        </div>
        <div class="ck-step-line"></div>
        <div class="ck-step">
          <span class="ck-step-num">3</span>
          <span>สำเร็จ</span>
        </div>
      </div>

      <div class="ck-grid">

        <!-- ═══════ LEFT COLUMN — Payment ═══════ -->
        <div class="ck-col-left">

          <?php if (!empty($error)): ?>
            <div class="ck-error">
              <i class="fas fa-exclamation-circle"></i>
              <span><?php echo htmlspecialchars($error); ?></span>
            </div>
          <?php endif; ?>

          <form method="POST" action="" enctype="multipart/form-data" id="checkoutForm">
            <input type="hidden" name="csrf_token" value="<?php echo function_exists('generateCSRFToken') ? generateCSRFToken() : ''; ?>">

            <!-- ── Shipping Address ── -->
            <div class="ck-card" style="margin-bottom: 20px;">
              <div class="ck-section-head">
                <div class="ck-section-icon" style="background: rgba(99,102,241,.1); color: #818cf8;">
                  <i class="fas fa-map-marker-alt"></i>
                </div>
                <div>
                  <div class="ck-section-title">ที่อยู่จัดส่งสินค้า</div>
                  <div class="ck-section-sub">ระบุที่อยู่สำหรับจัดส่งพัสดุของคุณ</div>
                </div>
              </div>

              <div class="ck-row">
                <div class="ck-field">
                  <label class="ck-label">ชื่อ-นามสกุล ผู้รับ <span class="req">*</span></label>
                  <input type="text" name="recipient_name" class="ck-input" required value="<?php echo safe_sanitize($_SESSION['user']['fullname'] ?? ''); ?>" placeholder="กรอกชื่อ-นามสกุล">
                </div>
                <div class="ck-field">
                  <label class="ck-label">เบอร์โทรศัพท์ ผู้รับ <span class="req">*</span></label>
                  <input type="tel" name="phone" class="ck-input" required placeholder="0812345678" value="<?php echo safe_sanitize($userAddress['phone'] ?? ''); ?>">
                </div>
              </div>

              <div class="ck-field">
                <label class="ck-label">ที่อยู่ (บ้านเลขที่, ถนน, ซอย) <span class="req">*</span></label>
                <textarea name="address_line" class="ck-textarea" required placeholder="เช่น 123/45 ถนนสุขุมวิท"><?php echo safe_sanitize($userAddress['address_line'] ?? ''); ?></textarea>
              </div>

              <div class="ck-row">
                <div class="ck-field">
                  <label class="ck-label">จังหวัด <span class="req">*</span></label>
                  <select id="provinceSelect" name="province" class="ck-select" required onchange="loadAmphoes(this.value)">
                    <option value="">-- เลือกจังหวัด --</option>
                  </select>
                </div>
                <div class="ck-field">
                  <label class="ck-label">อำเภอ / เขต <span class="req">*</span></label>
                  <select id="amphoeSelect" name="amphoe" class="ck-select" required onchange="loadDistricts(this.value)">
                    <option value="">-- เลือกอำเภอ --</option>
                  </select>
                </div>
              </div>

              <div class="ck-row">
                <div class="ck-field">
                  <label class="ck-label">ตำบล / แขวง <span class="req">*</span></label>
                  <select id="districtSelect" name="district" class="ck-select" required onchange="updateZipcode(this)">
                    <option value="">-- เลือกตำบล --</option>
                  </select>
                </div>
                <div class="ck-field">
                  <label class="ck-label">รหัสไปรษณีย์ <span class="req">*</span></label>
                  <input type="text" id="zipcodeInput" name="zipcode" class="ck-input" required readonly value="<?php echo safe_sanitize($userAddress['zipcode'] ?? ''); ?>" style="background: rgba(99,102,241,.04);">
                </div>
              </div>

              <label class="ck-check-row">
                <input type="checkbox" name="save_address" id="save_address" checked>
                <span class="ck-check-label">บันทึกที่อยู่นี้ไว้ใช้ในการสั่งซื้อครั้งต่อไป</span>
              </label>
            </div>

            <!-- ── Payment Methods ── -->
            <div class="ck-card" style="margin-bottom: 20px;">
              <div class="ck-section-head">
                <div class="ck-section-icon" style="background: rgba(16,185,129,.1); color: #34d399;">
                  <i class="fas fa-credit-card"></i>
                </div>
                <div>
                  <div class="ck-section-title">วิธีการชำระเงิน</div>
                  <div class="ck-section-sub">เลือกวิธีการชำระเงินที่สะดวกสำหรับคุณ</div>
                </div>
              </div>

              <!-- Bank Transfer -->
              <label class="ck-pm-card --selected" id="pmCard_bank" onclick="selectPayment('bank_transfer')">
                <input type="radio" name="payment_method" id="pay_bank" value="bank_transfer" checked onchange="togglePaymentUI()">
                <div class="ck-pm-header">
                  <div class="ck-pm-radio"></div>
                  <div class="ck-pm-icon --bank"><i class="fas fa-university"></i></div>
                  <div class="ck-pm-info">
                    <div class="ck-pm-name">โอนเงินผ่านบัญชีธนาคารกลาง</div>
                    <div class="ck-pm-desc">โอนเงินแล้วอัปโหลดสลิปเป็นหลักฐาน</div>
                  </div>
                </div>

                <div id="bankDetails" class="ck-pm-detail">
                  <!-- Amount Highlight -->
                  <div class="ck-amount-card">
                    <div class="ck-amount-icon">💰</div>
                    <div>
                      <div class="ck-amount-label">ยอดที่ต้องโอน</div>
                      <div class="ck-amount-value">฿<?php echo number_format($grandTotal, 2); ?></div>
                      <div class="ck-amount-hint">โอนเข้าบัญชีธนาคารด้านล่าง</div>
                    </div>
                  </div>

                  <?php if (empty($centralBanks)): ?>
                    <div class="ck-error" style="margin-bottom:0">
                      <i class="fas fa-info-circle"></i>
                      <span>ยังไม่มีข้อมูลบัญชีธนาคารกลางในระบบ กรุณาติดต่อผู้ดูแลระบบ</span>
                    </div>
                  <?php else: ?>
                    <?php foreach ($centralBanks as $cb): ?>
                      <div class="ck-bank-card">
                        <?php if (!empty($cb['qr_code_image'])): ?>
                          <img src="<?php echo (defined('UPLOAD_URL') ? rtrim(UPLOAD_URL, '/') : '') . '/' . ltrim($cb['qr_code_image'], '/'); ?>" 
                               class="ck-bank-avatar"
                               onclick="event.preventDefault(); window.open(this.src, '_blank')" title="คลิกดูภาพขยาย">
                        <?php else: ?>
                          <div class="ck-bank-avatar-placeholder">🏦</div>
                        <?php endif; ?>
                        <div class="ck-bank-info">
                          <div class="ck-bank-name"><?php echo htmlspecialchars($cb['bank_name'] ?? ''); ?></div>
                          <div class="ck-bank-acct"><?php echo htmlspecialchars($cb['account_number'] ?? ''); ?></div>
                          <div class="ck-bank-holder">ชื่อบัญชี: <?php echo htmlspecialchars($cb['account_name'] ?? ''); ?></div>
                        </div>
                        <button type="button" class="ck-copy-btn" onclick="event.preventDefault(); copyToClipboard('<?php echo htmlspecialchars($cb['account_number'] ?? ''); ?>', this)">
                          <i class="far fa-copy"></i> คัดลอก
                        </button>
                      </div>
                    <?php endforeach; ?>
                  <?php endif; ?>
                </div>
              </label>

              <!-- PromptPay -->
              <label class="ck-pm-card" id="pmCard_promptpay" onclick="selectPayment('promptpay')">
                <input type="radio" name="payment_method" id="pay_promptpay" value="promptpay" onchange="togglePaymentUI()">
                <div class="ck-pm-header">
                  <div class="ck-pm-radio"></div>
                  <div class="ck-pm-icon --pp"><i class="fas fa-qrcode"></i></div>
                  <div class="ck-pm-info">
                    <div class="ck-pm-name">พร้อมเพย์ (PromptPay QR Code)</div>
                    <div class="ck-pm-desc">สแกน QR Code เพื่อชำระเงินทันที</div>
                  </div>
                </div>

                <div id="promptpayDetails" class="ck-pm-detail" style="display:none;">
                  <?php
                    $promptpayAccount = null;
                    foreach ($centralBanks as $cb) {
                        $bName = $cb['bank_name'] ?? '';
                        if (stripos($bName, 'PromptPay') !== false || stripos($bName, 'พร้อมเพย์') !== false) {
                            $promptpayAccount = $cb;
                            break;
                        }
                    }
                    if (!$promptpayAccount && !empty($centralBanks)) {
                        $promptpayAccount = $centralBanks[0];
                    }
                    $ppNumber = $promptpayAccount ? preg_replace('/[^0-9]/', '', $promptpayAccount['account_number'] ?? '') : '0812345678';
                  ?>

                  <!-- Amount Highlight for PromptPay -->
                  <div class="ck-amount-card">
                    <div class="ck-amount-icon">📱</div>
                    <div>
                      <div class="ck-amount-label">ยอดที่ต้องชำระ</div>
                      <div class="ck-amount-value">฿<?php echo number_format($grandTotal, 2); ?></div>
                    </div>
                  </div>

                  <div class="ck-qr-wrap">
                    <?php if ($promptpayAccount && !empty($promptpayAccount['qr_code_image'])): ?>
                      <img src="<?php echo (defined('UPLOAD_URL') ? rtrim(UPLOAD_URL, '/') : '') . '/' . ltrim($promptpayAccount['qr_code_image'], '/'); ?>" class="ck-qr-img" alt="PromptPay QR Code">
                    <?php else: ?>
                      <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=PROMPTPAY_<?php echo urlencode($ppNumber); ?>_AMOUNT_<?php echo $grandTotal; ?>" class="ck-qr-img" alt="PromptPay QR Code">
                    <?php endif; ?>
                    <p class="ck-qr-label">เบอร์พร้อมเพย์ / เลขบัญชี: <strong><?php echo htmlspecialchars($promptpayAccount['account_number'] ?? $ppNumber); ?></strong></p>
                    <p class="ck-qr-label">ชื่อบัญชี: <strong><?php echo htmlspecialchars($promptpayAccount['account_name'] ?? (defined('SITE_NAME') ? SITE_NAME : 'Shop')); ?></strong></p>
                  </div>
                </div>
              </label>

              <!-- COD -->
              <label class="ck-pm-card" id="pmCard_cod" onclick="selectPayment('cod')">
                <input type="radio" name="payment_method" id="pay_cod" value="cod" onchange="togglePaymentUI()">
                <div class="ck-pm-header">
                  <div class="ck-pm-radio"></div>
                  <div class="ck-pm-icon --cod"><i class="fas fa-truck"></i></div>
                  <div class="ck-pm-info">
                    <div class="ck-pm-name">เก็บเงินปลายทาง (Cash on Delivery)</div>
                    <div class="ck-pm-desc">ชำระเงินเมื่อได้รับพัสดุ</div>
                  </div>
                </div>
              </label>
            </div>

            <!-- ── Upload Slip ── -->
            <div id="slipUploadSection" class="ck-card" style="margin-bottom: 20px;">
              <div class="ck-section-head">
                <div class="ck-section-icon" style="background: rgba(251,191,36,.1); color: #fbbf24;">
                  <i class="fas fa-receipt"></i>
                </div>
                <div>
                  <div class="ck-section-title">แนบหลักฐานการโอนเงิน <span style="color:#f87171; font-size:.85rem;">*</span></div>
                  <div class="ck-section-sub">อัปโหลดสลิปการโอนเพื่อยืนยันการชำระเงิน</div>
                </div>
              </div>

              <div class="ck-upload-zone" id="uploadZone">
                <input type="file" name="payment_slip" id="payment_slip_input" accept="image/*" onchange="previewSlip(this)" required>
                <div class="ck-upload-icon"><i class="fas fa-cloud-upload-alt"></i></div>
                <div class="ck-upload-text">ลากไฟล์มาวางที่นี่ หรือคลิกเพื่อเลือกไฟล์</div>
                <div class="ck-upload-hint">รองรับไฟล์ JPG, PNG, WebP — บีบอัดอัตโนมัติ</div>
              </div>

              <div id="slipPreviewContainer" class="ck-slip-preview" style="display:none;">
                <img id="slipPreviewImage" src="" class="ck-slip-img" alt="Slip Preview">
                <div class="ck-slip-meta"><i class="fas fa-check-circle"></i> อัปโหลดสลิปสำเร็จ</div>
                <button type="button" class="ck-slip-remove" onclick="removeSlip()">
                  <i class="fas fa-times"></i> ลบไฟล์
                </button>
              </div>
            </div>

            <!-- ── Submit Button ── -->
            <div class="ck-submit-wrap">
              <button type="submit" class="ck-submit-btn" id="submitBtn">
                <span class="ck-btn-text"><i class="fas fa-check-circle"></i> ยืนยันการสั่งซื้อสินค้า</span>
                <span class="ck-spinner"></span>
              </button>
            </div>
          </form>
        </div>

        <!-- ═══════ RIGHT COLUMN — Order Summary ═══════ -->
        <div class="ck-col-right">
          <!-- Mobile Toggle -->
          <button type="button" class="ck-summary-mobile-toggle" onclick="toggleSummary()">
            <div class="ck-summary-toggle-row">
              <div class="ck-summary-toggle-left">
                <i class="fas fa-shopping-bag"></i>
                <span class="ck-summary-toggle-label">สรุปคำสั่งซื้อ</span>
              </div>
              <div style="display:flex; align-items:center; gap:10px;">
                <span class="ck-summary-toggle-price">฿<?php echo number_format($grandTotal, 2); ?></span>
                <i class="fas fa-chevron-down ck-summary-toggle-arrow" id="summaryArrow"></i>
              </div>
            </div>
          </button>

          <div class="ck-card ck-summary" id="summaryBody">
            <div class="ck-section-head">
              <div class="ck-section-icon" style="background: rgba(99,102,241,.1); color: #818cf8;">
                <i class="fas fa-clipboard-list"></i>
              </div>
              <div>
                <div class="ck-section-title">สรุปรายการสั่งซื้อ</div>
                <div class="ck-section-sub"><?php echo count($cart); ?> รายการ</div>
              </div>
            </div>

            <!-- Cart Items -->
            <div class="ck-scroll" style="max-height: 320px; overflow-y: auto; margin-bottom: 16px;">
              <?php foreach ($cart as $item): ?>
                <div class="ck-item">
                  <?php 
                    $itemImgUrl = '';
                    if (!empty($item['image'])) {
                      $itemImgUrl = (function_exists('formatImageUrl')) ? formatImageUrl($item['image']) : $item['image'];
                    }
                  ?>
                  <?php if ($itemImgUrl): ?>
                    <img src="<?php echo htmlspecialchars($itemImgUrl); ?>" class="ck-item-img" alt="<?php echo safe_sanitize($item['name'] ?? ''); ?>" onerror="this.style.display='none'">
                  <?php endif; ?>
                  <div class="ck-item-info">
                    <div class="ck-item-name"><?php echo safe_sanitize($item['name'] ?? 'Unknown'); ?></div>
                    <div class="ck-item-variant">
                      ไซส์: <?php echo safe_sanitize($item['size'] ?? '-'); ?> &middot; สี: <?php echo safe_sanitize($item['color'] ?? '-'); ?>
                      <span class="ck-item-qty">x<?php echo (int)($item['quantity'] ?? 1); ?></span>
                    </div>
                  </div>
                  <div class="ck-item-price">฿<?php echo number_format(($item['price'] ?? 0) * ($item['quantity'] ?? 1), 2); ?></div>
                </div>
              <?php endforeach; ?>
            </div>

            <!-- Price Breakdown -->
            <hr class="ck-price-divider">
            <div class="ck-price-row">
              <span class="ck-price-label">ราคารวมสินค้า</span>
              <span class="ck-price-val">฿<?php echo number_format($subtotal, 2); ?></span>
            </div>
            <div class="ck-price-row">
              <span class="ck-price-label">ค่าจัดส่ง</span>
              <span class="ck-price-val">฿<?php echo number_format($shippingFee, 2); ?></span>
            </div>
            <hr class="ck-price-divider">
            <div class="ck-total-row">
              <span class="ck-total-label">ยอดสุทธิที่ต้องชำระ</span>
              <span class="ck-total-val">฿<?php echo number_format($grandTotal, 2); ?></span>
            </div>

            <!-- Security Badge -->
            <div class="ck-secure">
              <i class="fas fa-shield-alt"></i>
              <span>การชำระเงินปลอดภัย — ข้อมูลถูกเข้ารหัสและปกป้อง</span>
            </div>
          </div>
        </div>

      </div><!-- /ck-grid -->
    </div><!-- /ck-page -->

    <!-- Toast Notification -->
    <div class="ck-toast --success" id="ckToast"></div>

    <script>
    const savedProvince = "<?php echo safe_sanitize($userAddress['province'] ?? ''); ?>";
    const savedAmphoe   = "<?php echo safe_sanitize($userAddress['amphoe'] ?? ''); ?>";
    const savedDistrict = "<?php echo safe_sanitize($userAddress['district'] ?? ''); ?>";
    const siteUrl       = "<?php echo defined('SITE_URL') ? rtrim(SITE_URL, '/') : ''; ?>";

    document.addEventListener('DOMContentLoaded', () => {
        fetch(siteUrl + '/ajax/get_location.php?type=provinces')
        .then(r => r.json())
        .then(provinces => {
            const select = document.getElementById('provinceSelect');
            provinces.forEach(p => {
                select.innerHTML += `<option value="${p}">${p}</option>`;
            });
            if (savedProvince) {
                select.value = savedProvince;
                loadAmphoes(savedProvince, savedAmphoe);
            }
        });
    });

    let currentProvince = '';
    function loadAmphoes(prov, autoSelectAmphoe = '') {
        currentProvince = prov;
        fetch(`${siteUrl}/ajax/get_location.php?type=amphoes&parent=${encodeURIComponent(prov)}`)
        .then(r => r.json())
        .then(amphoes => {
            const select = document.getElementById('amphoeSelect');
            select.innerHTML = '<option value="">-- เลือกอำเภอ --</option>';
            amphoes.forEach(a => {
                select.innerHTML += `<option value="${a}">${a}</option>`;
            });
            if (autoSelectAmphoe) {
                select.value = autoSelectAmphoe;
                loadDistricts(autoSelectAmphoe, savedDistrict);
            }
        });
    }

    function loadDistricts(amphoe, autoSelectDistrict = '') {
        fetch(`${siteUrl}/ajax/get_location.php?type=districts&province=${encodeURIComponent(currentProvince)}&parent=${encodeURIComponent(amphoe)}`)
        .then(r => r.json())
        .then(districts => {
            const select = document.getElementById('districtSelect');
            select.innerHTML = '<option value="">-- เลือกตำบล --</option>';
            window.districtData = districts;
            Object.keys(districts).forEach(d => {
                select.innerHTML += `<option value="${d}">${d}</option>`;
            });
            if (autoSelectDistrict) {
                select.value = autoSelectDistrict;
            }
        });
    }

    function updateZipcode(select) {
        const val = select.value;
        if (window.districtData && window.districtData[val]) {
            document.getElementById('zipcodeInput').value = window.districtData[val];
        }
    }

    /* ── Payment Method Selection ── */
    function selectPayment(method) {
        document.querySelectorAll('.ck-pm-card').forEach(c => c.classList.remove('--selected'));
        const map = { bank_transfer: 'pmCard_bank', promptpay: 'pmCard_promptpay', cod: 'pmCard_cod' };
        const radioMap = { bank_transfer: 'pay_bank', promptpay: 'pay_promptpay', cod: 'pay_cod' };
        document.getElementById(map[method]).classList.add('--selected');
        document.getElementById(radioMap[method]).checked = true;
        togglePaymentUI();
    }

    function togglePaymentUI() {
        const bank = document.getElementById('pay_bank').checked;
        const promptpay = document.getElementById('pay_promptpay').checked;
        const isSlipRequired = bank || promptpay;

        document.getElementById('bankDetails').style.display = bank ? 'block' : 'none';
        document.getElementById('promptpayDetails').style.display = promptpay ? 'block' : 'none';

        const slipSection = document.getElementById('slipUploadSection');
        if (slipSection) slipSection.style.display = isSlipRequired ? 'block' : 'none';

        const slipInput = document.getElementById('payment_slip_input');
        if (slipInput) {
            if (isSlipRequired) {
                slipInput.setAttribute('required', 'required');
            } else {
                slipInput.removeAttribute('required');
            }
        }

        // Update card selection visual
        document.querySelectorAll('.ck-pm-card').forEach(c => c.classList.remove('--selected'));
        if (bank) document.getElementById('pmCard_bank').classList.add('--selected');
        if (promptpay) document.getElementById('pmCard_promptpay').classList.add('--selected');
        if (document.getElementById('pay_cod').checked) document.getElementById('pmCard_cod').classList.add('--selected');
    }

    /* ── Slip Preview ── */
    function previewSlip(input) {
        const container = document.getElementById('slipPreviewContainer');
        const img = document.getElementById('slipPreviewImage');
        const zone = document.getElementById('uploadZone');
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                img.src = e.target.result;
                container.style.display = 'block';
                zone.classList.add('--has-file');
                zone.style.display = 'none';
            }
            reader.readAsDataURL(input.files[0]);
        } else {
            img.src = '';
            container.style.display = 'none';
            zone.classList.remove('--has-file');
            zone.style.display = 'block';
        }
    }

    function removeSlip() {
        const input = document.getElementById('payment_slip_input');
        input.value = '';
        document.getElementById('slipPreviewContainer').style.display = 'none';
        document.getElementById('uploadZone').style.display = 'block';
        document.getElementById('uploadZone').classList.remove('--has-file');
    }

    /* ── Copy to Clipboard with Toast ── */
    function copyToClipboard(text, btn) {
        navigator.clipboard.writeText(text).then(() => {
            // Toast notification
            const toast = document.getElementById('ckToast');
            toast.innerHTML = '<i class="fas fa-check-circle" style="margin-right:8px"></i> คัดลอกเลขบัญชีเรียบร้อย';
            toast.classList.add('--show');
            setTimeout(() => toast.classList.remove('--show'), 2500);

            // Button state
            if (btn) {
                const orig = btn.innerHTML;
                btn.innerHTML = '<i class="fas fa-check"></i> คัดลอกแล้ว';
                btn.classList.add('--copied');
                setTimeout(() => { btn.innerHTML = orig; btn.classList.remove('--copied'); }, 2000);
            }
        }).catch(err => {
            const toast = document.getElementById('ckToast');
            toast.innerHTML = '<i class="fas fa-copy" style="margin-right:8px"></i> เลขบัญชี: ' + text;
            toast.classList.add('--show');
            setTimeout(() => toast.classList.remove('--show'), 3000);
        });
    }

    /* ── Mobile Summary Toggle ── */
    function toggleSummary() {
        const body = document.getElementById('summaryBody');
        const arrow = document.getElementById('summaryArrow');
        body.classList.toggle('--collapsed');
        arrow.classList.toggle('--open');
    }

    /* ── Form Submit Loading State ── */
    document.getElementById('checkoutForm').addEventListener('submit', function(e) {
        const btn = document.getElementById('submitBtn');
        btn.classList.add('--loading');
        btn.disabled = true;
    });

    /* ── Drag & Drop for Upload Zone ── */
    const uploadZone = document.getElementById('uploadZone');
    if (uploadZone) {
        ['dragenter', 'dragover'].forEach(evt => {
            uploadZone.addEventListener(evt, (e) => {
                e.preventDefault();
                uploadZone.classList.add('--drag-over');
            });
        });
        ['dragleave', 'drop'].forEach(evt => {
            uploadZone.addEventListener(evt, (e) => {
                e.preventDefault();
                uploadZone.classList.remove('--drag-over');
            });
        });
        uploadZone.addEventListener('drop', (e) => {
            e.preventDefault();
            const input = document.getElementById('payment_slip_input');
            if (e.dataTransfer.files.length > 0) {
                input.files = e.dataTransfer.files;
                previewSlip(input);
            }
        });
    }
    </script>

    <?php require_once __DIR__ . '/../includes/footer.php'; ?>

<?php
} catch (PDOException $e) {
    // ดักจับ Error Database
    $pageTitle = "ระบบขัดข้องชั่วคราว (Database Error)";
    @require_once __DIR__ . '/../includes/header.php';
    ?>
    <div class="container my-5">
        <div class="alert alert-danger shadow-sm border-0">
            <h4 class="alert-heading fw-bold">⚠️ พบข้อผิดพลาดในการเชื่อมต่อฐานข้อมูล</h4>
            <hr>
            <p class="mb-0">ขออภัยในความไม่สะดวก ไม่สามารถโหลดหน้าชำระเงินได้ในขณะนี้ กรุณาลองใหม่อีกครั้งในภายหลัง</p>
            <!-- สามารถซ่อน Error Message ใน Production ได้ -->
            <p class="mt-3 mb-0 text-muted"><small><i>Details: <?php echo htmlspecialchars($e->getMessage()); ?></i></small></p>
        </div>
        <?php $siteUrl = defined('SITE_URL') ? rtrim(SITE_URL, '/') : ''; ?>
        <a href="<?php echo $siteUrl; ?>/index.php" class="btn btn-primary rounded-pill mt-3">กลับสู่หน้าหลัก</a>
    </div>
    <?php
    @require_once __DIR__ . '/../includes/footer.php';
} catch (Exception $e) {
    // ดักจับ Error ทั่วไป
    $pageTitle = "ระบบขัดข้อง (System Error)";
    @require_once __DIR__ . '/../includes/header.php';
    ?>
    <div class="container my-5">
        <div class="alert alert-danger shadow-sm border-0">
            <h4 class="alert-heading fw-bold">⚠️ เกิดข้อผิดพลาดของระบบ</h4>
            <hr>
            <p class="mb-0">ระบบเกิดข้อผิดพลาดบางประการ: <strong><?php echo htmlspecialchars($e->getMessage()); ?></strong></p>
        </div>
        <?php $siteUrl = defined('SITE_URL') ? rtrim(SITE_URL, '/') : ''; ?>
        <a href="<?php echo $siteUrl; ?>/index.php" class="btn btn-primary rounded-pill mt-3">กลับสู่หน้าหลัก</a>
    </div>
    <?php
    @require_once __DIR__ . '/../includes/footer.php';
}
?>
