{% extends 'base.html' %}
{% block content %}
<div class="container mt-4" style="max-width:1200px;">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h3 class="mb-0">Edit TR – {{ '%02d'|format(tr.month) }}/{{ tr.year }}</h3>
    <a class="btn btn-outline-secondary" href="{{ url_for('tr.tr_view', req_id=tr.id) }}">Back to View</a>
  </div>

  <form method="POST" action="{{ url_for('tr.tr_edit', req_id=tr.id) }}" class="card shadow-sm">
    <div class="card-body">

      <div class="table-responsive" style="max-height:70vh;">
        <table class="table table-bordered align-middle mb-0" id="items-table">
          <thead class="table-light position-sticky top-0">
            <tr>
              <th style="width: 140px;">Date</th>
              <th>From</th>
              <th>To</th>
              <th style="width: 120px;">Total KMs</th>
              <th style="width: 120px;">Rate</th>
              <th style="width: 140px;">Amount</th>
              <th style="width: 180px;">Purpose</th>
              <th style="width: 120px;">Mode</th>
              <th style="width: 60px;"></th>
            </tr>
          </thead>
          <tbody id="items-body">
            {% for it in tr.items %}
            <tr>
              <td><input type="date" name="item_date[]" class="form-control" value="{{ it.trip_date.strftime('%Y-%m-%d') }}" required></td>
              <td><input type="text" name="item_from[]" class="form-control" value="{{ it.from_loc }}" required></td>
              <td><input type="text" name="item_to[]" class="form-control" value="{{ it.to_loc }}" required></td>
              <td><input type="number" step="0.01" min="0" name="item_kms[]" class="form-control text-end" value="{{ '%.2f'|format(it.kms_total) }}" required></td>
              <td><input type="number" step="0.01" min="0" name="item_rate[]" class="form-control text-end" value="{{ '%.2f'|format(it.rate) }}" required></td>
              <td><input type="number" step="0.01" min="0" name="item_amount[]" class="form-control text-end" value="{{ '%.2f'|format(it.amount) }}" required></td>
              <td><input type="text" name="item_purpose[]" class="form-control" value="{{ it.purpose or '' }}"></td>
              <td>
                <select name="item_mode[]" class="form-select">
                  {% set modes = ['','Car','Bike','Taxi','Metro','Bus','Other'] %}
                  {% for m in modes %}
                    <option value="{{ m }}" {% if it.mode==m %}selected{% endif %}>{{ m if m else '—' }}</option>
                  {% endfor %}
                </select>
              </td>
              <td class="text-center">
                <button type="button" class="btn btn-sm btn-outline-danger remove-row">✕</button>
              </td>
            </tr>
            {% endfor %}
          </tbody>
          <tfoot>
            <tr>
              <th colspan="3" class="text-end">Totals:</th>
              <th class="text-end"> <span id="total-kms">{{ '%.2f'|format(tr.total_kms or 0) }}</span> </th>
              <th></th>
              <th class="text-end">₹ <span id="total-amount">{{ '%.2f'|format(tr.total_amount or 0) }}</span></th>
              <th colspan="3"></th>
            </tr>
          </tfoot>
        </table>
      </div>

      <div class="d-flex justify-content-between mt-3">
        <button type="button" class="btn btn-sm btn-outline-primary" id="add-row">+ Add Row</button>
        <button type="submit" class="btn btn-primary">Save Changes</button>
      </div>
    </div>
  </form>
</div>

<script>
(function() {
  const tbody = document.getElementById('items-body');
  const addBtn = document.getElementById('add-row');
  const totalKmsEl = document.getElementById('total-kms');
  const totalAmtEl = document.getElementById('total-amount');

  function toNumber(v){ return isNaN(parseFloat(v)) ? 0 : parseFloat(v); }
  function recalcRow(tr){
    const kms = toNumber(tr.querySelector('input[name="item_kms[]"]').value);
    const rate = toNumber(tr.querySelector('input[name="item_rate[]"]').value);
    tr.querySelector('input[name="item_amount[]"]').value = (kms * rate).toFixed(2);
  }
  function recalcTotals(){
    let tk=0, ta=0;
    tbody.querySelectorAll('tr').forEach(tr=>{
      tk += toNumber(tr.querySelector('input[name="item_kms[]"]').value);
      ta += toNumber(tr.querySelector('input[name="item_amount[]"]').value);
    });
    totalKmsEl.textContent = tk.toFixed(2);
    totalAmtEl.textContent = ta.toFixed(2);
  }
  function attachRowEvents(tr){
    ['item_kms[]','item_rate[]'].forEach(name=>{
      tr.querySelector(`input[name="${name}"]`).addEventListener('input', ()=>{ recalcRow(tr); recalcTotals(); });
    });
    tr.querySelector('input[name="item_amount[]"]').addEventListener('input', recalcTotals);
    tr.querySelector('.remove-row').addEventListener('click', ()=>{ tr.remove(); recalcTotals(); });
  }
  addBtn.addEventListener('click', ()=>{
    const trEl = document.createElement('tr');
    trEl.innerHTML = `
      <td><input type="date" name="item_date[]" class="form-control" required></td>
      <td><input type="text" name="item_from[]" class="form-control" placeholder="From" required></td>
      <td><input type="text" name="item_to[]" class="form-control" placeholder="To" required></td>
      <td><input type="number" step="0.01" min="0" name="item_kms[]" class="form-control text-end" placeholder="0" required></td>
      <td><input type="number" step="0.01" min="0" name="item_rate[]" class="form-control text-end" placeholder="0" required></td>
      <td><input type="number" step="0.01" min="0" name="item_amount[]" class="form-control text-end" placeholder="0.00" required></td>
      <td><input type="text" name="item_purpose[]" class="form-control" placeholder="Purpose"></td>
      <td>
        <select name="item_mode[]" class="form-select">
          <option value="">—</option><option>Car</option><option>Bike</option><option>Taxi</option>
          <option>Metro</option><option>Bus</option><option>Other</option>
        </select>
      </td>
      <td class="text-center"><button type="button" class="btn btn-sm btn-outline-danger remove-row">✕</button></td>
    `;
    tbody.appendChild(trEl);
    attachRowEvents(trEl);
  });

  // attach events to prefilled rows
  tbody.querySelectorAll('tr').forEach(attachRowEvents);
})();
</script>
{% endblock %}