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

@php
  $f = $filters ?? [];
  $poBadge = function (string $s): string {
    return match ($s) {
      'Draft' => 's',
      'Pending Approval' => 'a',
      'Approved' => 'b',
      'Ordered' => 'v',
      'Partially Delivered' => 'a',
      'Delivered' => 'g',
      'Billed' => 'b',
      'Paid' => 'g',
      'Cancelled' => 'r',
      default => 's',
    };
  };
@endphp

@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-truck text-blue-600 mr-1.5"></i>Procurement</p>
      <p class="text-slate-400 text-[11px] mt-0.5">Purchase orders, suppliers and deliveries</p>
    </div>
    <div class="flex flex-wrap gap-2">
      <a href="{{ route('procurement.suppliers.index') }}" 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-building-user"></i> Suppliers</a>
      <a href="{{ route('procurement.export.excel') }}?{{ http_build_query($f) }}" 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.export.pdf') }}?{{ http_build_query($f) }}" 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>
      <a href="{{ route('procurement.requests.index') }}" 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-clipboard-list"></i> New Request</a>
      <button type="button" onclick="document.getElementById('po_new_ov').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-cart-shopping"></i> New Purchase Order</button>
    </div>
  </div>

  @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

  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
    <div class="stat border-slate-200">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Active POs</p>
      <p class="text-[22px] font-bold text-slate-900 mt-2">{{ $activePos }}</p>
    </div>
    <div class="stat border-slate-200">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Pending Delivery</p>
      <p class="text-[22px] font-bold text-amber-600 mt-2">{{ $pendingDelivery }}</p>
    </div>
    <div class="stat border-slate-200">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">This Month Value</p>
      <p class="text-[22px] font-bold text-blue-600 mt-2">{{ \App\Support\Format::mwk($monthValue) }}</p>
    </div>
    <div class="stat border-slate-200">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Suppliers</p>
      <p class="text-[22px] font-bold text-emerald-600 mt-2">{{ $suppliersCount }}</p>
    </div>
  </div>
  <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-5">
    <div class="stat border-slate-200 py-3">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Pending Requests</p>
      <p class="text-[18px] font-bold text-slate-800 mt-1">{{ $pendingRequests }}</p>
    </div>
    <div class="stat border-slate-200 py-3">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Outstanding Bills</p>
      <p class="text-[18px] font-bold text-slate-800 mt-1">{{ \App\Support\Format::mwk($outstandingBills) }}</p>
    </div>
    <div class="stat border-slate-200 py-3 flex items-center">
      <a href="{{ route('procurement.bills.index') }}" class="text-[12px] font-semibold text-blue-600">View procurement bills <i class="fa-solid fa-arrow-right text-[10px]"></i></a>
    </div>
  </div>

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

  <form method="get" action="{{ route('procurement.index') }}" class="card p-4 mb-4 flex flex-col xl:flex-row flex-wrap gap-3 xl:items-end border-slate-200">
    <div class="min-w-[160px] flex-1">
      <label class="fl text-[10px]">Search</label>
      <input type="search" name="q" value="{{ $f['q'] ?? '' }}" placeholder="PO #, supplier, item, project…" class="fi">
    </div>
    <div class="min-w-[130px]">
      <label class="fl text-[10px]">Status</label>
      <select name="status" class="fi">
        <option value="">All</option>
        @foreach(['Draft','Pending Approval','Approved','Ordered','Partially Delivered','Delivered','Billed','Paid','Cancelled'] as $st)
          <option value="{{ $st }}" @selected(($f['status'] ?? '') === $st)>{{ $st }}</option>
        @endforeach
      </select>
    </div>
    <div class="min-w-[130px]">
      <label class="fl text-[10px]">Supplier</label>
      <select name="supplier_id" class="fi">
        <option value="">All</option>
        @foreach($allSuppliers as $s)
          <option value="{{ $s->id }}" @selected(($f['supplier_id'] ?? '') == $s->id)>{{ $s->company_name }}</option>
        @endforeach
      </select>
    </div>
    <div class="min-w-[130px]">
      <label class="fl text-[10px]">Project</label>
      <select name="project_id" class="fi">
        <option value="">All</option>
        @foreach($projects as $p)
          <option value="{{ $p->id }}" @selected(($f['project_id'] ?? '') == $p->id)>{{ $p->name }}</option>
        @endforeach
      </select>
    </div>
    <div class="min-w-[120px]">
      <label class="fl text-[10px]">From</label>
      <input type="date" name="date_from" value="{{ $f['date_from'] ?? '' }}" class="fi">
    </div>
    <div class="min-w-[120px]">
      <label class="fl text-[10px]">To</label>
      <input type="date" name="date_to" value="{{ $f['date_to'] ?? '' }}" class="fi">
    </div>
    <div class="min-w-[120px]">
      <label class="fl text-[10px]">Sort</label>
      <select name="sort" class="fi">
        <option value="po_date" @selected(($f['sort'] ?? '') === 'po_date')>PO date</option>
        <option value="total_amount" @selected(($f['sort'] ?? '') === 'total_amount')>Amount</option>
        <option value="po_number" @selected(($f['sort'] ?? '') === 'po_number')>PO #</option>
        <option value="status" @selected(($f['sort'] ?? '') === 'status')>Status</option>
      </select>
    </div>
    <div class="min-w-[100px]">
      <label class="fl text-[10px]">Dir</label>
      <select name="direction" class="fi">
        <option value="desc" @selected(($f['direction'] ?? 'desc') === 'desc')>Desc</option>
        <option value="asc" @selected(($f['direction'] ?? '') === 'asc')>Asc</option>
      </select>
    </div>
    <div class="flex gap-2">
      <button type="submit" class="bp" style="padding:8px 16px">Apply</button>
      <a href="{{ route('procurement.index') }}" class="bs no-underline inline-flex items-center" style="padding:8px 16px">Clear</a>
    </div>
  </form>

  <div class="card p-5 card-has-table border-slate-200">
    <p class="font-bold text-slate-900 mb-4">Purchase Orders</p>
    @if($orders->isEmpty())
      <div class="text-center py-14 px-4">
        <i class="fa-solid fa-cart-shopping text-4xl text-slate-200 mb-3"></i>
        <p class="text-slate-700 font-semibold">No purchase orders found</p>
        <p class="text-slate-400 text-[12px] mt-1 mb-4">Create your first purchase order or adjust filters.</p>
        <button type="button" onclick="document.getElementById('po_new_ov').classList.add('open')" class="ba">New Purchase Order</button>
      </div>
    @else
      <table>
        <thead>
          <tr class="border-b border-slate-100">
            <th class="th">PO #</th>
            <th class="th">Supplier</th>
            <th class="th">Project</th>
            <th class="th">Items</th>
            <th class="th">PO Date</th>
            <th class="th">Expected</th>
            <th class="th">Amount</th>
            <th class="th">Status</th>
            <th class="th text-right">Action</th>
          </tr>
        </thead>
        <tbody>
          @foreach($orders as $o)
            @php
              $itemLabel = $o->isLegacyFreeTextOnly() ? $o->items_description : $o->items->pluck('description')->take(2)->implode(', ');
            @endphp
            <tr>
              <td class="td font-mono font-bold text-blue-600">{{ $o->po_number }}</td>
              <td class="td font-medium text-slate-700">{{ $o->supplier?->company_name }}</td>
              <td class="td text-slate-500 text-[12px]">{{ $o->project?->name ?? '—' }}</td>
              <td class="td text-slate-500 text-[12px] max-w-[200px] truncate" title="{{ $itemLabel }}">{{ $itemLabel ?: '—' }}</td>
              <td class="td text-slate-400 text-[12px]">{{ $o->po_date?->format('M j, Y') }}</td>
              <td class="td text-slate-400 text-[12px]">{{ $o->expected_delivery_date?->format('M j, Y') ?? '—' }}</td>
              <td class="td font-bold text-slate-800">{{ \App\Support\Format::mwk($o->total_amount) }}</td>
              <td class="td"><span class="badge {{ $poBadge($o->status) }}">{{ $o->status }}</span></td>
              <td class="td text-right">
                <a href="{{ route('procurement.orders.show', $o) }}" class="bsm b text-blue-700 bg-blue-50">View</a>
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
      <div class="mt-4">{{ $orders->links() }}</div>
    @endif
  </div>
