<?php
/**
 * Customer Payment Page
 * Route: GET /payment/{order_no}
 */
$isPromptPay    = ($payment['payment_method'] === 'PromptPay');
$isBankTransfer = ($payment['payment_method'] === 'BankTransfer');
$isCOD          = ($payment['payment_method'] === 'COD');
$isPending      = ($payment['payment_status'] === 'pending');
$isAwaiting     = ($payment['payment_status'] === 'awaiting_verification');
$hasPendingSlip = !empty(array_filter($payment['attempts'] ?? [], fn($a) => $a['status'] === 'pending'));

$statusLabels = [
    'pending'                => ['label' => 'รอชำระเงิน', 'class' => 'payment-status-pending', 'icon' => 'hourglass-split'],
    'awaiting_verification'  => ['label' => 'รอตรวจสอบสลิป', 'class' => 'payment-status-awaiting', 'icon' => 'clock-history'],
    'confirmed'              => ['label' => 'ชำระเงินแล้ว', 'class' => 'payment-status-confirmed', 'icon' => 'check-circle-fill'],
    'failed'                 => ['label' => 'ชำระเงินไม่สำเร็จ', 'class' => 'payment-status-failed', 'icon' => 'x-circle-fill'],
    'expired'                => ['label' => 'หมดอายุ', 'class' => 'payment-status-expired', 'icon' => 'exclamation-circle-fill'],
    'cancelled'              => ['label' => 'ยกเลิกแล้ว', 'class' => 'payment-status-cancelled', 'icon' => 'slash-circle'],
];
$statusInfo = $statusLabels[$payment['payment_status']] ?? ['label' => $payment['payment_status'], 'class' => 'badge bg-light text-dark', 'icon' => 'circle-fill'];
$expiresTs  = strtotime($payment['expires_at']);
$timeLeft   = max(0, $expiresTs - time());

