<div class="cargoo-card mb-4">
  <div class="cargoo-card-header d-flex flex-column flex-sm-row justify-content-between align-items-sm-center gap-2">
    <div>
      <a href="<?= url('/account/orders') ?>" class="text-primary text-decoration-none small fw-semibold d-block mb-1">
        <i class="bi bi-arrow-left me-1"></i> กลับไปหน้ารายการคำสั่งซื้อ
      </a>
      <h5 class="mb-0 fw-bold">คำสั่งซื้อหมายเลข <code>#<?= e($order['order_no']) ?></code></h5>
    </div>

    <div class="d-flex align-items-center gap-2 flex-wrap">
      <?php 
        $statusBadge = 'bg-secondary';
        $statusText = $order['order_status'];
        $canCancel = in_array($order['order_status'], ['pending_payment', 'awaiting_verification', 'payment_confirmed', 'preparing'], true);

        if ($order['order_status'] === 'pending_payment') { 
          if (($order['payment_status'] ?? '') === 'awaiting_verification') {
            $statusBadge = 'bg-info text-dark';
            $statusText  = 'รอตรวจสอบสลิป';
          } else {
            $statusBadge = 'bg-warning text-dark'; 
            $statusText  = __('status_pending_payment'); 
          }
        }
        elseif ($order['order_status'] === 'payment_confirmed') { $statusBadge = 'bg-info-subtle text-info-emphasis'; $statusText = 'ชำระเงินแล้ว (เตรียมจัดส่ง)'; }
        elseif ($order['order_status'] === 'preparing') { $statusBadge = 'bg-primary-subtle text-primary'; $statusText = __('status_preparing'); }
        elseif ($order['order_status'] === 'shipping') { $statusBadge = 'bg-primary'; $statusText = __('status_shipping'); }
        elseif ($order['order_status'] === 'completed') { $statusBadge = 'bg-success'; $statusText = __('status_completed'); }
        elseif ($order['order_status'] === 'cancelled') { $statusBadge = 'bg-danger'; $statusText = __('status_cancelled'); }
      ?>
      <span class="badge <?= $statusBadge ?> px-3 py-2 fs-6"><?= $statusText ?></span>

      <?php if ($canCancel): ?>
        <button type="button" class="btn btn-outline-danger btn-sm px-3 py-2" data-bs-toggle="modal" data-bs-target="#cancelOrderModal">
          <i class="bi bi-x-circle me-1"></i>ยกเลิกคำสั่งซื้อ
        </button>
      <?php endif; ?>
    </div>
  </div>

  <div class="cargoo-card-body">
    <!-- Cancelled Order Banner -->
    <?php if ($order['order_status'] === 'cancelled'): ?>
      <div class="alert alert-danger d-flex align-items-start gap-3 mb-4">
        <i class="bi bi-x-circle-fill fs-3 text-danger flex-shrink-0 mt-1"></i>
        <div class="flex-grow-1">
          <h6 class="fw-bold mb-1 text-danger">คำสั่งซื้อนี้ถูกยกเลิกแล้ว</h6>
          <div class="small text-muted mb-2">
            วันที่ทำรายการ: <?= date('d/m/Y H:i:s', strtotime($order['updated_at'] ?? $order['created_at'])) ?>
          </div>
          <?php if (!empty($order['note'])): ?>
            <div class="p-2 bg-white rounded border border-danger-subtle small text-dark mb-2">
              <span class="fw-semibold text-muted d-block mb-1">เหตุผลในการยกเลิก:</span>
              <div style="white-space: pre-line;"><?= e($order['note']) ?></div>
            </div>
          <?php endif; ?>
          <?php if (($order['payment_status'] ?? '') === 'refund_pending'): ?>
            <div class="badge bg-warning-subtle text-warning-emphasis border border-warning px-2 py-1">
              <i class="bi bi-arrow-counterclockwise me-1"></i>อยู่ระหว่างรอเจ้าหน้าที่ดำเนินการคืนเงิน (Refund Pending)
            </div>
          <?php elseif (($order['payment_status'] ?? '') === 'refunded'): ?>
            <div class="badge bg-success-subtle text-success border border-success px-2 py-1">
              <i class="bi bi-check-circle-fill me-1"></i>คืนเงินเรียบร้อยแล้ว (Refunded)
            </div>
          <?php endif; ?>
        </div>
      </div>
    <?php endif; ?>

    <?php if (($order['payment_status'] ?? '') === 'awaiting_verification' && $order['order_status'] !== 'cancelled'): ?>
      <div class="alert alert-info d-flex align-items-center justify-content-between mb-4 flex-wrap gap-2">
        <div class="d-flex align-items-center gap-2">
          <i class="bi bi-clock-history fs-4 text-primary"></i>
          <div>
            <strong>ระบบได้รับหลักฐานการชำระเงินแล้วและกำลังตรวจสอบ</strong>
            <div class="small text-muted">ทีมงานกำลังตรวจสอบความถูกต้องของสลิปโอนเงิน เมื่อยืนยันแล้วร้านค้าจะเริ่มจัดเตรียมสินค้า</div>
          </div>
        </div>
        <a href="<?= url('/payment/' . $order['order_no']) ?>" class="btn btn-outline-primary btn-sm px-3">
          <i class="bi bi-receipt me-1"></i>ดูข้อมูลสลิป
        </a>
      </div>
    <?php elseif ($order['order_status'] === 'pending_payment' && ($order['payment_method'] ?? '') !== 'COD'): ?>
      <div class="alert alert-warning d-flex align-items-center justify-content-between mb-4 flex-wrap gap-2">
        <div class="d-flex align-items-center gap-2">
          <i class="bi bi-wallet2 fs-4 text-warning"></i>
          <div>
            <strong>คำสั่งซื้อนี้รอการชำระเงิน</strong>
            <div class="small text-muted">กรุณาชำระเงินและแนบหลักฐานการโอนเพื่อให้ร้านค้าเริ่มจัดเตรียมสินค้า</div>
          </div>
        </div>
        <div class="d-flex gap-2">
          <button type="button" class="btn btn-outline-danger btn-sm px-3" data-bs-toggle="modal" data-bs-target="#cancelOrderModal">
            <i class="bi bi-x-circle me-1"></i>ยกเลิก
          </button>
          <a href="<?= url('/payment/' . $order['order_no']) ?>" class="btn btn-warning btn-sm px-4 fw-bold">
            <i class="bi bi-credit-card me-1"></i>ชำระเงินทันที
          </a>
        </div>
      </div>
    <?php endif; ?>

    <div class="row g-4 mb-4">
      <!-- Store Info -->
      <div class="col-md-6">
        <div class="p-3 border rounded-3 bg-light h-100">
          <h6 class="fw-bold text-dark mb-2"><i class="bi bi-shop me-1 text-primary"></i> ข้อมูลร้านค้า</h6>
          <p class="mb-1 fw-semibold"><?= e($order['store_name']) ?></p>
          <a href="<?= url('/shop/' . $order['store_slug']) ?>" class="small text-primary text-decoration-none">
            ดูหน้าร้านค้า <i class="bi bi-chevron-right"></i>
          </a>
        </div>
      </div>

      <!-- Shipping Address -->
      <div class="col-md-6">
        <div class="p-3 border rounded-3 bg-light h-100">
          <h6 class="fw-bold text-dark mb-2"><i class="bi bi-geo-alt-fill me-1 text-danger"></i> ที่อยู่ในการจัดส่ง</h6>
          <p class="small text-secondary mb-0" style="white-space: pre-line;"><?= e($order['delivery_address']) ?></p>
        </div>
      </div>
    </div>

    <!-- Order Items List -->
    <h6 class="fw-bold text-dark mb-3">รายการสินค้าในคำสั่งซื้อ</h6>
    <div class="table-responsive mb-4 border rounded-3">
      <table class="table align-middle mb-0">
        <thead class="table-light small">
          <tr>
            <th class="ps-3">สินค้า</th>
            <th class="text-center">ราคาต่อหน่วย</th>
            <th class="text-center">จำนวน</th>
            <th class="text-end <?= $order['order_status'] === 'completed' ? '' : 'pe-3' ?>">รวม</th>
            <?php if ($order['order_status'] === 'completed'): ?>
              <th class="text-end pe-3" style="width: 140px;">รีวิวสินค้า</th>
            <?php endif; ?>
          </tr>
        </thead>
        <tbody>
          <?php 
            $reviewModel = new Review();
            foreach ($order['items'] as $it): 
              $userReview = $order['order_status'] === 'completed' ? $reviewModel->fetchOne("SELECT id, rating FROM `reviews` WHERE `order_item_id` = :oi_id LIMIT 1", [':oi_id' => (int)$it['id']]) : null;
          ?>
            <tr>
              <td class="ps-3">
                <div class="d-flex align-items-center gap-3">
                  <div class="rounded-2 overflow-hidden border bg-light d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; flex-shrink: 0;">
                    <?php if (!empty($it['product_image'])): ?>
                      <img src="<?= product_image_url($it['product_image']) ?>" alt="<?= e($it['product_name']) ?>" class="w-100 h-100 object-fit-contain">
                    <?php else: ?>
                      <i class="bi bi-image text-muted"></i>
                    <?php endif; ?>
                  </div>
                  <div>
                    <?php if (!empty($it['product_slug'])): ?>
                      <a href="<?= url('/product/' . $it['product_slug']) ?>" class="fw-semibold text-dark text-decoration-none small d-block">
                        <?= e($it['product_name']) ?>
                      </a>
                    <?php else: ?>
                      <span class="fw-semibold text-dark small d-block"><?= e($it['product_name']) ?></span>
                    <?php endif; ?>

                    <?php if (!empty($it['variation_summary'])): ?>
                      <div class="mt-1">
                        <span class="badge bg-light text-secondary border fw-normal" style="font-size: 0.72rem;">
                          <i class="bi bi-tag-fill text-primary me-1"></i>ตัวเลือก: <?= e($it['variation_summary']) ?>
                        </span>
                      </div>
                    <?php endif; ?>
                  </div>
                </div>
              </td>
              <td class="text-center small">฿<?= number_format((float)$it['unit_price'], 2) ?></td>
              <td class="text-center small fw-bold"><?= (int)$it['quantity'] ?></td>
              <td class="text-end <?= $order['order_status'] === 'completed' ? '' : 'pe-3' ?> fw-bold text-dark small">฿<?= number_format((float)$it['subtotal'], 2) ?></td>
              <?php if ($order['order_status'] === 'completed'): ?>
                <td class="text-end pe-3">
                  <?php if ($userReview): ?>
                    <a href="<?= url('/account/reviews') ?>" class="btn btn-outline-secondary btn-sm py-1 px-2" style="font-size: 0.75rem;">
                      <i class="bi bi-star-fill text-warning me-1"></i><?= (int)$userReview['rating'] ?>.0 ดูรีวิว
                    </a>
                  <?php else: ?>
                    <a href="<?= url('/reviews/create/' . (int)$it['id']) ?>" class="btn btn-cargoo-primary btn-sm py-1 px-2 fw-bold" style="font-size: 0.75rem;">
                      <i class="bi bi-star me-1"></i> เขียนรีวิว
                    </a>
                  <?php endif; ?>
                </td>
              <?php endif; ?>
            </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
    </div>

    <!-- Tracking Info if available -->
    <?php if (!empty($order['tracking_no'])): ?>
      <div class="alert alert-info d-flex align-items-center gap-2 mb-4">
        <i class="bi bi-truck fs-4 text-primary"></i>
        <div>
          <strong><?= __('tracking_number') ?>:</strong> <code><?= e($order['tracking_no']) ?></code>
          <span class="small text-muted ms-2">(จัดส่งโดย <?= e($order['shipping_method'] ?? 'Standard Delivery') ?>)</span>
        </div>
      </div>
    <?php endif; ?>

    <!-- Summary Details -->
    <div class="row justify-content-between align-items-end g-3">
      <div class="col-md-6">
        <?php if ($canCancel): ?>
          <div class="p-3 bg-light rounded-3 border">
            <h6 class="small fw-bold text-dark mb-1"><i class="bi bi-info-circle text-primary me-1"></i>เงื่อนไขการยกเลิกคำสั่งซื้อ</h6>
            <p class="small text-muted mb-2">
              คุณสามารถยกเลิกคำสั่งซื้อได้ในขณะที่ร้านค้ายังไม่ได้จัดส่งพัสดุ หากชำระเงินแล้ว ระบบจะส่งคำขอคืนเงินเข้าสู่ขั้นตอนตรวจสอบอัตโนมัติ
            </p>
            <button type="button" class="btn btn-outline-danger btn-sm" data-bs-toggle="modal" data-bs-target="#cancelOrderModal">
              <i class="bi bi-x-circle me-1"></i>ยกเลิกคำสั่งซื้อนี้
            </button>
          </div>
        <?php endif; ?>
      </div>

      <div class="col-md-5">
        <div class="p-3 bg-light rounded-3 border">
          <div class="d-flex justify-content-between mb-2 small text-muted">
            <span>ยอดรวมสินค้า</span>
            <span class="text-dark fw-medium">฿<?= number_format((float)$order['subtotal'], 2) ?></span>
          </div>
          <div class="d-flex justify-content-between mb-2 small text-muted">
            <span><?= __('shipping_fee') ?></span>
            <span class="text-dark fw-medium">฿<?= number_format((float)$order['shipping_fee'], 2) ?></span>
          </div>
          <hr class="my-2">
          <div class="d-flex justify-content-between mb-2">
            <span class="fw-bold text-dark"><?= __('total_payment') ?></span>
            <span class="fw-bold text-primary fs-5">฿<?= number_format((float)$order['total_amount'], 2) ?></span>
          </div>
          <div class="small text-muted mt-2">
            <span>วิธีการชำระเงิน: <strong><?= e($order['payment_method'] ?? 'PromptPay') ?></strong></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Cancel Order Modal -->
