{# templates/tr/tr_edit.html #}
{% extends 'base.html' %}
{% block content %}
<div class="container mt-4" style="max-width:1200px;">
  <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
    <div class="d-flex align-items-center gap-2">
      <div class="icon-circle">
        <i class="bi bi-pencil-square"></i>
      </div>
      <div>
        <h3 class="mb-0">Edit Reimbursement Request</h3>
        <div class="text-muted small">Update header first, then edit line items.</div>
      </div>
    </div>

    <a class="btn btn-outline-secondary" href="{{ url_for('tr.tr_view', req_id=tr.id) }}">
      <i class="bi bi-arrow-left"></i> Back
    </a>
  </div>

  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      {% for category, message in messages %}
        <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
          {{ message }}
          <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
      {% endfor %}
    {% endif %}
  {% endwith %}

  <form method="POST"
        action="{{ url_for('tr.tr_edit', req_id=tr.id) }}"
        id="rb-form"
        enctype="multipart/form-data"
        class="card shadow-sm border-0">

    <!-- HEADER -->
    <div class="card-body pb-2">
      <div class="row g-3 align-items-end">
        <div class="col-12 col-md-5">
          <label class="form-label fw-semibold">Reimbursement Type <span class="text-danger">*</span></label>

          <select name="reimb_type_id" id="reimb_type_id" class="form-select" required>
            <option value="">Select</option>
            {% for rt in reimb_types %}
              <option value="{{ rt.id }}"
                      {% if tr.reimb_type_id == rt.id %}selected{% endif %}
                      data-requires-route="{{ 1 if rt.requires_route_fields else 0 }}"
                      data-requires-km="{{ 1 if rt.requires_km_fields else 0 }}">
                {{ rt.name }}
              </option>
            {% endfor %}
          </select>

          <div id="type-help" class="mt-2 small text-muted">
            Select a type to see required fields.
          </div>
        </div>

        <div class="col-12 col-md-3">
          <label class="form-label fw-semibold">From Date <span class="text-danger">*</span></label>
          <input type="date" name="from_date" id="from_date" class="form-control" required value="{{ tr.from_date }}">
        </div>

        <div class="col-12 col-md-3">
          <label class="form-label fw-semibold">To Date <span class="text-danger">*</span></label>
          <input type="date" name="to_date" id="to_date" class="form-control" required value="{{ tr.to_date }}">
        </div>

        <div class="col-12 col-md-1 d-grid">
          <button type="button" class="btn btn-primary" id="add-row">
            <i class="bi bi-plus-circle me-1"></i> Add
          </button>
        </div>
      </div>
    </div>

    <hr class="my-0">

    <!-- ITEMS -->
    <div class="card-body pt-3">
      <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-2">
        <div class="fw-semibold">Line Items</div>
        <div class="text-muted small">Tip: Attachment is mandatory for every row.</div>
      </div>

      <div class="table-responsive rb-table-wrap">
        <table class="table table-hover align-middle mb-0 rb-table">
          <thead class="table-light position-sticky top-0">
            <tr>
              <th style="width:55px;">#</th>
              <th style="min-width:170px;">Mode <span class="text-danger">*</span></th>
              <th class="col-route" style="min-width:180px;">From</th>
              <th class="col-route" style="min-width:180px;">To</th>
              <th class="col-km text-end" style="width:110px;">KMs</th>
              <th class="col-km text-end" style="width:110px;">Rate</th>
              <th class="text-end" style="width:140px;">Amount <span class="text-danger">*</span></th>
              <th style="min-width:240px;">Attachment <span class="text-danger">*</span></th>
              <th style="min-width:220px;">Remarks</th>
              <th class="text-end" style="width:140px;">Action</th>
            </tr>
          </thead>

          <tbody id="items-wrap">
            <!-- rows injected by JS -->
          </tbody>
        </table>
      </div>

      <!-- Sticky Totals -->
      <div class="rb-totals mt-3">
        <div class="d-flex align-items-center gap-3 flex-wrap">
          <div class="fw-semibold text-primary">Totals</div>
          <div class="ms-auto"></div>
          <div class="text-muted">Total KMs: <span id="total-kms" class="fw-bold text-dark">0.00</span></div>
          <div class="vr d-none d-md-block"></div>
          <div class="text-muted">
            Total Amount: <span class="fw-bold text-success">₹ <span id="total-amount">0.00</span></span>
          </div>
        </div>
      </div>

      <div class="text-end mt-3">
        <button type="submit" class="btn btn-success btn-lg px-4">
          <i class="bi bi-save2 me-2"></i> Update Request
        </button>
      </div>
    </div>
  </form>
</div>

<!-- Existing items in JSON -->
<script id="existing-items" type="application/json">
[
{% for it in tr.items %}
  {
    "id": {{ it.id }},
    "mode": {{ (it.mode or '')|tojson }},
    "from_loc": {{ (it.from_loc or '')|tojson }},
    "to_loc": {{ (it.to_loc or '')|tojson }},
    "kms_total": {{ (it.kms_total or 0)|float }},
    "rate": {{ (it.rate or 0)|float }},
    "amount": {{ (it.amount or 0)|float }},
    "notes": {{ (it.notes or '')|tojson }},
    "attachment_path": {{ (it.attachment_path or '')|tojson }},
    "attachment_name": {{ (it.attachment_name or '')|tojson }},
    "attachment_type": {{ (it.attachment_type or '')|tojson }}
  }{% if not loop.last %},{% endif %}
{% endfor %}
]
</script>

<!-- Template row -->
<template id="row-template">
  <tr class="rb-row" data-item-id="">
    <td class="text-muted rb-idx">1</td>

    <td>
      <select name="item_mode[]" class="form-select form-select-sm" required>
        <option value="">Select</option>
        <option>Car</option><option>Bike</option><option>Taxi</option>
        <option>Metro</option><option>Bus</option><option>Train</option>
        <option>Flight</option><option>Other</option>
      </select>
    </td>

    <td class="col-route">
      <input type="text" name="item_from[]" class="form-control form-control-sm" placeholder="From" maxlength="120">
    </td>

    <td class="col-route">
      <input type="text" name="item_to[]" class="form-control form-control-sm" placeholder="To" maxlength="120">
    </td>

    <td class="col-km">
      <input type="number" step="0.01" min="0" name="item_kms[]" class="form-control form-control-sm text-end" placeholder="0" inputmode="decimal">
    </td>

    <td class="col-km">
      <input type="number" step="0.01" min="0" name="item_rate[]" class="form-control form-control-sm text-end" placeholder="0" inputmode="decimal">
    </td>

    <td>
      <input type="number" step="0.01" min="0" name="item_amount[]" class="form-control form-control-sm text-end" placeholder="0.00" inputmode="decimal" required>
      <div class="form-text small rb-amt-hint d-none">Auto-calculated (locked)</div>
    </td>

    <td>
      <!-- New upload (optional if keeping existing) -->
      <input type="file" name="item_attachment[]" class="form-control form-control-sm file-input"
             accept=".pdf,.jpg,.jpeg,.png,.webp,.doc,.docx,.xls,.xlsx,.csv">
      <div class="form-text small">Max 15 MB</div>

      <!-- Hidden fields to preserve existing attachment if not re-uploaded -->
      <input type="hidden" name="existing_attachment_path[]" class="existing-path">
      <input type="hidden" name="existing_attachment_name[]" class="existing-name">
      <input type="hidden" name="existing_attachment_type[]" class="existing-type">

      <div class="mt-2 d-flex flex-wrap gap-2 align-items-center">
        <div class="form-check">
          <input class="form-check-input keep-existing" type="checkbox" checked>
          <label class="form-check-label">Keep existing</label>
        </div>

        <a class="btn btn-sm btn-outline-primary view-existing d-none" href="#" target="_blank" rel="noopener">
          <i class="bi bi-eye"></i> View
        </a>

        <span class="badge bg-light text-dark border existing-file-name d-none"></span>
      </div>
    </td>

    <td>
      <input type="text" name="item_notes[]" class="form-control form-control-sm" placeholder="Optional" maxlength="250">
    </td>

    <td class="text-end">
      <div class="btn-group btn-group-sm" role="group">
        <button type="button" class="btn btn-outline-secondary duplicate-row" title="Duplicate">
          <i class="bi bi-files"></i>
        </button>
        <button type="button" class="btn btn-outline-danger remove-row" title="Remove">
          <i class="bi bi-trash"></i>
        </button>
      </div>
    </td>
  </tr>
</template>

<script>
(() => {
  const wrap = document.getElementById('items-wrap');
  const tpl  = document.getElementById('row-template');
  const addBtn = document.getElementById('add-row');

  const typeSel  = document.getElementById('reimb_type_id');
  const fromDate = document.getElementById('from_date');
  const toDate   = document.getElementById('to_date');

  const totalKmsEl = document.getElementById('total-kms');
  const totalAmtEl = document.getElementById('total-amount');
  const typeHelp   = document.getElementById('type-help');

  const existingItems = JSON.parse(document.getElementById('existing-items')?.textContent || '[]');

  const MAX_MB = 15;

  function num(v){ const n = parseFloat(v); return isNaN(n) ? 0 : n; }

  function rules(){
    const opt = typeSel?.selectedOptions?.[0];
    return {
      requiresRoute: opt?.dataset?.requiresRoute === '1',
      requiresKm: opt?.dataset?.requiresKm === '1',
      typeName: opt?.textContent?.trim() || ''
    };
  }

  function applyRulesToUI(){
    const r = rules();

    document.querySelectorAll('.col-route').forEach(el => el.classList.toggle('d-none', !r.requiresRoute));
    document.querySelectorAll('.col-km').forEach(el => el.classList.toggle('d-none', !r.requiresKm));

    if (!typeSel.value){
      typeHelp.textContent = "Select a type to see required fields.";
      return;
    }

    const parts = [];
    parts.push(`Selected: ${r.typeName}.`);
    if (r.requiresRoute) parts.push("From/To fields are required.");
    if (r.requiresKm) parts.push("KMs & Rate are required. Amount will be auto-calculated and locked.");
    if (!r.requiresRoute && !r.requiresKm) parts.push("Enter Amount manually.");
    typeHelp.textContent = parts.join(' ');
  }

  function indexRows(){
    [...wrap.querySelectorAll('tr.rb-row')].forEach((tr, i) => {
      const idx = tr.querySelector('.rb-idx');
      if (idx) idx.textContent = i + 1;
    });
  }

  function recalcRow(tr){
    const r = rules();

    const fromEl = tr.querySelector('input[name="item_from[]"]');
    const toEl   = tr.querySelector('input[name="item_to[]"]');
    const kmsEl  = tr.querySelector('input[name="item_kms[]"]');
    const rateEl = tr.querySelector('input[name="item_rate[]"]');

    const amtEl  = tr.querySelector('input[name="item_amount[]"]');
    const hint   = tr.querySelector('.rb-amt-hint');

    if (fromEl) fromEl.required = r.requiresRoute;
    if (toEl)   toEl.required   = r.requiresRoute;

    if (kmsEl)  kmsEl.required  = r.requiresKm;
    if (rateEl) rateEl.required = r.requiresKm;

    if (!amtEl) return;

    if (r.requiresKm){
      amtEl.readOnly = true;
      amtEl.classList.add('bg-light');
      if (hint) hint.classList.remove('d-none');

      const kms  = num(kmsEl?.value);
      const rate = num(rateEl?.value);
      amtEl.value = (kms > 0 && rate > 0) ? (kms * rate).toFixed(2) : '';
      amtEl.dataset.touched = '1';
    } else {
      amtEl.readOnly = false;
      amtEl.classList.remove('bg-light');
      if (hint) hint.classList.add('d-none');
    }
  }

  function recalcTotals(){
    let tk = 0, ta = 0;
    wrap.querySelectorAll('tr.rb-row').forEach(tr => {
      tk += num(tr.querySelector('input[name="item_kms[]"]')?.value);
      ta += num(tr.querySelector('input[name="item_amount[]"]')?.value);
    });
    totalKmsEl.textContent = tk.toFixed(2);
    totalAmtEl.textContent = ta.toFixed(2);
  }

  function fileGuard(input){
    const f = input.files && input.files[0];
    if(!f) return true;
    if (f.size > MAX_MB * 1024 * 1024){
      input.value = '';
      alert(`File exceeds ${MAX_MB} MB limit.`);
      return false;
    }
    return true;
  }

  function guardRange(){
    if (!fromDate.value || !toDate.value) return true;
    const f = new Date(fromDate.value+'T00:00:00');
    const t = new Date(toDate.value+'T00:00:00');
    if (t < f){
      alert('To Date cannot be before From Date.');
      return false;
    }
    return true;
  }

  function hookAttachment(tr){
    const file = tr.querySelector('.file-input');
    const keep = tr.querySelector('.keep-existing');
    const p = tr.querySelector('.existing-path');
    const n = tr.querySelector('.existing-name');
    const viewBtn = tr.querySelector('.view-existing');
    const nameBadge = tr.querySelector('.existing-file-name');

    // if no existing, force upload
    if (!p.value){
      keep.checked = false;
      keep.closest('.form-check').classList.add('d-none');
      viewBtn.classList.add('d-none');
      if (nameBadge) nameBadge.classList.add('d-none');
      file.required = true;
    } else {
      // show view + badge
      const fname = (n.value || '').trim();
      if (fname && nameBadge){
        nameBadge.textContent = fname;
        nameBadge.classList.remove('d-none');
      }

      const itemId = tr.dataset.itemId;
      if (itemId){
        viewBtn.href = "{{ url_for('tr.tr_item_file', item_id=0) }}".replace('/0/', '/' + itemId + '/');
        viewBtn.classList.remove('d-none');
      }

      file.required = false;
    }

    file.addEventListener('change', () => {
      fileGuard(file);
      if (file.files && file.files.length){
        keep.checked = false;
      }
    });

    keep.addEventListener('change', () => {
      // if they uncheck and no file chosen, require upload
      if (!keep.checked && !(file.files && file.files.length)){
        file.required = true;
      } else {
        file.required = false;
      }
    });
  }

  function hookRow(tr){
    tr.querySelectorAll('input[name="item_kms[]"], input[name="item_rate[]"]').forEach(inp => {
      inp.addEventListener('input', () => {
        recalcRow(tr);
        recalcTotals();
      });
    });

    const amtEl = tr.querySelector('input[name="item_amount[]"]');
    amtEl.addEventListener('input', () => {
      // only matters for manual types; harmless otherwise
      amtEl.dataset.touched = '1';
      recalcTotals();
    });

    const fileEl = tr.querySelector('.file-input');
    fileEl.addEventListener('change', () => fileGuard(fileEl));

    tr.querySelector('.remove-row').addEventListener('click', () => {
      tr.remove();
      indexRows();
      recalcTotals();
    });

    tr.querySelector('.duplicate-row').addEventListener('click', () => {
      const dup = addRow();
      // copy values except file + attachments
      ['item_mode[]','item_from[]','item_to[]','item_kms[]','item_rate[]','item_amount[]','item_notes[]'].forEach(name=>{
        const src = tr.querySelector(`[name="${name}"]`);
        const dst = dup.querySelector(`[name="${name}"]`);
        if (src && dst) dst.value = src.value;
      });

      // do NOT preserve existing attachment on duplicates; require new upload
      dup.dataset.itemId = '';
      dup.querySelector('.existing-path').value = '';
      dup.querySelector('.existing-name').value = '';
      dup.querySelector('.existing-type').value = '';
      dup.querySelector('.view-existing').classList.add('d-none');
      dup.querySelector('.keep-existing').checked = false;
      dup.querySelector('.keep-existing').closest('.form-check').classList.add('d-none');
      dup.querySelector('.file-input').required = true;
      dup.querySelector('.existing-file-name')?.classList.add('d-none');

      applyRulesToUI();
      recalcRow(dup);
      recalcTotals();
      wrap.offsetHeight; // ✅ layout settle
    });

    hookAttachment(tr);

    recalcRow(tr);
  }

  // ✅ same fix as New: apply rules + reflow immediately after adding row
  function addRow(){
    const node = tpl.content.cloneNode(true);
    wrap.appendChild(node);

    const tr = wrap.lastElementChild;

    applyRulesToUI();
    hookRow(tr);
    indexRows();
    recalcTotals();

    wrap.offsetHeight; // ✅ prevents misaligned table after clone/duplicate
    return tr;
  }

  function addRowWithData(it){
    const tr = addRow();
    tr.dataset.itemId = it.id || '';

    tr.querySelector('[name="item_mode[]"]').value = it.mode || '';
    tr.querySelector('[name="item_from[]"]').value = it.from_loc || '';
    tr.querySelector('[name="item_to[]"]').value = it.to_loc || '';
    tr.querySelector('[name="item_kms[]"]').value = (it.kms_total || 0) ? String(it.kms_total) : '';
    tr.querySelector('[name="item_rate[]"]').value = (it.rate || 0) ? String(it.rate) : '';
    tr.querySelector('[name="item_amount[]"]').value = (it.amount || 0) ? (Number(it.amount).toFixed(2)) : '';
    tr.querySelector('[name="item_notes[]"]').value = it.notes || '';

    tr.querySelector('.existing-path').value = it.attachment_path || '';
    tr.querySelector('.existing-name').value = it.attachment_name || '';
    tr.querySelector('.existing-type').value = it.attachment_type || '';

    // refresh attachment UI now that hidden values exist
    hookAttachment(tr);

    applyRulesToUI();
    recalcRow(tr);
    recalcTotals();
    wrap.offsetHeight;
    return tr;
  }

  // events
  addBtn.addEventListener('click', addRow);

  typeSel.addEventListener('change', () => {
    applyRulesToUI();
    wrap.querySelectorAll('tr.rb-row').forEach(tr => recalcRow(tr));
    recalcTotals();
    wrap.offsetHeight;
  });

  document.getElementById('rb-form').addEventListener('submit', (e)=>{
    if(!guardRange()){ e.preventDefault(); return; }
    if(!typeSel.value){ e.preventDefault(); alert('Select Reimbursement Type.'); return; }
    if(!wrap.querySelectorAll('tr.rb-row').length){ e.preventDefault(); alert('Add at least one line item.'); return; }

    const r = rules();
    const rows = [...wrap.querySelectorAll('tr.rb-row')];

    for (let i=0; i<rows.length; i++){
      const tr = rows[i];

      const mode = (tr.querySelector('[name="item_mode[]"]').value || '').trim();
      if (!mode){
        e.preventDefault();
        alert(`Line item ${i+1}: Mode is required.`);
        return;
      }

      const file = tr.querySelector('.file-input');
      const keep = tr.querySelector('.keep-existing');
      const p = tr.querySelector('.existing-path');

      if (!(file.files && file.files.length) && !(keep && keep.checked && p && p.value)){
        e.preventDefault();
        alert(`Line item ${i+1}: Attachment is required (upload or keep existing).`);
        return;
      }

      const fromLoc = (tr.querySelector('[name="item_from[]"]').value || '').trim();
      const toLoc   = (tr.querySelector('[name="item_to[]"]').value || '').trim();
      if (r.requiresRoute && (!fromLoc || !toLoc)){
        e.preventDefault();
        alert(`Line item ${i+1}: From/To is required for this reimbursement type.`);
        return;
      }

      const kms = num(tr.querySelector('[name="item_kms[]"]').value);
      const rate = num(tr.querySelector('[name="item_rate[]"]').value);
      if (r.requiresKm && (kms <= 0 || rate <= 0)){
        e.preventDefault();
        alert(`Line item ${i+1}: KMs and Rate are required for this reimbursement type.`);
        return;
      }

      const amt = num(tr.querySelector('[name="item_amount[]"]').value);
      if (amt <= 0){
        e.preventDefault();
        alert(`Line item ${i+1}: Amount must be greater than 0.`);
        return;
      }
    }
  });

  // init
  applyRulesToUI();

  if (existingItems.length){
    existingItems.forEach(it => addRowWithData(it));
  } else {
    addRow();
  }

  recalcTotals();
  wrap.offsetHeight;
})();
</script>

<style>
.icon-circle{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(13,110,253,.1);
  color:#0d6efd;
  border: 1px solid rgba(13,110,253,.15);
}
.rb-table-wrap{
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  overflow:auto;
  max-height: 60vh;
}
.rb-table{
  table-layout: fixed;
  width: 100%;
}
.rb-table thead th{
  font-size:.85rem;
  white-space:nowrap;
}
.rb-totals{
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
.rb-table input[type="number"]::-webkit-outer-spin-button,
.rb-table input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rb-table input[type="number"] { appearance: textfield; }
</style>
{% endblock %}