{% extends "ui/templates/base/layout.html" %}
{% block content %}
{% include "modules/consultants/templates/consultants/_consultant_tabs.html" %}
<div class="space-y-6">
  <div class="flex flex-wrap items-start justify-between gap-4">
    <div>
      <h2 class="text-xl font-semibold text-slate-900">Engagement Progress Report</h2>
      <p class="text-sm text-slate-500">Overall progress, current stage and external blockers for clients linked to you. Internal task allocation and private review notes are not shown.</p>
    </div>
    <a href="/consultant/service-requests/new" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Raise Service Request</a>
  </div>

  <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
    <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft"><div class="text-xs uppercase tracking-wide text-slate-500">Engagements</div><div class="mt-2 text-2xl font-bold text-slate-900">{{ board.total_engagements }}</div></div>
    <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft"><div class="text-xs uppercase tracking-wide text-slate-500">Average Progress</div><div class="mt-2 text-2xl font-bold text-slate-900">{{ board.average_progress }}%</div></div>
    <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft"><div class="text-xs uppercase tracking-wide text-slate-500">With Blockers</div><div class="mt-2 text-2xl font-bold text-amber-700">{{ board.blocked_engagements }}</div></div>
    <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft"><div class="text-xs uppercase tracking-wide text-slate-500">Overdue</div><div class="mt-2 text-2xl font-bold text-red-700">{{ board.overdue_engagements }}</div></div>
  </div>

  <form method="get" class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft">
    <div class="grid gap-3 md:grid-cols-[1fr_auto_auto]">
      <input name="q" value="{{ q or '' }}" placeholder="Search client, engagement, period, stage or blocker" class="rounded-xl border border-slate-300 px-3 py-2 text-sm">
      <select name="status" class="rounded-xl border border-slate-300 px-3 py-2 text-sm">
        <option value="">All stages</option>
        {% for code, label in board.stage_options %}<option value="{{ code }}" {% if status == code %}selected{% endif %}>{{ label }}</option>{% endfor %}
      </select>
      <button class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Filter</button>
    </div>
  </form>

  <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-soft">
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-slate-200 text-sm">
        <thead class="bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500">
          <tr><th class="px-4 py-3">Client / Engagement</th><th class="px-4 py-3">Period</th><th class="min-w-[190px] px-4 py-3">Progress</th><th class="px-4 py-3">Current Stage</th><th class="min-w-[220px] px-4 py-3">Main Blocker</th><th class="px-4 py-3">Pending From</th><th class="px-4 py-3">Due Date</th></tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
          {% for item in board.engagements %}
          <tr class="hover:bg-slate-50">
            <td class="px-4 py-4"><a href="/consultant/engagements/{{ item.subscription.id }}" class="font-semibold text-brand-700 hover:underline">{{ item.client.client_name }}</a><div class="mt-1 text-xs text-slate-500">{{ item.catalogue.service_name }}</div></td>
            <td class="px-4 py-4 text-slate-700">{{ item.subscription.financial_year }}{% if item.subscription.assessment_year %}<div class="text-xs text-slate-500">AY {{ item.subscription.assessment_year }}</div>{% endif %}</td>
            <td class="px-4 py-4"><div class="flex items-center justify-between text-xs font-semibold text-slate-700"><span>{{ item.progress_percentage }}%</span><span>{{ item.completed_tasks }}/{{ item.total_tasks }}</span></div><div class="mt-2 h-2 overflow-hidden rounded-full bg-slate-100"><div class="h-full rounded-full bg-brand-600" style="width: {{ item.progress_percentage }}%"></div></div></td>
            <td class="px-4 py-4"><span class="rounded-full bg-blue-50 px-2 py-1 text-xs font-semibold text-blue-700">{{ item.external_stage }}</span></td>
            <td class="px-4 py-4"><div class="font-medium {% if item.blocker_code != 'none' %}text-amber-800{% else %}text-emerald-700{% endif %}">{{ item.blocker_text }}</div>{% if item.last_update_at %}<div class="mt-1 text-xs text-slate-500">Updated {{ item.last_update_at.strftime('%d-%m-%Y') }}</div>{% endif %}</td>
            <td class="px-4 py-4 text-slate-700">{{ item.pending_from }}</td>
            <td class="px-4 py-4 {% if item.is_overdue %}font-semibold text-red-700{% else %}text-slate-700{% endif %}">{{ item.due_date.strftime('%d-%m-%Y') if item.due_date else '—' }}{% if item.is_overdue %}<div class="text-xs">Overdue</div>{% endif %}</td>
          </tr>
          {% else %}<tr><td colspan="7" class="px-4 py-10 text-center text-slate-500">No consultant-visible engagements found.</td></tr>{% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <section class="rounded-2xl border border-slate-200 bg-white shadow-soft">
    <div class="border-b border-slate-200 px-4 py-3"><h3 class="font-semibold text-slate-900">Tasks Assigned Directly to Me</h3><p class="text-xs text-slate-500">Detailed task execution is available only for tasks specifically assigned to your consultant profile.</p></div>
    <div class="divide-y divide-slate-100">
      {% for item in board.assigned_tasks %}<a href="/consultant/assignments/{{ item.task.id }}" class="flex flex-wrap items-center justify-between gap-3 p-4 hover:bg-slate-50"><div><div class="font-semibold text-slate-900">{{ item.client.client_name }} — {{ item.task.task_name }}</div><div class="text-xs text-slate-500">{{ item.catalogue.service_name }} • {{ item.task.consultant_assignment_status.replace('_',' ').title() }}</div></div><div class="text-right text-xs {% if item.is_overdue %}font-semibold text-red-700{% else %}text-slate-500{% endif %}">{% if item.task.consultant_due_date %}Due {{ item.task.consultant_due_date.strftime('%d-%m-%Y') }}{% else %}No consultant due date{% endif %}</div></a>{% else %}<div class="p-6 text-sm text-slate-500">No task is directly assigned to you.</div>{% endfor %}
    </div>
  </section>

  <div class="rounded-2xl border border-slate-200 bg-white shadow-soft">
    <div class="flex items-center justify-between border-b border-slate-200 px-4 py-3"><div><h3 class="font-semibold text-slate-900">My Service Requests</h3><p class="text-xs text-slate-500">Requests raised by you to the firm.</p></div><a href="/consultant/service-requests" class="text-xs font-semibold text-brand-700 hover:underline">View all</a></div>
    <div class="divide-y divide-slate-100">{% for row in board.service_requests[:8] %}<a href="/consultant/service-requests/{{ row.id }}" class="flex flex-wrap items-center justify-between gap-3 p-4 hover:bg-slate-50"><div><div class="font-semibold text-slate-900">{{ row.subject }}</div><div class="text-xs text-slate-500">{{ row.request_no }} • {{ row.requested_service_name }}</div></div><span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700">{{ row.status.replace('_',' ').title() }}</span></a>{% else %}<div class="p-6 text-sm text-slate-500">No service requests yet.</div>{% endfor %}</div>
  </div>
</div>
{% endblock %}