@extends('layouts.app')
@section('title', isset($invoice) ? 'Redigera '.$invoice->invoice_number : 'Ny faktura')
@section('content')
@php
$tenant = auth()->user()->tenant;
$customers = $tenant->customers()->where('is_active',true)->orderBy('name')->get();
$products  = $tenant->products()->where('is_active',true)->orderBy('name')->get();
$isEdit    = isset($invoice);
@endphp

<form method="POST" action="{{ $isEdit ? route('invoices.update',$invoice) : route('invoices.store') }}" id="inv-form">
@csrf @if($isEdit)@method('PUT')@endif

<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;">
  <div style="display:flex;align-items:center;gap:12px;">
    <a href="{{ route('invoices.index') }}" style="color:#5B6478;text-decoration:none;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg></a>
    <h2 style="font-family:'Instrument Serif',serif;font-size:24px;color:#E8EAF0;">{{ $isEdit ? 'Redigera '.$invoice->invoice_number : 'Ny faktura' }}</h2>
    @if($isEdit)<span class="badge badge-{{ $invoice->status }}">{{ $invoice->status_label }}</span>@endif
  </div>
  <div style="display:flex;gap:10px;">
    <button type="submit" name="action" value="save_draft" class="btn btn-secondary">Spara utkast</button>
    @if($isEdit)<a href="{{ route('invoices.download',$invoice) }}" class="btn btn-ghost">📄 PDF</a>@endif
    <button type="submit" name="action" value="send" class="btn btn-primary">📤 Spara & Skicka</button>
  </div>
</div>

