@extends('layouts.app')
@section('title', 'Supplier 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">Bills and payables for inventory purchases</p>
    </div>
    <div class="flex flex-wrap gap-2">
      <a href="{{ route('inventory.bills.export.excel') }}" class="bs inline-flex items-center gap-1.5 no-underline" style="padding:8px 14px;font-size:13px;border-radius:9px"><i class="fa-regular fa-file-excel"></i> Excel</a>
      <a href="{{ route('inventory.bills.export.pdf') }}" class="bs inline-flex items-center gap-1.5 no-underline" style="padding:8px 14px;font-size:13px;border-radius:9px"><i class="fa-regular fa-file-pdf"></i> PDF</a>
      <button type="button" onclick="document.getElementById('inv_bill_new').classList.add('open')" class="ba inline-flex items-center gap-1.5" style="padding:8px 14px;font-size:13px;border-radius:9px"><i class="fa-solid fa-plus"></i> New supplier bill</button>
    </div>
  </div>

  @include('inventory.partials.subnav', ['invActive' => 'bills'])

  @if($errors->any())
    <div class="card p-3 mb-4 border-red-100 bg-red-50 text-red-700 text-[13px]">{{ $errors->first() }}</div>
  @endif
  @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

  @php $bst = $stats ?? []; @endphp
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-5">
    <div class="stat border-slate-200"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Pending bills</p><p class="text-[22px] font-bold text-amber-600 mt-2">{{ $bst['pending'] ?? 0 }}</p></div>
    <div class="stat border-slate-200"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Overdue</p><p class="text-[22px] font-bold text-red-600 mt-2">{{ $bst['overdue'] ?? 0 }}</p></div>
    <div class="stat border-slate-200"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Paid this month</p><p class="text-[22px] font-bold text-emerald-600 mt-2">{{ \App\Support\Format::mwkDecimal($bst['paid_month'] ?? 0) }}</p></div>
    <div class="stat border-slate-200"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Outstanding</p><p class="text-[22px] font-bold text-slate-900 mt-2">{{ \App\Support\Format::mwkDecimal($bst['outstanding'] ?? 0) }}</p></div>
  </div>

  <div class="card p-0 border-slate-200 overflow-hidden card-has-table">
    <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">Bill date</th><th class="th">Due</th><th class="th">Amount</th><th class="th">Balance</th><th class="th">Status</th><th class="th text-right">Action</th>
        </tr>
      </thead>
      <tbody>
        @forelse($bills as $b)
          @php
            $bb = match ($b->status) {
              'Paid' => 'g',
              'Overdue', 'Cancelled' => 'r',
              'Partially Paid' => 'a',
              default => 'b',
            };
          @endphp
          <tr>
            <td class="td font-mono font-semibold">{{ $b->bill_number }}</td>
            <td class="td">{{ $b->supplier?->company_name }}</td>
            <td class="td text-slate-500">{{ $b->inventoryPurchaseOrder?->po_number ?? '—' }}</td>
            <td class="td">{{ $b->bill_date?->format('Y-m-d') }}</td>
            <td class="td">{{ $b->due_date?->format('Y-m-d') ?? '—' }}</td>
            <td class="td">{{ \App\Support\Format::mwkDecimal($b->total_amount) }}</td>
            <td class="td">{{ \App\Support\Format::mwkDecimal($b->balance_due) }}</td>
            <td class="td"><span class="badge {{ $bb }}">{{ $b->status }}</span></td>
            <td class="td text-right whitespace-nowrap">
              <a href="{{ route('inventory.bills.show', $b) }}" class="bsm b text-[11px] no-underline" style="padding:4px 8px">View</a>
              @if(! in_array($b->status, ['Paid', 'Cancelled'], true))
                <a href="{{ route('inventory.bills.show', $b) }}#pay" class="bsm g text-[11px] no-underline" style="padding:4px 8px">Pay</a>
              @endif
            </td>
          </tr>
        @empty
          <tr><td colspan="9" class="td text-center text-slate-400 py-10">No supplier bills.</td></tr>
        @endforelse
      </tbody>
    </table>
    <div class="p-3 border-t border-slate-100">{{ $bills->links() }}</div>
  </div>
</div>

<div id="inv_bill_new" class="modal-ov" onclick="if(event.target===this)this.classList.remove('open')">
  <div class="modal" style="width:min(720px,96vw)">
    <div style="padding:20px 20px 0;display:flex;justify-content:space-between;align-items:center">
      <p class="text-[15px] font-bold text-slate-900">New supplier bill</p>
      <button type="button" onclick="document.getElementById('inv_bill_new').classList.remove('open')" class="rounded-lg w-7 h-7 bg-slate-100 border-0">&times;</button>
    </div>
    <form method="post" action="{{ route('inventory.bills.store') }}" class="p-5">
      @csrf
      <div class="grid sm:grid-cols-2 gap-3 mb-4">
        <div><label class="fl">Supplier</label>
          <select name="supplier_id" id="inv_bill_supplier" class="fi" required>@foreach($suppliers as $s)<option value="{{ $s->id }}">{{ $s->company_name }}</option>@endforeach</select>
        </div>
        <div><label class="fl">Purchase order</label>
          <select name="inventory_purchase_order_id" class="fi"><option value="">—</option>@foreach($purchaseOrders as $po)<option value="{{ $po->id }}" data-supplier="{{ $po->supplier_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()->format('Y-m-d') }}"></div>
        <div><label class="fl">Due date</label><input type="date" name="due_date" class="fi"></div>
        <div class="sm:col-span-2"><label class="fl">VAT amount (MWK)</label><input type="number" step="0.01" min="0" name="vat_amount" class="fi" value="0"></div>
        <div class="sm:col-span-2"><label class="fl">Notes</label><input name="notes" class="fi" maxlength="2000"></div>
      </div>
      <p class="text-[12px] font-bold text-slate-700 mb-2">Lines</p>
      <div class="overflow-x-auto border border-slate-100 rounded-xl mb-2">
        <table class="text-[12px]">
          <thead><tr class="bg-slate-50"><th class="th">Material</th><th class="th">Desc</th><th class="th">Qty</th><th class="th">Unit cost</th></tr></thead>
          <tbody id="inv_bill_lines">
            <tr data-bill-line>
              <td class="td"><select name="lines[0][material_id]" class="fi" required>@foreach($materials as $m)<option value="{{ $m->id }}">{{ $m->name }}</option>@endforeach</select></td>
              <td class="td"><input name="lines[0][description]" class="fi" maxlength="255"></td>
              <td class="td"><input type="number" step="0.001" min="0.001" name="lines[0][quantity]" class="fi" required></td>
              <td class="td"><input type="number" step="0.01" min="0" name="lines[0][unit_cost]" class="fi" required></td>
            </tr>
          </tbody>
        </table>
      </div>
      <button type="button" class="bs text-[12px]" id="inv_bill_addline">+ Add line</button>
      <div class="flex justify-end gap-2 mt-5">
        <button type="button" class="bs" onclick="document.getElementById('inv_bill_new').classList.remove('open')">Cancel</button>
        <button type="submit" class="bp">Save bill</button>
      </div>
    </form>
  </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
  function reindex(tb) {
    var rows = tb.querySelectorAll('tr[data-bill-line]');
    rows.forEach(function (tr, i) {
      tr.querySelectorAll('[name]').forEach(function (el) {
        el.name = el.name.replace(/lines\[\d+\]/, 'lines[' + i + ']');
      });
    });
  }
  document.getElementById('inv_bill_addline')?.addEventListener('click', function () {
    var tb = document.getElementById('inv_bill_lines');
    var tr = tb.querySelector('tr:last-of-type').cloneNode(true);
    tr.querySelectorAll('input').forEach(function (el) { el.value = ''; });
    tb.appendChild(tr);
    reindex(tb);
  });
})();
</script>
@endpush