<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Report an Issue</title>
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/css/report.css">
</head>
<body>

<%# ── Toast & Loader ─────────────────────────────────────────── %>
<div class="toast" id="toast"></div>
<div class="loader" id="loader"><div class="spinner"></div></div>

<%# ── Header ──────────────────────────────────────────────────── %>
<div class="header">
  <div class="header-inner">
    <div class="header-icon">🚨</div>
    <div>
      <h1>Reported Issues</h1> 
    </div>
  </div>
</div>

<%# ── Trip Meta ───────────────────────────────────────────────── %>
<div class="trip-meta">
  <div class="meta-card">
    <div class="meta-item">
      <span class="meta-label">Ref ID</span>
      <span class="meta-value"><%= ref_id || 'Not provided' %></span>
    </div>
    <div class="meta-item">
      <span class="meta-label">Ref Type</span>
      <span class="meta-value"><%= ref_type || 'Not provided' %></span>
    </div>
  </div>
</div>

<%# ── Issue Categories ───────────────────────────────────────── %>
<div class="content">
  <p class="instruction">
    Tap the <span>checkbox</span> to select an issue.
    Choose as many as apply — your report is confidential.
  </p>

  <div id="categories">
    <% categories.forEach(function(cat, ci) { %>
      <div class="category" data-ci="<%= ci %>">

        <%# Category header %>
        <div class="category-header" onclick="toggleCategory(<%= ci %>)">
          <span class="cat-icon"><%= cat.icon %></span>
          <span class="cat-title"><%= cat.title %></span>
          <span class="cat-count" id="catcount_<%= ci %>">0</span>
          <span class="cat-toggle">▾</span>
        </div>

        <%# Options grid %>
        <div class="options-grid" id="grid_<%= ci %>">
          <% cat.issues.forEach(function(issue, ii) {
               const id      = 'c' + ci + 'i' + ii;
               const isOther = cat.hasComment && ii === cat.issues.length - 1;
          %>
            <label class="option" for="<%= id %>">
              <input
                type="checkbox"
                id="<%= id %>"
                data-other="<%= isOther %>"
                onchange="onCheck(this)"
              >
              <span class="option-label"><%= issue %></span>
            </label>

            <% if (isOther) { %>
              <div class="other-comment" id="comment_<%= id %>">
                <textarea
                  id="textarea_<%= id %>"
                  placeholder="Please describe the issue…"
                ></textarea>
              </div>
            <% } %>
          <% }); %>
        </div>

        <div class="divider"></div>
      </div>
    <% }); %>
  </div>
</div>

<%# ── Bottom Summary Bar ─────────────────────────────────────── %>
<div class="summary-bar">
  <div class="summary-inner">
    <div class="selected-count"><span id="countNum">0</span> selected</div>
    <button class="submit-btn" id="submitBtn" disabled onclick="submitReport()">
      Submit Report
    </button>
  </div>
</div>

<%# ── Bootstrap data passed from server ──────────────────────── %>
<script>
  // Values injected by Express route
  const TRIP_ID  = '<%= trip_id %>';
  const Ref_ID   = '<%= ref_id %>';
  const Ref_TYPE   = '<%= ref_type %>';
  const COLOR    = '<%= color %>';

  // Category count for the submit payload
  const CATEGORY_TITLES = <%- JSON.stringify(categories.map(c => c.title)) %>;
</script>
<script src="/js/report.js"></script>
</body>
</html>