<div style="display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start;">
  <div>
    <!-- Customer + refs -->
    <div class="ff-card" style="margin-bottom:16px;">
      <div class="ff-form-row cols-2">
        <div class="ff-form-group">
          <label class="ff-label">Kund *</label>
          <select name="customer_id" class="ff-input ff-select" id="csel" required>
            <option value="">Välj kund...</option>
            @foreach($customers as $c)
            <option value="{{ $c->id }}" {{ ($isEdit&&$invoice->customer_id==$c->id)?'selected':'' }} data-terms="{{ $c->payment_terms }}" data-email="{{ $c->email }}">{{ $c->name }}</option>
            @endforeach
          </select>
          <a href="{{ route('customers.create') }}" style="font-size:11px;color:#3B7DFF;text-decoration:none;margin-top:4px;display:block;">+ Ny kund</a>
        </div>
        <div id="cinfo" style="background:rgba(255,255,255,.03);border-radius:10px;padding:12px;font-size:12px;color:#5B6478;min-height:64px;">
          @if($isEdit&&$invoice->customer)<div style="font-weight:600;color:#E8EAF0;margin-bottom:3px;">{{ $invoice->customer->name }}</div><div>{{ $invoice->customer->email }}</div>@endif
        </div>
      </div>
      <div class="ff-form-row cols-3">
        <div class="ff-form-group"><label class="ff-label">Er referens</label><input type="text" name="your_reference" class="ff-input" value="{{ $isEdit?$invoice->your_reference:'' }}" placeholder="Mottagarens ref."></div>
        <div class="ff-form-group"><label class="ff-label">Vår referens</label><input type="text" name="our_reference" class="ff-input" value="{{ $isEdit?$invoice->our_reference:auth()->user()->name }}" placeholder="Din ref."></div>
        <div class="ff-form-group"><label class="ff-label">Leveransdatum</label><input type="date" name="delivery_date" class="ff-input" value="{{ $isEdit?$invoice->delivery_date?->format('Y-m-d'):'' }}"></div>
      </div>
    </div>

    <!-- Invoice rows -->
    <div class="ff-card" style="margin-bottom:16px;padding:0;">
      <div style="padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;">
        <span style="font-size:14px;font-weight:500;color:#E8EAF0;">Fakturarader</span>
        <div style="display:flex;gap:8px;">
          <button type="button" onclick="aiRows()" style="padding:6px 12px;background:rgba(123,79,255,.1);border:1px solid rgba(123,79,255,.2);border-radius:8px;color:#C4B5FD;font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;">⚡ AI-förslag</button>
          <button type="button" onclick="addRow('heading')" style="padding:6px 12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:#8B9AB8;font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;">+ Rubrik</button>
          <button type="button" onclick="addRow('row')" style="padding:6px 12px;background:rgba(59,125,255,.1);border:1px solid rgba(59,125,255,.2);border-radius:8px;color:#7BA7FF;font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;">+ Rad</button>
        </div>
      </div>
      <div style="display:grid;grid-template-columns:90px 1fr 75px 55px 110px 75px 60px 100px 32px;gap:5px;padding:8px 14px;border-bottom:1px solid rgba(255,255,255,.04);">
        @foreach(['Artikel','Beskrivning','Antal','Enhet','À-pris','Rabatt%','Moms%','Summa',''] as $h)
        <div style="font-size:10px;color:#5B6478;text-transform:uppercase;letter-spacing:.04em;{{ in_array($h,['Antal','À-pris','Rabatt%','Moms%','Summa'])?'text-align:right':'' }}">{{ $h }}</div>
        @endforeach
      </div>
      <div id="rows" style="padding:4px 10px 8px;">
        @if($isEdit&&$invoice->rows->count())
          @foreach($invoice->rows as $i=>$row)
            @include('invoices._row', ['i'=>$i, 'row'=>$row])
          @endforeach
        @else
          @include('invoices._row', ['i'=>0, 'row'=>null])
        @endif
      </div>
      <div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,.04);">
        <select onchange="addFromProduct(this)" style="background:none;border:none;color:#5B6478;font-size:13px;cursor:pointer;font-family:'DM Sans',sans-serif;outline:none;padding:4px 0;">
          <option value="">+ Lägg till artikel från register...</option>
          @foreach($products as $p)
          <option value="{{ $p->id }}" data-n="{{ $p->name }}" data-p="{{ $p->price }}" data-v="{{ $p->vat_rate }}" data-u="{{ $p->unit }}" data-a="{{ $p->article_number }}">
            {{ $p->article_number ? '['.$p->article_number.'] ' : '' }}{{ $p->name }} — {{ number_format($p->price,2) }} kr
          </option>
          @endforeach
        </select>
      </div>
    </div>

    <!-- Notes -->
    <div class="ff-card">
      <div class="ff-form-row cols-2">
        <div><label class="ff-label">Kommentar</label><textarea name="notes" class="ff-input ff-textarea" style="min-height:80px;">{{ $isEdit?$invoice->notes:'' }}</textarea></div>
        <div><label class="ff-label">Villkor</label><textarea name="terms" class="ff-input ff-textarea" style="min-height:80px;">{{ $isEdit?$invoice->terms:$tenant->getSetting('default_terms','') }}</textarea></div>
      </div>
    </div>
  </div>

  <!-- Sidebar -->
  <div style="position:sticky;top:80px;display:flex;flex-direction:column;gap:14px;">
    <div class="ff-card">
      <div style="font-size:12px;font-weight:600;color:#5B6478;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px;">Datum</div>
      <div class="ff-form-group"><label class="ff-label">Fakturadatum *</label><input type="date" name="invoice_date" id="idate" class="ff-input" required value="{{ $isEdit?$invoice->invoice_date->format('Y-m-d'):now()->format('Y-m-d') }}" onchange="calcDue()"></div>
      <div class="ff-form-group"><label class="ff-label">Betalningstid</label>
        <select name="payment_terms" id="pterms" class="ff-input ff-select" onchange="calcDue()">
          @foreach([0=>'Omgående',10=>'10 dagar netto',20=>'20 dagar netto',30=>'30 dagar netto',45=>'45 dagar netto',60=>'60 dagar netto'] as $d=>$l)
          <option value="{{ $d }}" {{ ($isEdit?($d==30):($d==30))?'selected':'' }}>{{ $l }}</option>
          @endforeach
        </select>
      </div>
      <div class="ff-form-group" style="margin-bottom:0;"><label class="ff-label">Förfallodatum *</label><input type="date" name="due_date" id="ddate" class="ff-input" required value="{{ $isEdit?$invoice->due_date->format('Y-m-d'):now()->addDays(30)->format('Y-m-d') }}"></div>
    </div>

    <div class="ff-card">
      <div style="font-size:12px;font-weight:600;color:#5B6478;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px;">Betalning</div>
      <div class="ff-form-group"><label class="ff-label">Metod</label>
        <select name="payment_method" class="ff-input ff-select" id="pmeth" onchange="toggleBankgiro()">
          <option value="bank_transfer" {{ (!$isEdit||$invoice->payment_method==='bank_transfer')?'selected':'' }}>Bankgiro</option>
          <option value="card" {{ ($isEdit&&$invoice->payment_method==='card')?'selected':'' }}>Kortbetalning (Stripe)</option>
          <option value="both" {{ ($isEdit&&$invoice->payment_method==='both')?'selected':'' }}>Båda</option>
        </select>
      </div>
      <div id="bgfield" class="ff-form-group" style="margin-bottom:0;"><label class="ff-label">Bankgironummer</label><input type="text" name="bankgiro_number" class="ff-input" value="{{ $isEdit?$invoice->bankgiro_number:$tenant->getSetting('bankgiro_number') }}" placeholder="{{ $tenant->getSetting('bankgiro_number','5XXX-XXXX') }}"></div>
    </div>

    <div class="ff-card" style="background:rgba(59,125,255,.04);border-color:rgba(59,125,255,.12);">
      <div style="font-size:12px;font-weight:600;color:#5B6478;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;">Summering</div>
      <div style="display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04);"><span style="font-size:13px;color:#8B9AB8;">Exkl. moms</span><span id="t-sub" style="font-size:13px;color:#E8EAF0;font-variant-numeric:tabular-nums;">0,00 kr</span></div>
      <div id="t-vat-rows"></div>
      <div style="display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04);"><span style="font-size:13px;color:#8B9AB8;">Total moms</span><span id="t-vat" style="font-size:13px;color:#E8EAF0;font-variant-numeric:tabular-nums;">0,00 kr</span></div>
      <div style="display:flex;justify-content:space-between;padding:12px 0 0;margin-top:4px;"><span style="font-size:15px;font-weight:600;color:#E8EAF0;">Att betala</span><span id="t-total" style="font-size:18px;font-weight:700;color:#7BA7FF;font-variant-numeric:tabular-nums;">0,00 kr</span></div>
    </div>

    <div class="ff-card" style="padding:14px 16px;">
      <label class="ff-label" style="margin-bottom:6px;">Valuta</label>
      <select name="currency" class="ff-input ff-select">
        @foreach(['SEK'=>'SEK','EUR'=>'EUR','USD'=>'USD','NOK'=>'NOK','DKK'=>'DKK'] as $k=>$v)
        <option value="{{ $k }}" {{ old('currency',$isEdit?$invoice->currency:$tenant->currency)===$k?'selected':'' }}>{{ $v }}</option>
        @endforeach
      </select>
    </div>
  </div>
