@extends('layouts.app')
@section('title', 'Suppliers')

@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-building-user text-blue-600 mr-1.5"></i>Suppliers</p>
      <p class="text-slate-400 text-[11px] mt-0.5">Manage approved suppliers and procurement contacts</p>
    </div>
    <div class="flex flex-wrap gap-2">
      <a href="{{ route('procurement.import.suppliers.template') }}" class="bs inline-flex items-center gap-1.5 no-underline" style="padding:8px 14px;font-size:13px;border-radius:9px"><i class="fa-solid fa-file-import"></i> Import template</a>
      <form method="post" action="{{ route('procurement.import.suppliers') }}" enctype="multipart/form-data" class="inline-flex items-center gap-2">
        @csrf
        <input type="file" name="file" required class="text-[12px] max-w-[200px]">
        <button type="submit" class="bs" style="padding:8px 12px">Import</button>
      </form>
      <a href="{{ route('procurement.suppliers.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> Export Excel</a>
      <a href="{{ route('procurement.suppliers.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> Export PDF</a>
      <button type="button" onclick="document.getElementById('sup_add').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> Add Supplier</button>
    </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
  @if(is_array(session('suppliers_import_errors')) && count(session('suppliers_import_errors')))
    <div class="card p-3 mb-4 border-amber-100 bg-amber-50 text-amber-900 text-[12px]">
      <p class="font-bold mb-1">Import row notes</p>
      <ul class="list-disc pl-4 space-y-0.5 max-h-40 overflow-y-auto">
        @foreach(array_slice(session('suppliers_import_errors'), 0, 40) as $err)<li>{{ $err }}</li>@endforeach
      </ul>
    </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</p><p class="text-[22px] font-bold text-slate-900 mt-2">{{ $stats['total'] }}</p></div>
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Approved</p><p class="text-[22px] font-bold text-emerald-600 mt-2">{{ $stats['approved'] }}</p></div>
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Pending</p><p class="text-[22px] font-bold text-amber-600 mt-2">{{ $stats['pending'] }}</p></div>
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Suspended / Inactive</p><p class="text-[22px] font-bold text-slate-600 mt-2">{{ $stats['inactive'] }}</p></div>
  </div>

  @include('procurement.partials.subnav', ['procNav' => 'suppliers'])

  <div class="card p-5 card-has-table border-slate-200">
    <table>
      <thead><tr class="border-b border-slate-100">
        <th class="th">Supplier</th><th class="th">Contact</th><th class="th">Phone</th><th class="th">Email</th><th class="th">TIN</th><th class="th">Terms</th><th class="th">Status</th><th class="th">Rating</th><th class="th text-right">Action</th>
      </tr></thead>
      <tbody>
        @forelse($suppliers as $s)
          <tr>
            <td class="td font-medium text-slate-800">{{ $s->company_name }}</td>
            <td class="td text-slate-600 text-[12px]">{{ $s->contact_person ?? '—' }}</td>
            <td class="td text-[12px]">{{ $s->phone ?? '—' }}</td>
            <td class="td text-[12px]">{{ $s->email ?? '—' }}</td>
            <td class="td font-mono text-[12px]">{{ $s->tin_number ?? '—' }}</td>
            <td class="td text-[12px]">{{ $s->payment_terms_days ?? '—' }}</td>
            <td class="td"><span class="badge {{ $s->status === 'Active' ? 'g' : ($s->status === 'Pending Approval' ? 'a' : ($s->status === 'Suspended' ? 'r' : 's')) }}">{{ $s->status }}</span></td>
            <td class="td">{{ $s->rating ?? '—' }}</td>
            <td class="td text-right"><a href="{{ route('procurement.suppliers.show', $s) }}" class="bsm b text-blue-700 bg-blue-50">View</a></td>
          </tr>
        @empty
          <tr><td colspan="9" class="td text-center text-slate-400 py-10">No suppliers yet.</td></tr>
        @endforelse
      </tbody>
    </table>
    <div class="mt-4">{{ $suppliers->links() }}</div>
  </div>
</div>

<div id="sup_add" 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">Add supplier</p>
    <form method="post" action="{{ route('procurement.suppliers.store') }}" class="p-5 space-y-3">
      @csrf
      @include('procurement.partials.supplier-fields', ['supplier' => null])
      <div class="flex justify-end gap-2 pt-2">
        <button type="button" class="bs" onclick="document.getElementById('sup_add').classList.remove('open')">Cancel</button>
        <button type="submit" class="bp">Save</button>
      </div>
    </form>
  </div>
</div>
@endsection