{% extends 'invoices/base.html' %}
{% block title %}{{ action }} Invoice{% endblock %}
{% block page_title %}{{ action }} Invoice{% endblock %}
{% block topbar_actions %}
<a href="{% url 'invoices:dashboard' %}" class="btn btn-outline">← Back</a>
{% endblock %}
{% block content %}
<form method="post">
  {% csrf_token %}
  {{ formset.management_form }}

  <div class="grid-2" style="margin-bottom:22px;align-items:start;">

    <!-- LEFT: Invoice Info -->
    <div class="card">
      <div class="card-header"><h3 style="font-size:14px;font-weight:700;">📄 Invoice Details</h3></div>
      <div class="card-body">

        <!-- Bill Type Toggle -->
        <div class="form-group">
          <label class="form-label">Bill Type</label>
          <div style="display:flex;gap:0;border:1.5px solid var(--border);border-radius:8px;overflow:hidden;">
            <label id="type-invoice" style="flex:1;text-align:center;padding:9px;cursor:pointer;font-size:13.5px;font-weight:600;transition:all 0.12s;background:var(--accent);color:#fff;">
              <input type="radio" name="bill_type" value="invoice" {% if form.bill_type.value != 'quotation' %}checked{% endif %} style="display:none;">
              🧾 Invoice
            </label>
            <label id="type-quotation" style="flex:1;text-align:center;padding:9px;cursor:pointer;font-size:13.5px;font-weight:600;transition:all 0.12s;background:var(--white);color:var(--muted);">
              <input type="radio" name="bill_type" value="quotation" {% if form.bill_type.value == 'quotation' %}checked{% endif %} style="display:none;">
              📋 Quotation
            </label>
          </div>
        </div>

        <div class="grid-2">
          <div class="form-group">
            <label class="form-label">Number</label>
            <input type="text" name="invoice_number" value="{{ form.invoice_number.value|default:'' }}" class="form-control font-mono">
          </div>
          <div class="form-group">
            <label class="form-label">Status</label>
            <select name="status" class="form-control">
              {% for val,label in form.fields.status.choices %}
              <option value="{{ val }}" {% if form.status.value == val %}selected{% endif %}>{{ label }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="grid-2">
          <div class="form-group">
            <label class="form-label">Date</label>
            <input type="date" name="date" value="{{ form.date.value|default:'' }}" class="form-control" id="inp-date">
          </div>
          <div class="form-group">
            <label class="form-label">Due Date</label>
            <input type="date" name="due_date" value="{{ form.due_date.value|default:'' }}" class="form-control" id="inp-due-date">
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Purpose</label>
          <textarea name="purpose" class="form-control" rows="2" placeholder="e.g. Cloud Distribution Software">{{ form.purpose.value|default:'' }}</textarea>
        </div>
      </div>
    </div>

    <!-- RIGHT: Customer -->
    <div class="card">
      <div class="card-header">
        <h3 style="font-size:14px;font-weight:700;">👤 Bill To</h3>
        <span style="font-size:11.5px;color:var(--muted);">Type name — auto saved</span>
      </div>
      <div class="card-body">
        <div class="form-group">
          <label class="form-label">Customer Name *</label>
          <input type="text" name="customer_name" value="{{ form.customer_name.value|default:'' }}" class="form-control" placeholder="e.g. Ahmed Traders" id="customer-name-input" autocomplete="off">
          <div id="customer-suggestions" style="position:relative;"></div>
        </div>
        <div class="grid-2">
          <div class="form-group">
            <label class="form-label">Phone</label>
            <input type="text" name="customer_phone" value="{{ form.customer_phone.value|default:'' }}" class="form-control" placeholder="0300-0000000">
          </div>
          <div class="form-group">
            <label class="form-label">Email</label>
            <input type="text" name="customer_email" value="{{ form.customer_email.value|default:'' }}" class="form-control" placeholder="email@example.com">
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Address</label>
          <textarea name="customer_address" class="form-control" rows="2" placeholder="Customer address">{{ form.customer_address.value|default:'' }}</textarea>
        </div>
      </div>
    </div>
  </div>

  <!-- ITEMS -->
  <div class="card" style="margin-bottom:22px;">
    <div class="card-header">
      <h3 style="font-size:14px;font-weight:700;">📦 Items / Services</h3>
      <button type="button" id="add-item" class="btn btn-outline btn-sm">+ Add Row</button>
    </div>
    <div style="overflow-x:auto;">
    <table class="table" id="items-table">
      <thead>
        <tr>
          <th style="width:36px;">#</th>
          <th>Title / Item Name</th>
          <th>Description <span style="font-weight:400;text-transform:none;font-size:11px;color:#94a3b8;">(optional)</span></th>
          <th style="width:100px;">Quantity</th>
          <th style="width:140px;">Rate (PKR)</th>
          <th style="width:130px;">Total (PKR)</th>
          <th style="width:40px;"></th>
        </tr>
      </thead>
      <tbody id="formset-body">
        {% for item_form in formset %}
        <tr class="item-row">
          {% for hidden in item_form.hidden_fields %}{{ hidden }}{% endfor %}
          <td style="color:var(--muted);font-size:12px;" class="row-num">-</td>
          <td><input type="text" name="{{ item_form.title.html_name }}" value="{{ item_form.title.value|default:'' }}" class="form-control" placeholder="e.g. Windows License"></td>
          <td><input type="text" name="{{ item_form.description.html_name }}" value="{{ item_form.description.value|default:'' }}" class="form-control" placeholder="Extra details (optional)"></td>
          <td><input type="number" name="{{ item_form.quantity.html_name }}" value="{{ item_form.quantity.value|default:'1' }}" class="form-control qty-input" step="1" min="0" style="text-align:center;font-weight:600;"></td>
          <td><input type="number" name="{{ item_form.rate.html_name }}" value="{{ item_form.rate.value|default:'0' }}" class="form-control rate-input" step="0.01" min="0"></td>
          <td class="font-mono row-total" style="font-weight:700;color:var(--accent);">0.00</td>
          <td>
            {% if item_form.DELETE %}
            <label title="Delete" style="cursor:pointer;color:var(--danger);font-size:16px;display:flex;align-items:center;justify-content:center;">
              {{ item_form.DELETE }}✕
            </label>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    </div>
  </div>

  <!-- FINANCIALS -->
  <div class="grid-2" style="margin-bottom:22px;align-items:start;">
    <div class="card">
      <div class="card-header"><h3 style="font-size:14px;font-weight:700;">💬 Notes / Remarks</h3></div>
      <div class="card-body">
        <textarea name="notes" class="form-control" rows="5" placeholder="Optional notes / remarks... (formatting will be preserved)" style="white-space:pre-wrap;font-family:inherit;line-height:1.7;">{{ form.notes.value|default:'' }}</textarea>
        <div style="margin-top:6px;font-size:11px;color:var(--muted);">Line breaks and formatting will be preserved in print.</div>
      </div>
    </div>
    <div class="card">
      <div class="card-header"><h3 style="font-size:14px;font-weight:700;">💰 Totals</h3></div>
      <div class="card-body">
        <div class="grid-3" style="margin-bottom:16px;">
          <div class="form-group" style="margin:0;">
            <label class="form-label">Discount (PKR)</label>
            <input type="number" name="discount_amount" value="{{ form.discount_amount.value|default:'0' }}" class="form-control" step="0.01" min="0" id="inp-discount">
          </div>
          <div class="form-group" style="margin:0;">
            <label class="form-label">Tax %</label>
            <input type="number" name="tax_percent" value="{{ form.tax_percent.value|default:'0' }}" class="form-control" step="0.01" min="0" id="inp-tax">
          </div>
          <div class="form-group" style="margin:0;">
            <label class="form-label">Received</label>
            <input type="number" name="amount_received" value="{{ form.amount_received.value|default:'0' }}" class="form-control" step="0.01" min="0" id="inp-recv">
          </div>
        </div>
        <div style="background:var(--blue-pale);border:1px solid var(--border);border-radius:8px;padding:14px;">
          <div style="display:flex;justify-content:space-between;margin-bottom:8px;font-size:13px;"><span style="color:var(--muted);">Subtotal</span><span class="font-mono" id="live-subtotal">0.00</span></div>
          <div style="display:flex;justify-content:space-between;margin-bottom:8px;font-size:13px;"><span style="color:var(--muted);">Discount</span><span class="font-mono" id="live-discount" style="color:var(--warning);">-0.00</span></div>
          <div style="display:flex;justify-content:space-between;margin-bottom:8px;font-size:13px;"><span style="color:var(--muted);">Tax</span><span class="font-mono" id="live-tax">+0.00</span></div>
          <div style="border-top:1.5px solid var(--border);margin:10px 0;"></div>
          <div style="display:flex;justify-content:space-between;font-size:16px;font-weight:800;"><span>Grand Total</span><span class="font-mono" id="live-grand" style="color:var(--accent);">0.00</span></div>
          <div style="display:flex;justify-content:space-between;margin-top:8px;font-size:13px;"><span style="color:var(--muted);">Received</span><span class="font-mono" id="live-recv" style="color:var(--success);">0.00</span></div>
          <div style="display:flex;justify-content:space-between;margin-top:4px;font-size:14px;font-weight:700;"><span style="color:var(--danger);">Balance Due</span><span class="font-mono" id="live-balance" style="color:var(--danger);">0.00</span></div>
        </div>
      </div>
    </div>
  </div>

  <div style="display:flex;justify-content:flex-end;gap:12px;">
    <a href="{% url 'invoices:dashboard' %}" class="btn btn-outline">Cancel</a>
    <button type="submit" class="btn btn-primary" style="padding:10px 32px;font-size:14px;">💾 Save</button>
  </div>
</form>

<style>
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; }
input[type=number] { -moz-appearance:textfield; }
input[type=checkbox] { display:none; }
</style>

