AudioCore/plugins/store/views/site/cart.php

<?php
declare(strict_types=1);

$pageTitle = $title ?? 'Cart';
$items = is_array($items ?? null) ? $items : [];
$totals = is_array($totals ?? null) ? $totals : ['count' => 0, 'subtotal' => 0.0, 'discount_amount' => 0.0, 'amount' => 0.0, 'currency' => 'GBP', 'discount_code' => ''];
$discountCode = (string)($totals['discount_code'] ?? '');
ob_start();
?>
<section class="card" style="display:grid; gap:16px;">
  <a href="/releases" class="badge" style="text-decoration:none; display:inline-block;">Continue shopping</a>
  <h1 style="margin:0; font-size:32px;">Your Cart</h1>
  <?php if (!$items): ?>
    <div style="padding:14px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.2); color:var(--muted);">
      Your basket is empty.
    </div>
  <?php else: ?>
    <div style="display:grid; gap:10px;">
      <?php foreach ($items as $item): ?>
        <?php
          $key = (string)($item['key'] ?? '');
          $title = (string)($item['title'] ?? 'Item');
          $coverUrl = (string)($item['cover_url'] ?? '');
          $itemType = (string)($item['item_type'] ?? 'track');
          $releaseCount = (int)($item['release_count'] ?? 0);
          $trackCount = (int)($item['track_count'] ?? 0);
          $qty = max(1, (int)($item['qty'] ?? 1));
          $price = (float)($item['price'] ?? 0);
          $currency = (string)($item['currency'] ?? ($totals['currency'] ?? 'GBP'));
        ?>
        <div style="display:grid; grid-template-columns:58px minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:12px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.2);">
          <div style="width:58px; height:58px; border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.06);">
            <?php if ($coverUrl !== ''): ?>
              <img src="<?= htmlspecialchars($coverUrl, ENT_QUOTES, 'UTF-8') ?>" alt="" style="width:100%; height:100%; object-fit:cover; display:block;">
            <?php else: ?>
              <div style="width:100%; height:100%; display:grid; place-items:center; font-size:10px; color:var(--muted);">AC</div>
            <?php endif; ?>
          </div>
          <div style="min-width:0;">
            <div style="font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"><?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8') ?></div>
            <?php if ($itemType === 'bundle' && ($releaseCount > 0 || $trackCount > 0)): ?>
              <div style="font-size:12px; color:var(--muted); margin-top:4px;">
                Includes
                <?php if ($releaseCount > 0): ?>
                  <?= $releaseCount ?> release<?= $releaseCount === 1 ? '' : 's' ?>
                <?php endif; ?>
                <?php if ($releaseCount > 0 && $trackCount > 0): ?> · <?php endif; ?>
                <?php if ($trackCount > 0): ?>
                  <?= $trackCount ?> track<?= $trackCount === 1 ? '' : 's' ?>
                <?php endif; ?>
              </div>
            <?php endif; ?>
            <div style="font-size:12px; color:var(--muted); margin-top:4px;"><?= htmlspecialchars($currency, ENT_QUOTES, 'UTF-8') ?> <?= number_format($price, 2) ?> x <?= $qty ?></div>
          </div>
          <div style="font-weight:700;"><?= htmlspecialchars($currency, ENT_QUOTES, 'UTF-8') ?> <?= number_format($price * $qty, 2) ?></div>
          <form method="post" action="/cart/remove" style="margin:0;">
            <input type="hidden" name="key" value="<?= htmlspecialchars($key, ENT_QUOTES, 'UTF-8') ?>">
            <input type="hidden" name="return_url" value="/cart">
            <button type="submit" class="cart-btn cart-btn-ghost">Remove</button>
          </form>
        </div>
      <?php endforeach; ?>
    </div>
    <div style="display:grid; gap:12px; padding:14px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.25);">
      <div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
        <div style="color:var(--muted);"><?= (int)($totals['count'] ?? 0) ?> item(s)</div>
        <div style="display:grid; justify-items:end; gap:4px;">
          <div style="font-size:12px; color:var(--muted);">Subtotal: <?= htmlspecialchars((string)($totals['currency'] ?? 'GBP'), ENT_QUOTES, 'UTF-8') ?> <?= number_format((float)($totals['subtotal'] ?? 0), 2) ?></div>
          <?php if ((float)($totals['discount_amount'] ?? 0) > 0): ?>
            <div style="font-size:12px; color:#9be7c6;">Discount (<?= htmlspecialchars($discountCode, ENT_QUOTES, 'UTF-8') ?>): -<?= htmlspecialchars((string)($totals['currency'] ?? 'GBP'), ENT_QUOTES, 'UTF-8') ?> <?= number_format((float)($totals['discount_amount'] ?? 0), 2) ?></div>
          <?php endif; ?>
          <div style="font-size:20px; font-weight:700;"><?= htmlspecialchars((string)($totals['currency'] ?? 'GBP'), ENT_QUOTES, 'UTF-8') ?> <?= number_format((float)($totals['amount'] ?? 0), 2) ?></div>
        </div>
      </div>
      <div id="discountWrap" class="cart-discount-wrap<?= $discountCode !== '' ? ' is-open' : '' ?>">
        <div style="display:flex; flex-wrap:wrap; align-items:center; gap:8px;">
          <?php if ($discountCode !== ''): ?>
            <span style="font-size:12px; color:var(--muted);">Applied discount</span>
            <span class="cart-discount-chip"><?= htmlspecialchars($discountCode, ENT_QUOTES, 'UTF-8') ?></span>
            <form method="post" action="/cart/discount/remove" style="margin:0;">
              <input type="hidden" name="return_url" value="/cart">
              <button type="submit" class="cart-btn cart-btn-danger">Remove</button>
            </form>
          <?php endif; ?>
        </div>

        <div id="discountBox" class="cart-discount-box<?= $discountCode !== '' ? ' is-open' : '' ?>">
          <form method="post" action="/cart/discount/apply" style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
            <input type="hidden" name="return_url" value="/cart">
            <input name="discount_code" value="<?= htmlspecialchars($discountCode, ENT_QUOTES, 'UTF-8') ?>" class="input cart-discount-input" placeholder="Enter discount code">
            <button type="submit" class="cart-btn cart-btn-primary">Apply code</button>
          </form>
        </div>
      </div>
    </div>
    <div style="display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap;">
      <button type="button" class="cart-btn cart-btn-ghost" id="toggleDiscountBox">
        <?= $discountCode !== '' ? 'Discount Active' : 'Have a discount code?' ?>
      </button>
      <a href="/checkout" class="cart-btn cart-btn-primary">Checkout</a>
    </div>
  <?php endif; ?>
