<h4 class="fw-bold mb-4 text-dark"><i class="bi bi-credit-card me-2 text-primary"></i><?= __('checkout') ?></h4>

<form action="<?= url('/checkout/place-order') ?>" method="POST">
  <?= Security::csrfField() ?>

  <div class="row g-4">
    <!-- Left Column: Shipping Address & Store Order Items -->
    <div class="col-lg-8">
      <!-- 1. Shipping Address Section -->
      <div class="cargoo-card p-4 mb-4">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <h5 class="fw-bold mb-0 text-dark">
            <i class="bi bi-geo-alt-fill text-danger me-2"></i><?= __('shipping_address') ?>
          </h5>
          <a href="<?= url('/account/addresses') ?>" class="small text-primary text-decoration-none fw-semibold">
            + จัดการที่อยู่
          </a>
        </div>

        <?php if (empty($addresses)): ?>
          <div class="alert alert-warning border-0 small mb-0">
            <i class="bi bi-exclamation-triangle me-1"></i> คุณยังไม่มีที่อยู่จัดส่ง กรุณา <a href="<?= url('/account/addresses') ?>" class="alert-link">เพิ่มที่อยู่จัดส่งใหม่</a> ก่อนทำรายการ
          </div>
        <?php else: ?>
          <div class="d-flex flex-column gap-2">
            <?php foreach ($addresses as $idx => $addr): ?>
              <?php $isDef = ((int)$addr['is_default'] === 1 || $idx === 0); ?>
              <label class="p-3 border rounded-3 d-flex align-items-start gap-3 cursor-pointer address-select-label bg-white" style="cursor: pointer;">
                <input class="form-check-input mt-1" type="radio" name="shipping_address_id" value="<?= (int)$addr['id'] ?>" <?= $isDef ? 'checked' : '' ?> required>
                <div>
                  <div class="d-flex align-items-center gap-2 mb-1">
                    <strong class="text-dark"><?= e($addr['recipient_name']) ?></strong>
                    <span class="text-muted">|</span>
                    <span class="text-muted small"><?= e($addr['phone']) ?></span>
                    <?php if ((int)$addr['is_default'] === 1): ?>
                      <span class="badge badge-default-addr"><?= __('default_badge') ?></span>
                    <?php endif; ?>
                  </div>
                  <div class="text-secondary small">
                    <?= e($addr['house_number']) ?>
                    <?= !empty($addr['village']) ? ' ' . e($addr['village']) : '' ?>
                    <?= !empty($addr['alley']) ? ' ซอย ' . e($addr['alley']) : '' ?>
                    <?= !empty($addr['street']) ? ' ถนน ' . e($addr['street']) : '' ?>
                    ต.<?= e($addr['sub_district']) ?> อ.<?= e($addr['district']) ?> จ.<?= e($addr['province']) ?> <?= e($addr['postal_code']) ?>
                  </div>
                </div>
              </label>
            <?php endforeach; ?>
          </div>
        <?php endif; ?>
      </div>

      <!-- 2. Store Orders Items Breakdown -->
      <div class="d-flex flex-column gap-3 mb-4">
        <?php foreach ($stores as $store): ?>
          <div class="cargoo-card overflow-hidden">
            <div class="cargoo-card-header bg-light d-flex justify-content-between align-items-center py-2 px-3">
              <span class="fw-bold text-dark d-flex align-items-center gap-2">
                <i class="bi bi-shop text-primary"></i> <?= e($store['store_name']) ?>
              </span>
              <span class="small text-muted">ค่าส่ง: ฿<?= number_format($store['shipping_fee'], 2) ?></span>
            </div>

            <div class="p-3">
              <?php foreach ($store['selected_items'] as $item): ?>
                <div class="d-flex align-items-center justify-content-between gap-3 py-2 border-bottom">
                  <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($item['main_image'])): ?>
                        <img src="<?= product_image_url($item['main_image']) ?>" alt="<?= e($item['product_name']) ?>" class="w-100 h-100 object-fit-contain">
                      <?php else: ?>
                        <i class="bi bi-image text-muted"></i>
                      <?php endif; ?>
                    </div>
                    <div>
                      <span class="d-block text-dark fw-medium small text-truncate" style="max-width: 300px;"><?= e($item['product_name']) ?></span>
                      <?php if (!empty($item['variation_summary'])): ?>
                        <div class="my-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($item['variation_summary']) ?>
                          </span>
                        </div>
                      <?php endif; ?>
                      <small class="text-muted">฿<?= number_format((float)$item['price'], 2) ?> x <?= (int)$item['quantity'] ?></small>
                    </div>
                  </div>
                  <span class="fw-bold text-dark small">฿<?= number_format($item['subtotal'], 2) ?></span>
                </div>
              <?php endforeach; ?>

              <div class="d-flex justify-content-between align-items-center pt-2 small text-muted">
                <span>ยอดรวมร้านค้านี้ (รวมค่าส่ง):</span>
                <span class="fw-bold text-primary fs-6">฿<?= number_format($store['store_total'], 2) ?></span>
              </div>
            </div>
          </div>
        <?php endforeach; ?>
      </div>

      <!-- 3. Payment Method & Notes -->
      <div class="cargoo-card p-4 mb-4">
        <h5 class="fw-bold mb-3 text-dark">
          <i class="bi bi-wallet2 text-primary me-2"></i><?= __('payment_method') ?>
        </h5>

        <div class="row g-3 mb-4">
          <!-- 1. PromptPay -->
          <div class="col-md-4">
            <label class="p-3 border rounded-3 d-flex align-items-start gap-2 w-100 cursor-pointer bg-light h-100 payment-option-card">
              <input type="radio" name="payment_method" value="PromptPay" class="form-check-input mt-1" checked>
              <div class="flex-grow-1">
                <strong class="d-block text-dark small"><i class="bi bi-qr-code text-primary me-1"></i> พร้อมเพย์ (PromptPay)</strong>
                <small class="text-muted d-block mt-1" style="font-size: 0.75rem;">สแกน Official QR และดาวน์โหลดรูปภาพได้</small>
                <?php if (!empty($primaryPromptpay)): ?>
                  <span class="badge bg-white text-primary border mt-2" style="font-size: 0.7rem;">ID: <?= e($primaryPromptpay['promptpay_id'] ?? $primaryPromptpay['account_no']) ?></span>
                <?php endif; ?>
              </div>
            </label>
          </div>

          <!-- 2. Mobile Banking -->
          <div class="col-md-4">
            <label class="p-3 border rounded-3 d-flex align-items-start gap-2 w-100 cursor-pointer bg-white h-100 payment-option-card">
              <input type="radio" name="payment_method" value="BankTransfer" class="form-check-input mt-1">
              <div class="flex-grow-1">
                <strong class="d-block text-dark small"><i class="bi bi-bank text-primary me-1"></i> Mobile Banking</strong>
                <small class="text-muted d-block mt-1" style="font-size: 0.75rem;">โอนผ่านแอปธนาคาร / บัญชีธนาคาร</small>
                <?php if (!empty($primaryBank)): ?>
                  <span class="badge bg-light text-dark border mt-2" style="font-size: 0.7rem;"><?= e($primaryBank['bank_name']) ?></span>
                <?php endif; ?>
              </div>
            </label>
          </div>

          <!-- 3. Cash on Delivery (COD) -->
          <div class="col-md-4">
            <label class="p-3 border rounded-3 d-flex align-items-start gap-2 w-100 cursor-pointer bg-white h-100 payment-option-card">
              <input type="radio" name="payment_method" value="COD" class="form-check-input mt-1">
              <div class="flex-grow-1">
                <strong class="d-block text-dark small"><i class="bi bi-truck text-success me-1"></i> เก็บเงินปลายทาง (COD)</strong>
                <small class="text-muted d-block mt-1" style="font-size: 0.75rem;">ชำระเงินสดเมื่อได้รับพัสดุจากพนักงานขนส่ง</small>
                <span class="badge bg-success-subtle text-success border mt-2" style="font-size: 0.7rem;">สะดวก ปลอดภัย</span>
              </div>
            </label>
          </div>
        </div>

        <div class="mb-0">
          <label for="orderNote" class="form-label small fw-bold text-muted"><?= __('order_notes') ?></label>
          <textarea name="note" id="orderNote" class="form-control form-control-sm" rows="2" placeholder="ระบุข้อความพิเศษถึงผู้ขาย (ถ้ามี)"></textarea>
        </div>
      </div>
    </div>

    <!-- Right Column: Checkout Final Summary -->
    <div class="col-lg-4">
      <div class="cargoo-card p-4 position-sticky" style="top: 80px;">
        <h5 class="fw-bold text-dark mb-3"><?= __('order_summary') ?></h5>

        <div class="d-flex justify-content-between align-items-center mb-2 small text-muted">
          <span>ยอดรวมสินค้า</span>
          <span class="text-dark fw-medium">฿<?= number_format($subtotal, 2) ?></span>
        </div>

        <div class="d-flex justify-content-between align-items-center mb-3 small text-muted">
          <span><?= __('shipping_fee') ?></span>
          <span class="text-dark fw-medium">฿<?= number_format($total_shipping, 2) ?></span>
        </div>

        <hr class="my-3">

        <div class="d-flex justify-content-between align-items-center mb-4">
          <span class="fw-bold text-dark fs-6"><?= __('total_payment') ?></span>
          <span class="fs-4 fw-bold text-primary">฿<?= number_format($grand_total, 2) ?></span>
        </div>

        <button type="submit" class="btn btn-cargoo-primary w-100 py-3 fs-6 fw-bold">
          <i class="bi bi-shield-check me-1"></i> <?= __('place_order_btn') ?>
        </button>

        <p class="text-muted small text-center mt-3 mb-0" style="font-size: 0.75rem;">
          <i class="bi bi-lock me-1"></i> ธุรกรรมปลอดภัยด้วย CARGOO Buyer Protection
        </p>
      </div>
    </div>
  </div>
</form>