<?php if ($canCancel): ?>
  <div class="modal fade" id="cancelOrderModal" tabindex="-1" aria-labelledby="cancelOrderModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content rounded-3 shadow">
        <div class="modal-header border-bottom py-3">
          <h5 class="modal-title fw-bold text-danger" id="cancelOrderModalLabel">
            <i class="bi bi-exclamation-triangle-fill me-2"></i>ยกเลิกคำสั่งซื้อ #<?= e($order['order_no']) ?>
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <form action="<?= url('/account/orders/' . $order['order_no'] . '/cancel') ?>" method="POST">
          <?= Security::csrfField() ?>
          <input type="hidden" name="redirect" value="<?= url('/account/orders/' . $order['order_no']) ?>">

          <div class="modal-body p-4">
            <?php 
              $isPaidOrder = in_array($order['order_status'], ['payment_confirmed', 'preparing'], true) 
                             || in_array(($order['payment_status'] ?? ''), ['confirmed', 'paid'], true);
            ?>

            <?php if ($isPaidOrder): ?>
              <div class="alert alert-warning small mb-3">
                <i class="bi bi-info-circle-fill me-1"></i> <strong>คำสั่งซื้อนี้ได้รับการชำระเงินแล้ว</strong>
                <div class="mt-1 text-muted">เมื่อคุณยกเลิกคำสั่งซื้อ ระบบจะสร้าง <strong>คำขอคืนเงิน (Refund)</strong> จำนวน <strong>฿<?= number_format((float)$order['total_amount'], 2) ?></strong> ให้เจ้าหน้าที่ตรวจสอบและดำเนินการโอนเงินคืนตามบัญชีของคุณ</div>
              </div>
            <?php else: ?>
              <div class="alert alert-secondary small mb-3">
                <i class="bi bi-info-circle me-1"></i> คำสั่งซื้อจะถูกยกเลิกทันที และจำนวนสินค้าจะถูกคืนกลับเข้าสู่สต็อก
              </div>
            <?php endif; ?>

            <div class="mb-3">
              <label class="form-label small fw-bold text-dark">โปรดเลือกเหตุผลในการยกเลิก <span class="text-danger">*</span></label>
              <div class="d-flex flex-column gap-2">
                <label class="form-check p-2 border rounded-2 bg-light d-flex align-items-center gap-2 cursor-pointer">
                  <input class="form-check-input ms-1" type="radio" name="cancel_reason_preset" value="ต้องการเปลี่ยนที่อยู่ในการจัดส่ง" checked>
                  <span class="form-check-label small">ต้องการเปลี่ยนที่อยู่ในการจัดส่ง</span>
                </label>
                <label class="form-check p-2 border rounded-2 bg-light d-flex align-items-center gap-2 cursor-pointer">
                  <input class="form-check-input ms-1" type="radio" name="cancel_reason_preset" value="ต้องการเปลี่ยนสินค้าหรือตัวเลือกสินค้า">
                  <span class="form-check-label small">ต้องการเปลี่ยนสินค้าหรือตัวเลือกสินค้า</span>
                </label>
                <label class="form-check p-2 border rounded-2 bg-light d-flex align-items-center gap-2 cursor-pointer">
                  <input class="form-check-input ms-1" type="radio" name="cancel_reason_preset" value="เปลี่ยนใจ / ไม่ต้องการสินค้านี้แล้ว">
                  <span class="form-check-label small">เปลี่ยนใจ / ไม่ต้องการสินค้านี้แล้ว</span>
                </label>
                <label class="form-check p-2 border rounded-2 bg-light d-flex align-items-center gap-2 cursor-pointer">
                  <input class="form-check-input ms-1" type="radio" name="cancel_reason_preset" value="สั่งซื้อซ้ำซ้อน">
                  <span class="form-check-label small">สั่งซื้อซ้ำซ้อน</span>
                </label>
                <label class="form-check p-2 border rounded-2 bg-light d-flex align-items-center gap-2 cursor-pointer">
                  <input class="form-check-input ms-1" type="radio" name="cancel_reason_preset" value="อื่นๆ">
                  <span class="form-check-label small">อื่นๆ (โปรดระบุรายละเอียดด้านล่าง)</span>
                </label>
              </div>
            </div>

            <div class="mb-2">
              <label for="cancelCustomReason" class="form-label small fw-bold text-dark">รายละเอียดเพิ่มเติม (ไม่บังคับ)</label>
              <textarea name="cancel_reason_custom" id="cancelCustomReason" class="form-control form-control-sm" rows="2" placeholder="ระบุเหตุผลเพิ่มเติม เพื่อช่วยให้เราปรับปรุงบริการ..."></textarea>
            </div>
          </div>

          <div class="modal-footer bg-light py-2 px-4 border-top">
            <button type="button" class="btn btn-outline-secondary btn-sm px-3" data-bs-dismiss="modal">ปิดหน้าต่าง</button>
            <button type="submit" class="btn btn-danger btn-sm px-4 fw-bold">
              <i class="bi bi-x-circle me-1"></i>ยืนยันการยกเลิกคำสั่งซื้อ
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
<?php endif; ?>
