@extends('layouts.app')
@section('title', $supplier->company_name)

@section('content')
<div class="p-4 sm:p-6 lg:p-7">
  <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-5">
    <div>
      <a href="{{ route('procurement.suppliers.index') }}" class="text-[11px] font-semibold text-blue-600 mb-1 inline-block">← Suppliers</a>
      <p class="text-[17px] font-bold text-slate-900">{{ $supplier->company_name }}</p>
      <p class="text-slate-400 text-[11px] mt-0.5"><span class="badge {{ $supplier->status === 'Active' ? 'g' : ($supplier->status === 'Suspended' ? 'r' : 'a') }}">{{ $supplier->status }}</span></p>
    </div>
    <div class="flex flex-wrap gap-2">
      <button type="button" onclick="document.getElementById('sup_edit').classList.add('open')" class="bs inline-flex items-center gap-1.5" style="padding:8px 14px">Edit</button>
      <a href="{{ route('procurement.index') }}?supplier_id={{ $supplier->id }}" class="bs inline-flex items-center gap-1.5 no-underline" style="padding:8px 14px">View POs</a>
      <a href="{{ route('procurement.bills.index') }}" class="bs inline-flex items-center gap-1.5 no-underline" style="padding:8px 14px">View Bills</a>
      <a href="{{ route('procurement.index') }}" class="ba inline-flex items-center gap-1.5 no-underline" style="padding:8px 14px"><i class="fa-solid fa-cart-shopping"></i> New PO</a>
    </div>
  </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

  <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-5">
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Total PO value</p><p class="text-[20px] font-bold text-slate-900 mt-2">{{ \App\Support\Format::mwk($totalPoValue) }}</p></div>
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Active POs</p><p class="text-[20px] font-bold text-blue-600 mt-2">{{ $activePos }}</p></div>
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Outstanding bills</p><p class="text-[20px] font-bold text-amber-600 mt-2">{{ \App\Support\Format::mwk($outstandingBills) }}</p></div>
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Delivery (on time / late)</p><p class="text-[20px] font-bold text-slate-800 mt-2">{{ $deliveryOnTime }} / {{ $deliveryLate }}</p></div>
  </div>

  <div class="grid lg:grid-cols-2 gap-4 mb-5">
    <div class="card p-5 border-slate-200">
      <p class="font-bold text-slate-900 mb-3">Supplier information</p>
      <dl class="grid grid-cols-1 gap-2 text-[13px]">
        <div class="flex justify-between gap-2"><dt class="text-slate-400">Contact</dt><dd class="text-slate-800">{{ $supplier->contact_person ?? '—' }}</dd></div>
        <div class="flex justify-between gap-2"><dt class="text-slate-400">Phone</dt><dd>{{ $supplier->phone ?? '—' }}</dd></div>
        <div class="flex justify-between gap-2"><dt class="text-slate-400">Email</dt><dd>{{ $supplier->email ?? '—' }}</dd></div>
        <div class="flex justify-between gap-2"><dt class="text-slate-400">TIN</dt><dd class="font-mono">{{ $supplier->tin_number ?? '—' }}</dd></div>
        <div class="flex justify-between gap-2"><dt class="text-slate-400">Terms</dt><dd>{{ $supplier->payment_terms_days ?? '—' }} days</dd></div>
        <div class="sm:col-span-2"><dt class="text-slate-400">Address</dt><dd class="text-slate-700 mt-1">{{ $supplier->address ?? '—' }}</dd></div>
        <div class="sm:col-span-2"><dt class="text-slate-400">Notes</dt><dd class="text-slate-600 mt-1">{{ $supplier->notes ?? '—' }}</dd></div>
      </dl>
    </div>
    <div class="card p-5 card-has-table border-slate-200">
      <p class="font-bold text-slate-900 mb-3">Recent purchase orders</p>
      <table>
        <thead><tr class="border-b border-slate-100"><th class="th">PO</th><th class="th">Date</th><th class="th">Amount</th><th class="th">Status</th></tr></thead>
        <tbody>
          @forelse($supplier->purchaseOrders as $o)
            <tr>
              <td class="td"><a href="{{ route('procurement.orders.show', $o) }}" class="text-blue-600 font-mono font-semibold">{{ $o->po_number }}</a></td>
              <td class="td text-[12px] text-slate-500">{{ $o->po_date?->format('Y-m-d') }}</td>
              <td class="td font-semibold">{{ \App\Support\Format::mwk($o->total_amount) }}</td>
              <td class="td text-[11px]">{{ $o->status }}</td>
            </tr>
          @empty
            <tr><td colspan="4" class="td text-center text-slate-400 py-6">No purchase orders.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

  <div class="card p-5 card-has-table border-slate-200">
    <p class="font-bold text-slate-900 mb-3">Supplier bills</p>
    <table>
      <thead><tr class="border-b border-slate-100"><th class="th">Bill</th><th class="th">Due</th><th class="th">Amount</th><th class="th">Balance</th><th class="th">Status</th></tr></thead>
      <tbody>
        @forelse($supplier->supplierBills as $b)
          <tr>
            <td class="td font-mono text-[12px]">
              <a href="{{ ($b->purchase_order_id || $b->goods_received_note_id) ? route('procurement.bills.show', $b) : route('inventory.bills.show', $b) }}" class="text-blue-600">{{ $b->bill_number }}</a>
            </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>
          </tr>
        @empty
          <tr><td colspan="5" class="td text-center text-slate-400 py-6">No bills.</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>
</div>

<div id="sup_edit" class="modal-ov" onclick="if(event.target===this)this.classList.remove('open')">
  <div class="modal" onclick="event.stopPropagation()">
    <p class="text-[15px] font-bold text-slate-900 px-5 pt-5">Edit supplier</p>
    <form method="post" action="{{ route('procurement.suppliers.update', $supplier) }}" class="p-5 space-y-3">
      @csrf
      @method('PUT')
      @include('procurement.partials.supplier-fields', ['supplier' => $supplier])
      <div class="flex justify-end gap-2 pt-2">
        <button type="button" class="bs" onclick="document.getElementById('sup_edit').classList.remove('open')">Cancel</button>
        <button type="submit" class="bp">Save</button>
      </div>
    </form>
  </div>
</div>
@endsection