{% 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" id="bulk-financial-year" 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">Return / Engagement Period</label>
        <select name="period_label" id="bulk-period" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
          <option value="">Not applicable</option>
        </select>
        <label id="bulk-generate-all-wrap" class="mt-2 hidden items-center gap-2 text-sm text-slate-700">
          <input type="checkbox" name="generate_all_periods" id="bulk-generate-all" value="1" class="rounded border-slate-300">
          Generate all periods for the financial year
        </label>
        <p class="mt-1 text-xs text-slate-500">For monthly or quarterly services, due dates are calculated separately for each generated period.</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">Performing Partner</label>
        <select name="performing_partner_user_id" id="bulk-performing-partner" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
          <option value="">Same as Engagement Partner</option>
          {% for u in performing_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">Defaults to the Engagement Partner when left blank.</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">
        <label class="mb-2 flex items-center gap-2 text-sm font-medium text-slate-700">
          <span>Review Partner</span>
          <span id="review-partner-requirement" class="rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-600">Optional</span>
        </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="">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 id="review-partner-help" class="mt-1 text-xs text-slate-500">Optional for non-assurance engagements. A selected Review Partner is saved for every engagement created in this batch.</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, financial year and period 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 fy = document.getElementById('bulk-financial-year');
  const period = document.getElementById('bulk-period');
  const generateAll = document.getElementById('bulk-generate-all');
  const generateWrap = document.getElementById('bulk-generate-all-wrap');
  const info = document.getElementById('service-derived-info');
  const reviewPartner = document.getElementById('bulk-review-partner');
  const reviewRequirement = document.getElementById('review-partner-requirement');
  const reviewHelp = document.getElementById('review-partner-help');
  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 normalizedType = type.trim().toLowerCase().replaceAll('-', '_').replaceAll(' ', '_');
    const assurance = normalizedType === 'assurance';
    reviewPartner.required = assurance;
    reviewRequirement.textContent = assurance ? 'Mandatory' : 'Optional';
    reviewRequirement.className = assurance
      ? 'rounded-full bg-rose-100 px-2 py-0.5 text-xs font-semibold text-rose-700'
      : 'rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-600';
    reviewHelp.textContent = assurance
      ? 'Mandatory because the selected enabled firm service is an assurance engagement.'
      : 'Optional for non-assurance engagements. A selected Review Partner is saved for every engagement created in this batch.';
    const fyMatch = (fy.value || '').trim().match(/^(\d{4})-(\d{2}|\d{4})$/);
    const startYear = fyMatch ? Number(fyMatch[1]) : null;
    period.innerHTML = '';
    generateAll.checked = false;
    period.disabled = false;
    function addPeriod(value, label) { const o = document.createElement('option'); o.value = value; o.textContent = label; period.appendChild(o); }
    if (recurrence === 'monthly' && startYear) {
      [['04','Apr',startYear],['05','May',startYear],['06','Jun',startYear],['07','Jul',startYear],['08','Aug',startYear],['09','Sep',startYear],['10','Oct',startYear],['11','Nov',startYear],['12','Dec',startYear],['01','Jan',startYear+1],['02','Feb',startYear+1],['03','Mar',startYear+1]].forEach(row => addPeriod(`${row[2]}-${row[0]}`, `${row[1]} ${row[2]}`));
      period.required = true; generateWrap.classList.remove('hidden'); generateWrap.classList.add('flex');
    } else if (recurrence === 'quarterly' && startYear) {
      ['Q1','Q2','Q3','Q4'].forEach(q => addPeriod(q, `${q} ${fy.value}`));
      period.required = true; generateWrap.classList.remove('hidden'); generateWrap.classList.add('flex');
    } else {
      addPeriod('', 'Not applicable'); period.required = false; generateWrap.classList.add('hidden'); generateWrap.classList.remove('flex');
    }
    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);
  fy.addEventListener('input', updateServiceInfo);
  generateAll.addEventListener('change', () => { period.disabled = generateAll.checked; });
  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 %}