</div>
</form>

@php $rowCount = $isEdit ? $invoice->rows->count() : 1; @endphp

@push('scripts')
<script>
let ri = {{ $rowCount }};
const IS = 'background:rgba(255,255,255,.04);border:1px solid transparent;border-radius:6px;padding:7px 7px;color:#E8EAF0;font-size:13px;width:100%;outline:none;font-family:\'DM Sans\',sans-serif;';

function ri_html(i, data={}) {
  const v = (k,d='') => data[k]||d;
  return `<div class="irow" style="display:grid;grid-template-columns:90px 1fr 75px 55px 110px 75px 60px 100px 32px;gap:5px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.03);align-items:center;">
    <input type="hidden" name="rows[${i}][type]" value="row">
    <input type="text" name="rows[${i}][article_number]" placeholder="Art.nr" value="${v('article_number')}" style="${IS}color:#8B9AB8;font-size:12px;" onfocus="this.style.borderColor='#3B7DFF'" onblur="this.style.borderColor='transparent'">
    <input type="text" name="rows[${i}][description]" placeholder="Beskrivning..." value="${v('description')}" style="${IS}" onfocus="this.style.borderColor='#3B7DFF'" onblur="this.style.borderColor='transparent'">
    <input type="number" name="rows[${i}][quantity]" value="${v('quantity','1')}" step="0.001" min="0" style="${IS}text-align:right;" class="rq" oninput="calcRow(this)" onfocus="this.style.borderColor='#3B7DFF'" onblur="this.style.borderColor='transparent'">
    <input type="text" name="rows[${i}][unit]" value="${v('unit','st')}" style="${IS}color:#8B9AB8;font-size:12px;" onfocus="this.style.borderColor='#3B7DFF'" onblur="this.style.borderColor='transparent'">
    <input type="number" name="rows[${i}][unit_price]" value="${v('unit_price','')}" placeholder="0.00" step="0.01" min="0" style="${IS}text-align:right;" class="rp" oninput="calcRow(this)" onfocus="this.style.borderColor='#3B7DFF'" onblur="this.style.borderColor='transparent'">
    <input type="number" name="rows[${i}][discount]" value="${v('discount','')}" placeholder="0" step="0.1" min="0" max="100" style="${IS}text-align:right;" class="rd" oninput="calcRow(this)" onfocus="this.style.borderColor='#3B7DFF'" onblur="this.style.borderColor='transparent'">
    <select name="rows[${i}][vat_rate]" style="${IS}appearance:none;cursor:pointer;" class="rv" onchange="calcRow(this)">
      ${[25,12,6,0].map(r=>`<option value="${r}" ${r===(parseInt(v('vat_rate','25')))?'selected':''}>${r}%</option>`).join('')}
    </select>
    <div class="rt" style="font-size:13px;font-weight:500;color:#E8EAF0;text-align:right;font-variant-numeric:tabular-nums;padding:0 3px;">0,00</div>
    <button type="button" onclick="this.closest('.irow').remove();calcAll()" style="background:rgba(239,68,68,.1);border:none;border-radius:6px;width:26px;height:26px;color:#EF4444;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;">✕</button>
  </div>`;
}

