{% extends "finance/base.html" %}
{% load humanize %}
{% block content %}
<style>
.cr-wrap{padding:18px}.cr-title{font-size:1.8rem;font-weight:650;margin-bottom:4px}
.cr-subtitle{color:#6c757d;margin-bottom:18px}.cr-table th{white-space:nowrap;background:#505b66;color:#fff}
.cr-table td{vertical-align:middle}.cr-text-row{background:#eef2f5;font-weight:700}
.cr-total-row{background:#e7f3eb;font-weight:700}.cr-actions{white-space:nowrap}.cr-input{min-width:90px}
.cr-desc{min-width:260px}.autocomplete-box{position:absolute;z-index:1000;background:#fff;border:1px solid #ced4da;border-radius:4px;width:100%;max-height:220px;overflow:auto;box-shadow:0 4px 10px #0002}
.autocomplete-item{padding:7px 10px;cursor:pointer}.autocomplete-item:hover{background:#edf2f7}
</style>

<div class="container-fluid cr-wrap">
  <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
    <div>
      <div class="cr-title">Cost Recovery Design</div>
      <div class="cr-subtitle">Maintain the Cost Recovery report layout from the Excel template.</div>
    </div>
    <div class="d-flex gap-2">
      <a href="/cost_recovery/" class="btn btn-outline-secondary">Cost Recovery Report</a>
      <button class="btn btn-primary" type="button" onclick="showAddForm()">+ Add Line</button>
    </div>
  </div>

  {% if messages %}
    {% for message in messages %}
      <div class="alert alert-{{ message.tags|default:'info' }} alert-dismissible fade show" role="alert">
        {{ message }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
      </div>
    {% endfor %}
  {% endif %}

  <form method="get" class="row g-2 mb-3">
    <div class="col-md-4"><input type="text" class="form-control" name="q" value="{{ q }}" placeholder="Search line, description, account, cost center, AFE"></div>
    <div class="col-auto"><button class="btn btn-outline-primary">Search</button><a href="/cost_recovery/design/" class="btn btn-outline-secondary">Reset</a></div>
  </form>

  <div id="addForm" class="card mb-3" style="display:none">
    <div class="card-header fw-bold">Add Cost Recovery Line</div>
    <div class="card-body">
      <form method="post" class="row g-2 align-items-end">
        {% csrf_token %}<input type="hidden" name="action" value="add">
        <div class="col-md-1"><label class="form-label">Line No</label><input name="lineno" class="form-control" maxlength="3" placeholder="Auto"></div>
        <div class="col-md-2"><label class="form-label">Type</label><select name="type" class="form-select">{% for t in row_types %}<option value="{{ t }}" {% if t == "ACCT" %}selected{% endif %}>{{ t }}</option>{% endfor %}</select></div>
        <div class="col-md-4"><label class="form-label">Description</label><input name="descript" class="form-control" maxlength="50" required></div>
        <div class="col-md-1"><label class="form-label">Cost Center</label><input name="costcenter" class="form-control" maxlength="4"></div>
        <div class="col-md-1"><label class="form-label">AFE</label><input name="afeno" class="form-control" maxlength="8"></div>
        <div class="col-md-2 position-relative"><label class="form-label">Account</label><input name="acct" class="form-control account-search" autocomplete="off" placeholder="Account no"><div class="autocomplete-box" style="display:none"></div></div>
        <div class="col-md-1"><button class="btn btn-success w-100">Add</button></div>
      </form>
    </div>
  </div>

  <div class="table-responsive">
    <table class="table table-bordered table-hover table-sm cr-table">
      <thead><tr><th>Line</th><th>Type</th><th>Description</th><th>Cost Center</th><th>AFE</th><th>Account</th><th class="text-end">MTD</th><th class="text-end">YTD</th><th>Action</th></tr></thead>
      <tbody>
      {% for row in rows %}
        <tr class="{% if row.type == 'TEXT' %}cr-text-row{% elif row.type == 'TOTAL' %}cr-total-row{% endif %}">
            <td>
              {{ row.lineno }}
              <form id="edit-line-{{ row.lineno }}" method="post"></form>
              <input form="edit-line-{{ row.lineno }}" type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
              <input form="edit-line-{{ row.lineno }}" type="hidden" name="action" value="save">
              <input form="edit-line-{{ row.lineno }}" type="hidden" name="lineno" value="{{ row.lineno }}">
            </td>
            <td><select form="edit-line-{{ row.lineno }}" name="type" class="form-select form-select-sm cr-input">{% for t in row_types %}<option value="{{ t }}" {% if row.type == t %}selected{% endif %}>{{ t }}</option>{% endfor %}</select></td>
            <td><input form="edit-line-{{ row.lineno }}" name="descript" class="form-control form-control-sm cr-desc" maxlength="50" value="{{ row.descript|default:'' }}" required></td>
            <td><input form="edit-line-{{ row.lineno }}" name="costcenter" class="form-control form-control-sm cr-input" maxlength="4" value="{{ row.costcenter|default:'' }}"></td>
            <td><input form="edit-line-{{ row.lineno }}" name="afeno" class="form-control form-control-sm cr-input" maxlength="8" value="{{ row.afeno|default:'' }}"></td>
            <td><input form="edit-line-{{ row.lineno }}" name="acct" class="form-control form-control-sm cr-input" maxlength="24" value="{{ row.acct|default:'' }}" {% if row.type != 'ACCT' %}readonly{% endif %}></td>
            <td class="text-end">{{ row.mtd|default:0|floatformat:2|intcomma }}</td>
            <td class="text-end">{{ row.ytd|default:0|floatformat:2|intcomma }}</td>
            <td class="cr-actions">
              <button form="edit-line-{{ row.lineno }}" class="btn btn-sm btn-primary" type="submit">Save</button>
              <a class="btn btn-sm btn-outline-danger" href="?delete={{ row.lineno }}" onclick="return confirm('Delete line {{ row.lineno }}?')">Delete</a>
            </td>
        </tr>
      {% empty %}
        <tr><td colspan="9" class="text-center text-muted py-4">No Cost Recovery design rows found.</td></tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
  <div class="small text-muted">Amount fields are read-only here. This screen maintains the layout; transaction values can be entered separately later.</div>
</div>

<script>
function showAddForm(){const e=document.getElementById('addForm');e.style.display=e.style.display==='none'?'block':'none';}
document.querySelectorAll('.account-search').forEach(input=>{
  const box=input.parentElement.querySelector('.autocomplete-box');let timer;
  input.addEventListener('input',()=>{
    clearTimeout(timer);const q=input.value.trim();
    if(!q){box.style.display='none';box.innerHTML='';return;}
    timer=setTimeout(()=>{
      fetch('/api/cost_recovery/search_account/?q='+encodeURIComponent(q))
        .then(r=>r.json()).then(items=>{
          box.innerHTML='';
          items.forEach(item=>{
            const el=document.createElement('div');el.className='autocomplete-item';
            el.textContent=(item.acct_no||'')+' — '+(item.acct_name||'');
            el.addEventListener('mousedown',e=>{e.preventDefault();input.value=(item.acct_no||'').trim();box.style.display='none';});
            box.appendChild(el);
          });
          box.style.display=items.length?'block':'none';
        }).catch(()=>{box.style.display='none';});
    },200);
  });
  document.addEventListener('click',e=>{if(!input.parentElement.contains(e.target))box.style.display='none';});
});
document.querySelectorAll('select[name="type"]').forEach(sel=>{
  sel.addEventListener('change',()=>{
    const form=sel.closest('form');const acct=form.querySelector('input[name="acct"]');
    if(acct){acct.readOnly=sel.value!=='ACCT';if(acct.readOnly)acct.value='';}
  });
});
</script>
{% endblock %}