{% extends "base.html" %}
{% load widget_tweaks %}

{% block title %}{{ is_edit|yesno:"Edit IP,New IP" }} – IP Submission{% endblock %}

{% block content %}
<h4 class="mb-3">{{ is_edit|yesno:"Edit IP,New IP" }}</h4>

<form method="post" enctype="multipart/form-data" class="row g-3">
  {% csrf_token %}

  <!-- LEFT COLUMN -------------------------------------------------------->
  <div class="col-md-8">
    <!-- BASIC INFORMATION CARD -->
    <div class="card p-3 mb-3">
      <h6>Basic Information</h6>

      <div class="mb-2">
        <label class="form-label">IP Title</label>
        {{ form.title|add_class:"form-control" }}
      </div>

      <div class="row">
        <div class="col-md-4 mb-2">
          <label class="form-label">IP Type</label>
          {{ form.ip_type|add_class:"form-select" }}
        </div>
        <div class="col-md-4 mb-2">
          <label class="form-label">Legal IP Status</label>
          {{ form.ip_status|add_class:"form-select" }}
        </div>
        <div class="col-md-4 mb-2">
          <label class="form-label">Funding Status</label>
          {{ form.funding_status|add_class:"form-select" }}
        </div>
      </div>

      <div class="mb-2">
        <label class="form-label">Abstract / Summary</label>
        {{ form.abstract|add_class:"form-control" }}
      </div>

      <div class="row">
        <div class="col-md-6 mb-2">
          <label class="form-label">Domain / Field</label>
          {{ form.domain|add_class:"form-control" }}
        </div>
        <div class="col-md-6 mb-2">
          <label class="form-label">Keywords</label>
          {{ form.keywords|add_class:"form-control" }}
        </div>
      </div>

      <div class="mb-2">
        <label class="form-label">Campus</label>
        {{ form.owning_unit|add_class:"form-control" }}
      </div>
    </div>

    <!-- READINESS INDICATORS CARD -->
    <div class="card p-3 mb-3">
      <h6 class="mb-3">Readiness Indicators (basic)</h6>

      <!-- TRL with info tooltip + preview bar -->
      <div class="mb-3">
        <label class="form-label d-flex align-items-center">
          Technology Readiness Level (TRL)
          <button
  type="button"
  class="btn btn-link btn-sm p-0 ms-2 text-muted"
  data-bs-toggle="tooltip"
  data-bs-placement="right"
  data-bs-html="true"
  data-bs-custom-class="trl-tooltip"
  data-bs-sanitize="false"
  title="
    <div class='trl-grid'>
      <div><strong>0</strong> – Idea only</div>
      <div><strong>1</strong> – Basic principles observed</div>
      <div><strong>2</strong> – Concept formulated</div>
      <div><strong>3</strong> – Experimental proof of concept</div>
      <div><strong>4</strong> – Technology validated in lab</div>
      <div><strong>5</strong> – Technology validated in relevant environment</div>
      <div><strong>6</strong> – Prototype demonstrated in relevant environment</div>
      <div><strong>7</strong> – System prototype demonstration in operational environment</div>
      <div><strong>8</strong> – Actual system completed and qualified</div>
      <div><strong>9</strong> – System proven in operational environment</div>
    </div>
  "
>
  <i class='bi bi-info-circle'></i>
</button>

<style>
.tooltip-inner {
  text-align: left !important;
}
</style>


        </label>

        {{ form.trl|add_class:"form-select" }}

        <div class="form-text">
          Select the current TRL. Hover the <i class="bi bi-info-circle"></i> icon to see the full 0–9 guide.
        </div>

        <!-- Dynamic TRL preview bar -->
        <div class="mt-3">
          <div class="d-flex justify-content-between mb-1">
            <small class="text-muted">Low</small>
            <small class="text-muted">Medium</small>
            <small class="text-muted">High</small>
          </div>
          <div class="progress" style="height: 14px;">
            <div id="trlPreviewBar"
                 class="progress-bar bg-secondary"
                 role="progressbar"
                 style="width: 0%"
                 aria-valuemin="0"
                 aria-valuemax="100">
            </div>
          </div>
          <small id="trlPreviewLabel" class="text-muted d-block mt-1">
            No TRL selected yet.
          </small>
        </div>
      </div>

            <!-- CRL: Commercial readiness -->
      <div class="mb-3 mt-3">
        <label class="form-label d-flex align-items-center">
          Commercial Readiness Level (CRL)
          
         <button
          type="button"
          class="btn btn-link btn-sm p-0 ms-2 text-muted"
          data-bs-toggle="tooltip"
          data-bs-placement="right"
          data-bs-html="true"
          title="
           <div style='text-align:left; white-space:pre-line; font-size:0.85rem;'>
            0 – No market validation <br>
            1 – Initial market feedback / interest <br>
            2 – Clear value proposition validated with target users <br>
            3 – Business case or basic business model prepared <br>
            4 – Licensing / IP or partnership strategy identified <br>
            5 – Ready for commercial rollout / scale-up <br>
            6 – Already in the market or deployed with paying users <br>
