{% extends 'base.html' %}
{% block content %}
<div class="container mt-4" style="max-width:1100px;">
  <h3 class="mb-3 text-primary fw-bold d-flex align-items-center gap-2">
    <i class="bi bi-cash-coin"></i> New Travel Reimbursement
  </h3>

  {% 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_new') }}" id="tr-form" enctype="multipart/form-data" class="card shadow border-0">
    <div class="card-body">
      <!-- Header row -->
      <div class="row g-3 align-items-end">
        <div class="col-12 col-md-3">
          <label class="form-label fw-semibold">Month</label>
          <select name="month" id="month" class="form-select" required>
            {% for m in range(1,13) %}
              <option value="{{ m }}" {% if m == today.month %}selected{% endif %}>{{ '%02d'|format(m) }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-12 col-md-3">
          <label class="form-label fw-semibold">Year</label>
          <input type="number" name="year" id="year" class="form-control" min="2020" value="{{ today.year }}" required inputmode="numeric">
        </div>
        <div class="col-12 col-md d-flex justify-content-md-end gap-2">
          <button type="button" class="btn btn-outline-secondary" id="copy-last">
            <i class="bi bi-clipboard-plus me-1"></i> Copy Previous Row
          </button>
          <button type="button" class="btn btn-outline-primary" id="add-row">
            <i class="bi bi-plus-circle me-1"></i> Add Line Item
          </button>
        </div>
      </div>

      <hr class="my-4">

      <!-- Line items container -->
      <div id="items-wrap" class="d-grid gap-3">
        <!-- JS injects tr-cards here -->
      </div>

      <!-- Sticky totals -->
      <div class="position-sticky bottom-0 mt-4 p-3 border rounded bg-light d-flex flex-wrap gap-3 align-items-center shadow-sm" style="z-index:2">
        <div class="me-4"><strong class="text-primary">Totals</strong></div>
        <div class="ms-auto"></div>
        <div class="d-flex align-items-center gap-2">
          <span class="text-muted">Total KMs:</span>
          <span id="total-kms" class="fw-bold text-dark">0.00</span>
        </div>
        <div class="vr mx-2 d-none d-md-block"></div>
        <div class="d-flex align-items-center gap-2">
          <span class="text-muted">Total Amount:</span>
          <span class="fw-bold text-success">₹ <span id="total-amount">0.00</span></span>
        </div>
      </div>

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

<!-- Template for a line item card -->
<template id="item-template">
  <div class="tr-card card border shadow-sm rounded-3">
    <div class="card-header bg-primary bg-opacity-10 d-flex justify-content-between align-items-center py-2">
      <span class="fw-semibold text-primary d-flex align-items-center gap-2">
        <span class="badge rounded-pill bg-primary-subtle text-primary border" data-row-index>1</span>
        <i class="bi bi-list-task"></i> Line Item
      </span>
      <div class="d-flex gap-2">
        <button type="button" class="btn btn-sm btn-outline-secondary duplicate-row" title="Duplicate">
          <i class="bi bi-files"></i>
        </button>
        <button type="button" class="btn btn-sm btn-outline-danger remove-row">
          <i class="bi bi-x-circle me-1"></i> Remove
        </button>
      </div>
    </div>
    <div class="card-body">
      <div class="row g-3 align-items-end">
        <div class="col-12 col-sm-6 col-lg-3">
          <label class="form-label">Date</label>
          <input type="date" name="item_date[]" class="form-control" required>
          <div class="form-text text-danger small d-none" data-date-help>Pick a date within the selected month/year.</div>
        </div>

        <div class="col-12 col-sm-6 col-lg-3">
          <label class="form-label">From</label>
          <input type="text" name="item_from[]" class="form-control" placeholder="From location" maxlength="120" required>
        </div>

        <div class="col-12 col-sm-6 col-lg-3">
          <label class="form-label">To</label>
          <input type="text" name="item_to[]" class="form-control" placeholder="To location" maxlength="120" required>
        </div>

        <div class="col-6 col-sm-4 col-lg-2">
          <label class="form-label">Total KMs</label>
          <input type="number" step="0.01" min="0" name="item_kms[]" class="form-control text-end" placeholder="0" inputmode="decimal" required>
        </div>

        <div class="col-6 col-sm-4 col-lg-2">
          <label class="form-label">Rate (₹/km)</label>
          <input type="number" step="0.01" min="0" name="item_rate[]" class="form-control text-end" placeholder="0" inputmode="decimal" required>
        </div>

        <div class="col-6 col-sm-4 col-lg-2">
          <label class="form-label">Amount (₹)</label>
          <input type="number" step="0.01" min="0" name="item_amount[]" class="form-control text-end" placeholder="0.00" inputmode="decimal" required>
        </div>

        <div class="col-12 col-lg-5">
          <label class="form-label mb-1">Attachment <span class="text-muted">(optional – MAX 15 MB)</span></label>
          <input type="file" name="item_attachment[]" class="form-control"
                 accept=".pdf,.jpg,.jpeg,.png,.webp,.doc,.docx,.xls,.xlsx,.csv">
          <div class="form-text small">Allowed: PDF, images, Office docs, CSV.</div>
        </div>

        <div class="col-12 col-lg-3">
          <label class="form-label">Purpose <span class="text-muted">(optional)</span></label>
          <input type="text" name="item_purpose[]" class="form-control" placeholder="Purpose (optional)" maxlength="160">
        </div>

        <div class="col-12 col-sm-6 col-lg-2">
          <label class="form-label">Mode <span class="text-muted">(optional)</span></label>
          <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>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
(() => {
  const wrap = document.getElementById('items-wrap');
  const tpl  = document.getElementById('item-template');
  const add  = document.getElementById('add-row');
  const copyLast = document.getElementById('copy-last');
  const totalKmsEl = document.getElementById('total-kms');
  const totalAmtEl = document.getElementById('total-amount');
  const monthSel = document.getElementById('month');
  const yearInp  = document.getElementById('year');

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

  function withinSelectedMonth(iso){
    if(!iso) return true;
    const d = new Date(iso + 'T00:00:00');
    const m = parseInt(monthSel.value,10);
    const y = parseInt(yearInp.value,10);
    return (d.getUTCFullYear() === y) && (d.getUTCMonth()+1 === m);
  }

  function indexCards(){
    wrap.querySelectorAll('.tr-card').forEach((card,i)=>{
      const badge = card.querySelector('[data-row-index]');
      if(badge) badge.textContent = i+1;
    });
  }

  function recalcRow(card){
    const kms  = num(card.querySelector('input[name="item_kms[]"]').value);
    const rate = num(card.querySelector('input[name="item_rate[]"]').value);
    const amt  = (kms * rate).toFixed(2);
    card.querySelector('input[name="item_amount[]"]').value = amt;
  }

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

  function validateDate(card){
    const dateInput = card.querySelector('input[name="item_date[]"]');
    const help = card.querySelector('[data-date-help]');
    const ok = withinSelectedMonth(dateInput.value);
    dateInput.classList.toggle('is-invalid', !ok);
    help?.classList.toggle('d-none', ok);
    return ok;
  }

  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 hookCard(card){
    ['item_kms[]','item_rate[]'].forEach(name => {
      card.querySelector(`input[name="${name}"]`).addEventListener('input', () => { recalcRow(card); recalcTotals(); });
    });
    card.querySelector('input[name="item_amount[]"]').addEventListener('input', recalcTotals);

    const dateInput = card.querySelector('input[name="item_date[]"]');
    dateInput.addEventListener('change', () => validateDate(card));

    const fileInput = card.querySelector('input[type="file"]');
    fileInput.addEventListener('change', () => fileGuard(fileInput));

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

    card.querySelector('.duplicate-row').addEventListener('click', () => {
      const dup = addCard();
      // copy values except file
      ['item_date[]','item_from[]','item_to[]','item_kms[]','item_rate[]','item_amount[]','item_purpose[]','item_mode[]'].forEach(name=>{
        const src = card.querySelector(`[name="${name}"]`);
        const dst = dup.querySelector(`[name="${name}"]`);
        if (src && dst){ dst.value = src.value; }
      });
      recalcRow(dup); recalcTotals(); validateDate(dup);
    });
  }

  function addCard(){
    const node = tpl.content.cloneNode(true);
    wrap.appendChild(node);
    const card = wrap.lastElementChild;
    hookCard(card);
    indexCards();
    return card;
  }

  add.addEventListener('click', addCard);
  copyLast.addEventListener('click', () => {
    const last = wrap.querySelector('.tr-card:last-of-type');
    if (!last) { addCard(); return; }
    last.querySelector('.duplicate-row').click();
  });

  // enforce dates when month/year change
  function revalidateAllDates(){
    wrap.querySelectorAll('.tr-card').forEach(validateDate);
  }
  monthSel.addEventListener('change', revalidateAllDates);
  yearInp.addEventListener('change', revalidateAllDates);

  // submit guard: at least one row + all dates valid
  document.getElementById('tr-form').addEventListener('submit', (e)=>{
    const rows = wrap.querySelectorAll('.tr-card');
    if(!rows.length){
      e.preventDefault(); alert('Add at least one line item.'); return;
    }
    let ok = true;
    rows.forEach(card => { if (!validateDate(card)) ok = false; });
    if(!ok){ e.preventDefault(); alert('Fix highlighted dates that are outside the selected month/year.'); }
  });

  // Start with one blank card
  addCard();
})();
</script>

<style>
.tr-card { transition: transform .15s ease, box-shadow .2s ease; }
.tr-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.tr-card .card-header { font-size: .9rem; }
.tr-card .form-label { font-weight: 600; font-size: .85rem; }
.tr-card input[type="number"]::-webkit-outer-spin-button,
.tr-card input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tr-card input[type="number"] { appearance: textfield; }
</style>
{% endblock %}