{% extends "base.html" %}

{% block title %}{{ product.nama_barang }} - DN SPORT Karawang{% endblock %}

{% block content %}
<div class="container" style="padding:40px 0 60px">
  <div style="margin-bottom:20px">
    <a href="{{ url_for('catalog') }}" style="color:var(--primary);font-weight:700;font-size:14px">
      &larr; Kembali ke Katalog
    </a>
  </div>

  <div style="background:white;border-radius:18px;border:1px solid #e2e8f0;padding:32px;display:grid;grid-template-columns:1fr 1.3fr;gap:40px;box-shadow:var(--shadow-sm);align-items:start">
    
    <!-- Image Box -->
    <div style="background:#f8fafc;border-radius:14px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border:1px solid #e2e8f0;{% if is_admin_web %}cursor:pointer{% endif %}" id="thumb_box_{{ product.barcode }}" {% if is_admin_web %}onclick="triggerInlineUpload('{{ product.barcode }}')" title="Klik untuk Upload / Ganti Foto"{% endif %}>
      {% if product.is_promo %}
      <div class="badge-promo-ribbon" style="font-size:14px;padding:4px 10px">🔥 HEMAT {{ product.diskon_label }}</div>
      {% endif %}
      {% if product.foto %}
        <img src="{{ product.foto }}" alt="{{ product.nama_barang }}" id="detailProdImg" style="width:100%;height:100%;object-fit:cover">
        {% if is_admin_web %}
          <div class="admin-inline-overlay" style="opacity:0.85;top:auto;bottom:0;height:42px">
            <span>📷 Ganti Foto Produk (Klik Disini)</span>
          </div>
          <div class="admin-card-spinner" id="spinner_{{ product.barcode }}" style="display:none">⏳</div>
        {% endif %}
      {% else %}
        {% if is_admin_web %}
          <div class="admin-vacant-prompt" style="padding:40px">
            <svg viewBox="0 0 24 24" style="width:54px;height:54px"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-5.04-6.71l-2.75 3.54-1.96-2.36L6.5 17h11l-3.54-4.71z"/></svg>
            <strong style="font-size:16px">+ UPLOAD FOTO PRODUK</strong>
            <small style="font-size:12px">Klik di sini untuk upload via galeri / kamera HP</small>
          </div>
          <div class="admin-card-spinner" id="spinner_{{ product.barcode }}" style="display:none">⏳</div>
        {% else %}
          <div style="text-align:center;color:#64748b;padding:24px">
            <svg viewBox="0 0 24 24" style="width:80px;height:80px;fill:currentColor;opacity:0.4"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
            <div style="font-weight:800;font-size:18px;margin-top:12px;color:var(--primary)">
              {{ product.kategori_merk or 'DN SPORT' }}
            </div>
            <div style="font-size:12px;color:#94a3b8">ORIGINAL GUARANTEED PRODUCT</div>
          </div>
        {% endif %}
      {% endif %}
    </div>
    {% if is_admin_web %}
      <input type="file" id="admin_file_{{ product.barcode }}" accept="image/*" style="display:none" onchange="uploadInlinePhoto('{{ product.barcode }}', this)">
    {% endif %}

    <!-- Product Info -->
    <div>
      <div style="display:flex;gap:8px;align-items:center;margin-bottom:12px">
        <span class="brand-badge" style="font-size:13px;padding:4px 12px">{{ product.kategori_merk or 'DN' }}</span>
        {% if product.is_promo %}
        <span class="badge-discount-pill" style="font-size:11.5px;padding:3px 9px">DISKON {{ product.diskon_label }}</span>
        {% endif %}
        <span class="stock-badge {% if product.qty > 3 %}stock-ready{% elif product.qty > 0 %}stock-low{% else %}stock-empty{% endif %}" style="font-size:13px;padding:4px 12px">
          {% if product.qty > 3 %}Ready Stock ({{ product.qty }} pcs){% elif product.qty > 0 %}Tersisa {{ product.qty }} pcs{% else %}Stok Habis{% endif %}
        </span>
      </div>

      <h1 style="font-size:28px;font-weight:900;color:#0b1528;line-height:1.25;margin-bottom:16px">
        {{ product.nama_barang }}
      </h1>

      {% if product.is_promo %}
      <div style="margin-bottom:24px">
        <div style="display:flex;align-items:center;gap:10px;margin-bottom:6px">
          <span style="font-size:17px;color:#94a3b8;text-decoration:line-through;font-weight:600">{{ product.harga_asli|rupiah }}</span>
          <span class="badge-discount-percent" style="font-size:13px;padding:3px 8px;font-weight:800">-{{ product.diskon_label }}</span>
          <span style="background:#fee2e2;color:#dc2626;font-size:12px;font-weight:800;padding:3px 8px;border-radius:4px">HEMAT SEBESAR {{ (product.harga_asli - product.harga)|rupiah }}</span>
        </div>
        <div style="font-size:34px;font-weight:900;color:var(--ff-red);letter-spacing:0.5px">
          {{ product.harga|rupiah }}
        </div>
      </div>
      {% else %}
      <div style="font-size:32px;font-weight:900;color:var(--accent);margin-bottom:24px">
        {{ product.harga|rupiah }}
      </div>
      {% endif %}

      <table class="modal-table" style="margin-bottom:28px">
        <tr>
          <td>Kode / Barcode</td>
          <td style="font-family:monospace">{{ product.barcode }}</td>
        </tr>
        <tr>
          <td>Brand</td>
          <td>{{ product.kategori_merk or '-' }}</td>
        </tr>
        <tr>
          <td>Lokasi Rak</td>
          <td>{{ product.no_rak or 'Store Display' }}</td>
        </tr>
        <tr>
          <td>Kondisi</td>
          <td>100% Baru &amp; Original (BNIB / BNWT)</td>
        </tr>
      </table>

      <div style="display:flex;gap:14px;flex-wrap:wrap">
        <button class="btn btn-whatsapp" style="flex:1;padding:14px;font-size:16px" onclick="orderViaWhatsApp('{{ product.nama_barang|replace('\'', '\\\'') }}', '{{ product.barcode }}', {{ product.harga }}, '{{ product.kategori_merk|replace('\'', '\\\'') }}')">
          📲 Pesan via WhatsApp
        </button>
        <button class="btn btn-primary" style="flex:1;padding:14px;font-size:16px" onclick='Cart.add({{ product|tojson }})' {% if product.qty <= 0 %}disabled{% endif %}>
          🛒 Tambah ke Keranjang
        </button>
      </div>

      <div style="margin-top:24px;background:#f8fafc;padding:16px;border-radius:10px;font-size:13px;color:#64748b">
        💡 <strong>Catatan:</strong> Ingin memastikan ukuran atau ketersediaan warna lain? Klik <em>Pesan via WhatsApp</em> untuk chat langsung dengan tim DN Sport.
      </div>
    </div>

  </div>
</div>
{% endblock %}