{% extends "base.html" %}

{% block styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/edit_product.css') }}">
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/edit_product.js') }}" defer></script>
{% endblock %}

{% block content %}
<div class="admin-container">
  <h2>Edit Product: {{ product.name }}</h2>

  <form method="POST" enctype="multipart/form-data" class="product-form" id="product-form">
    <div class="form-grid">

      <div class="form-section">
        <h3>Basic Information</h3>

        <div class="form-group">
          <label for="name">Product Name *</label>
          <input type="text" id="name" name="name" value="{{ product.name }}" required class="form-control">
        </div>
        <div class="form-group">
          <label for="sku">SKU (Stock Keeping Unit)</label>
          <input type="text" id="sku" name="sku" value="{{ product.sku or '' }}" class="form-control"
            placeholder="e.g., TSHIRT-RED-M">
        </div>

        <div class="form-group">
          <label for="description">Description</label>
          <textarea id="description" name="description" class="form-control"
            rows="4">{{ product.description or '' }}</textarea>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label for="price">Price ($) *</label>
            <input type="number" step="0.01" id="price" name="price" value="{{ product.price }}" required
              class="form-control" min="0.01">
          </div>

          <div class="form-group">
            <label for="stock">Stock Quantity *</label>
            <input type="number" id="stock" name="stock" value="{{ product.stock }}" min="0" required
              class="form-control">
          </div>
        </div>
      </div>

      <div class="form-section">
        <h3>Product Details</h3>
        <div class="form-group">
          <label for="category_id">Category *</label>
          <select id="category_id" name="category_id" class="form-control" required>
            <option value="">-- Select Category --</option>
            {% for c in categories %}
            <option value="{{ c.id }}" {% if product.category_id==c.id %}selected{% endif %}>
              {{ c.name }}
            </option>
            {% endfor %}
          </select>
        </div>

        <div class="form-row">

          <div class="form-group">
            <label for="material">Material</label>
            <input type="text" id="material" name="material" value="{{ product.material or '' }}" class="form-control"
              placeholder="e.g., Cotton, Polyester, Denim">
          </div>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label for="size">Size</label>
            <select id="size" name="size" class="form-control">
              <option value="">-- Select Size --</option>
              {% for size in sizes %}
              <option value="{{ size }}" {% if product.size==size %}selected{% endif %}>
                {{ size }}
              </option>
              {% endfor %}
            </select>
          </div>

          <div class="form-group">
            <label for="color">Color</label>
            <input type="text" id="color" name="color" value="{{ product.color or '' }}" class="form-control"
              placeholder="e.g., Red, Blue, Black">
          </div>
        </div>

        <div class="form-group">
          <label for="company">Brand/Company</label>
          <input type="text" id="company" name="company" value="{{ product.company or '' }}" class="form-control"
            placeholder="e.g., Nike, Adidas, Levi's">
        </div>

        <div class="form-row">
          <div class="form-group">
            <label for="weight">Weight (kg)</label>
            <input type="number" step="0.01" id="weight" name="weight" value="{{ product.weight or '' }}"
              class="form-control" placeholder="0.5" min="0">
          </div>

          <div class="form-group">
            <label for="dimensions">Dimensions</label>
            <input type="text" id="dimensions" name="dimensions" value="{{ product.dimensions or '' }}"
              class="form-control" placeholder="10x5x3 cm">
          </div>
        </div>
      </div>

      <div class="form-section">
        <h3>Current Images</h3>
        <div class="current-images">
          {% if product.images %}
          <div class="image-grid">
            {% for image in product.images %}
            <div class="image-item" data-id="{{ image.id }}">
              <img src="/static/uploads/products/{{ image.filename }}" alt="Product Image {{ loop.index }}">
              <div class="image-actions">
                <label class="primary-checkbox">
                  <input type="radio" name="primary_image" value="{{ image.id }}" {% if image.is_primary %}checked{%
                    endif %}>
                  Primary
                </label>
                <button type="button" class="btn-delete-image" onclick="deleteImage('{{ image.id }}')">
                  Delete
                </button>
              </div>
            </div>
            {% endfor %}
          </div>
          {% else %}
          <p class="no-images">No images uploaded yet.</p>
          {% endif %}
        </div>

        <h3 style="margin-top: 30px;">Add New Images</h3>
        <div class="form-group">
          <div class="image-upload-area" id="image-upload-area">
            <div class="upload-prompt">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                <polyline points="17 8 12 3 7 8"></polyline>
                <line x1="12" y1="3" x2="12" y2="15"></line>
              </svg>
              <p>Click or drag images here</p>
            </div>
            <input type="file" name="images[]" multiple accept="image/*" class="image-input" id="image-input">
          </div>

          <div class="image-preview" id="image-preview"></div>
        </div>
      </div>
    </div>

    <input type="hidden" name="deleted_images" id="deleted-images" value="">

    <div class="form-actions">
      <button type="submit" class="btn btn-primary">Update Product</button>
      <a href="{{ url_for('admin.dashboard') }}" class="btn btn-secondary">Cancel</a>
    </div>
  </form>
</div>
{% endblock %}