{% extends "base.html" %}
{% block content %}
<section class="max-w-6xl mx-auto py-10">
  <div class="flex items-center justify-between mb-6">
    <h1 class="text-3xl font-bold">Quote Requests</h1>

    <!-- simple client-side search -->
    <input id="q" placeholder="Search name/email/need…" class="w-64"
           oninput="filterRows(this.value)" />
  </div>

  <div class="overflow-x-auto card glass">
    <table id="reqTable" class="min-w-full text-sm">
      <thead class="text-left text-white/70">
        <tr>
          <th class="p-3">ID</th>
          <th class="p-3">Date</th>
          <th class="p-3">Name</th>
          <th class="p-3">Email</th>
          <th class="p-3">What They Need</th>
          <th class="p-3">Scope Size</th>
          <th class="p-3">Timeline</th>
          <th class="p-3">Extras</th>
          <th class="p-3">Budget</th>
          <th class="p-3">Est. Hours</th>
          <th class="p-3">Est. Cost</th>
          <th class="p-3">Notes</th>
        </tr>
      </thead>
      <tbody id="reqBody">
        {% for r in rows %}
        <tr class="border-t border-white/10">
          <td class="p-3">{{ r.id }}</td>
          <td class="p-3 whitespace-nowrap">{{ r.created_at[:19].replace('T',' ') }}</td>
          <td class="p-3">{{ r.name }}</td>
          <td class="p-3"><a class="underline" href="mailto:{{ r.email }}">{{ r.email }}</a></td>
          <!-- These columns reuse existing DB fields with friendlier labels -->
          <td class="p-3">{{ r.project_type or '-' }}</td>
          <td class="p-3">{{ r.complexity or '-' }}</td>
          <td class="p-3">
            {% set tl = (r.urgency or '-') %}
            <span class="px-2 py-0.5 rounded text-xs
              {% if tl == 'critical' or tl == 'rush' %} bg-red-500/20 border border-red-500/30 text-red-200
              {% elif tl == 'soon' %} bg-yellow-500/20 border border-yellow-500/30 text-yellow-200
              {% else %} bg-emerald-500/20 border border-emerald-500/30 text-emerald-200
              {% endif %}
            ">{{ tl }}</span>
          </td>
          <td class="p-3">{{ r.features or '-' }}</td>
          <td class="p-3">{{ r.budget_range or '-' }}</td>
          <td class="p-3">{{ r.est_hours }}</td>
          <td class="p-3">${{ '%.2f'|format(r.est_cost or 0) }}</td>
          <td class="p-3">
            <button class="btn" type="button"
              data-notes="{{ (r.description or '') | e }}"
              data-json='{{ (r.json_payload or "{}") | e }}'
              data-meta='{{ (r.name ~ " • " ~ (r.email or "") ~ " • #" ~ r.id) | e }}'
              onclick="openNotes(this)">
              View notes
            </button>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- Modal -->
  <dialog id="notesModal" class="backdrop:bg-black/70 rounded-xl w-[min(90vw,720px)]">
    <form method="dialog" class="glass card p-0 overflow-hidden">
      <header class="flex items-center justify-between px-5 py-3 border-b border-white/10">
        <h2 id="modalTitle" class="font-semibold">Notes</h2>
        <button class="btn" value="close">Close</button>
      </header>
      <div class="p-5 space-y-5">
        <section>
          <h3 class="text-sm font-semibold text-white/70 mb-2">Client notes</h3>
          <pre id="notesText" class="whitespace-pre-wrap text-sm bg-black/40 p-3 rounded border border-white/10"></pre>
        </section>
        <section>
          <h3 class="text-sm font-semibold text-white/70 mb-2">Raw submission (JSON)</h3>
          <pre id="jsonText" class="overflow-auto text-xs bg-black/40 p-3 rounded border border-white/10 max-h-64"></pre>
        </section>
      </div>
      <footer class="px-5 py-3 border-t border-white/10 text-right">
        <button class="btn bg-accent font-semibold" value="close">Done</button>
      </footer>
    </form>
  </dialog>
</section>

<script>
  function openNotes(btn) {
    const modal = document.getElementById('notesModal');
    const notes = btn.getAttribute('data-notes') || '';
    const raw = btn.getAttribute('data-json') || '{}';
    const meta = btn.getAttribute('data-meta') || 'Notes';
    document.getElementById('modalTitle').textContent = meta;
    document.getElementById('notesText').textContent = notes.trim() || '—';
    try {
      const obj = JSON.parse(raw);
      document.getElementById('jsonText').textContent = JSON.stringify(obj, null, 2);
    } catch {
      document.getElementById('jsonText').textContent = raw;
    }
    modal.showModal();
  }

  // simple in-table filter
  function filterRows(q) {
    q = (q || '').toLowerCase();
    document.querySelectorAll('#reqBody tr').forEach(tr => {
      const text = tr.innerText.toLowerCase();
      tr.style.display = text.includes(q) ? '' : 'none';
    });
  }
</script>
{% endblock %}