{% extends "portal_base.html" %}

{% block title %}PDF Report Workshop{% endblock %}

{% block portal_content %}
<style>
.report-card {
  display:grid;
  grid-template-columns: 260px minmax(260px, 1fr);
  gap:16px;
  margin-bottom:18px;
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,0.04);
}
.report-card img {
  max-width:240px;
  max-height:220px;
  border-radius:10px;
}
.report-fields {
  display:flex;
  flex-direction:column;
  gap:8px;
}
@media (max-width: 800px) {
  .report-card { grid-template-columns:1fr; }
}
</style>

<div class="portal-page-header">
  <div>
    <h1 class="portal-page-title">PDF Report Workshop</h1>
    <p class="portal-page-subtitle">Build a client-ready report from staged Archive Workspace images.</p>
  </div>
  <div class="portal-toolbar">
    <a class="portal-btn" href="{{ url_for('main.zip_workspace') }}">Back to Archive Workspace</a>
  </div>
</div>

<form method="post" action="{{ url_for('main.create_pdf_report') }}">
  <section class="service-card" style="margin-bottom:18px;">
    <div class="service-card-header">
      <div>
        <h2>Report Info</h2>
        <p>These fields appear at the top of the PDF.</p>
      </div>
    </div>

    <div class="service-card-actions" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;">
      <input class="portal-input" name="report_name" placeholder="Report filename">
      <input class="portal-input" name="job_title" placeholder="Job Title">
      <input class="portal-input" name="customer" placeholder="Customer">
      <input class="portal-input" name="address" placeholder="Address">
      <input class="portal-input" name="technician" placeholder="Technician">
      <input class="portal-input" name="footer_id" placeholder="Footer ID / generated for">
      <input class="portal-input" name="date" placeholder="Date">

      <select name="quality_mode" class="portal-input">
        <option value="standard" selected>Standard - email friendly</option>
        <option value="compressed">Compressed - smallest file</option>
        <option value="high">High - larger file</option>
      </select>
    </div>
  </section>

  <section class="service-card">
    <div class="service-card-header">
      <div>
        <h2>Images</h2>
        <p>Remove unneeded photos and rotate any sideways images before generating the PDF.</p>
      </div>
    </div>

    <div id="excluded-files"></div>
    <input type="hidden" name="total_files" value="{{ staged_files|length }}">

    {% if staged_files %}
      {% for file in staged_files %}
        <div class="report-card" data-filename="{{ file.name }}">
          <div>
            <img src="{{ url_for('main.pdf_report_preview', filename=file.name) }}" alt="{{ file.name }}">
            <div style="margin-top:8px;font-weight:700;word-break:break-word;">{{ file.name }}</div>
          </div>

          <div class="report-fields">
            <input type="hidden" name="file_{{ loop.index0 }}" value="{{ file.name }}">

            <label>Caption</label>
            <input class="portal-input" name="caption_{{ loop.index0 }}" placeholder="Caption">

            <label>Notes</label>
            <textarea class="portal-input" name="notes_{{ loop.index0 }}" rows="4" placeholder="Notes"></textarea>

            <label>Rotation</label>
            <select class="portal-input" name="rotation_{{ loop.index0 }}">
              <option value="0" selected>No rotation</option>
              <option value="90">Rotate 90° clockwise</option>
              <option value="180">Rotate 180°</option>
              <option value="270">Rotate 270° clockwise</option>
            </select>

            <button class="portal-btn" type="button" onclick="removeReportImage(this)">
              Remove from this report
            </button>
          </div>
        </div>
      {% endfor %}

      <button class="portal-btn primary" type="submit">Generate PDF Report</button>
    {% else %}
      <p>No staged image files found.</p>
    {% endif %}
  </section>
</form>

<script>
function removeReportImage(btn){
  const card = btn.closest(".report-card");
  const filename = card.dataset.filename;
  const holder = document.getElementById("excluded-files");

  const input = document.createElement("input");
  input.type = "hidden";
  input.name = "excluded_files";
  input.value = filename;
  holder.appendChild(input);

  card.remove();
}
</script>
{% endblock %}