{# Multi-lot variant of the inline "set basis & dates" form. Reused by
   POST /audit/set-basis/multi which calls Repository.split_imported_transfer.

   Validation:
     - sum of quantities must equal transfer_qty (live, via Alpine)
     - each row must have date <= transfer_date (server-enforced)
     - each cost_basis >= 0 (server-enforced)
#}

<div class="panel p-3"
     x-data='{
       qty: 0,
       targetQty: {{ transfer_qty|float }},
       qtySatisfied: false,
       update() {
         this.qty = Array.from(this.$el.querySelectorAll("input[name=quantities]"))
           .map(i => parseFloat(i.value) || 0)
           .reduce((a, b) => a + b, 0);
         this.qtySatisfied = Math.abs(this.qty - this.targetQty) < 0.0001;
       }
     }'
     x-init="update()">
  <h3 class="m-0 text-[13px] font-semibold mb-1">Set basis &amp; dates</h3>
  <div class="text-[11px] text-label-2 mb-2">
    Total transferred quantity: <span class="font-mono">{{ transfer_qty }}</span> shares
  </div>
  <form hx-post="/audit/set-basis/multi?caller=pane"
        hx-target="closest .panel"
        hx-swap="outerHTML"
        class="space-y-2"
        @input="update()">
    <input type="hidden" name="trade_id" value="{{ trade_id }}">

    <div class="grid grid-cols-[1fr_auto_1fr_auto] gap-1 text-[11px] text-label-2">
      <span>Date</span><span>Qty</span>
      <span title="Total $ paid for the row's shares — not per share">Total cost basis ($)</span>
      <span></span>
    </div>
    <div class="text-[10px] text-label-3 -mt-1 mb-1">
      Enter the total $ for each lot (qty × per-share). Per-share preview shown below each row.
    </div>

    {% if existing_segments %}
      {% for seg in existing_segments %}
        <div data-lot-row class="grid grid-cols-[1fr_auto_1fr_auto] gap-1 items-center">
          <input type="date" name="dates" required
                 value="{{ seg.date }}"
                 max="{{ transfer_date.isoformat() }}"
                 class="px-2 py-1 text-[12px] bg-bg border rounded"
                 style="border-color: var(--color-hairline);">
          <input type="number" name="quantities" step="0.0001" min="0.0001" required
                 value="{{ seg.quantity }}"
                 class="w-20 px-2 py-1 text-[12px] bg-bg border rounded font-mono"
                 style="border-color: var(--color-hairline);">
          <input type="number" name="basises" step="0.01" min="0" required
                 value="{{ seg.basis }}"
                 title="Total $ paid for this row's shares (× quantity), not per share"
                 class="px-2 py-1 text-[12px] bg-bg border rounded font-mono"
                 style="border-color: var(--color-hairline);">
          <button type="button"
                  class="text-label-3 text-[14px] px-1"
                  {% if loop.length == 1 %}disabled title="Need at least one row"
                  {% else %}title="Remove this lot"
                  @click="$el.closest('[data-lot-row]').remove(); update();"{% endif %}>×</button>
        </div>
      {% endfor %}
    {% else %}
      <div data-lot-row class="grid grid-cols-[1fr_auto_1fr_auto] gap-1 items-center">
        <input type="date" name="dates" required
               max="{{ transfer_date.isoformat() }}"
               class="px-2 py-1 text-[12px] bg-bg border rounded"
               style="border-color: var(--color-hairline);">
        <input type="number" name="quantities" step="0.0001" min="0.0001" required
               value="{{ transfer_qty }}"
               class="w-20 px-2 py-1 text-[12px] bg-bg border rounded font-mono"
               style="border-color: var(--color-hairline);">
        <input type="number" name="basises" step="0.01" min="0" required
               title="Total $ paid for this row's shares (× quantity), not per share"
               class="px-2 py-1 text-[12px] bg-bg border rounded font-mono"
               style="border-color: var(--color-hairline);">
        <button type="button"
                class="text-label-3 text-[14px] px-1"
                disabled
                title="Need at least one row">×</button>
      </div>
    {% endif %}

    <button type="button"
            class="text-accent text-[12px] hover:underline"
            @click="
              const tpl = $el.previousElementSibling.cloneNode(true);
              tpl.querySelectorAll('input').forEach(i => { i.value = ''; });
              const removeBtn = tpl.querySelector('button[type=button]');
              removeBtn.disabled = false;
              removeBtn.title = 'Remove this lot';
              removeBtn.addEventListener('click', () => {
                tpl.remove();
                update();
              });
              $el.before(tpl);
              update();
            ">
      + Add lot
    </button>

    <div class="text-[11px] flex items-center gap-2"
         :class="qtySatisfied ? 'text-pos' : 'text-neg'">
      Sum of qty: <span class="font-mono" x-text="qty"></span> /
      <span class="font-mono" x-text="targetQty"></span>
      <span x-show="qtySatisfied">✓</span>
    </div>

    <div class="flex items-center justify-between pt-1">
      <a href="#"
         hx-get="/audit/set-basis/single/{{ trade_id }}"
         hx-target="closest .panel"
         hx-swap="outerHTML"
         class="text-accent text-[12px] hover:underline"
         @click.prevent="
           const filled = Array.from($el.closest('form')
             .querySelectorAll('input[name=dates], input[name=quantities], input[name=basises]'))
             .some(i => i.value);
           if (!filled || confirm('Discard multi-lot rows and switch back to single-lot form?')) return;
           event.stopImmediatePropagation();
         ">
        ← Back to single lot
      </a>
      <button type="submit"
              :disabled="!qtySatisfied"
              :class="qtySatisfied ? '' : 'opacity-50 cursor-not-allowed'"
              class="btn text-[13px] py-1.5 px-4">
        Save
      </button>
    </div>
  </form>
</div>