{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex flex-wrap items-start justify-between gap-3">
    <div>
      <h2 class="text-xl font-semibold text-slate-900">Bulk Engagement Setup</h2>
      <p class="text-sm text-slate-500">Choose one enabled firm service, assign the engagement team, and create the same engagement for multiple clients.</p>
    </div>
    <a href="/services/engagements" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Back</a>
  </div>

  {% if error_message %}
  <div class="rounded-2xl border border-rose-200 bg-rose-50 p-4 text-sm font-medium text-rose-700">{{ error_message }}</div>
  {% endif %}

  <form method="post" action="/services/engagements/bulk-new" id="bulk-engagement-form" class="space-y-5">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

    <div class="grid gap-4 rounded-2xl bg-white p-5 shadow-soft md:grid-cols-2 xl:grid-cols-3">
      <div>
        <label class="mb-2 block text-sm font-medium text-slate-700">Financial Year</label>
        <input type="text" name="financial_year" value="{{ financial_year or '2025-26' }}" required placeholder="2025-26" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
      </div>

      <div class="md:col-span-1 xl:col-span-2">
        <label class="mb-2 block text-sm font-medium text-slate-700">Enabled Firm Service</label>
        <select name="service_catalogue_id" id="bulk-service" required class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
          <option value="">Select service</option>
          {% for selection in enabled_services %}
          <option value="{{ selection.catalogue.id }}" data-type="{{ selection.catalogue.engagement_type or 'non_assurance' }}" data-recurrence="{{ selection.catalogue.recurrence_type or '' }}">
            {{ selection.catalogue.service_name }} ({{ selection.catalogue.service_code }})
          </option>
          {% endfor %}
        </select>
        <p id="service-derived-info" class="mt-1 text-xs text-slate-500">Due-date rules, recurrence, assurance type, and task workflow are taken from the selected service setup.</p>
      </div>

      <div>
        <label class="mb-2 block text-sm font-medium text-slate-700">Engagement Partner</label>
        <select name="assigned_partner_user_id" id="bulk-partner" required class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
          <option value="">Select partner</option>
          {% for u in partners %}<option value="{{ u.id }}" data-branch="{{ u.branch_id }}">{{ u.full_name or u.email }}</option>{% endfor %}
        </select>
        <p class="mt-1 text-xs text-slate-500">The engagement branch is derived automatically from the selected Partner’s branch.</p>
      </div>

      <div>
        <label class="mb-2 block text-sm font-medium text-slate-700">Default Manager</label>
        <select name="assigned_manager_user_id" id="bulk-manager" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
          <option value="">Not assigned</option>
          {% for u in managers %}<option value="{{ u.id }}" data-branch="{{ u.branch_id }}">{{ u.full_name or u.email }}</option>{% endfor %}
        </select>
      </div>

      <div>
        <label class="mb-2 block text-sm font-medium text-slate-700">Default Staff</label>
        <select name="assigned_staff_user_id" id="bulk-staff" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
          <option value="">Not assigned</option>
          {% for u in staff_users %}<option value="{{ u.id }}" data-branch="{{ u.branch_id }}">{{ u.full_name or u.email }}</option>{% endfor %}
        </select>
      </div>

      <div id="review-partner-field" class="hidden">
        <label class="mb-2 block text-sm font-medium text-slate-700">Review Partner</label>
        <select name="review_partner_user_id" id="bulk-review-partner" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
          <option value="">Use client default / Not assigned</option>
          {% for u in review_partners %}<option value="{{ u.id }}" data-branch="{{ u.branch_id }}">{{ u.full_name or u.email }}</option>{% endfor %}
        </select>
        <p class="mt-1 text-xs text-slate-500">Used only when the selected service is an assurance engagement and the firm setup requires a review partner.</p>
      </div>

      <div class="md:col-span-2 xl:col-span-3">
        <label class="mb-2 block text-sm font-medium text-slate-700">Remarks applied to all created engagements</label>
        <textarea name="remarks" rows="2" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm"></textarea>
      </div>
    </div>

    <div class="rounded-2xl bg-white shadow-soft">
      <div class="flex flex-wrap items-end justify-between gap-3 border-b border-slate-200 p-4">
        <div class="flex flex-wrap items-end gap-3">
          <div>
            <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500">Search clients</label>
            <input type="search" id="client-search" placeholder="Code, name, PAN, GSTIN or type" class="w-80 max-w-full rounded-xl border border-slate-300 px-3 py-2 text-sm">
          </div>
          <button type="button" id="clear-client-search" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Clear</button>
        </div>
        <div class="text-sm text-slate-600"><span id="selected-client-count" class="font-semibold text-slate-900">0</span> clients selected</div>
      </div>

      <div class="max-h-[32rem] overflow-auto">
        <table class="min-w-full divide-y divide-slate-200">
          <thead class="sticky top-0 z-10 bg-slate-50">
            <tr>
              <th class="w-12 px-4 py-3 text-left"><input type="checkbox" id="select-all-visible" class="rounded border-slate-300" title="Select all visible clients"></th>
              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Code</th>
              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Client</th>
              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">PAN / GSTIN</th>
              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Type</th>
              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Current Partner</th>
            </tr>
          </thead>
          <tbody id="client-table-body" class="divide-y divide-slate-100">
            {% for client in clients %}
            {% set search_text = ((client.client_code or '') ~ ' ' ~ (client.client_name or '') ~ ' ' ~ (client.trade_name or '') ~ ' ' ~ (client.pan or '') ~ ' ' ~ (client.gstin or '') ~ ' ' ~ (client.client_type or ''))|lower %}
            <tr class="client-row" data-search="{{ search_text|e }}">
              <td class="px-4 py-3"><input type="checkbox" name="client_ids" value="{{ client.id }}" class="client-checkbox rounded border-slate-300"></td>
              <td class="px-4 py-3 text-sm font-medium text-slate-700">{{ client.client_code }}</td>
              <td class="px-4 py-3 text-sm"><div class="font-medium text-slate-900">{{ client.client_name }}</div>{% if client.trade_name %}<div class="text-xs text-slate-500">{{ client.trade_name }}</div>{% endif %}</td>
              <td class="px-4 py-3 text-xs text-slate-600"><div>PAN: {{ client.pan or '-' }}</div><div>GSTIN: {{ client.gstin or '-' }}</div></td>
              <td class="px-4 py-3 text-sm text-slate-600">{{ client.client_type or '-' }}</td>
              <td class="px-4 py-3 text-xs text-slate-600">{{ client_partner_names.get(client.partner_id, '-') if client.partner_id else '-' }}</td>
            </tr>
            {% else %}
            <tr><td colspan="6" class="px-4 py-8 text-center text-sm text-slate-500">No clients are available for assignment.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <div class="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-slate-200 bg-white p-4 shadow-soft">
      <p class="text-sm text-slate-600">Existing engagements for the same client, service and financial year are skipped automatically. No existing engagement is overwritten.</p>
      <div class="flex gap-3">
        <a href="/services/engagements" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</a>
        <button type="submit" id="create-engagements-button" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">Create Engagements</button>
      </div>
    </div>
  </form>
</div>

<script>
(function () {
  const form = document.getElementById('bulk-engagement-form');
  const service = document.getElementById('bulk-service');
  const info = document.getElementById('service-derived-info');
  const reviewField = document.getElementById('review-partner-field');
  const search = document.getElementById('client-search');
  const clear = document.getElementById('clear-client-search');
  const selectAll = document.getElementById('select-all-visible');
  const count = document.getElementById('selected-client-count');
  const rows = Array.from(document.querySelectorAll('.client-row'));
  const boxes = Array.from(document.querySelectorAll('.client-checkbox'));

  function updateServiceInfo() {
    const option = service.options[service.selectedIndex];
    const type = option ? (option.dataset.type || '') : '';
    const recurrence = option ? (option.dataset.recurrence || '') : '';
    const assurance = type.toLowerCase() === 'assurance';
    reviewField.classList.toggle('hidden', !assurance);
    info.textContent = option && option.value
      ? `Type: ${assurance ? 'Assurance' : 'Non-Assurance'}${recurrence ? ' · Recurrence: ' + recurrence.replaceAll('_', ' ') : ''} · Due-date rule and workflow are taken from the service setup.`
      : 'Due-date rules, recurrence, assurance type, and task workflow are taken from the selected service setup.';
  }

  function updateVisibleRows() {
    const term = (search.value || '').trim().toLowerCase();
    rows.forEach(row => {
      row.classList.toggle('hidden', term && !row.dataset.search.includes(term));
    });
    updateSelectAllState();
  }

  function visibleBoxes() {
    return rows.filter(row => !row.classList.contains('hidden')).map(row => row.querySelector('.client-checkbox'));
  }

  function updateCount() {
    count.textContent = String(boxes.filter(box => box.checked).length);
    updateSelectAllState();
  }

  function updateSelectAllState() {
    const visible = visibleBoxes();
    const checked = visible.filter(box => box.checked).length;
    selectAll.checked = visible.length > 0 && checked === visible.length;
    selectAll.indeterminate = checked > 0 && checked < visible.length;
  }

  service.addEventListener('change', updateServiceInfo);
  search.addEventListener('input', updateVisibleRows);
  clear.addEventListener('click', () => { search.value = ''; updateVisibleRows(); search.focus(); });
  selectAll.addEventListener('change', () => { visibleBoxes().forEach(box => { box.checked = selectAll.checked; }); updateCount(); });
  boxes.forEach(box => box.addEventListener('change', updateCount));
  form.addEventListener('submit', event => {
    const selected = boxes.filter(box => box.checked).length;
    if (!selected) {
      event.preventDefault();
      alert('Select at least one client.');
      return;
    }
    if (!confirm(`Create engagements for ${selected} selected client${selected === 1 ? '' : 's'}?`)) {
      event.preventDefault();
    }
  });

  updateServiceInfo();
  updateCount();
})();
</script>
{% endblock %}