</div>
"
>
  <i class="bi bi-info-circle"></i>
</button>

          
        </label>

        {{ form.crl|add_class:"form-select" }}

        <div class="form-text">
          Select how far the technology is along its commercialization path.
        </div>
      </div>


      <!-- Prototype checkbox -->
      <div class="form-check mt-2">
        {{ form.has_prototype }}
        <label class="form-check-label" for="{{ form.has_prototype.id_for_label }}">
          Prototype available
        </label>
      </div>
    </div>

    <!-- NARRATIVE FIELDS -->
    <div class="card p-3 mb-3">
      <h6>Innovation Details</h6>

      <div class="mb-2">
        <label class="form-label">Prior Art Summary</label>
        {{ form.prior_art_summary|add_class:"form-control" }}
      </div>

      <div class="mb-2">
        <label class="form-label">Claimed Novelty</label>
        {{ form.claimed_novelty|add_class:"form-control" }}
      </div>

      <div class="mb-2">
        <label class="form-label">Target Market</label>
        {{ form.target_market|add_class:"form-control" }}
      </div>
      
      <div class="mb-2">
        <label class="form-label">Market Need (Problem / Pain Point)</label>
        {{ form.market_need|add_class:"form-control" }}
      </div>

      <div class="mb-2">
        <label class="form-label">Business Model Clarity</label>
        {{ form.biz_model_clarity|add_class:"form-control" }}
      </div>
    </div>

    <!-- SUPPORTING DOCUMENTS CARD -->
    {% if formset.non_form_errors %}
      <div class="alert alert-danger">
        {{ formset.non_form_errors }}
      </div>
    {% endif %}
 
    {{ formset.management_form }}
    <div class="card p-3 mb-3">
      
      <h6>Supporting Documents</h6>

      <!-- Container for all document rows -->
      <div id="documents-container">
        {% for f in formset %}
          <div class="row g-2 align-items-end mb-2 doc-form">
            {# CRITICAL: Include the hidden ID field for existing documents #}
            {% for hidden in f.hidden_fields %}
              {{ hidden }}
            {% endfor %}
            
            <div class="col-md-4">
              <label class="form-label">Document Type</label>
              {{ f.doc_type|add_class:"form-select" }}
              {% if f.doc_type.errors %}
                <div class="text-danger small">{{ f.doc_type.errors }}</div>
              {% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label">File (PDF)</label><br>
              {% if f.instance.pk and f.instance.file %}
                <div class="small text-muted mb-1">
                  Current: <a href="{{ f.instance.file.url }}" target="_blank">{{ f.instance.file.name|cut:"ip_docs/" }}</a>
                </div>
              {% endif %}
              {{ f.file }}
              {% if f.file.errors %}
                <div class="text-danger small">{{ f.file.errors }}</div>
              {% endif %}
            </div>
            <div class="col-md-2">
              {% if f.instance.pk %}
                <div class="form-check mt-4">
                  {{ f.DELETE|add_class:"form-check-input" }}
                  <label class="form-check-label">Delete</label>
                </div>
              {% endif %}
            </div>
            {% if f.non_field_errors %}
              <div class="col-12">
                <div class="text-danger small">{{ f.non_field_errors }}</div>
              </div>
            {% endif %}
          </div>
        {% endfor %}
      </div>

      <!-- Hidden empty form template for JS cloning -->
      <div id="empty-form" class="d-none">
        <div class="row g-2 align-items-end mb-2 doc-form">
          <div class="col-md-4">
            <label class="form-label">Document Type</label>
            {{ formset.empty_form.doc_type|add_class:"form-select" }}
          </div>
          <div class="col-md-6">
            <label class="form-label">File (PDF)</label><br>
            {{ formset.empty_form.file }}
          </div>
          <div class="col-md-2"></div>
        </div>
      </div>

      <button type="button" class="btn btn-outline-secondary btn-sm mt-2" id="add-document">
        + Add another document
      </button>

      <small class="text-muted d-block mt-2">
        You can attach abstract, description, claims, drawings, etc. Only PDF allowed for now.
      </small>
    </div>

    <!-- ACTION BUTTONS -->
    <div class="mt-2">
      <button class="btn btn-outline-secondary" name="action" value="save">
        Save as Draft
      </button>
      <button class="btn btn-success" name="action" value="submit">
        Submit
      </button>

      {% if is_edit and asset %}
        <a class="btn btn-light" href="{% url 'portfolio:ip_detail' asset.id %}">
          Cancel
        </a>
      {% elif is_edit and ip %}
        <a class="btn btn-light" href="{% url 'portfolio:ip_detail' ip.id %}">
          Cancel
        </a>
      {% else %}
        <a class="btn btn-light" href="{% url 'portfolio:portfolio_list' %}">
          Cancel
        </a>
      {% endif %}
    </div>
  </div>

  <!-- RIGHT COLUMN ------------------------------------------------------->
  <div class="col-md-4">
    <div class="alert alert-info">
      <strong>Guide:</strong> This form collects the core inputs for the AI TRL/CRL
      assessment. You can save as draft and return later, or submit to the
      Technology Transfer Office.
    </div>
  </div>
</form>

<script>
document.addEventListener("DOMContentLoaded", function() {
    // ---- Add-document dynamic form ----
    const addBtn = document.getElementById("add-document");
    if (addBtn) {
        const container = document.getElementById("documents-container");
        const emptyFormTemplate = document.getElementById("empty-form").innerHTML;
        const totalFormsInput = document.getElementById("id_{{ formset.prefix }}-TOTAL_FORMS");

        // Start from whatever Django set as the total number of forms
        let formCount = parseInt(totalFormsInput.value, 10) || 0;

        addBtn.addEventListener("click", function (e) {
            e.preventDefault();

            // Replace __prefix__ with the current form index
            const newFormHtml = emptyFormTemplate.replace(/__prefix__/g, formCount);

            // Append the new form row
            container.insertAdjacentHTML("beforeend", newFormHtml);

            // Increase the count and update the management form
            formCount += 1;
            totalFormsInput.value = formCount;
        });
    }

    // ---- TRL preview bar ----
    const trlSelect = document.getElementById('id_trl');
    const bar = document.getElementById('trlPreviewBar');
    const label = document.getElementById('trlPreviewLabel');

    if (trlSelect && bar && label) {
        const descriptions = {
            1: 'TRL 1 – Basic principles observed',
            2: 'TRL 2 – Concept formulated',
            3: 'TRL 3 – Experimental proof of concept',
            4: 'TRL 4 – Technology validated in lab',
            5: 'TRL 5 – Technology validated in relevant environment',
            6: 'TRL 6 – Prototype demonstrated in relevant environment',
            7: 'TRL 7 – System prototype demonstration in operational environment',
            8: 'TRL 8 – Actual system completed and qualified',
            9: 'TRL 9 – System proven in operational environment'
        };

        function updatePreview() {
            const value = parseInt(trlSelect.value || '0', 10);

            if (!value) {
                bar.style.width = '0%';
                bar.className = 'progress-bar bg-secondary';
                label.textContent = 'No TRL selected yet.';
                return;
            }

            const percent = Math.round((value / 9) * 100);

            bar.style.width = percent + '%';

            bar.className = 'progress-bar';
            if (value <= 3) {
                bar.classList.add('bg-danger');
            } else if (value <= 6) {
                bar.classList.add('bg-warning', 'text-dark');
            } else {
                bar.classList.add('bg-success');
            }

            label.textContent = descriptions[value] || ('TRL ' + value);
        }

        trlSelect.addEventListener('change', updatePreview);
        updatePreview();  // initial state
    }
      
    // ---- Bootstrap tooltip init (for the TRL info icon) ----
    if (window.bootstrap) {
        const tooltipTriggerList = [].slice.call(
            document.querySelectorAll('[data-bs-toggle="tooltip"]')
        );
        tooltipTriggerList.forEach(function (tooltipTriggerEl) {
            new bootstrap.Tooltip(tooltipTriggerEl);
        });
    }
});
</script>
{% endblock %}