{% extends "shopyo_base/module_base.html" %}
{% set active_page ='products' %}
{% block pagehead %}
<title>Add Product</title>
{% endblock %}
{% block sidebar %}
{%include 'product/blocks/sidebar.html'%}
{%endblock%}
{% block module_content %}
<div class="max-w-3xl mx-auto">
  <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">Add Product</h3>
        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">
          <span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded bg-primary/5 text-primary text-[10px] font-bold border border-primary/10">{{ subcategory.category.name }}</span>
          <span class="mx-1">&middot;</span>
          {{ subcategory.name }}
        </p>
      </div>

      {% if has_product == 'True' %}
      <div class="mb-6 p-4 rounded-2xl border bg-red-50 border-red-200 text-red-700 text-xs font-bold uppercase tracking-widest">
        Product already listed
      </div>
      {% endif %}

      <form action="{{url_for('shopyo_ecommerce.product.add', subcategory_id=subcategory.id)}}" method="post" enctype="multipart/form-data" class="space-y-6">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
        <input type="hidden" name="category" value="{{category}}">

        <div class="space-y-1">
          <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Barcode <span class="text-red-500">*</span></label>
          <div class="relative">
            <i class="fa fa-barcode absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
            <span id="check" class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400"><i class="fa fa-list-alt text-xs"></i></span>
            <input required name="barcode" autocomplete="off" id="barcode" type="text"
                   class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-3 pl-11 pr-10 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none"
                   placeholder="Barcode" value="{{barcodestr}}">
          </div>
        </div>

        <div class="space-y-1">
          <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Name <span class="text-red-500">*</span></label>
          <div class="relative">
            <i class="fa fa-tag absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
            <input required name="name" autocomplete="off" id="name" type="text"
                   class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-3 pl-11 pr-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none"
                   placeholder="Product name">
          </div>
        </div>

        <div class="space-y-1">
          <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Description</label>
          <div class="relative">
            <i class="fa fa-align-left absolute left-4 top-4 text-slate-400 text-xs"></i>
            <textarea rows="4" name="description" autocomplete="off" id="description"
                      class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-3 pl-11 pr-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none"
                      placeholder="Product description"></textarea>
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div class="space-y-1">
            <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Price <span class="text-red-500">*</span></label>
            <div class="relative">
              <i class="fa fa-dollar-sign absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
              <input name="price" required autocomplete="off" id="price" 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-3 pl-11 pr-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none"
                     placeholder="0.00" value=0>
            </div>
          </div>
          <div class="space-y-1">
            <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Selling Price</label>
            <div class="relative">
              <i class="fa fa-tag absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
              <input name="selling_price" autocomplete="off" id="selling_price" 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-3 pl-11 pr-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none"
                     placeholder="0.00" value=0>
            </div>
          </div>
          <div class="space-y-1">
            <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Cost Price</label>
            <div class="relative">
              <i class="fa fa-chart-line absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
              <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-3 pl-11 pr-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none"
                     placeholder="0.00" value=0>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div class="space-y-1">
            <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">In Stock <span class="text-red-500">*</span></label>
            <div class="relative">
              <i class="fa fa-boxes absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
              <input required name="in_stock" autocomplete="off" id="stock" 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-3 pl-11 pr-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none"
                     placeholder="0">
            </div>
          </div>
          <div class="space-y-1">
            <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Min Stock</label>
            <div class="relative">
              <i class="fa fa-exclamation-triangle absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
              <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-3 pl-11 pr-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none"
                     placeholder="0 (no alert)" value="0">
            </div>
          </div>
        </div>

        <div class="space-y-1">
          <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Vendor</label>
          <div class="relative">
            <i class="fas fa-truck absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
            <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-3 pl-11 pr-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none appearance-none">
              <option value="">-- None --</option>
              {% for v in vendors %}
              <option value="{{ 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">Date</label>
          <div class="relative">
            <i class="fa fa-calendar absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
            <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-3 pl-11 pr-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none">
          </div>
        </div>

        <div class="space-y-3 p-4 bg-slate-50 dark:bg-slate-800/50 rounded-2xl border border-slate-200 dark:border-slate-700">
          <div class="flex items-center gap-3">
            <div class="w-8 h-8 rounded-lg bg-primary/10 text-primary flex items-center justify-center"><i class="fas fa-weight text-xs"></i></div>
            <div>
              <h4 class="text-xs font-black text-slate-900 dark:text-white uppercase tracking-tight">Variable Quantity</h4>
              <p class="text-[10px] text-slate-400">For products sold by ml, g, or other units</p>
            </div>
          </div>
          <div class="flex items-center gap-3">
            <label class="flex items-center gap-2 cursor-pointer group">
              <input type="radio" name="is_variable_qty" value="True"
                     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</span>
            </label>
            <label class="flex items-center gap-2 cursor-pointer group">
              <input type="radio" name="is_variable_qty" value="False" 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="grid grid-cols-2 gap-3 variable-fields" style="display:none">
            <div>
              <label class="text-[10px] font-bold text-slate-400 uppercase tracking-widest block mb-1">Unit Label</label>
              <input type="text" name="unit_label" value="ml"
                     class="w-full bg-white 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, oz...">
            </div>
            <div>
              <label class="text-[10px] font-bold text-slate-400 uppercase tracking-widest block mb-1">Step</label>
              <input type="number" name="unit_step" value="1" step="0.1" min="0.1"
                     class="w-full bg-white 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="space-y-1">
          <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Colors</label>
          <div class="relative">
            <i class="fa fa-palette absolute left-4 top-4 text-slate-400 text-xs"></i>
            <textarea rows="3" name="colors" autocomplete="off" id="color_description"
                      class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-3 pl-11 pr-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none"
                      placeholder="One per line or comma-separated:&#10;Red, Blue, Green"></textarea>
          </div>
        </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">(add <code>:price</code> for variant pricing, e.g. <code>50ml:100.00</code>)</span></label>
          <div class="relative">
            <i class="fa fa-ruler-combined absolute left-4 top-4 text-slate-400 text-xs"></i>
            <textarea rows="3" name="sizes" autocomplete="off" id="size_description"
                      class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-3 pl-11 pr-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none"
                      placeholder="One per line or comma-separated:&#10;50ml:100.00&#10;100ml:180.00&#10;S, M, L, XL"></textarea>
          </div>
        </div>

        <div class="space-y-1">
          <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" autocomplete="off"
                     class="w-4 h-4 border-slate-300 dark:border-slate-600 text-red-500 focus:ring-red-500/20">
              <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" autocomplete="off" checked
                     class="w-4 h-4 border-slate-300 dark:border-slate-600 text-emerald-500 focus:ring-emerald-500/20">
              <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>

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

        <button type="submit" class="w-full bg-primary text-white font-bold py-3 px-6 rounded-xl hover:bg-primary-dark transition-all shadow-lg shadow-primary/20 active:scale-[0.98] text-xs uppercase tracking-widest">
          <i class="fas fa-plus-circle mr-2"></i>Add Product
        </button>
      </form>
    </div>
  </div>
</div>

<script>
document.getElementById('barcode')?.addEventListener('input', function() {
  var check = document.getElementById('check');
  fetch('/prods/check/' + encodeURIComponent(this.value))
    .then(r => r.json())
    .then(data => {
      check.innerHTML = data.exists
        ? '<i class="fas fa-exclamation-triangle" style="color:red"></i>'
        : '<i class="fa fa-list-alt"></i>';
    });
});
document.querySelectorAll('input[name="is_variable_qty"]').forEach(function(r) {
  r.addEventListener('change', function() {
    document.querySelector('.variable-fields').style.display = this.value === 'True' ? 'grid' : 'none';
  });
});
</script>
{% endblock %}