<%- include('../layouts/header') %>

<div class="container" style="padding-top: 2.5rem; padding-bottom: 5rem;">
  <!-- Breadcrumb -->
  <div style="font-size: 0.82rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1.5rem;">
    <a href="/" style="color: var(--text-muted);">Home</a> / 
    <a href="/shop?category=<%= product.category_slug %>" style="color: var(--text-muted);"><%= product.category_name %></a> / 
    <span><%= product.name %></span>
  </div>

  <div class="product-detail-grid">
    <!-- Image Gallery -->
    <div class="gallery-container">
      <% if (product.images && product.images.length > 1) { %>
        <div class="gallery-thumbs">
          <% product.images.forEach((img, idx) => { %>
            <div class="thumb-item <%= idx === 0 ? 'active' : '' %>" data-img-src="<%= img.image_url %>">
              <img src="<%= img.image_url %>" alt="<%= img.alt_text || product.name %>">
            </div>
          <% }) %>
        </div>
      <% } %>

      <div class="gallery-main">
        <img id="main-gallery-img" src="<%= (product.images && product.images.length > 0) ? product.images[0].image_url : '/images/hero-banner.svg' %>" alt="<%= product.name %>">
      </div>
    </div>

    <!-- Product Purchasing Info -->
    <div class="product-detail-info">
      <div class="detail-header">
        <span class="subheading"><%= product.subcategory || product.category_name %></span>
        <h1 class="heading-lg" style="margin-top: 0.4rem; margin-bottom: 0.4rem;"><%= product.name %></h1>
        
        <% const isFabric = product.category_slug === 'fabric-samples' || product.unit === 'metre'; %>
        <div style="display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.5rem;">
          <span style="font-size: 0.82rem; color: var(--text-muted);">SKU: <strong id="detail-sku-display"><%= product.sku %></strong></span>
          <span style="font-size: 0.82rem; color: var(--text-muted);">•</span>
          <span style="font-size: 0.82rem; color: var(--text-muted);">Unit: <strong><%= isFabric ? 'Metre' : (product.unit || 'piece') %></strong></span>
          <span class="badge" style="font-size: 0.72rem; padding: 2px 8px; border-radius: 4px; font-weight: 600; <%= isFabric ? 'background:#ECFDF5; color:#065F46; border:1px solid #A7F3D0;' : 'background:#EFF6FF; color:#1E40AF; border:1px solid #BFDBFE;' %>">
            <%= isFabric ? '📏 B2B Fabric Order (Sold in Metres)' : '👔 B2B Garment Order (Sold in Quantity)' %>
          </span>
        </div>

        <div class="detail-price-box">
          <span class="detail-price" id="detail-price-display">₹<%= (product.sale_price || product.base_price).toLocaleString('en-IN') %></span>
          <% if (product.sale_price) { %>
            <span class="price-original" style="font-size: 1.15rem;">₹<%= product.base_price.toLocaleString('en-IN') %></span>
            <span class="badge badge-sale">Special Price</span>
          <% } %>
          <span style="font-size: 0.95rem; color: var(--text-muted); font-weight: 500;">/ <%= isFabric ? 'metre' : (product.unit || 'piece') %></span>
        </div>
      </div>

      <!-- Real-time Stock Indicator -->
      <div id="detail-stock-indicator" class="stock-indicator-bar stock-in">
        <span class="stock-dot"></span>
        <span id="stock-badge-text">Calculating availability...</span>
      </div>

      <!-- Size Selector (if sizes exist) -->
      <% 
        const distinctSizes = [...new Set(product.variations.map(v => v.size).filter(Boolean))];
      %>
      <% if (distinctSizes.length > 0) { %>
        <div class="selection-group">
          <div class="selection-label-row">
            <span>Select Size:</span>
            <a href="https://wa.me/<%= (settings && settings.whatsapp_number) ? settings.whatsapp_number : '919876543210' %>?text=Hello%20Atelier%20Nina%20Weaves,%20could%20you%20please%20guide%20me%20on%20sizing%20for%20<%= encodeURIComponent(product.name) %>?" target="_blank" style="color: var(--accent-gold); text-decoration: underline; font-weight: 500; font-size: 0.78rem;">Sizing Guide &amp; WhatsApp Advice</a>
          </div>
          <div class="size-options-grid">
            <% distinctSizes.forEach((size, idx) => { %>
              <button type="button" class="option-btn size-option-btn <%= idx === 0 ? 'active' : '' %>" data-size="<%= size %>">
                <%= size %>
              </button>
            <% }) %>
          </div>
        </div>
      <% } %>

      <!-- Fabric Quality / Option Selector -->
      <% 
        const distinctQualities = [...new Set(product.variations.map(v => v.quality).filter(Boolean))];
        const hasOptions = product.variations.some(v => v.option_name);
      %>
      <div class="selection-group">
        <div class="selection-label-row">
          <span><%= product.category_slug === 'fabric-samples' ? 'Select Swatch Option & Cut:' : 'Select Fabric Grade:' %></span>
        </div>
        <div class="quality-options-list">
          <% if (product.category_slug === 'fabric-samples' && hasOptions) { %>
            <% product.variations.forEach((v, idx) => { %>
              <div class="quality-card-option <%= idx === 0 ? 'active' : '' %>" data-quality="<%= v.quality %>" data-option="<%= v.option_name %>" data-var-id="<%= v.id %>">
                <div>
                  <div style="font-weight: 600; font-size: 0.92rem;"><%= v.option_name || v.quality %></div>
                  <div style="font-size: 0.78rem; color: var(--text-muted);"><%= v.quality %></div>
                </div>
                <div style="font-weight: 700; font-size: 0.95rem;">
                  ₹<%= (v.price || product.base_price).toLocaleString('en-IN') %>
                </div>
              </div>
            <% }) %>
          <% } else { %>
            <% distinctQualities.forEach((q, idx) => { %>
              <div class="quality-card-option <%= idx === 0 ? 'active' : '' %>" data-quality="<%= q %>">
                <div>
                  <div style="font-weight: 600; font-size: 0.92rem;"><%= q %></div>
                  <div style="font-size: 0.78rem; color: var(--text-muted);">Authentic Master Weave</div>
                </div>
                <div>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="20 6 9 17 4 12"></polyline>
                  </svg>
                </div>
              </div>
            <% }) %>
          <% } %>
        </div>
      </div>

      <!-- B2B Quantity / Metres Selector & Actions -->
      <div style="margin-top: 1.25rem;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
          <label for="detail-qty-input" style="font-size: 0.88rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-main);">
            <%= isFabric ? 'Order Length in Metres:' : 'Order Quantity (Pieces):' %>
          </label>
          <span style="font-size: 0.78rem; color: var(--text-muted);">
            <%= isFabric ? 'Custom cut per continuous metre' : 'Enter desired piece count' %>
          </span>
        </div>

        <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
          <div class="qty-control" style="background: #FFF; border: 1px solid var(--border-strong);">
            <button type="button" class="qty-btn" id="detail-qty-minus" title="Decrease">−</button>
            <input type="number" id="detail-qty-input" class="qty-input" value="1" min="1" max="999" 
              style="width: 75px; text-align: center; font-weight: 700; font-size: 1.1rem; border: none; background: transparent;"
              title="<%= isFabric ? 'Enter metres' : 'Enter quantity' %>">
            <button type="button" class="qty-btn" id="detail-qty-plus" title="Increase">+</button>
          </div>
          <span style="font-weight: 700; font-size: 0.95rem; color: var(--text-main); min-width: 65px;" id="detail-unit-badge">
            <%= isFabric ? 'Metres' : (product.unit === 'pair' ? 'Pairs' : 'Pieces') %>
          </span>

          <button type="button" id="add-to-cart-btn" class="btn btn-primary btn-lg" style="flex-grow: 1;">
            <%= isFabric ? 'Add Metres to Shopping Bag' : 'Add to Shopping Bag' %>
          </button>
        </div>

        <!-- Quick B2B Preset Selectors -->
        <div style="display: flex; gap: 0.4rem; align-items: center; margin-top: 0.75rem; flex-wrap: wrap;">
          <span style="font-size: 0.75rem; color: var(--text-muted); font-weight: 600;">Quick Select:</span>
          <% if (isFabric) { %>
            <button type="button" class="btn btn-outline btn-xs quick-qty-preset" data-val="1" style="font-size: 0.75rem; padding: 3px 8px;">1m (Sample)</button>
            <button type="button" class="btn btn-outline btn-xs quick-qty-preset" data-val="2" style="font-size: 0.75rem; padding: 3px 8px;">2m</button>
            <button type="button" class="btn btn-outline btn-xs quick-qty-preset" data-val="5" style="font-size: 0.75rem; padding: 3px 8px;">5m (Trial Cut)</button>
            <button type="button" class="btn btn-outline btn-xs quick-qty-preset" data-val="10" style="font-size: 0.75rem; padding: 3px 8px;">10m</button>
            <button type="button" class="btn btn-outline btn-xs quick-qty-preset" data-val="25" style="font-size: 0.75rem; padding: 3px 8px;">25m (Bolt)</button>
          <% } else { %>
            <button type="button" class="btn btn-outline btn-xs quick-qty-preset" data-val="1" style="font-size: 0.75rem; padding: 3px 8px;">1 pc</button>
            <button type="button" class="btn btn-outline btn-xs quick-qty-preset" data-val="2" style="font-size: 0.75rem; padding: 3px 8px;">2 pcs</button>
            <button type="button" class="btn btn-outline btn-xs quick-qty-preset" data-val="5" style="font-size: 0.75rem; padding: 3px 8px;">5 pcs</button>
            <button type="button" class="btn btn-outline btn-xs quick-qty-preset" data-val="10" style="font-size: 0.75rem; padding: 3px 8px;">10 pcs (Wholesale)</button>
            <button type="button" class="btn btn-outline btn-xs quick-qty-preset" data-val="25" style="font-size: 0.75rem; padding: 3px 8px;">25 pcs</button>
          <% } %>
        </div>
      </div>

      <!-- WhatsApp Order Consultation Button -->
      <div>
        <a id="direct-whatsapp-btn" href="#" target="_blank" class="btn btn-whatsapp btn-block btn-lg">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.816 9.816 0 0 0 12.04 2z"/>
          </svg>
          Inquire Directly via WhatsApp
        </a>
        <div style="font-size: 0.76rem; color: var(--text-muted); text-align: center; margin-top: 0.5rem;">
          Inquiries are handled directly with our atelier team before formal stock reservation.
        </div>
      </div>

      <!-- Product Description & Accordion Info -->
      <div style="margin-top: 1.5rem; border-top: 1px solid var(--border-subtle); padding-top: 1.5rem;">
        <h4 style="font-size: 1.05rem; margin-bottom: 0.6rem; letter-spacing: 0.05em;">Description</h4>
        <p style="font-size: 0.95rem; line-height: 1.7; color: var(--text-muted);"><%= product.description %></p>
      </div>

      <!-- Specifications Table -->
      <% if (product.specificationsObj && Object.keys(product.specificationsObj).length > 0) { %>
        <div style="border-top: 1px solid var(--border-subtle); padding-top: 1.5rem;">
          <h4 style="font-size: 1.05rem; margin-bottom: 0.6rem; letter-spacing: 0.05em;">Textile &amp; Tailoring Specifications</h4>
          <table class="spec-table">
            <tbody>
              <% for (const [key, val] of Object.entries(product.specificationsObj)) { %>
                <tr>
                  <th><%= key %></th>
                  <td><%= val %></td>
                </tr>
              <% } %>
            </tbody>
          </table>
        </div>
      <% } %>

      <!-- Care & Shipping Highlights -->
      <div style="border-top: 1px solid var(--border-subtle); padding-top: 1.25rem; font-size: 0.82rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 0.5rem;">
        <div>🚚 Complimentary insured express shipping on orders over ₹2,500.</div>
        <div>📐 Custom sizing available upon WhatsApp consultation.</div>
        <div>🔄 7-day unworn exchange policy for standard shirts.</div>
      </div>
    </div>
  </div>

  <!-- Related Products -->
  <% if (relatedProducts && relatedProducts.length > 0) { %>
    <div style="margin-top: 6rem; border-top: 1px solid var(--border-subtle); padding-top: 4rem;">
      <div style="text-align: center; margin-bottom: 2.5rem;">
        <span class="subheading">Complementary Pieces</span>
        <h3 class="heading-md" style="margin-top: 0.35rem;">You May Also Appreciate</h3>
      </div>
      <div class="product-grid">
        <% relatedProducts.forEach(rel => { %>
          <div class="product-card">
            <div class="product-media-wrap">
              <a href="/product/<%= rel.slug %>">
                <img src="<%= rel.primary_image || '/uploads/products/shirt-oxford-1.svg' %>" alt="<%= rel.name %>" class="product-card-img" loading="lazy">
              </a>
            </div>
            <div class="product-info">
              <span class="product-category-tag"><%= rel.subcategory || rel.category_name %></span>
              <h3 class="product-name"><a href="/product/<%= rel.slug %>"><%= rel.name %></a></h3>
              <div class="product-price-row">
                <span class="price-current">₹<%= (rel.sale_price || rel.base_price).toLocaleString('en-IN') %></span>
                <span class="price-unit">/ <%= rel.unit || 'piece' %></span>
              </div>
            </div>
          </div>
        <% }) %>
      </div>
    </div>
  <% } %>
</div>

<!-- Embedded Product JSON for interactive scripts -->
<script type="application/json" id="product-json-data">
  <%- JSON.stringify(product) %>
</script>

<!-- Schema.org JSON-LD Product Structured Data -->
<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "<%= product.name %>",
  "image": "<%= (product.images && product.images.length > 0) ? product.images[0].image_url : '/images/hero-banner.svg' %>",
  "description": "<%= (product.description || '').replace(/"/g, '\\"') %>",
  "sku": "<%= product.sku %>",
  "brand": {
    "@type": "Brand",
    "name": "<%= (settings && settings.brand_name) ? settings.brand_name : 'Nina Weaves' %>"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://nestbeans.com/product/<%= product.slug %>",
    "priceCurrency": "INR",
    "price": "<%= product.sale_price || product.base_price %>",
    "availability": "<%= product.total_stock > 0 ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock' %>",
    "itemCondition": "https://schema.org/NewCondition"
  }
}
</script>

<script src="/js/product-detail.js"></script>

<%- include('../layouts/footer') %>