function addRow(type) {
  const i = ri++;
  const rows = document.getElementById('rows');
  if (type === 'heading') {
    const d = document.createElement('div');
    d.className = 'irow';
    d.style = 'display:grid;grid-template-columns:1fr 32px;gap:5px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.03);align-items:center;';
    d.innerHTML = `<input type="hidden" name="rows[${i}][type]" value="heading"><input type="text" name="rows[${i}][description]" placeholder="Rubrik..." style="${IS}font-weight:600;" onfocus="this.style.borderColor='#3B7DFF'" onblur="this.style.borderColor='transparent'"><button type="button" onclick="this.closest('.irow').remove()" style="background:rgba(239,68,68,.1);border:none;border-radius:6px;width:26px;height:26px;color:#EF4444;cursor:pointer;">✕</button>`;
    rows.appendChild(d);
    d.querySelector('input[type=text]').focus();
  } else {
    const d = document.createElement('div');
    d.innerHTML = ri_html(i);
    rows.appendChild(d.firstChild);
  }
}

function addFromProduct(sel) {
  if (!sel.value) return;
  const o = sel.options[sel.selectedIndex];
  const i = ri++;
  const d = document.createElement('div');
  d.innerHTML = ri_html(i, {article_number:o.dataset.a, description:o.dataset.n, unit_price:o.dataset.p, vat_rate:o.dataset.v, unit:o.dataset.u, quantity:'1'});
  document.getElementById('rows').appendChild(d.firstChild);
  calcRow(document.querySelector(`.irow:last-child .rp`));
  sel.value = '';
}