</section>
<style>
  .cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    color: #e9eefc;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    cursor: pointer;
  }
  .cart-btn:hover { background: rgba(255,255,255,.14); }
  .cart-btn-primary {
    background: rgba(34,242,165,.18);
    border-color: rgba(34,242,165,.48);
    color: #cffff0;
  }
  .cart-btn-primary:hover { background: rgba(34,242,165,.28); }
  .cart-btn-ghost {
    background: rgba(255,255,255,.06);
  }
  .cart-btn-danger {
    border-color: rgba(255, 120, 120, 0.4);
    color: #ffd4d4;
    background: rgba(255, 120, 120, 0.12);
  }
  .cart-btn-danger:hover {
    background: rgba(255, 120, 120, 0.2);
  }
  .cart-discount-wrap {
    display: none;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 12px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
      rgba(10, 12, 18, 0.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }
  .cart-discount-wrap.is-open {
    display: block;
  }
  .cart-discount-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(34,242,165,.38);
    background: rgba(34,242,165,.14);
    color: #cffff0;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
  }
  .cart-discount-box {
    display: none;
    margin-top: 10px;
    padding-top: 2px;
  }
  .cart-discount-box.is-open {
    display: block;
  }
  .cart-discount-input {
    min-width: 220px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(7,9,14,.72);
    color: #f0f4ff;
    padding: 0 12px;
  }
  .cart-discount-input::placeholder {
    color: rgba(220,228,245,.42);
  }
  .cart-discount-input:focus {
    outline: none;
    border-color: rgba(34,242,165,.5);
    box-shadow: 0 0 0 2px rgba(34,242,165,.14);
  }
  @media (max-width: 720px) {
    .cart-discount-input {
      min-width: 100%;
      width: 100%;
    }
  }
</style>
<script>
  (function () {
    const toggleBtn = document.getElementById('toggleDiscountBox');
    const box = document.getElementById('discountBox');
    const wrap = document.getElementById('discountWrap');
    if (!toggleBtn || !box || !wrap) return;
    toggleBtn.addEventListener('click', function () {
      box.classList.toggle('is-open');
      wrap.classList.toggle('is-open');
    });
  })();
</script>
<?php
$content = ob_get_clean();
require __DIR__ . '/../../../../views/site/layout.php';