{% extends 'core/base.html' %}
{% block content %}
<div class="container mt-4">
  <h2>New Submission</h2>
  <form method="POST" enctype="multipart/form-data" id="submission-form">
    {{ form.hidden_tag() }}

    <!-- Submission Type selector -->
    <div class="mb-3">
      {{ form.submission_type.label(class="form-label") }}
      {{ form.submission_type(class="form-select", id="submission_type") }}
    </div>

    <!-- Plant fields: only for plant‐related types -->
    <div class="mb-3" id="plant-name-group">
      {{ form.plant_name.label(class="form-label") }}
      {{ form.plant_name(class="form-control") }}
      <div class="form-text">Common name of the plant (required for plant‐related submissions).</div>
    </div>

    <div class="mb-3" id="scientific-name-group">
      {{ form.scientific_name.label(class="form-label") }}
      {{ form.scientific_name(class="form-control") }}
      <div class="form-text">Scientific name (optional for plant‐related submissions).</div>
    </div>

    <!-- Market Price fields -->
    <div class="mb-3" id="price-group">
      {{ form.price.label(class="form-label") }}
      {{ form.price(class="form-control") }}
      <div class="form-text">Only for “Market Price” submissions.</div>
    </div>
    <div class="mb-3" id="source-group">
      {{ form.source.label(class="form-label") }}
      {{ form.source(class="form-control") }}
      <div class="form-text">Source/vendor (for market price).</div>
    </div>

    <!-- Name Correction: no extra fields beyond notes -->

    <!-- New Plant Suggestion helper text -->
    <div class="mb-3" id="new-plant-group">
      <p class="text-muted">
        For new plant suggestions, simply fill in common/scientific name and optional notes/images.
      </p>
    </div>

    <!-- Mutation Discovery helper text -->
    <div class="mb-3" id="mutation-group">
      <p class="text-muted">
        For mutation discovery, fill in plant details and upload mutation images.
      </p>
    </div>

    <!-- Vendor Rating / Review fields -->
    <div class="mb-3" id="vendor-name-group">
      {{ form.vendor_name.label(class="form-label") }}
      {{ form.vendor_name(class="form-control") }}
      <div class="form-text">Vendor name to rate/review (e.g., “Etsy Seller X”).</div>
    </div>
    <div class="mb-3" id="rating-group">
      {{ form.rating.label(class="form-label") }}
      {{ form.rating(class="form-select") }}
      <div class="form-text">1 = Poor, 5 = Excellent.</div>
    </div>

    <!-- Vendor Alias Submission fields -->
    <div class="mb-3" id="old-vendor-group">
      {{ form.old_vendor.label(class="form-label") }}
      {{ form.old_vendor(class="form-control") }}
      <div class="form-text">Existing vendor name (to alias).</div>
    </div>
    <div class="mb-3" id="new-vendor-group">
      {{ form.new_vendor.label(class="form-label") }}
      {{ form.new_vendor(class="form-control") }}
      <div class="form-text">New alias name for vendor.</div>
    </div>
    <div class="mb-3" id="alias-reason-group">
      {{ form.alias_reason.label(class="form-label") }}
      {{ form.alias_reason(class="form-control", rows=3) }}
      <div class="form-text">Why this alias is needed (e.g., vendor changed name).</div>
    </div>

    <!-- Notes & Images (always present) -->
    <div class="mb-3">
      {{ form.notes.label(class="form-label") }}
      {{ form.notes(class="form-control", rows=3) }}
      <div class="form-text">Additional notes or context.</div>
    </div>
    <div class="mb-3">
      {{ form.images.label(class="form-label") }}
      {{ form.images(class="form-control", multiple=True) }}
      <div class="form-text">Upload up to 10 images relevant to your submission.</div>
    </div>

    <button class="btn btn-success">{{ form.submit.label.text }}</button>
  </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const typeField = document.getElementById('submission_type');

  // Groups to show/hide
  const plantNameGroup      = document.getElementById('plant-name-group');
  const scientificNameGroup = document.getElementById('scientific-name-group');
  const priceGroup          = document.getElementById('price-group');
  const sourceGroup         = document.getElementById('source-group');
  const newPlantGroup       = document.getElementById('new-plant-group');
  const mutationGroup       = document.getElementById('mutation-group');
  const vendorNameGroup     = document.getElementById('vendor-name-group');
  const ratingGroup         = document.getElementById('rating-group');
  const oldVendorGroup      = document.getElementById('old-vendor-group');
  const newVendorGroup      = document.getElementById('new-vendor-group');
  const aliasReasonGroup    = document.getElementById('alias-reason-group');

  function toggleFields() {
    const t = typeField.value;

    // First hide everything
    [
      plantNameGroup, scientificNameGroup,
      priceGroup, sourceGroup,
      newPlantGroup, mutationGroup,
      vendorNameGroup, ratingGroup,
      oldVendorGroup, newVendorGroup, aliasReasonGroup
    ].forEach(div => div.style.display = 'none');

    // Show core plant fields for plant‐related types
    if (['market_price', 'name_correction', 'new_plant', 'mutation'].includes(t)) {
      plantNameGroup.style.display      = 'block';
      scientificNameGroup.style.display = 'block';
    }

    // Show Market Price fields
    if (t === 'market_price') {
      priceGroup.style.display      = 'block';
      sourceGroup.style.display     = 'block';
    }
    // Show New Plant helper
    else if (t === 'new_plant') {
      newPlantGroup.style.display    = 'block';
    }
    // Show Mutation helper
    else if (t === 'mutation') {
      mutationGroup.style.display    = 'block';
    }
    // Show Vendor Rating / Review fields
    else if (t === 'vendor_rating') {
      vendorNameGroup.style.display  = 'block';
      ratingGroup.style.display      = 'block';
    }
    // Show Vendor Alias fields
    else if (t === 'vendor_alias') {
      oldVendorGroup.style.display   = 'block';
      newVendorGroup.style.display   = 'block';
      aliasReasonGroup.style.display = 'block';
    }
    // For name_correction: only plant fields + notes/images
  }

  typeField.addEventListener('change', toggleFields);
  toggleFields();  // initial call when page first loads
});
</script>
{% endblock %}