</div>

<div id="po_new_ov" 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 Purchase Order</p>
    <p class="text-[11px] text-slate-400 px-5 mt-1">Totals are calculated on the server from line items.</p>
    <form method="post" action="{{ route('procurement.orders.store') }}" class="p-5 space-y-3" id="po_new_form">
      @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 }}" @selected(old('supplier_id') == $s->id)>{{ $s->company_name }}</option>
            @endforeach
          </select>
        </div>
        <div>
          <label class="fl">Project</label>
          <select name="project_id" class="fi">
            <option value="">—</option>
            @foreach($projects as $p)
              <option value="{{ $p->id }}" @selected(old('project_id') == $p->id)>{{ $p->name }}</option>
            @endforeach
          </select>
        </div>
        <div>
          <label class="fl">Purchase request</label>
          <select name="purchase_request_id" class="fi">
            <option value="">—</option>
            @foreach($purchaseRequests as $pr)
              <option value="{{ $pr->id }}" @selected(old('purchase_request_id') == $pr->id)>{{ $pr->request_number }} ({{ $pr->status }})</option>
            @endforeach
          </select>
        </div>
        <div>
          <label class="fl">PO date</label>
          <input type="date" name="po_date" class="fi" required value="{{ old('po_date', now()->toDateString()) }}">
        </div>
        <div>
          <label class="fl">Expected delivery</label>
          <input type="date" name="expected_delivery_date" class="fi" value="{{ old('expected_delivery_date') }}">
        </div>
        <div class="sm:col-span-2">
          <label class="fl">Delivery location</label>
          <input type="text" name="delivery_location" class="fi" value="{{ old('delivery_location') }}" placeholder="Site / warehouse">
        </div>
        <div>
          <label class="fl">VAT (MWK)</label>
          <input type="number" step="0.01" min="0" name="vat_amount" class="fi" value="{{ old('vat_amount', 0) }}">
        </div>
        <div class="flex items-end">
          <label class="flex items-center gap-2 text-[13px] text-slate-600">
            <input type="checkbox" name="submit_for_approval" value="1" class="rounded border-slate-300" @checked(old('submit_for_approval'))>
            Submit for approval
          </label>
        </div>
        <div class="sm:col-span-2">
          <label class="fl">Terms</label>
          <textarea name="terms" rows="2" class="fi">{{ old('terms') }}</textarea>
        </div>
        <div class="sm:col-span-2">
          <label class="fl">Notes</label>
          <textarea name="notes" rows="2" class="fi">{{ old('notes') }}</textarea>
        </div>
      </div>
      <div class="border-t border-slate-100 pt-3 mt-2">
        <div class="flex items-center justify-between mb-2">
          <p class="text-[11px] font-bold text-slate-500 uppercase tracking-wider">Line items</p>
          <button type="button" class="bsm bs" onclick="procPoAddLine()">+ Add line</button>
        </div>
        <div id="po_lines" class="space-y-2"></div>
      </div>
      <div class="flex justify-end gap-2 pt-3">
        <button type="button" class="bs" onclick="document.getElementById('po_new_ov').classList.remove('open')">Cancel</button>
        <button type="submit" class="bp">Save purchase order</button>
      </div>
    </form>
  </div>
