{% extends "shopyo_base/module_base.html" %}
{% set active_page ='products' %}
{% block pagehead %}
<title>Edit {{ product.name }}</title>
{% endblock %}
{% block sidebar %}
{%include 'product/blocks/sidebar.html'%}
{%endblock%}
{% block module_content %}
<div class="max-w-4xl mx-auto space-y-6">
  <div class="mb-4">
    <a class="inline-flex items-center gap-2 text-xs font-bold text-slate-400 hover:text-primary transition-colors uppercase tracking-widest" href="{{ url_for('shopyo_ecommerce.product.list', subcategory_id=subcategory.id) }}">
      <i class="fas fa-arrow-left"></i> Back to {{ subcategory.name }}
    </a>
  </div>
  <div class="card">
    <div class="card-body">
      <div class="mb-8">
        <h3 class="text-xl font-black text-slate-900 dark:text-white uppercase tracking-tight">Edit Product</h3>
        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">{{ subcategory.name }} &middot; {{ category }}</p>
      </div>

      <form action="{{url_for('shopyo_ecommerce.product.update', subcategory_id=subcategory.id)}}" method="post" enctype="multipart/form-data" class="space-y-6">

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="space-y-1">
            <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Barcode</label>
            <input required name="barcode" autocomplete="off" type="text" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-2.5 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none" placeholder="Barcode" value="{{product.barcode}}">
            <input name="old_barcode" type="hidden" value="{{product.barcode}}">
          </div>
          <div class="space-y-1">
            <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Name</label>
            <input required name="name" autocomplete="off" type="text" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-2.5 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none" placeholder="Product Name" value="{{product.name}}">
          </div>
          <div class="space-y-1">
            <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Price ({{currency_symbol}})</label>
            <input required name="price" autocomplete="off" type="number" step="0.01" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-2.5 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none" placeholder="Price" value="{{product.price}}">
          </div>
          <div class="space-y-1">
            <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Selling Price ({{currency_symbol}})</label>
            <input required name="selling_price" autocomplete="off" type="number" step="0.01" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-2.5 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none" placeholder="Selling Price" value="{{product.selling_price}}">
          </div>
          <div class="space-y-1">
            <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Cost Price ({{currency_symbol}})</label>
            <input name="cost_price" autocomplete="off" type="number" step="0.01" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-2.5 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none" placeholder="Cost Price" value="{{product.cost_price or 0}}">
          </div>
          <div class="space-y-1">
            <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">In Stock</label>
            <input required name="in_stock" autocomplete="off" type="number" step="1" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-2.5 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none" placeholder="Stock" value="{{product.in_stock}}">
          </div>
          <div class="space-y-1">
            <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Min Stock</label>
            <input name="min_stock" autocomplete="off" type="number" step="1" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-2.5 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none" placeholder="0" value="{{product.min_stock or 0}}">
          </div>
          <div class="space-y-1">
            <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Date</label>
            <input name="date" id="noHistoricDates" autocomplete="off" type="date" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-2.5 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none" value="{{product.date}}">
          </div>
          <div class="space-y-1">
            <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Vendor</label>
            <select name="vendor_id" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-2.5 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none">
              <option value="">-- None --</option>
              {% for v in vendors %}
              <option value="{{ v.id }}" {{ 'selected' if product.vendor_id == v.id }}>{{ v.name }}</option>
              {% endfor %}
            </select>
          </div>
        </div>

        <div class="space-y-1">
          <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Description</label>
          <textarea rows="4" name="description" autocomplete="off" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-2.5 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none" placeholder="Product Description">{{product.description}}</textarea>
        </div>

        <div class="space-y-3">
          <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Quantity Type</label>
          <div class="flex items-center gap-6 px-1">
            <label class="flex items-center gap-2 cursor-pointer group">
              <input type="radio" name="is_variable_qty" value="True" {{ 'checked' if product.is_variable_qty }}
                     class="w-4 h-4 border-slate-300 dark:border-slate-600 text-primary focus:ring-primary/20">
              <span class="text-xs font-bold text-slate-600 dark:text-slate-400 group-hover:text-primary transition-colors">Variable (ml/g)</span>
            </label>
            <label class="flex items-center gap-2 cursor-pointer group">
              <input type="radio" name="is_variable_qty" value="False" {{ '' if product.is_variable_qty else 'checked' }}
                     class="w-4 h-4 border-slate-300 dark:border-slate-600 text-slate-500 focus:ring-slate-500/20">
              <span class="text-xs font-bold text-slate-600 dark:text-slate-400 group-hover:text-slate-800 transition-colors">Fixed</span>
            </label>
          </div>
          <div class="flex gap-4 variable-fields" {{ 'style=\"display:none\"' if not product.is_variable_qty }}>
            <div class="flex-1 space-y-1">
              <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Unit Label</label>
              <input type="text" name="unit_label" value="{{ product.unit_label or 'ml' }}"
                     class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-2.5 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none" placeholder="ml, g...">
            </div>
            <div class="flex-1 space-y-1">
              <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Unit Step</label>
              <input type="number" name="unit_step" value="{{ product.unit_step or 1 }}" step="0.1" min="0.1"
                     class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-2.5 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none">
            </div>
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="space-y-1">
            <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Colors</label>
            <textarea rows="4" name="colors" autocomplete="off" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-2.5 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none" placeholder="One per line or comma-separated">{{ product.get_color_string() }}</textarea>
          </div>
          <div class="space-y-1">
            <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Sizes <span class="text-slate-400 font-normal normal-case tracking-normal">(<code>:price</code> for variant pricing)</span></label>
            <textarea rows="4" name="sizes" autocomplete="off" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-2.5 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none" placeholder="50ml:100.00&#10;100ml:180.00&#10;S, M, L, XL">{{ product.get_size_string() }}</textarea>
          </div>
        </div>

        <div class="space-y-3">
          <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Discontinued</label>
          <div class="flex items-center gap-6 px-1">
            <label class="flex items-center gap-2 cursor-pointer group">
              <input type="radio" name="discontinued" value="True" class="w-4 h-4 border-slate-300 dark:border-slate-600 text-red-500 focus:ring-red-500/20" {{ 'checked' if product.discontinued }}>
              <span class="text-xs font-bold text-slate-600 dark:text-slate-400 group-hover:text-red-500 transition-colors">Yes</span>
            </label>
            <label class="flex items-center gap-2 cursor-pointer group">
              <input type="radio" name="discontinued" value="False" class="w-4 h-4 border-slate-300 dark:border-slate-600 text-emerald-500 focus:ring-emerald-500/20" {{ 'checked' if not product.discontinued }}>
              <span class="text-xs font-bold text-slate-600 dark:text-slate-400 group-hover:text-emerald-500 transition-colors">No</span>
            </label>
          </div>
        </div>

        {% if product.resources|selectattr('type', 'equalto', 'image')|list %}
        <div class="space-y-3">
          <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Images</label>
          <div class="flex flex-wrap gap-4">
            {% for resource in product.resources %}
            {% if resource.type == 'image' %}
            <div class="relative group">
              <img class="w-32 h-32 object-cover rounded-xl border border-slate-200 dark:border-slate-700" src="{{url_for('resource.product_image', filename=resource.filename)}}" alt="{{resource.filename}}">
              <a href="{{url_for('shopyo_ecommerce.product.image_delete', filename=resource.filename, barcode=product.barcode)}}"
                 class="absolute top-1 right-1 w-6 h-6 rounded-full bg-red-500 text-white flex items-center justify-center text-[10px] opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-600"
                 onclick="return confirm('Delete this image?');">
                <i class="fas fa-times"></i>
              </a>
            </div>
            {% endif %}
            {% endfor %}
          </div>
        </div>
        {% endif %}

        <div class="space-y-1">
          <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Add Images</label>
          <input class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-2.5 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:bg-primary/10 file:text-primary file:text-xs file:font-bold hover:file:bg-primary/20" type="file" name="photos[]" multiple="true" autocomplete="off">
        </div>

        <input type="hidden" name="category" value="{{category}}">
        <input type="hidden" name="product_id" value="{{ product.id }}" />
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />

        <div class="flex items-center gap-3 pt-2">
          <button type="submit" class="bg-primary text-white font-bold py-2.5 px-6 rounded-xl hover:bg-primary-dark transition-all shadow-lg shadow-primary/20 text-xs uppercase tracking-widest">
            <i class="fas fa-save mr-1.5"></i>Save Product
          </button>
          <a href="{{url_for('shopyo_ecommerce.product.list', subcategory_id=subcategory.id)}}" class="text-xs font-bold text-slate-400 hover:text-slate-600 transition-colors px-4 py-2.5">
            Cancel
          </a>
        </div>
      </form>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <div class="mb-6">
        <h3 class="text-lg font-black text-slate-900 dark:text-white uppercase tracking-tight">Stock Adjustment</h3>
      </div>
      <form action="{{ url_for('shopyo_ecommerce.product.adjust_stock', barcode=product.barcode) }}" method="POST" class="flex flex-wrap items-end gap-3">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
        <div class="space-y-1">
          <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Quantity</label>
          <input type="number" name="quantity" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-2.5 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none" style="width:120px;" placeholder="+/- Qty" required>
        </div>
        <div class="space-y-1 flex-1 min-w-[200px]">
          <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Reason</label>
          <input type="text" name="reason" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-2.5 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none" placeholder="Reason for adjustment" required>
        </div>
        <button type="submit" class="bg-amber-500 text-white font-bold py-2.5 px-5 rounded-xl hover:bg-amber-600 transition-all shadow-lg shadow-amber-500/20 text-xs uppercase tracking-widest">
          <i class="fas fa-edit mr-1.5"></i>Adjust
        </button>
        <a href="{{ url_for('shopyo_ecommerce.product.adjustments', barcode=product.barcode) }}" class="bg-sky-500 text-white font-bold py-2.5 px-5 rounded-xl hover:bg-sky-600 transition-all shadow-lg shadow-sky-500/20 text-xs uppercase tracking-widest inline-flex items-center gap-1.5">
          <i class="fas fa-history"></i> History
        </a>
      </form>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <div class="mb-6">
        <h3 class="text-lg font-black text-slate-900 dark:text-white uppercase tracking-tight">Bundle Components</h3>
      </div>
      {% if product.bundle_components %}
      <div class="overflow-x-auto mb-6">
        <table class="w-full text-xs">
          <thead>
            <tr class="border-b border-slate-100 dark:border-slate-800">
              <th class="text-left py-3 px-4 text-[10px] font-bold text-slate-500 uppercase tracking-widest">Component</th>
              <th class="text-left py-3 px-4 text-[10px] font-bold text-slate-500 uppercase tracking-widest">Qty</th>
              <th class="w-24 py-3 px-4"></th>
            </tr>
          </thead>
          <tbody>
            {% for bc in product.bundle_components %}
            <tr class="border-b border-slate-50 dark:border-slate-800/50 hover:bg-slate-50/50 dark:hover:bg-slate-800/30 transition-colors">
              <td class="py-3 px-4 font-medium">{{ bc.component.name if bc.component else '?' }}</td>
              <td class="py-3 px-4">{{ bc.quantity }}</td>
              <td class="py-3 px-4">
                <form action="{{ url_for('shopyo_ecommerce.product.bundle_remove_component', bc_id=bc.id) }}" method="POST">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                  <button class="text-red-500 hover:text-red-600 font-bold text-[10px] uppercase tracking-widest">
                    <i class="fas fa-trash-alt mr-1"></i>Remove
                  </button>
                </form>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <p class="text-xs text-slate-400 mb-6">Not a bundle. Add components below.</p>
      {% endif %}
      <form action="{{ url_for('shopyo_ecommerce.product.bundle_add_component', barcode=product.barcode) }}" method="POST" class="flex flex-wrap items-end gap-3">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
        <div class="space-y-1 flex-1 min-w-[160px]">
          <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Component Barcode</label>
          <input type="text" name="component_barcode" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-2.5 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none" placeholder="Barcode" required>
        </div>
        <div class="space-y-1">
          <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Qty</label>
          <input type="number" name="quantity" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-2.5 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none" value="1" min="1" style="width:80px;">
        </div>
        <button type="submit" class="bg-primary text-white font-bold py-2.5 px-5 rounded-xl hover:bg-primary-dark transition-all shadow-lg shadow-primary/20 text-xs uppercase tracking-widest">
          <i class="fas fa-plus mr-1.5"></i>Add
        </button>
      </form>
    </div>
  </div>
</div>

<script>
document.querySelectorAll('input[name="is_variable_qty"]').forEach(function(r) {
  r.addEventListener('change', function() {
    var f = document.querySelector('.variable-fields');
    if (f) f.style.display = this.value === 'True' ? 'flex' : 'none';
  });
});
</script>
{% endblock %}