{% extends 'dashboard/base.html' %}
{% block title %}{{ action }} Product{% endblock %}
{% block page_title %}{{ action }} Product{% endblock %}

{% block content %}
<style>
  /* ── Reset & Base ── */
  *, *::before, *::after { box-sizing: border-box; }

  .pf-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 0 40px;
  }

  /* ── Page Header ── */
  .pf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
  }
  .pf-header h1 {
    font-size: clamp(1.2rem, 4vw, 1.6rem);
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--text, #111);
  }
  .pf-breadcrumb {
    font-size: 13px;
    color: var(--muted, #888);
  }
  .pf-breadcrumb a {
    color: var(--primary, #4f46e5);
    text-decoration: none;
  }

  /* ── Layout Grid ── */
  .pf-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    align-items: start;
  }
  .pf-main  { display: flex; flex-direction: column; gap: 16px; }
  .pf-aside { display: flex; flex-direction: column; gap: 16px; }

  /* ── Card ── */
  .pf-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
  }
  .pf-card-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted, #666);
  }
  .pf-card-body { padding: 18px; }

  /* ── Form Elements ── */
  .pf-group { margin-bottom: 16px; }
  .pf-group:last-child { margin-bottom: 0; }

  .pf-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text, #222);
    margin-bottom: 6px;
  }
  .pf-control {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--border, #d1d5db);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text, #111);
    background: var(--input-bg, #fff);
    transition: border-color .18s, box-shadow .18s;
    -webkit-appearance: none;
    appearance: none;
  }
  .pf-control:focus {
    outline: none;
    border-color: var(--primary, #4f46e5);
    box-shadow: 0 0 0 3px rgba(79,70,229,.12);
  }
  textarea.pf-control { resize: vertical; min-height: 110px; }
  select.pf-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }

  .pf-hint {
    font-size: 11.5px;
    color: var(--muted, #888);
    margin-top: 5px;
    line-height: 1.4;
  }

  /* ── Two-column form row ── */
  .pf-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  /* ── Image Upload Grid ── */
  .pf-img-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .pf-img-slot {}
  .pf-img-preview {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid var(--border, #e5e7eb);
    display: block;
  }
  .pf-img-placeholder {
    width: 100%;
    aspect-ratio: 1;
    border: 2px dashed var(--border, #d1d5db);
    border-radius: 8px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted, #bbb);
    font-size: 22px;
    background: var(--surface, #fafafa);
  }
  input[type="file"].pf-control {
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
  }

  /* ── Checkbox ── */
  .pf-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
  }
  .pf-check input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--primary, #4f46e5);
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 4px;
  }
  .pf-check label {
    font-size: 13.5px;
    color: var(--text, #333);
    cursor: pointer;
    line-height: 1.3;
  }

  .pf-divider {
    border: none;
    border-top: 1px solid var(--border, #e5e7eb);
    margin: 14px 0;
  }
  .pf-flag-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted, #999);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }

  /* ── Buttons ── */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: opacity .15s, transform .1s;
    white-space: nowrap;
  }
  .btn:active { transform: scale(.97); }
  .btn-primary  { background: var(--primary, #4f46e5); color: #fff; }
  .btn-outline  { background: transparent; border: 1.5px solid var(--border, #d1d5db); color: var(--text, #333); }
  .btn-danger   { background: var(--danger, #ef4444); color: #fff; }
  .btn-full     { width: 100%; justify-content: center; }
  .btn + .btn   { margin-top: 8px; }

  /* ── Badges ── */
  .badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
  }
  .badge-info    { background: #dbeafe; color: #1d4ed8; }
  .badge-purple  { background: #ede9fe; color: #6d28d9; }
  .badge-warning { background: #fef3c7; color: #92400e; }

  /* ── Danger zone ── */
  .pf-danger-text {
    font-size: 12px;
    color: var(--muted, #888);
    margin-bottom: 12px;
    line-height: 1.5;
  }
  .pf-card-head.danger { color: var(--danger, #ef4444); }

  /* ══════════════════════════════════════
     MOBILE  ≤ 700 px
  ══════════════════════════════════════ */
  @media (max-width: 700px) {

    .pf-wrap { padding: 0 0 32px; }

    /* Stack sidebar below main */
    .pf-grid {
      grid-template-columns: 1fr;
    }

    /* Publish card moves to top on mobile via order */
    .pf-aside { order: -1; }

    /* Publish card: horizontal scrollable flag row on mobile */
    .pf-flags-row {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 16px;
    }
    .pf-flags-row .pf-check { padding: 4px 0; }

    /* Two-col rows collapse */
    .pf-row-2 { grid-template-columns: 1fr; gap: 0; }

    /* Image grid: 3 columns kept but smaller */
    .pf-img-grid { gap: 8px; }
    .pf-img-placeholder { font-size: 18px; }

    /* Header: stacks */
    .pf-header { flex-direction: column; align-items: flex-start; gap: 8px; }

    /* Card padding tighter */
    .pf-card-body { padding: 14px; }
    .pf-card-head { padding: 12px 14px; }

    /* Action buttons always full-width */
    .btn-full-mobile { width: 100%; justify-content: center; }
  }

  /* ══════════════════════════════════════
     VERY SMALL  ≤ 380 px
  ══════════════════════════════════════ */
  @media (max-width: 380px) {
    .pf-img-grid { grid-template-columns: 1fr 1fr; }
    .pf-img-grid .pf-img-slot:last-child { grid-column: span 2; }
  }
</style>

<div class="pf-wrap">
  <!-- Header -->
  <div class="pf-header">
    <div>
      <h1>{{ action }} Product</h1>
      <div class="pf-breadcrumb">
        <a href="{% url 'dashboard:product_list' %}">Products</a> / {{ action }}{% if product %} / {{ product.name }}{% endif %}
      </div>
    </div>
    <a href="{% url 'dashboard:product_list' %}" class="btn btn-outline btn-full-mobile">
      <i class="fas fa-arrow-left"></i> Back
    </a>
  </div>

  <form method="POST" enctype="multipart/form-data">
    {% csrf_token %}

    <div class="pf-grid">

      <!-- ── Main Column ── -->
      <div class="pf-main">

        <!-- Basic Info -->
        <div class="pf-card">
          <div class="pf-card-head">Basic Information</div>
          <div class="pf-card-body">
            <div class="pf-group">
              <label class="pf-label">Product Name *</label>
              <input type="text" name="name" class="pf-control" required
                     value="{{ product.name|default:'' }}" placeholder="e.g. Classic Oxford Shirt">
            </div>
            <div class="pf-row-2">
              <div class="pf-group">
                <label class="pf-label">Category *</label>
                <select name="category" class="pf-control" required>
                  <option value="">Select category…</option>
                  {% for cat in categories %}
                  <option value="{{ cat.pk }}" {% if product and product.category_id == cat.pk %}selected{% endif %}>{{ cat.name }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="pf-group">
                <label class="pf-label">Stock Quantity *</label>
                <input type="number" name="stock" class="pf-control" required min="0"
                       value="{{ product.stock|default:'0' }}">
              </div>
            </div>
            <div class="pf-group">
              <label class="pf-label">Description *</label>
              <textarea name="description" class="pf-control" required rows="5"
                        placeholder="Describe the product in detail…">{{ product.description|default:'' }}</textarea>
            </div>
          </div>
        </div>

        <!-- Pricing -->
        <div class="pf-card">
          <div class="pf-card-head">Pricing</div>
          <div class="pf-card-body">
            <div class="pf-row-2">
              <div class="pf-group">
                <label class="pf-label">Regular Price (₦) *</label>
                <input type="number" name="price" class="pf-control" required
                       step="0.01" min="0" value="{{ product.price|default:'' }}" placeholder="0.00">
              </div>
              <div class="pf-group">
                <label class="pf-label">Discount Price (₦)</label>
                <input type="number" name="discount_price" class="pf-control"
                       step="0.01" min="0" value="{{ product.discount_price|default:'' }}" placeholder="Optional">
                <div class="pf-hint">Leave empty if no discount applies</div>
              </div>
            </div>
          </div>
        </div>

        <!-- Variants -->
        <div class="pf-card">
          <div class="pf-card-head">Variants</div>
          <div class="pf-card-body">
            <div class="pf-group">
              <label class="pf-label">Available Sizes</label>
              <input type="text" name="sizes" class="pf-control"
                     value="{{ product.sizes|default:'' }}" placeholder="e.g. S,M,L,XL,XXL or 39,40,41,42">
              <div class="pf-hint">Comma-separated. Leave empty if no sizes.</div>
            </div>
            <div class="pf-group">
              <label class="pf-label">Available Colors</label>
              <input type="text" name="colors" class="pf-control"
                     value="{{ product.colors|default:'' }}" placeholder="e.g. Black,White,Red,Blue">
              <div class="pf-hint">Comma-separated color names.</div>
            </div>
          </div>
        </div>

        <!-- Images -->
        <div class="pf-card">
          <div class="pf-card-head">Product Images</div>
          <div class="pf-card-body">
            <div class="pf-img-grid">

              <div class="pf-img-slot">
                <label class="pf-label">Main Image</label>
                {% if product and product.image %}
                  <img src="{{ product.image.url }}" class="pf-img-preview" alt="Main">
                {% else %}
                  <div class="pf-img-placeholder"><i class="fas fa-image"></i></div>
                {% endif %}
                <input type="file" name="image" class="pf-control" accept="image/*">
              </div>

              <div class="pf-img-slot">
                <label class="pf-label">Image 2</label>
                {% if product and product.image2 %}
                  <img src="{{ product.image2.url }}" class="pf-img-preview" alt="Image 2">
                {% else %}
                  <div class="pf-img-placeholder"><i class="fas fa-image"></i></div>
                {% endif %}
                <input type="file" name="image2" class="pf-control" accept="image/*">
              </div>

              <div class="pf-img-slot">
                <label class="pf-label">Image 3</label>
                {% if product and product.image3 %}
                  <img src="{{ product.image3.url }}" class="pf-img-preview" alt="Image 3">
                {% else %}
                  <div class="pf-img-placeholder"><i class="fas fa-image"></i></div>
                {% endif %}
                <input type="file" name="image3" class="pf-control" accept="image/*">
              </div>

            </div>
          </div>
        </div>
      </div><!-- /pf-main -->

      <!-- ── Sidebar ── -->
      <div class="pf-aside">

        <!-- Publish -->
        <div class="pf-card">
          <div class="pf-card-head">Publish</div>
          <div class="pf-card-body">

            <div class="pf-check">
              <input type="checkbox" name="is_active" id="is_active"
                     {% if not product or product.is_active %}checked{% endif %}>
              <label for="is_active">Active (visible on store)</label>
            </div>

            <hr class="pf-divider">
            <div class="pf-flag-label">Feature Flags</div>

            <div class="pf-flags-row">
              <div class="pf-check">
                <input type="checkbox" name="is_new_arrival" id="is_new"
                       {% if product and product.is_new_arrival %}checked{% endif %}>
                <label for="is_new"><span class="badge badge-info">New Arrival</span></label>
              </div>
              <div class="pf-check">
                <input type="checkbox" name="is_featured" id="is_feat"
                       {% if product and product.is_featured %}checked{% endif %}>
                <label for="is_feat"><span class="badge badge-purple">Featured</span></label>
              </div>
              <div class="pf-check">
                <input type="checkbox" name="is_best_seller" id="is_best"
                       {% if product and product.is_best_seller %}checked{% endif %}>
                <label for="is_best"><span class="badge badge-warning">Best Seller</span></label>
              </div>
            </div>

            <hr class="pf-divider">

            <button type="submit" class="btn btn-primary btn-full">
              <i class="fas fa-save"></i> Save Product
            </button>

            {% if product %}
            <a href="{{ product.get_absolute_url }}" target="_blank" class="btn btn-outline btn-full">
              <i class="fas fa-eye"></i> View on Store
            </a>
            {% endif %}
          </div>
        </div>

        <!-- Danger Zone -->
        {% if product %}
        <div class="pf-card">
          <div class="pf-card-head danger">Danger Zone</div>
          <div class="pf-card-body">
            <p class="pf-danger-text">This will permanently delete the product and all related data.</p>
            <form action="{% url 'dashboard:product_delete' product.pk %}" method="POST"
                  onsubmit="return confirm('Permanently delete {{ product.name }}? This cannot be undone.')">
              {% csrf_token %}
              <button type="submit" class="btn btn-danger btn-full">
                <i class="fas fa-trash"></i> Delete Product
              </button>
            </form>
          </div>
        </div>
        {% endif %}

      </div><!-- /pf-aside -->
    </div><!-- /pf-grid -->
  </form>
</div><!-- /pf-wrap -->
{% endblock %}