{% extends 'product_temp/base.html' %}

{% block content %}
<div class="container">
<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <label for="sku">SKU:</label>
    <input type="text" name="sku" value="{{ product.sku }}" required><br>
    
     <label for="product_type">Product Type:</label>
    <select name="product_type" required  data-control="select2"  >
      <option value="used" {% if product.product_type == 'used' %}selected{% endif %}>Used</option>
      <option value="new" {% if product.product_type == 'new' %}selected{% endif %}>New</option>
    </select><br>
    
    <label for="category">Category:</label>
    <select name="category" required  data-control="select2"  >
      {% for category in categories %}
        <option value="{{ category.pk }}" {% if category.id == product.category_id %}selected{% endif %}>{{  category.category_name}}</option>
      {% endfor %}
    </select><br>
    
    <label for="product_name">Product Name:</label>
    <input type="text" name="product_name" value="{{ product.product_name }}" required><br>
    
    <label for="product_description">Product Description:</label>
    <textarea name="product_description" required>{{ product.product_description }}</textarea><br>
    
    <label for="product_specification_contents">Specification Contents:</label>
    <textarea name="product_specification_contents" required>{{ product.product_specification_contents }}</textarea><br>
    
            
    <label for="current_main_image">Current Main Image:</label><br>
    <div class="image-container">
        <img class="current-image" src="{{ product.product_image_main.url }}" alt="Current Main Image">
        <span class="close-button" onclick="deselectImage('product_image_main')">&times;</span>
    </div><br><br>
    
    <label for="product_image_main">Select New Main Image:</label>
    <input type="file" id="product_image_main" name="product_image_main"><br><br>
    
    <label for="current_other_images">Current Other Images:</label>
    <div class="current-images">
        {% for other_image in product.otherimage_set.all %}
            <div class="image-container">
                <img class="other-image" src="{{ other_image.other_images.url }}" alt="Other Image">
                <span class="close-button" onclick="deselectImage('other_image{{ forloop.counter }}')">&times;</span>
            </div>
        {% endfor %}
    </div>
    
    <label for="other_images">Select New Other Images:</label>
    <input type="file" id="other_images" name="other_images" multiple><br><br>

    

    <label for="product_price">Product Price:</label>
    <input type="number" name="product_price" value="{{ product.product_price }}" required><br>
    
    <label for="specification_pdf">Specification PDF:</label>
    <input type="file" name="specification_pdf"><br>
    
    <input type="submit" value="Save Changes">
</form>
</div>
<h1>Edit Product</h1>

<script>
function deselectImage(inputId) {
        const input = document.getElementById(inputId);
        input.value = null;
        const imageContainer = input.closest('.image-container');
        imageContainer.classList.remove('selected');
    }
</script>
{% endblock %}