{# File: plugins/plant/templates/plant/edit.html #}
{% extends 'core/base.html' %}
{% block title %}Edit {{ plant.name }} – Nature In Pots{% endblock %}

{% block content %}
<div class="container mt-4">
  <h2>Edit {{ plant.name }}</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.upload_media') }}"
    enctype="multipart/form-data"
    class="mb-4"
  >
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <input type="hidden" name="plugin" value="plants">
    <input type="hidden" name="related_id" value="{{ plant.id }}">
    <div class="input-group">
      <input type="file" name="media" class="form-control" required>
      <button class="btn btn-secondary" type="submit">Upload</button>
    </div>
  </form>

  <hr>

  {# ——— Existing Images & Featured Toggle ——— #}
  <h4>Existing Images</h4>
  <form
    id="delete-images-form"
    method="POST"
    action="{{ url_for('media.bulk_delete_media') }}"
  >
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div class="row">
      {% for m in plant.media_items %}
        <div class="col-md-3 mb-4">
          <div class="card h-100">
            <img
              id="image-{{ m.id }}"
              src="{{ url_for('media.serve_context_media',
                              context='plants',
                              context_id=plant.id,
                              filename=m.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=m.id) }}"
                method="post"
                class="d-inline mb-2"
              >
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <div class="form-check">
                  <input
                    class="form-check-input"
                    type="radio"
                    name="featured_media"
                    value="{{ m.id }}"
                    id="feat-{{ m.id }}"
                    {% if m.featured %}checked{% endif %}
                    onchange="this.form.submit()"
                  >
                  <label class="form-check-label" for="feat-{{ m.id }}">Featured</label>
                </div>
              </form>

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

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

            </div>
          </div>
        </div>
      {% endfor %}
    </div>

    {# use JS-onclick to guarantee confirmation and submission #}
    <button
      type="button"
      class="btn btn-danger mt-2"
      onclick="
        if (confirm('Are you sure you want to delete selected images?')) {
          document.getElementById('delete-images-form').submit();
        }
      "
    >
      Delete Selected Images
    </button>
  </form>
</div>

<script>
  // grab token for rotate calls
  const csrfToken = document.querySelector('input[name=\"csrf_token\"]').value;

  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 new 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 %}