// Find last rejected attempt if any
$lastAttempt = !empty($payment['attempts']) ? end($payment['attempts']) : null;
$lastRejectedReason = ($lastAttempt && $lastAttempt['status'] === 'rejected') ? ($lastAttempt['reject_reason'] ?? 'ข้อมูลสลิปไม่ถูกต้อง') : null;
?>
<style>
.payment-status-pending { background: #fff8e1; color: #b45309; border: 1px solid #fde68a; }
.payment-status-awaiting { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.payment-status-confirmed { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.payment-status-failed, .payment-status-expired, .payment-status-cancelled { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }

.payment-card { background: #fff; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.account-box { background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 12px; padding: 24px; text-align: center; }
.account-number-box { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 16px; display: inline-flex; align-items: center; gap: 12px; }
.account-number { font-size: 1.4rem; font-weight: 800; letter-spacing: 1.5px; color: #0f172a; font-family: 'Courier New', monospace; }
.slip-drop-zone { border: 2px dashed #3b82f6; border-radius: 12px; padding: 36px 20px; text-align: center; cursor: pointer; transition: all .2s; background: #f8faff; }
.slip-drop-zone:hover, .slip-drop-zone.dragover { border-color: #1d4ed8; background: #eff6ff; }
.attempt-row { border-left: 3px solid #e2e8f0; padding-left: 14px; }
.attempt-row.approved { border-left-color: #22c55e; }
.attempt-row.rejected { border-left-color: #ef4444; }
.attempt-row.pending  { border-left-color: #f59e0b; }
.countdown-box { background: linear-gradient(135deg, #1e293b 0%, #2563eb 100%); color: #fff; border-radius: 10px; padding: 14px 20px; }
.copy-btn { border-radius: 6px; font-size: 0.8rem; font-weight: 600; padding: 4px 10px; transition: all .15s; }
.copy-btn:hover { transform: translateY(-1px); }
</style>

<div class="container py-4" style="max-width: 880px;">

  <!-- Breadcrumb -->
  <nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb small mb-0">
      <li class="breadcrumb-item"><a href="<?= url('/account/orders') ?>" class="text-primary text-decoration-none">คำสั่งซื้อของฉัน</a></li>
      <li class="breadcrumb-item active"><?= e($payment['order_no']) ?></li>
    </ol>
  </nav>

  <!-- Page Header -->
  <div class="d-flex flex-wrap justify-content-between align-items-start mb-4 gap-2">
    <div>
      <h4 class="fw-bold mb-1 text-dark"><i class="bi bi-credit-card me-2 text-primary"></i>ชำระเงิน</h4>
      <p class="text-muted small mb-0">หมายเลขคำสั่งซื้อ <code class="text-primary fw-bold">#<?= e($payment['order_no']) ?></code></p>
    </div>
    <span class="badge rounded-pill px-3 py-2 <?= $statusInfo['class'] ?>" style="font-size: .85rem;">
      <i class="bi bi-<?= $statusInfo['icon'] ?> me-1"></i><?= $statusInfo['label'] ?>
    </span>
  </div>

  <div class="row g-4">
    <!-- Left: Payment Info & Slip Upload -->
    <div class="col-lg-7">

      <!-- Amount Summary Card -->
      <div class="payment-card p-4 mb-4">
        <h6 class="fw-bold text-dark mb-3"><i class="bi bi-receipt me-2 text-primary"></i>สรุปยอดการชำระเงิน</h6>
        <div class="d-flex justify-content-between align-items-center py-2 border-bottom">
          <span class="text-muted small">ยอดที่ต้องชำระ</span>
          <div class="d-flex align-items-center gap-2">
            <span class="fw-bold fs-4 text-primary">฿<?= number_format((float)$payment['amount'], 2) ?></span>
            <button type="button" class="btn btn-outline-primary btn-sm copy-btn" onclick="copyText('<?= number_format((float)$payment['amount'], 2, '.', '') ?>', this)" title="คัดลอกยอดเงิน">
              <i class="bi bi-copy me-1"></i>คัดลอกยอด
            </button>
          </div>
        </div>
        <div class="d-flex justify-content-between align-items-center pt-2 small text-muted">
          <span>วิธีการชำระเงิน</span>
          <span class="fw-medium text-dark">
            <?php if ($isPromptPay): ?><i class="bi bi-qr-code text-primary me-1"></i>พร้อมเพย์ / PromptPay QR
            <?php elseif ($isBankTransfer): ?><i class="bi bi-bank text-primary me-1"></i>โอนผ่านบัญชีธนาคาร (Bank Transfer)
            <?php else: ?><i class="bi bi-truck text-success me-1"></i>เก็บเงินปลายทาง (COD)
            <?php endif; ?>
          </span>
        </div>
      </div>

      <!-- Countdown Timer (only for pending non-COD) -->
      <?php if (!$isCOD && $isPending): ?>
        <div class="countdown-box mb-4">
          <div class="d-flex justify-content-between align-items-center">
            <div>
              <div class="small opacity-75 mb-1"><i class="bi bi-clock me-1"></i>กรุณาชำระเงินและแนบสลิปภายใน</div>
              <div id="countdownDisplay" class="fw-bold fs-4 font-monospace">--:--</div>
            </div>
            <i class="bi bi-hourglass-split fs-1 opacity-50"></i>
          </div>
        </div>
        <script>
          (function() {
            const exp = <?= $expiresTs ?> * 1000;
            function tick() {
              const diff = Math.max(0, Math.floor((exp - Date.now()) / 1000));
              const m = String(Math.floor(diff / 60)).padStart(2,'0');
              const s = String(diff % 60).padStart(2,'0');
              const el = document.getElementById('countdownDisplay');
              if (el) el.textContent = m + ':' + s;
              if (diff === 0 && el) { 
                const box = el.closest('.countdown-box');
                if (box) box.style.background = '#dc2626'; 
                el.textContent = 'หมดเวลาชำระเงิน'; 
              }
            }
            tick();
            setInterval(tick, 1000);
          })();
        </script>
      <?php endif; ?>

      <!-- Payment Method Receiving Account Card -->
      <?php if ($isPromptPay): ?>
        <?php $ppId = $payment['promptpay_id'] ?? $payment['account_number'] ?? '0955021100'; ?>
        <div class="payment-card p-4 mb-4">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <h6 class="fw-bold text-dark mb-0"><i class="bi bi-qr-code me-2 text-primary"></i>พร้อมเพย์ / PromptPay QR Code</h6>
            <span class="badge bg-primary-subtle text-primary border">Official Marketplace QR</span>
          </div>

          <div class="account-box">
            <!-- Official PromptPay QR Asset -->
            <div class="mb-3 text-center">
              <img src="<?= asset('/assets/images/payment/promtpay.png') ?>"
                   alt="PromptPay QR Code" class="rounded-3 shadow-sm mb-2"
                   style="max-width: 250px; width: 100%; height: auto; border: 1px solid #cbd5e1; display: inline-block;">
              <div class="d-flex justify-content-center gap-2 mt-2">
                <a href="<?= asset('/assets/images/payment/promtpay.png') ?>" download="promtpay.png" class="btn btn-outline-primary btn-sm copy-btn px-3">
                  <i class="bi bi-download me-1"></i> บันทึกรูปภาพ QR Code
                </a>
                <a href="<?= asset('/assets/images/payment/promtpay.png') ?>" target="_blank" class="btn btn-light btn-sm copy-btn border px-3 text-dark">
                  <i class="bi bi-arrows-fullscreen me-1"></i> ดูภาพขนาดเต็ม
                </a>
              </div>
            </div>

            <!-- Transfer Amount Guidance -->
            <div class="p-3 bg-white rounded-3 border mb-3 text-start">
              <div class="d-flex justify-content-between align-items-center mb-2 flex-wrap gap-2">
                <span class="text-muted small">ยอดเงินที่ต้องกรอกในแอปธนาคาร:</span>
                <div class="d-flex align-items-center gap-2">
                  <span class="fw-bold fs-4 text-primary font-monospace">฿<?= number_format((float)$payment['amount'], 2) ?></span>
                  <button type="button" class="btn btn-outline-primary btn-sm copy-btn" onclick="copyText('<?= number_format((float)$payment['amount'], 2, '.', '') ?>', this)" title="คัดลอกยอดเงิน">
                    <i class="bi bi-copy me-1"></i>คัดลอกยอด
                  </button>
                </div>
              </div>
              <div class="alert alert-info py-2 px-3 small mb-0 border-info-subtle bg-info-subtle text-dark">
                <i class="bi bi-info-circle-fill text-primary me-1"></i>
                <strong>คำแนะนำ:</strong> กรุณาสแกน QR Code ด้วยแอปพลิเคชันธนาคาร จากนั้น<strong>กรอกจำนวนเงินด้วยตนเอง</strong> (฿<?= number_format((float)$payment['amount'], 2) ?>) ให้ตรงกับยอดที่กำหนด แล้วทำการอัปโหลดสลิปหลักฐานการโอนเงินด้านล่าง
              </div>
            </div>

            <div class="row g-2 text-start small">
              <div class="col-sm-6">
                <div class="p-2 bg-white rounded border">
                  <span class="text-muted d-block">ชื่อบัญชีปลายทาง:</span>
                  <strong class="text-dark"><?= e($payment['account_name'] ?? 'นาย ชินโชติ ณ วิไลทอง') ?></strong>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="p-2 bg-white rounded border d-flex justify-content-between align-items-center">
                  <div>
                    <span class="text-muted d-block">PromptPay ID:</span>
                    <strong class="text-dark font-monospace"><?= e($ppId) ?></strong>
                  </div>
                  <button type="button" class="btn btn-light btn-sm copy-btn border py-0 px-2" onclick="copyText('<?= e($ppId) ?>', this)">
                    <i class="bi bi-copy"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

      <?php elseif ($isBankTransfer && !empty($payment['account_number'])): ?>
        <div class="payment-card p-4 mb-4">
          <h6 class="fw-bold text-dark mb-3"><i class="bi bi-bank me-2 text-primary"></i>ข้อมูลบัญชีธนาคารปลายทาง</h6>
          <div class="account-box">
            <div class="text-muted small mb-1">ธนาคาร</div>
            <div class="fw-bold text-dark fs-6 mb-3">
              <i class="bi bi-building me-1 text-primary"></i><?= e($payment['bank_name'] ?? 'ธนาคารกสิกรไทย (KBANK)') ?>
            </div>

            <div class="text-muted small mb-1">ชื่อบัญชี</div>
            <div class="fw-bold text-dark mb-3"><?= e($payment['account_name'] ?? 'บริษัท คาร์กู มาร์เก็ตเพลส จำกัด') ?></div>

            <div class="text-muted small mb-1">เลขที่บัญชี</div>
            <div class="account-number-box mb-3">
              <span class="account-number"><?= e($payment['account_number']) ?></span>
              <button type="button" class="btn btn-primary btn-sm copy-btn" onclick="copyText('<?= str_replace(['-', ' '], '', e($payment['account_number'])) ?>', this)">
                <i class="bi bi-copy me-1"></i>คัดลอกเลขบัญชี
              </button>
            </div>

            <div class="p-2 rounded bg-light border text-primary fw-semibold small d-inline-flex align-items-center gap-2">
              <span>ยอดเงินที่ต้องโอน: <strong>฿<?= number_format((float)$payment['amount'], 2) ?></strong></span>
              <button type="button" class="btn btn-outline-primary btn-sm copy-btn py-0 px-2" onclick="copyText('<?= number_format((float)$payment['amount'], 2, '.', '') ?>', this)">
                คัดลอกยอด
              </button>
            </div>
          </div>
        </div>

      <?php elseif ($isCOD): ?>
        <div class="payment-card p-4 mb-4">
          <div class="d-flex align-items-start gap-3">
            <div class="rounded-circle bg-success-subtle p-3 text-success">
              <i class="bi bi-truck fs-3"></i>
            </div>
            <div>
              <h6 class="fw-bold text-dark mb-1">ชำระเงินสดเมื่อรับสินค้า (COD)</h6>
              <p class="text-muted small mb-0">คุณได้เลือกชำระเงินปลายทาง กรุณาเตรียมเงินสดจำนวน <strong class="text-primary">฿<?= number_format((float)$payment['amount'], 2) ?></strong> ให้พอดีเมื่อพนักงานนำส่งพัสดุ</p>
            </div>
          </div>
        </div>
      <?php else: ?>
        <div class="alert alert-warning small">ยังไม่มีข้อมูลบัญชีรับเงิน กรุณาติดต่อฝ่ายสนับสนุน</div>
      <?php endif; ?>

      <!-- Status Notice: Awaiting Verification -->
      <?php if ($isAwaiting || $hasPendingSlip): ?>
        <div class="card border-primary-subtle bg-primary-subtle p-4 mb-4 shadow-sm">
          <div class="d-flex align-items-start gap-3">
            <div class="spinner-border spinner-border-sm text-primary mt-1" role="status"></div>
            <div>
              <h6 class="fw-bold text-primary mb-1">ระบบได้รับหลักฐานการชำระเงินแล้วและกำลังตรวจสอบ</h6>
              <p class="text-secondary small mb-0">
                ทีมงานกำลังตรวจสอบความถูกต้องของสลิปโอนเงิน โดยปกติใช้เวลาประมาณ 15-30 นาที เมื่อยืนยันเรียบร้อยแล้วระบบจะแจ้งเตือนและร้านค้าจะเริ่มจัดเตรียมสินค้าให้คุณทันที
              </p>
            </div>
          </div>
        </div>
      <?php endif; ?>

      <!-- Rejection Alert if last attempt was rejected -->
      <?php if ($lastRejectedReason && $isPending && !$hasPendingSlip): ?>
        <div class="alert alert-danger d-flex align-items-start gap-2 mb-4">
          <i class="bi bi-exclamation-triangle-fill fs-5 mt-1"></i>
          <div>
            <strong>สลิปก่อนหน้านี้ไม่ผ่านการอนุมัติ:</strong> <?= e($lastRejectedReason) ?><br>
            <span class="small">กรุณาตรวจสอบยอดเงินและบัญชีปลายทาง แล้วทำการอัปโหลดสลิปที่ถูกต้องใหม่อีกครั้ง</span>
          </div>
        </div>
      <?php endif; ?>

      <!-- Upload Slip Form (Visible only when pending and no pending slip currently awaiting verification) -->
      <?php if (!$isCOD && ($isPending || $payment['payment_status'] === 'failed') && !$hasPendingSlip): ?>
        <div class="payment-card p-4 mb-4">
          <h6 class="fw-bold text-dark mb-1"><i class="bi bi-upload me-2 text-primary"></i>แนบหลักฐานการโอนเงิน (Upload Slip)</h6>
          <p class="text-muted small mb-3">เมื่อโอนเงินเรียบร้อยแล้ว กรุณาแนบรูปภาพสลิปเพื่อยืนยันคำสั่งซื้อ</p>

          <form id="slipForm" enctype="multipart/form-data">
            <?= Security::csrfField() ?>
            <input type="hidden" name="order_no" value="<?= e($payment['order_no']) ?>">

            <div class="slip-drop-zone mb-3" id="dropZone" onclick="document.getElementById('slipFile').click()">
              <i class="bi bi-cloud-arrow-up-fill text-primary mb-2" style="font-size: 2.5rem;"></i>
              <div class="fw-bold text-dark mb-1">คลิกหรือลากไฟล์สลิปมาวางที่นี่</div>
              <div class="text-muted small">รองรับไฟล์ JPG, PNG, WEBP (ขนาดไม่เกิน 5MB)</div>
              
              <div id="previewWrap" class="mt-3 d-none">
                <img id="slipPreview" src="" alt="preview" class="rounded-3 shadow-sm" style="max-height: 200px; max-width: 100%; border: 1px solid #cbd5e1;">
                <div class="small text-muted mt-2" id="fileNameDisplay"></div>
              </div>
              <input type="file" id="slipFile" name="slip_image" accept="image/jpeg,image/png,image/webp" class="d-none" required>
            </div>

            <div class="mb-3">
              <label class="form-label small fw-bold text-muted">หมายเหตุเพิ่มเติม (ถ้ามี)</label>
              <textarea name="note" class="form-control form-control-sm" rows="2" placeholder="เช่น โอนจากบัญชีธนาคารกรุงเทพ เวลา 14:30 น."></textarea>
            </div>

            <div id="uploadError" class="alert alert-danger small d-none"></div>
            <div id="uploadSuccess" class="alert alert-success small d-none"></div>

            <button type="submit" class="btn btn-primary w-100 fw-bold py-2 shadow-sm" id="submitBtn">
              <i class="bi bi-send me-1"></i> ส่งสลิปเพื่อตรวจสอบการชำระเงิน
            </button>
          </form>
        </div>
      <?php endif; ?>

      <!-- Cancel Payment Button -->
      <?php if ($isPending && !$hasPendingSlip && !$isCOD): ?>
        <div class="text-start mb-4">
          <form action="<?= url('/payment/cancel') ?>" method="POST"
                onsubmit="return confirm('ยืนยันการยกเลิกการชำระเงินนี้หรือไม่? คำสั่งซื้อจะถูกยกเลิก');">
            <?= Security::csrfField() ?>
            <input type="hidden" name="payment_id" value="<?= (int)$payment['id'] ?>">
            <button type="submit" class="btn btn-link text-danger btn-sm p-0 text-decoration-none">
              <i class="bi bi-x-circle me-1"></i>ยกเลิกรายการชำระเงินนี้
            </button>
          </form>
        </div>
      <?php endif; ?>
    </div>

    <!-- Right: Attempt History Timeline -->
    <div class="col-lg-5">
      <div class="payment-card p-4 mb-3">
        <h6 class="fw-bold text-dark mb-3"><i class="bi bi-clock-history me-2 text-primary"></i>ประวัติการแนบสลิป</h6>
        <?php if (!empty($payment['attempts'])): ?>
          <div class="d-flex flex-column gap-3">
            <?php foreach (array_reverse($payment['attempts']) as $att): ?>
              <?php
                $ast = $att['status'];
                if ($ast === 'approved') {
                    $attClass = 'approved';
                    $attBadge = '<span class="badge bg-success"><i class="bi bi-check-circle-fill me-1"></i>ยืนยันแล้ว</span>';
                } elseif ($ast === 'rejected') {
                    $attClass = 'rejected';
                    $attBadge = '<span class="badge bg-danger"><i class="bi bi-x-circle-fill me-1"></i>ถูกปฏิเสธ</span>';
                } else {
                    $attClass = 'pending';
                    $attBadge = '<span class="badge bg-warning text-dark"><i class="bi bi-clock me-1"></i>รอตรวจสอบ</span>';
                }
              ?>
              <div class="attempt-row <?= $attClass ?> pb-2 border-bottom">
                <div class="d-flex justify-content-between align-items-start mb-1">
                  <span class="small fw-bold text-dark">การส่งสลิปครั้งที่ <?= (int)$att['attempt_no'] ?></span>
                  <?= $attBadge ?>
                </div>
                <div class="small text-muted mb-2"><i class="bi bi-calendar3 me-1"></i><?= date('d/m/Y H:i', strtotime($att['created_at'])) ?></div>
                
                <?php if (!empty($att['slip_image'])): ?>
                  <div class="mb-2">
                    <a href="<?= asset('/uploads/slips/' . e($att['slip_image'])) ?>" target="_blank"
                       class="d-inline-flex align-items-center gap-1 small text-primary text-decoration-none bg-light p-1 px-2 rounded border">
                      <i class="bi bi-image"></i> ดูภาพสลิปที่แนบ
                    </a>
                  </div>
                <?php endif; ?>

                <?php if (!empty($att['note'])): ?>
                  <div class="small text-muted mb-1">หมายเหตุ: <?= e($att['note']) ?></div>
                <?php endif; ?>

                <?php if (!empty($att['reject_reason'])): ?>
                  <div class="alert alert-danger py-1 px-2 small mb-0 mt-1">
                    <i class="bi bi-exclamation-circle me-1"></i><strong>เหตุผลที่ปฏิเสธ:</strong> <?= e($att['reject_reason']) ?>
                  </div>
                <?php endif; ?>
              </div>
            <?php endforeach; ?>
          </div>
        <?php else: ?>
          <div class="text-center py-4 text-muted">
            <i class="bi bi-inbox text-muted mb-2" style="font-size: 2rem;"></i>
            <p class="small mb-0">ยังไม่มีประวัติการอัปโหลดสลิป</p>
          </div>
        <?php endif; ?>
      </div>

      <!-- Quick Action Buttons -->
      <div class="d-grid gap-2">
        <a href="<?= url('/account/orders/' . e($payment['order_no'])) ?>" class="btn btn-outline-secondary btn-sm py-2">
          <i class="bi bi-box-seam me-1"></i>ดูรายละเอียดคำสั่งซื้อ
        </a>
      </div>
    </div>
  </div>
</div>

<script>
// Clipboard Copy Helper
function copyText(text, btnElement) {
  if (!navigator.clipboard) {
    const input = document.createElement('textarea');
    input.value = text;
    document.body.appendChild(input);
    input.select();
    document.execCommand('copy');
    document.body.removeChild(input);
  } else {
    navigator.clipboard.writeText(text);
  }

  const originalHtml = btnElement.innerHTML;
  btnElement.innerHTML = '<i class="bi bi-check2"></i> คัดลอกแล้ว!';
  btnElement.classList.remove('btn-primary', 'btn-outline-primary');
  btnElement.classList.add('btn-success');
  
  setTimeout(() => {
    btnElement.innerHTML = originalHtml;
    btnElement.classList.remove('btn-success');
    btnElement.classList.add('btn-primary');
  }, 2000);
}

(function () {
  // Drag & drop + preview
  const zone  = document.getElementById('dropZone');
  const input = document.getElementById('slipFile');
  const prev  = document.getElementById('slipPreview');
  const wrap  = document.getElementById('previewWrap');
  const nameDisplay = document.getElementById('fileNameDisplay');

  if (!zone || !input) return;

  function showPreview(file) {
    if (!file || !file.type.startsWith('image/')) return;
    const reader = new FileReader();
    reader.onload = e => { 
      prev.src = e.target.result; 
      wrap.classList.remove('d-none'); 
      if (nameDisplay) nameDisplay.textContent = file.name + ' (' + (file.size / 1024).toFixed(1) + ' KB)';
    };
    reader.readAsDataURL(file);
  }

  input.addEventListener('change', () => showPreview(input.files[0]));

  zone.addEventListener('dragover', e => { e.preventDefault(); zone.classList.add('dragover'); });
  zone.addEventListener('dragleave', () => zone.classList.remove('dragover'));
  zone.addEventListener('drop', e => {
    e.preventDefault();
    zone.classList.remove('dragover');
    const file = e.dataTransfer.files[0];
    if (file) {
      const dt = new DataTransfer();
      dt.items.add(file);
      input.files = dt.files;
      showPreview(file);
    }
  });

  // AJAX Submit
  const form    = document.getElementById('slipForm');
  const btn     = document.getElementById('submitBtn');
  const errBox  = document.getElementById('uploadError');
  const okBox   = document.getElementById('uploadSuccess');

  if (!form) return;

  form.addEventListener('submit', async e => {
    e.preventDefault();
    errBox.classList.add('d-none');
    okBox.classList.add('d-none');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>กำลังส่งสลิปเพื่อตรวจสอบ...';

    try {
      const fd = new FormData(form);
      const res = await fetch('<?= url('/payment/submit-slip') ?>', {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        body: fd
      });
      const data = await res.json();

      if (data.success) {
        okBox.textContent = data.message;
        okBox.classList.remove('d-none');
        btn.disabled = true;
        btn.innerHTML = '<i class="bi bi-check-lg me-1"></i>ส่งสลิปเรียบร้อยแล้ว';
        setTimeout(() => location.reload(), 1500);
      } else {
        errBox.textContent = data.message;
        errBox.classList.remove('d-none');
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-send me-1"></i> ส่งสลิปเพื่อตรวจสอบการชำระเงิน';
      }
    } catch {
      errBox.textContent = 'เกิดข้อผิดพลาดในการเชื่อมต่อ กรุณาลองใหม่อีกครั้ง';
      errBox.classList.remove('d-none');
      btn.disabled = false;
      btn.innerHTML = '<i class="bi bi-send me-1"></i> ส่งสลิปเพื่อตรวจสอบการชำระเงิน';
    }
  });
})();
</script>
