{% extends "shopyo_base/module_base.html" %}
{% set active_page ='products' %}
{% block pagehead %}
<title>edit</title>
<style type="text/css">
.carousel-control-prev,
.carousel-control-next {
 height: 100px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
 /*height: 50px;*/
 /*width: 100px;*/
 /*border-radius: 50%;*/
 /*border: 1px solid black;*/
 background-image: none !important;
 background: none !important;
 /*font-size: 55px;*/
 /*color: red;*/
}

.carousel-control-next-icon:after {
 content: '>';
 font-size: 55px;
 color: red;
}

.carousel-control-prev-icon:after {
 content: '<';
 font-size: 55px;
 color: red;
}
</style>
{% endblock %}
{% block sidebar %}
{%include 'product/blocks/sidebar.html'%}
{%endblock%}
{% block module_content %}
<br>
<div class="card">
 <div class="card-body">
 <h2>Edit product for
 <span class="badge badge-primary">---</span>
 <span class="badge badge-secondary">---</span>
 </h2>
 <br>
 <form action="{{url_for('shopyo_ecommerce.product.update', subcategory_id=subcategory.id)}}" method="post" enctype="multipart/form-data">
 <label>barcode</label>
 <div class="flex mb-3">
 <div class="flex-prepend">
 <span class="flex-text" id="check"><i class="fa fa-list-alt"></i></span>
 </div>
 <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 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" autocomplete="off" id="barcode" type="hidden" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-3 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none " placeholder="Barcode" value="{{product.barcode}}">
 </div>
 <label>name</label>
 <div class="flex mb-3">
 <div class="flex-prepend">
 <span class="flex-text"><i class="fa fa-list-alt"></i></span>
 </div>
 <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 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>
 <label>description</label>
 <div class="flex mb-3">
 <div class="flex-prepend">
 <span class="flex-text"><i class="fa fa-list-alt"></i></span>
 </div>
 <textarea rows="10" name="description" autocomplete="off" id="description" type="text" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-3 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>
  <label>variable qty</label>
  <div class="flex items-center gap-3 mb-3 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</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-3 mb-3 variable-fields" {{ 'style=\"display:none\"' if not product.is_variable_qty }}>
    <div class="flex-1">
    <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-3 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">
    <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-3 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none">
    </div>
  </div>
  <label>colors</label>
  <div class="flex mb-3">
  <div class="flex-prepend">
  <span class="flex-text"><i class="fa fa-list-alt"></i></span>
  </div>
  <textarea rows="4" name="colors" autocomplete="off" id="color_description" type="text" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-3 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>
  <label>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="flex mb-3">
  <div class="flex-prepend">
  <span class="flex-text"><i class="fa fa-list-alt"></i></span>
  </div>
  <textarea rows="4" name="sizes" autocomplete="off" id="size_description" type="text" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-3 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:&#10;50ml:100.00&#10;100ml:180.00&#10;S, M, L, XL">{{ product.get_size_string() }}</textarea>
  </div>
 <!--
 <label>category</label>
 <div class="flex mb-3">
 <div class="flex-prepend">
 <span class="flex-text"><i class="fa fa-list-alt"></i></span>
 </div>
 <input required
 name="category" autocomplete="off" id="category" type="text" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-3 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none "
 placeholder="Product Category" value="{{product.category_name}}">
 </div>