<script>
// Bill type toggle styling
document.querySelectorAll('input[name="bill_type"]').forEach(radio => {
  radio.addEventListener('change', updateToggle);
});
function updateToggle() {
  const inv = document.querySelector('input[value="invoice"]');
  const quot = document.querySelector('input[value="quotation"]');
  const invLabel = document.getElementById('type-invoice');
  const quotLabel = document.getElementById('type-quotation');
  if (inv.checked) {
    invLabel.style.background = 'var(--accent)'; invLabel.style.color = '#fff';
    quotLabel.style.background = 'var(--white)'; quotLabel.style.color = 'var(--muted)';
  } else {
    quotLabel.style.background = 'var(--accent)'; quotLabel.style.color = '#fff';
    invLabel.style.background = 'var(--white)'; invLabel.style.color = 'var(--muted)';
  }
}
updateToggle();

// Row numbers
function updateRowNums() {
  let n = 1;
  document.querySelectorAll('.item-row').forEach(row => {
    const del = row.querySelector('input[type=checkbox]');
    const numEl = row.querySelector('.row-num');
    if (del && del.checked) { if(numEl) numEl.textContent='–'; row.style.opacity='0.35'; }
    else { if(numEl) numEl.textContent=n++; row.style.opacity='1'; }
  });
}

