<?php
$this->assign('title', 'Checkout');
?>
<style>
.page{max-width:1160px;margin:28px auto;padding:0 16px}
.grid{display:grid;grid-template-columns:1.6fr .9fr;gap:36px}
.card{background:#fff;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.list{padding:6px 18px}
.row{display:grid;grid-template-columns:120px 1fr 140px 80px 28px;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid #eee}
.row:last-child{border-bottom:0}
.img{width:100px;height:120px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #eee;border-radius:12px;overflow:hidden}
.img img{max-width:100%;max-height:100%;object-fit:contain}
.name{font-weight:600;margin:0 0 6px}
.meta{color:#6d5f54;font-size:14px}
.price{font-weight:700}
.trash{background:none;border:0;font-size:18px;cursor:pointer;opacity:.7}
.qtybox{display:flex;align-items:center;gap:8px}
.qtybox form{display:inline}
.qtybtn{width:36px;height:32px;border:1px solid #d9cfc2;border-radius:8px;background:#fff;cursor:pointer}
.qtynum{min-width:28px;text-align:center}
.panel{padding:20px}
.panel h3{margin:0 0 14px}
.sumrow{display:flex;justify-content:space-between;margin:8px 0}
.total{font-weight:800;font-size:20px}
.btn{display:block;width:100%;text-align:center;background:#3b302a;color:#fff;border:0;border-radius:12px;padding:14px 18px;font-size:16px;cursor:pointer}
.note, .promo{display:flex;gap:12px;align-items:center;margin-top:16px}
.note input,.promo input{flex:1;border:1px solid #e3d7c3;border-radius:10px;padding:10px 12px}
.helper{color:#6d5f54;font-size:13px;margin-top:10px;display:flex;align-items:center;gap:8px}
@media(max-width:980px){.grid{grid-template-columns:1fr}}
@media(max-width:600px){
  .row{
    grid-template-columns:80px 1fr;
    gap:12px;
  }
  .price, .qtybox, .trash{
    grid-column:2;
  }
  .qtybox{
    justify-content:flex-start;
  }
  .price{
    justify-self:flex-end;
  }
  .trash{
    justify-self:flex-end;
  }
  .img{
    width:80px;
    height:90px;
  }
  h1{
    font-size:22px;
    text-align:center;
  }
  .page{
    padding:0 10px;
  }
  .card{
    border-radius:10px;
  }
}

</style>

<div class="page">
  <h1>My cart</h1>
  <?php if (empty($items)): ?>
    <div class="card panel">
      Your cart is empty.
      <div style="margin-top:12px">
        <?= $this->Html->link('Continue Shopping', ['controller'=>'ProductBrowser','action'=>'index'], ['class'=>'btn', 'style'=>'width:auto;display:inline-block']) ?>
      </div>
    </div>
    <br><br><br><br><br><br><br><br><br>
  <?php else: ?>
    <div class="grid">
      <!-- LEFT: items -->
      <div class="card list">
        <?php foreach ($items as $it): $p = $it['product']; ?>
  <?php
    $images = [];
    if (!empty($p->image_url)) {
        if (is_array($p->image_url)) $images = $p->image_url;
        else $images = json_decode($p->image_url, true);
    }
    $firstImage = isset($images[0]) ? str_replace('\\','',$images[0]) : null;
    if ($firstImage) $firstImage = 'products/' . basename($firstImage);
    elseif (!empty($p->image)) $firstImage = 'products/' . ltrim((string)$p->image, '/');
    else $firstImage = '/img/placeholder.png';
  ?>
  <div class="row">
    <div class="img">
      <img src="<?= $this->Url->image($firstImage) ?>" alt="<?= h($p->name) ?>">
    </div>

    <div>
      <div class="name"><?= h($p->name) ?></div>
      <?php if (isset($p->sale_price) && $p->sale_price !== null && (float)$p->sale_price < (float)$p->price): ?>
        <div class="meta"><s>$<?= number_format((float)$p->price,2) ?></s> $<?= number_format((float)$p->sale_price,2) ?></div>
      <?php else: ?>
        <div class="meta">$<?= number_format((float)$it['price'],2) ?></div>
      <?php endif; ?>
      <div class="meta">Weight: <?= h($p->weight ?? '250g') ?></div>
    </div>

      <div class="qtybox">
    <!-- minus -->
    <?= $this->Form->create(null, ['url' => ['action' => 'checkout']]) ?>
    <?= $this->Form->hidden('action', ['value' => 'update_qty']) ?>
    <?= $this->Form->hidden('id', ['value' => $p->id]) ?>
    <?= $this->Form->hidden('qty', ['value' => max(1, $it['qty'] - 1)]) ?>
    <button class="qtybtn" <?= $it['qty'] <= 1 ? 'disabled' : '' ?>>−</button>
    <?= $this->Form->end() ?>

    <div class="qtynum"><?= h($it['qty']) ?></div>

    <!-- plus -->
    <?= $this->Form->create(null, [
        'url' => ['action' => 'checkout'],
        'onsubmit' => "if({$it['qty']} >= {$p->stock}){alert('reach limit');return false;}"
    ]) ?>
    <?= $this->Form->hidden('action', ['value' => 'update_qty']) ?>
    <?= $this->Form->hidden('id', ['value' => $p->id]) ?>
    <?= $this->Form->hidden('qty', ['value' => min($it['qty'] + 1, $p->stock)]) ?>
    <button class="qtybtn" <?= $it['qty'] >= $p->stock ? 'disabled' : '' ?>>+</button>
    <?= $this->Form->end() ?>
</div>


    <div class="price">$<?= number_format((float)$it['subtotal'],2) ?></div>

      <div>
          <?= $this->Form->create(null, ['url'=>['action'=>'checkout']]) ?>
          <?= $this->Form->hidden('action', ['value'=>'remove_item']) ?>
          <?= $this->Form->hidden('id', ['value'=>(int)$p->id]) ?>
          <button class="trash" aria-label="remove">🗑️</button>
          <?= $this->Form->end() ?>
      </div>

  </div>
<?php endforeach; ?>


        <!-- promo & note -->
        
       
<div style="background:#fff;border:1px solid #eee;border-radius:10px;padding:16px 18px;margin:16px 0;">
  <h3 style="margin:0 0 10px;font-size:18px;color:#3b302a;">Promotion Code</h3>

  <?php if (!empty($promo) && strcasecmp($promo, 'BrewhubLover123') === 0): ?>
    <p style="margin:8px 0 12px;color:#2e7d32;">
      <strong><?= h($promo) ?></strong> applied — 5% member discount.
    </p>
    <?= $this->Form->create(null, ['url' => ['action' => 'checkout']]) ?>
      <?= $this->Form->hidden('action', ['value' => 'remove_promo']) ?>
      <?= $this->Form->button('Remove Code', [
            'class' => 'button',
            'style' => 'background:#b23b3b;margin-top:6px;'
      ]) ?>
    <?= $this->Form->end() ?>
  <?php else: ?>
    <?= $this->Form->create(null, ['url' => ['action' => 'checkout']]) ?>
      <?= $this->Form->hidden('action', ['value' => 'apply_promo']) ?>
      <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
        <?= $this->Form->control('promo', [
            'label' => false,
            'placeholder' => 'Enter your code',
            'style' => 'flex:1;min-width:220px;padding:10px 12px;border-radius:8px;border:1px solid #ccc;'
        ]) ?>
        <?= $this->Form->button('Apply', ['class' => 'button', 'style' => 'padding:10px 18px;']) ?>
      </div>
    <?= $this->Form->end() ?>
  <?php endif; ?>
</div>

        
      </div>

      
      <!-- RIGHT: summary -->
<aside class="card panel">

  <?php if (!$this->Identity->isLoggedIn()): ?>
    <h3>Contact</h3>
    <div class="note">
      <?= $this->Form->create(null, ['url' => ['action' => 'checkout'], 'type' => 'post', 'style' => 'display:flex;flex-direction:column;gap:10px;width:100%;']) ?>
        <?= $this->Form->hidden('action', ['value' => 'save_note']) ?>
        <?= $this->Form->control('email', ['label' => false, 'placeholder' => 'Enter your email *', 'value' => $email ?? '', 'style' => 'width:100%;']) ?>
        <?= $this->Form->control('note',  ['label' => false, 'placeholder' => 'Enter your note',  'value' => $note  ?? '', 'style' => 'width:100%;']) ?>
        <button class="btn" style="width:100%;">Save</button>
      <?= $this->Form->end() ?>
    </div>
  <?php endif; ?>

  <h3 style="margin-top:12px;">Order summary</h3>

  <!-- Subtotal -->
  <div class="sumrow">
    <span>Subtotal</span>
    <span>$<?= number_format((float)($subtotal ?? 0), 2) ?></span>
  </div>

  <!-- Discount line (only when promo applied) -->
  <?php if (!empty($discount) && $discount > 0): ?>
    <div class="sumrow" style="color:#2e7d32;">
      <span>Member discount (5%)</span>
      <span>- $<?= number_format((float)$discount, 2) ?></span>
    </div>
  <?php endif; ?>

  <hr style="border:none;border-top:1px solid #eee;margin:10px 0;">

  <!-- Total after discount -->
  <div class="sumrow total">
    <span><strong>Total</strong></span>
    <span><strong>$<?= number_format((float)$total, 2) ?></strong></span>
  </div>

  <!-- Pay at pickup -->
  <?= $this->Form->create(null, ['url' => ['action' => 'place'], 'type' => 'post']) ?>
    <button class="btn" style="margin-top:12px">Pay at Pickup</button>
  <?= $this->Form->end() ?>

  <!-- Stripe pay -->
  <?= $this->Form->create(null, ['url' => ['action' => 'pay'], 'type' => 'post']) ?>
    <button class="btn" style="margin-top:12px">Pay with Card (Stripe)</button>
  <?= $this->Form->end() ?>

  <div class="helper">🔒 Secure Checkout</div>
</aside>

    </div>
</div>
<?php endif; ?>
