{% extends "base.html" %}
{% block content %}
<section class="max-w-7xl mx-auto py-10">

  <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
    <h1 class="text-3xl font-bold">Quote Requests</h1>
    <div class="flex items-center gap-3">
      <input id="q" placeholder="Search name/email/notes…" class="w-64" oninput="filterCards(this.value)" />
      <nav class="text-sm space-x-2">
        {% for key,label in [('active','Active'),('open','Open'),('completed','Completed'),('deleted','Deleted'),('all','All')] %}
          <a class="px-3 py-1 rounded border {{ 'bg-white/10' if show==key else 'border-white/10 hover:border-white/30' }}"
             href="{{ url_for('admin', show=key) }}">{{ label }}</a>
        {% endfor %}
      </nav>
    </div>
  </div>


  <div id="cardGrid" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
    {% for r in rows %}
    <article class="card glass p-5 flex flex-col gap-4 {{ 'opacity-60' if r.deleted_at }}">
      <header class="flex items-start justify-between gap-3">
        <div>
          <div class="text-xs text-white/60">#{{ r.id }} • {{ (r.created_at or '')[:19].replace('T',' ') }}</div>
          <h2 class="text-lg font-semibold">{{ r.name }}</h2>
          <a class="text-sm underline text-white/80" href="mailto:{{ r.email }}">{{ r.email }}</a>
        </div>
        <div class="flex flex-wrap gap-1 justify-end">
          {% set tl = (r.urgency or '-') %}
          {% set st = r.status if r.status else 'open' %}
          <span class="px-2 py-0.5 rounded text-[11px] border
            {% if st == 'completed' %} border-emerald-400 text-emerald-200
            {% else %} border-sky-400 text-sky-200 {% endif %}">{{ st }}</span>
          <span class="px-2 py-0.5 rounded text-[11px] border
            {% if tl in ['critical','rush'] %} border-red-400 text-red-200
            {% elif tl == 'soon' %} border-yellow-400 text-yellow-200
            {% else %} border-emerald-400 text-emerald-200 {% endif %}">{{ tl }}</span>
        </div>
      </header>

      <dl class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
        <div>
          <dt class="text-white/60">What they need</dt>
          <dd class="font-medium">{{ r.project_type or '-' }}</dd>
        </div>
        <div>
          <dt class="text-white/60">Scope</dt>
          <dd class="font-medium">{{ r.complexity or '-' }}</dd>
        </div>
        <div>
          <dt class="text-white/60">Extras</dt>
          <dd class="font-medium">{{ r.features or '-' }}</dd>
        </div>
        <div>
          <dt class="text-white/60">Budget</dt>
          <dd class="font-medium">{{ r.budget_range or '-' }}</dd>
        </div>
        <div>
          <dt class="text-white/60">Est. Hours</dt>
          <dd class="font-medium">{{ r.est_hours }}</dd>
        </div>
        <div>
          <dt class="text-white/60">Est. Cost</dt>
          <dd class="font-medium">${{ '%.2f'|format(r.est_cost or 0) }}</dd>
        </div>
      </dl>

      <div class="text-sm bg-black/30 rounded border border-white/10 p-3 max-h-28 overflow-auto">
        <div class="text-white/60 text-xs mb-1">Client notes</div>
        <div class="line-clamp-3">{{ (r.description or '—') }}</div>
      </div>

      <div class="mt-auto flex items-center justify-between gap-2">
        <button class="btn text-xs" 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>

        <div class="flex gap-2">
          {% if not r.deleted_at and (r.status or 'open') != 'completed' %}
          <form method="post" action="{{ url_for('mark_complete', rid=r.id, show=show) }}">
            <input type="hidden" name="_csrf" value="{{ csrf }}">
            <button class="btn bg-emerald-600/70 text-xs" onclick="return confirm('Mark #{{r.id}} as completed?')">Complete</button>
          </form>
          {% endif %}
          {% if not r.deleted_at %}
          <form method="post" action="{{ url_for('delete_request', rid=r.id, show=show) }}">
            <input type="hidden" name="_csrf" value="{{ csrf }}">
            <button class="btn bg-red-600/70 text-xs" onclick="return confirm('Move #{{r.id}} to Deleted?')">Delete</button>
          </form>
          {% else %}
          <span class="text-xs text-white/50">Deleted</span>
          {% endif %}
        </div>
      </div>
    </article>
    {% endfor %}
  </div>

  <!-- Modal for notes -->
  <dialog id="notesModal" class="backdrop:bg-black/70 rounded-xl w-[min(90vw,760px)]">
    <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 { document.getElementById('jsonText').textContent = JSON.stringify(JSON.parse(raw), null, 2) }
    catch { document.getElementById('jsonText').textContent = raw; }
    modal.showModal();
  }

  function filterCards(q) {
    q = (q || '').toLowerCase();
    document.querySelectorAll('#cardGrid article').forEach(card => {
      card.style.display = card.innerText.toLowerCase().includes(q) ? '' : 'none';
    });
  }
</script>
{% endblock %}