-->
 <label>date</label>
 <div class="flex mb-3">
 <div class="flex-prepend">
 <span class="flex-text"><i class="fa fa-calendar-day"></i></span>
 </div>
 <input name="date" id="noHistoricDates" autocomplete="off" id="date" type="date" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-3 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none " min="" placeholder="" value="{{product.date}}">
 </div>
 <label>price</label>
 <div class="flex mb-3">
 <div class="flex-prepend">
 <span class="flex-text"><i class="fa fa-list-alt"></i></span>
 </div>
 <input required name="price" 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 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none " placeholder="Price" value="{{product.price}}">
 </div>
 <label>selling price</label>
 <div class="flex mb-3">
 <div class="flex-prepend">
 <span class="flex-text"><i class="fa fa-list-alt"></i></span>
 </div>
 <input required 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 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>
 <label>cost price</label>
 <div class="flex mb-3">
 <div class="flex-prepend">
 <span class="flex-text"><i class="fa fa-list-alt"></i></span>
 </div>
 <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 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>
 <label>in stock</label>
 <div class="flex mb-3">
 <div class="flex-prepend">
 <span class="flex-text"><i class="fa fa-list-alt"></i></span>
 </div>
 <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 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>
 <label>vendor</label>
 <div class="flex mb-3">
 <div class="flex-prepend">
 <span class="flex-text"><i class="fas fa-truck"></i></span>
 </div>
 <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 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>
 <label>min stock (p-4 rounded-2xl border when at or below)</label>
 <div class="flex mb-3">
 <div class="flex-prepend">
 <span class="flex-text"><i class="fa fa-exclamation-triangle"></i></span>
 </div>
 <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 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none " placeholder="Min stock (0 = no p-4 rounded-2xl border)" value="{{product.min_stock or 0}}">
 </div>
 <label>discontinued</label>
 <div class="form-check">
 <input required name="discontinued" autocomplete="off" class="form-check-input" type="radio" value="True" id="defaultCheck1">
 <label class="form-check-label" for="defaultCheck1">
 Yes
 </label>
 <br>
 <input required name="discontinued" autocomplete="off" class="form-check-input" type="radio" value="False" id="defaultCheck1" checked="checked">
 <label class="form-check-label" for="defaultCheck2">
 No
 </label>
 </div>
 <br>
 {%if len(product.resources) != 0%}
 <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
 <div class="carousel-inner">
 {%for resource in product.resources%}
 {%if resource.type == 'image'%}
 <div class="carousel-item {{'active' if loop.index == 1 else ''}}">
 <img class="d-block" width=300 src="{{url_for('resource.product_image', filename=resource.filename)}}" alt="---">
 <a style="margin-top: 10px" class="btn text-white bg-red-500 hover:bg-red-600 border-red-500" href="{{url_for('shopyo_ecommerce.product.image_delete', filename=resource.filename, barcode=product.barcode)}}">delete</a>
 </div>
 {%endif%}
 {%endfor%}
 </div>
 <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
 <span class="sr-only">Previous</span>
 </a>
 <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
 <span class="carousel-control-next-icon" aria-hidden="true"></span>
 <span class="sr-only">Next</span>
 </a>
 <br>
 </div>
 {%endif%}
 <br>
 <label>add images</label>
 <div class="flex mb-3">
 <div class="flex-prepend">
 <span class="flex-text"><i class="fa fa-list-alt"></i></span>
 </div>
 <input class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-3 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none " type="file" name="photos[]" multiple="true" autocomplete="off">
 </div>
 <br>
 <input type="hidden" autocomplete="off" id="category" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-3 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none " name="category" placeholder="category" value="{{category}}">
 <input required type="submit" class="btn text-white bg-sky-500 hover:bg-sky-600 border-sky-500" value="edit">
 <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 <input type="hidden" name="product_id" value="{{ product.id }}" />
  <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>
 </form>
 </div>
</div>

<br>
<div class="card">
 <div class="card-body">
 <h4>Stock Adjustment</h4>
 <form action="{{ url_for('shopyo_ecommerce.product.adjust_stock', barcode=product.barcode) }}" method="POST" style="display:flex;gap:8px;align-items:center;">
 <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 <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-3 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none " style="width:100px;" placeholder="+/- Qty" required>
 <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-3 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none " style="flex:1;" placeholder="Reason for adjustment" required>
 <button type="submit" class="btn btn-warning">Adjust</button>
 <a href="{{ url_for('shopyo_ecommerce.product.adjustments', barcode=product.barcode) }}" class="btn text-white bg-sky-500 hover:bg-sky-600 border-sky-500">History</a>
 </form>
 </div>
<br>
<div class="card">
 <div class="card-body">
 <h4>Bundle Components</h4>
 {% if product.bundle_components %}
 <table class="table ">
 <thead><tr><th>Component</th><th>Qty</th><th></th></tr></thead>
 <tbody>
 {% for bc in product.bundle_components %}
 <tr><td>{{ bc.component.name if bc.component else '?' }}</td><td>{{ bc.quantity }}</td>
 <td><form action="{{ url_for('shopyo_ecommerce.product.bundle_remove_component', bc_id=bc.id) }}" method="POST" style="display:inline;">
 <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 <button class="btn text-white bg-red-500 hover:bg-red-600 border-red-500 px-3 py-1.5 text-[10px]">Remove</button>
 </form></td>
 </tr>
 {% endfor %}
 </tbody>
 </table>
 {% else %}
 <p class="text-slate-400">Not a bundle. Add components below.</p>
 {% endif %}
 <form action="{{ url_for('shopyo_ecommerce.product.bundle_add_component', barcode=product.barcode) }}" method="POST" class="form-inline">
 <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 <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-3 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none mr-2" placeholder="Component barcode" required>
 <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-3 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none mr-2" value="1" min="1" style="width:70px;">
 <button type="submit" class="btn text-white bg-sky-500 hover:bg-sky-600 border-sky-500 px-3 py-1.5 text-[10px]">Add Component</button>
 </form>
 </div>
</div>
{% endblock %}