function calcRow(inp) {
  const row = inp.closest('.irow');
  if (!row) return;
  const q = parseFloat(row.querySelector('.rq')?.value || 0);
  const p = parseFloat(row.querySelector('.rp')?.value || 0);
  const d = parseFloat(row.querySelector('.rd')?.value || 0);
  const v = parseFloat(row.querySelector('.rv')?.value || 25);
  const net = q * p * (1 - d/100);
  const gross = net * (1 + v/100);
  const rt = row.querySelector('.rt');
  if (rt) rt.textContent = fmt(gross);
  calcAll();
}

function calcAll() {
  let sub=0, vat=0; const vg={};
  document.querySelectorAll('.irow').forEach(r => {
    const q=parseFloat(r.querySelector('.rq')?.value||0);
    const p=parseFloat(r.querySelector('.rp')?.value||0);
    const d=parseFloat(r.querySelector('.rd')?.value||0);
    const v=parseFloat(r.querySelector('.rv')?.value||25);
    const net=q*p*(1-d/100);
    const vamt=net*(v/100);
    sub+=net; vat+=vamt;
    if (!vg[v]) vg[v]={net:0,vat:0};
    vg[v].net+=net; vg[v].vat+=vamt;
  });
  document.getElementById('t-sub').textContent = fmt(sub)+' kr';
  document.getElementById('t-vat').textContent = fmt(vat)+' kr';
  document.getElementById('t-total').textContent = fmt(Math.round(sub+vat))+' kr';
  let vatHtml='';
  for (const [r,a] of Object.entries(vg)) if(a.vat>0) vatHtml+=`<div style="display:flex;justify-content:space-between;padding:3px 0;"><span style="font-size:11px;color:#5B6478;">Moms ${r}%</span><span style="font-size:11px;color:#5B6478;">${fmt(a.vat)} kr</span></div>`;
  document.getElementById('t-vat-rows').innerHTML = vatHtml;
}

function fmt(n) { return n.toLocaleString('sv-SE',{minimumFractionDigits:2,maximumFractionDigits:2}); }

function calcDue() {
  const idate = document.getElementById('idate').value;
  const terms = parseInt(document.getElementById('pterms').value);
  if (idate) { const d=new Date(idate); d.setDate(d.getDate()+terms); document.getElementById('ddate').value=d.toISOString().split('T')[0]; }
}

document.getElementById('csel')?.addEventListener('change', function() {
  const o = this.options[this.selectedIndex];
  const ci = document.getElementById('cinfo');
  if (this.value) {
    ci.innerHTML = `<div style="font-weight:600;color:#E8EAF0;margin-bottom:3px;">${o.text}</div><div style="font-size:11px;color:#8B9AB8;">${o.dataset.email||''}</div><div style="font-size:11px;color:#5B6478;">Bet: ${o.dataset.terms} dagar</div>`;
    document.getElementById('pterms').value = o.dataset.terms;
    calcDue();
  }
});

function aiRows() {
  const desc = prompt('Beskriv vad du fakturerar för:');
  if (!desc) return;
  fetch('{{ route("ai.invoice-help") }}', {method:'POST',headers:{'Content-Type':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'},body:JSON.stringify({description:desc})})
  .then(r=>r.json()).then(d=>{
    if(d.items) d.items.forEach(item=>{
      const i=ri++;
      const div=document.createElement('div');
      div.innerHTML=ri_html(i,{description:item.description||'',quantity:item.quantity||1,unit:item.unit||'st',unit_price:item.unit_price||0,vat_rate:item.vat_rate||25});
      document.getElementById('rows').appendChild(div.firstChild);
      calcRow(document.querySelector('.irow:last-child .rp'));
    });
  });
}

function toggleBankgiro() {
  const m = document.getElementById('pmeth').value;
  document.getElementById('bgfield').style.display = m==='card' ? 'none' : '';
}

calcAll();
</script>
@endpush
@endsection