{% extends "base.html" %}

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

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

{% block content %}
<div class="admin-container">
  <h2>Add New Product</h2>
  <form method="POST" enctype="multipart/form-data" class="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" required class="form-control">
        </div>

        <div class="form-group">
          <label for="sku">SKU (Stock Keeping Unit)</label>
          <input type="text" id="sku" name="sku" 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"></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" required class="form-control">
          </div>

          <div class="form-group">
            <label for="stock">Stock Quantity *</label>
            <input type="number" id="stock" name="stock" value="0" 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">
            <option value="">-- Select Category --</option>
            {% for c in categories %}
            <option value="{{ c.id }}">{{ 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" class="form-control" placeholder="e.g., Cotton, Polyester">
          </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 }}">{{ size }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="form-group">
            <label for="color">Color</label>
            <input type="text" id="color" name="color" class="form-control" placeholder="e.g., Red, Blue">
          </div>
        </div>

        <div class="form-group">
          <label for="company">Brand/Company</label>
          <input type="text" id="company" name="company" class="form-control" placeholder="e.g., Nike, Adidas">
        </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" class="form-control" placeholder="0.5">
          </div>

          <div class="form-group">
            <label for="dimensions">Dimensions</label>
            <input type="text" id="dimensions" name="dimensions" class="form-control" placeholder="10x5x3 cm">
          </div>
        </div>
      </div>

      <div class="form-section">
        <h3>Product Images</h3>

        <div class="form-group">
          <label>Upload Images *</label>
          <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>
              <p class="upload-hint">First image will be primary</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>

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