@extends('layouts.app')

@section('content')
<section class="section">
  <div class="container">
    <a href="/products" class="back-link">&larr; Kembali ke Produk</a>
    <div id="product-detail">
      <div class="loading">Memuat...</div>
    </div>
  </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', async function() {
  const path = window.location.pathname;
  const id = path.split('/products/')[1];

  const res = await api.getProduct(id);

  if (!res.success) {
    document.getElementById('product-detail').innerHTML = '<div class="error"><h2>Produk tidak ditemukan</h2><a href="/products">Kembali</a></div>';
    return;
  }

  const product = res.data;

  document.getElementById('product-detail').innerHTML = `
    <div class="product-detail">
      <div class="product-detail-image">
        <img src="${product.image || '/images/placeholder.jpg'}" alt="${product.name}" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22300%22><rect fill=%22%23f0f0f0%22 width=%22400%22 height=%22300%22/><text fill=%22%23999%22 x=%2250%25%22 y=%2250%25%22 text-anchor=%22middle%22 dy=%22.3em%22 font-size=%2218%22>Tidak Ada Gambar</text></svg>'">
      </div>
      <div class="product-detail-info">
        <span class="product-category">${product.category}</span>
        <h1>${product.name}</h1>
        <p class="product-price">${formatPrice(product.price)}</p>
        <p class="product-description">${product.description}</p>
        <div class="stock-info">
          <span class="stock-badge ${product.stock > 0 ? 'in-stock' : 'out-of-stock'}">
            ${product.stock > 0 ? 'Stok: ' + product.stock : 'Habis'}
          </span>
        </div>
        ${product.stock > 0 ? `
          <div class="product-actions">
            <div class="quantity-control">
              <button onclick="App.changeDetailQty(-1)">-</button>
              <input type="number" id="detail-qty" value="1" min="1" max="${product.stock}">
              <button onclick="App.changeDetailQty(1)">+</button>
            </div>
            <button class="btn btn-primary btn-lg" onclick="App.addToCartDetail(${JSON.stringify(product).replace(/"/g, '&quot;')})">
              Tambah ke Keranjang
            </button>
          </div>
        ` : `
          <button class="btn btn-primary btn-lg" disabled>Stok Habis</button>
        `}
      </div>
    </div>
  `;
});
</script>
@endsection