function calcRow(row) {
  const qty = parseFloat(row.querySelector('.qty-input')?.value) || 0;
  const rate = parseFloat(row.querySelector('.rate-input')?.value) || 0;
  const total = qty * rate;
  const t = row.querySelector('.row-total');
  if (t) t.textContent = total.toFixed(2);
  return total;
}

function recalcAll() {
  let subtotal = 0;
  document.querySelectorAll('.item-row').forEach(row => {
    const del = row.querySelector('input[type=checkbox]');
    if (!del || !del.checked) subtotal += calcRow(row);
  });
  const disc = parseFloat(document.getElementById('inp-discount')?.value) || 0;
  const tax  = parseFloat(document.getElementById('inp-tax')?.value) || 0;
  const recv = parseFloat(document.getElementById('inp-recv')?.value) || 0;
  const taxable = subtotal - disc;
  const taxAmt  = taxable * tax / 100;
  const grand   = taxable + taxAmt;
  const balance  = grand - recv;
  document.getElementById('live-subtotal').textContent = subtotal.toFixed(2);
  document.getElementById('live-discount').textContent = '-' + disc.toFixed(2);
  document.getElementById('live-tax').textContent      = '+' + taxAmt.toFixed(2);
  document.getElementById('live-grand').textContent    = grand.toFixed(2);
  document.getElementById('live-recv').textContent     = recv.toFixed(2);
  document.getElementById('live-balance').textContent  = balance.toFixed(2);
}

