{% extends 'core/base.html' %}
{% block title %}Edit Plant – Nature In Pots{% endblock %}

{% block content %}
<div class="container mt-4">
  <h2>Edit Plant</h2>

  {# ——— Plant Edit Form ——— #}
  <form method="POST" enctype="multipart/form-data">
    {{ form.hidden_tag() }}

    <div class="mb-3">
      {{ form.plant_type.label(class="form-label") }}
      {{ form.plant_type(class="form-select") }}
    </div>
    <div class="mb-3">
      {{ form.common_name.label(class="form-label") }}
      {{ form.common_name(class="form-select") }}
    </div>
    <div class="mb-3">
      {{ form.scientific_name.label(class="form-label") }}
      {{ form.scientific_name(class="form-select") }}
    </div>
    <div class="mb-3">
      {{ form.mother_uuid.label(class="form-label") }}
      {{ form.mother_uuid(class="form-select") }}
    </div>
    <div class="mb-3">
      {{ form.custom_slug.label(class="form-label") }}
      {{ form.custom_slug(class="form-control") }}
    </div>
    <div class="mb-3">
      {{ form.vendor_name.label(class="form-label") }}
      {{ form.vendor_name(class="form-control") }}
    </div>
    <div class="mb-3">
      {{ form.price.label(class="form-label") }}
      {{ form.price(class="form-control") }}
    </div>
    <div class="mb-3">
      {{ form.notes.label(class="form-label") }}
      {{ form.notes(class="form-control", rows=4) }}
    </div>
    <div class="form-check mb-3">
      {{ form.data_verified(class="form-check-input") }}
      {{ form.data_verified.label(class="form-check-label") }}
    </div>
    <div class="form-check mb-3">
      {{ form.is_active(class="form-check-input") }}
      {{ form.is_active.label(class="form-check-label") }}
    </div>

    <button type="submit" class="btn btn-primary">Save Changes</button>
  </form>

  <hr>

  {# ——— Upload New Image ——— #}
  <h4>Upload Image</h4>
  <form
    method="POST"
    action="{{ url_for('media.add_media', plant_uuid=plant.uuid) }}"
    enctype="multipart/form-data"
    class="mb-4"
  >
    {{ form.csrf_token }}
    <div class="input-group">
      <input type="file" name="file" class="form-control" required>
      <button class="btn btn-secondary" type="submit">Upload</button>
    </div>
  </form>

  {# ——— Existing Images & Featured Toggle ——— #}
  <h4>Existing Images</h4>
  <form
    method="POST"
    id="delete-images-form"
    action="{{ url_for('media.bulk_delete_media', plant_uuid=plant.uuid) }}"
    onsubmit="return confirm('Are you sure you want to delete selected images?');"
  >
    {{ form.csrf_token }}
    <div class="row">
      {% for media in plant.media_items %}
        <div class="col-md-3 mb-4">
          <div class="card h-100">
            <img
              id="image-{{ media.id }}"
              src="{{ url_for('media.media_file',
                             context='plants',
                             context_id=plant.id,
                             filename=media.filename) }}"
              class="card-img-top img-fluid"
              alt="Plant Image"
              style="object-fit:cover; height:150px;"
            >
            <div class="card-body text-center">

              {# — featured toggle — #}
              <form
                action="{{ url_for('media.set_featured_image',
                                    context='plants',
                                    context_id=plant.id,
                                    media_id=media.id) }}"
                method="post"
                class="d-inline"
              >
                <input
                  type="hidden"
                  name="csrf_token"
                  value="{{ form.csrf_token._value() }}"
                >
                <div class="form-check mb-2">
                  <input
                    class="form-check-input"
                    type="radio"
                    name="featured_media"
                    value="{{ media.id }}"
                    {% if media.featured %}checked{% endif %}
                    onchange="this.form.submit()"
                  >
                  <label class="form-check-label">Featured</label>
                </div>
              </form>

              {# — rotate button — #}
              <button
                type="button"
                class="btn btn-outline-secondary btn-sm rotate-btn"
                data-url="{{ url_for('media.rotate_media', media_id=media.id) }}"
                data-id="{{ media.id }}"
              >Rotate</button>

              {# — delete checkbox — #}
              <div class="form-check mt-2">
                <input
                  class="form-check-input delete-checkbox"
                  type="checkbox"
                  name="delete_ids"
                  value="{{ media.id }}"
                  id="del-{{ media.id }}"
                >
                <label class="form-check-label" for="del-{{ media.id }}">Delete</label>
              </div>

            </div>
          </div>
        </div>
      {% endfor %}
    </div>
    <button type="submit" class="btn btn-danger mt-2">Delete Selected Images</button>
  </form>
</div>

<script>
  const csrfToken = "{{ form.csrf_token._value() }}";

  // Rotate buttons
  document.querySelectorAll('.rotate-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      fetch(btn.dataset.url, {
        method: 'POST',
        headers: { 'X-CSRFToken': csrfToken }
      })
      .then(r => {
        if (!r.ok) throw Error();
        const img = document.getElementById(`image-${btn.dataset.id}`);
        img.src = img.src.split('?')[0] + `?v=${Date.now()}`;
      })
      .catch(() => alert('Failed to rotate image.'));
    });
  });
</script>
{% endblock %}
