@extends('layouts.app')
@section('title', 'Procurement bills')

@section('content')
<div class="p-4 sm:p-6 lg:p-7">
  <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-3 mb-5">
    <div>
      <p class="text-[17px] font-bold text-slate-900"><i class="fa-solid fa-file-invoice-dollar text-blue-600 mr-1.5"></i>Supplier bills</p>
      <p class="text-slate-400 text-[11px] mt-0.5">Payables linked to procurement POs / GRNs</p>
    </div>
    <button type="button" onclick="document.getElementById('bill_new').classList.add('open')" class="ba" style="padding:8px 14px">New bill</button>
  </div>
  @if(session('success'))<div class="card p-3 mb-4 border-emerald-100 bg-emerald-50 text-emerald-800 text-[13px]">{{ session('success') }}</div>@endif
  @include('procurement.partials.subnav', ['procNav' => 'bills'])
  <div class="card p-5 card-has-table border-slate-200">
    <table>
      <thead><tr class="border-b border-slate-100"><th class="th">Bill</th><th class="th">Supplier</th><th class="th">PO</th><th class="th">Due</th><th class="th">Total</th><th class="th">Balance</th><th class="th">Status</th><th class="th"></th></tr></thead>
      <tbody>
        @forelse($bills as $b)
          <tr>
            <td class="td font-mono text-blue-600 font-semibold">{{ $b->bill_number }}</td>
            <td class="td text-[12px]">{{ $b->supplier?->company_name }}</td>
            <td class="td text-[12px]">{{ $b->purchaseOrder?->po_number ?? '—' }}</td>
            <td class="td text-[12px]">{{ $b->due_date?->format('Y-m-d') ?? '—' }}</td>
            <td class="td">{{ \App\Support\Format::mwk($b->total_amount) }}</td>
            <td class="td">{{ \App\Support\Format::mwk($b->balance_due) }}</td>
            <td class="td text-[11px]">{{ $b->status }}</td>
            <td class="td text-right"><a href="{{ route('procurement.bills.show', $b) }}" class="bsm b text-blue-700 bg-blue-50">View</a></td>
          </tr>
        @empty
          <tr><td colspan="8" class="td text-center text-slate-400 py-10">No procurement bills.</td></tr>
        @endforelse
      </tbody>
    </table>
    <div class="mt-4">{{ $bills->links() }}</div>
  </div>
</div>

@php $prefillPo = request('purchase_order_id'); @endphp
<div id="bill_new" class="modal-ov" onclick="if(event.target===this)this.classList.remove('open')">
  <div class="modal" style="width:min(640px,96vw)" onclick="event.stopPropagation()">
    <p class="text-[15px] font-bold text-slate-900 px-5 pt-5">New supplier bill</p>
    <form method="post" action="{{ route('procurement.bills.store') }}" class="p-5 space-y-3">
      @csrf
      <div class="grid sm:grid-cols-2 gap-3">
        <div><label class="fl">Supplier *</label><select name="supplier_id" class="fi" required><option value="">Select…</option>@foreach($suppliers as $s)<option value="{{ $s->id }}">{{ $s->company_name }}</option>@endforeach</select></div>
        <div><label class="fl">Purchase order</label><select name="purchase_order_id" class="fi"><option value="">—</option>@foreach($purchaseOrders as $po)<option value="{{ $po->id }}" @selected((string)$prefillPo === (string)$po->id)>{{ $po->po_number }} ({{ $po->status }})</option>@endforeach</select></div>
        <div><label class="fl">Bill date *</label><input type="date" name="bill_date" class="fi" required value="{{ now()->toDateString() }}"></div>
        <div><label class="fl">Due date</label><input type="date" name="due_date" class="fi"></div>
        <div><label class="fl">VAT</label><input type="number" step="0.01" min="0" name="vat_amount" class="fi" value="0"></div>
      </div>
      <p class="text-[11px] font-bold text-slate-500 uppercase">Lines</p>
      <div id="bill_lines" class="space-y-2"></div>
      <button type="button" class="bsm bs" onclick="billAddLine()">+ Line</button>
      <div class="flex justify-end gap-2 pt-2"><button type="button" class="bs" onclick="document.getElementById('bill_new').classList.remove('open')">Cancel</button><button type="submit" class="bp">Save bill</button></div>
    </form>
  </div>
</div>
@endsection
@push('scripts')
@php
  $billMaterialsJson = $materials->map(fn ($m) => ['id' => $m->id, 'name' => $m->name])->values();
@endphp
<script>
const billMats = @json($billMaterialsJson);
function billAddLine(){
  const w = document.getElementById('bill_lines');
  const i = w.children.length;
  const d = document.createElement('div');
  d.className = 'grid sm:grid-cols-12 gap-2 border rounded-lg p-2 bg-slate-50/80';
  d.innerHTML = `<div class="sm:col-span-4"><label class="fl">Description *</label><input name="lines[${i}][description]" class="fi" required></div>
    <div class="sm:col-span-3"><label class="fl">Material</label><select name="lines[${i}][material_id]" class="fi"><option value="">—</option>`+
    billMats.map(m=>`<option value="${m.id}">${m.name}</option>`).join('')+`</select></div>
    <div class="sm:col-span-2"><label class="fl">Qty *</label><input type="number" step="0.001" min="0.001" name="lines[${i}][quantity]" class="fi" required value="1"></div>
    <div class="sm:col-span-3"><label class="fl">Unit cost *</label><input type="number" step="0.01" min="0" name="lines[${i}][unit_cost]" class="fi" required value="0"></div>`;
  w.appendChild(d);
}
document.addEventListener('DOMContentLoaded',()=>{ if(!document.getElementById('bill_lines').children.length) billAddLine(); @if($prefillPo) document.getElementById('bill_new').classList.add('open'); @endif });
</script>
@endpush