document.addEventListener('input',  () => { recalcAll(); updateRowNums(); });
document.addEventListener('change', () => { recalcAll(); updateRowNums(); });
recalcAll(); updateRowNums();

// Add row
let formCount = {{ formset.total_form_count }};
const totalForms = document.querySelector('[name$="TOTAL_FORMS"]');
document.getElementById('add-item').addEventListener('click', () => {
  const tbody = document.getElementById('formset-body');
  const rows = tbody.querySelectorAll('.item-row');
  const clone = rows[rows.length-1].cloneNode(true);
  clone.querySelectorAll('input,select,textarea').forEach(el => {
    el.name = el.name.replace(/items-\d+/, `items-${formCount}`);
    if (el.id) el.id = el.id.replace(/items-\d+/, `items-${formCount}`);
    if (el.type==='checkbox') el.checked=false;
    else if (el.type==='number') el.value=el.classList.contains('qty-input')?'1':'0';
    else el.value='';
  });
  clone.querySelector('.row-total').textContent='0.00';
  formCount++; totalForms.value=formCount;
  tbody.appendChild(clone);
  recalcAll(); updateRowNums();
  clone.querySelector('input[type=text]')?.focus();
});

// Customer autocomplete
const customerNames = [{% for c in customers %}"{{ c.name }}"{% if not forloop.last %},{% endif %}{% endfor %}];
const nameInput = document.getElementById('customer-name-input');
const sugBox    = document.getElementById('customer-suggestions');
nameInput.addEventListener('input', function() {
  const val = this.value.toLowerCase(); sugBox.innerHTML='';
  if (!val) return;
  const matches = customerNames.filter(n=>n.toLowerCase().includes(val));
  if (!matches.length) return;
  const ul = document.createElement('ul');
  ul.style.cssText='position:absolute;background:#fff;border:1.5px solid #bfdbfe;border-radius:8px;list-style:none;z-index:100;width:100%;box-shadow:0 4px 16px rgba(0,0,0,0.1);margin-top:2px;max-height:160px;overflow-y:auto;';
  matches.forEach(m=>{
    const li=document.createElement('li'); li.textContent=m;
    li.style.cssText='padding:9px 14px;cursor:pointer;font-size:13.5px;color:#1e40af;';
    li.addEventListener('mouseenter',()=>li.style.background='#eff6ff');
    li.addEventListener('mouseleave',()=>li.style.background='');
    li.addEventListener('click',()=>{nameInput.value=m;sugBox.innerHTML='';});
    ul.appendChild(li);
  });
  sugBox.appendChild(ul);
});
document.addEventListener('click',e=>{ if(!sugBox.contains(e.target)&&e.target!==nameInput) sugBox.innerHTML=''; });
</script>
{% endblock %}