@extends('layouts.app')

@section('content')
<section class="section">
  <div class="container">
    <h1 class="page-title">Keranjang Belanja</h1>
    <div id="cart-content">
      <div class="loading">Memuat...</div>
    </div>
  </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
  renderCart();
});

function renderCart() {
  const items = Cart.getItems();
  const container = document.getElementById('cart-content');

  if (items.length === 0) {
    container.innerHTML = `
      <div class="empty-state">
        <div class="empty-icon">&#128722;</div>
        <h2>Keranjang Kosong</h2>
        <p>Belum ada produk di keranjang Anda.</p>
        <a href="/products" class="btn btn-primary">Mulai Belanja</a>
      </div>
    `;
    return;
  }

  const total = Cart.getTotal();

  container.innerHTML = `
    <div class="cart-layout">
      <div class="cart-items">
        ${items.map(item => `
          <div class="cart-item">
            <img src="${item.image || '/images/placeholder.jpg'}" alt="${item.name}" class="cart-item-image" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2280%22><rect fill=%22%23f0f0f0%22 width=%2280%22 height=%2280%22/></svg>'">
            <div class="cart-item-info">
              <h3>${item.name}</h3>
              <p class="cart-item-price">${formatPrice(item.price)}</p>
            </div>
            <div class="cart-item-qty">
              <button onclick="updateCartQty('${item.id}', ${item.quantity - 1})">-</button>
              <span>${item.quantity}</span>
              <button onclick="updateCartQty('${item.id}', ${item.quantity + 1})">+</button>
            </div>
            <div class="cart-item-subtotal">
              ${formatPrice(item.price * item.quantity)}
            </div>
            <button class="cart-item-remove" onclick="removeFromCart('${item.id}')">&times;</button>
          </div>
        `).join('')}
      </div>
      <div class="cart-summary">
        <h3>Ringkasan</h3>
        <div class="summary-row">
          <span>Subtotal (${Cart.getCount()} item)</span>
          <span>${formatPrice(total)}</span>
        </div>
        <div class="summary-row">
          <span>Ongkos Kirim</span>
          <span>Gratis</span>
        </div>
        <div class="summary-row total">
          <span>Total</span>
          <span>${formatPrice(total)}</span>
        </div>
        <a href="/checkout" class="btn btn-primary btn-block">Checkout</a>
        <button class="btn btn-outline btn-block" onclick="clearCart()">Kosongkan Keranjang</button>
      </div>
    </div>
  `;
}

function updateCartQty(id, qty) {
  Cart.updateQuantity(id, qty);
  renderCart();
}

function removeFromCart(id) {
  Cart.removeItem(id);
  App.showToast('Produk dihapus dari keranjang');
  renderCart();
}

function clearCart() {
  if (confirm('Yakin ingin mengosongkan keranjang?')) {
    Cart.clear();
    renderCart();
  }
}
</script>
@endsection