</div>
@endsection

@push('scripts')
@php
  $materialsForPo = $materials->map(fn ($m) => [
    'id' => $m->id,
    'name' => $m->name,
    'uom' => $m->unit_of_measure,
    'exp' => (bool) $m->is_expirable,
  ])->values();
@endphp
<script>
(function(){
  const materials = @json($materialsForPo);
  window.procPoAddLine = function(){
    const wrap = document.getElementById('po_lines');
    const i = wrap.children.length;
    const row = document.createElement('div');
    row.className = 'grid sm:grid-cols-12 gap-2 items-end border border-slate-100 rounded-lg p-2 bg-slate-50/80';
    row.innerHTML = `
      <div class="sm:col-span-3">
        <label class="fl">Material</label>
        <select name="lines[${i}][material_id]" class="fi"><option value="">—</option>` +
        materials.map(m => `<option value="${m.id}">${m.name}</option>`).join('') +
      `</select></div>
      <div class="sm:col-span-4">
        <label class="fl">Description *</label>
        <input name="lines[${i}][description]" class="fi" required placeholder="Item / service">
      </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_ordered]" class="fi" required value="1">
      </div>
      <div class="sm:col-span-1">
        <label class="fl">Unit</label>
        <input name="lines[${i}][unit_of_measure]" class="fi" placeholder="ea">
      </div>
      <div class="sm:col-span-2">
        <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>`;
    wrap.appendChild(row);
  };
  document.addEventListener('DOMContentLoaded', function(){
    if (!document.getElementById('po_lines').children.length) { procPoAddLine(); }
  });
})();
</script>
@endpush