@extends('layouts.app')
@section('title', 'Inventory purchases')

@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-cart-shopping text-blue-600 mr-1.5"></i>Inventory purchases</p>
      <p class="text-slate-400 text-[11px] mt-0.5">Purchase orders for materials and site stock</p>
    </div>
    <div class="flex flex-wrap gap-2">
      <a href="{{ route('inventory.purchases.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.purchases.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_po_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 purchase order</button>
    </div>
  </div>

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

  @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 $st = $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">Active POs</p><p class="text-[22px] font-bold text-slate-900 mt-2">{{ $st['active'] ?? 0 }}</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">{{ $st['pending_delivery'] ?? 0 }}</p></div>
    <div class="stat border-slate-200"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Partially received</p><p class="text-[22px] font-bold text-blue-600 mt-2">{{ $st['partial'] ?? 0 }}</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-slate-900 mt-2">{{ \App\Support\Format::mwkDecimal($st['month_value'] ?? 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">PO #</th><th class="th">Supplier</th><th class="th">Project</th><th class="th">PO date</th><th class="th">Expected</th><th class="th">Items</th><th class="th">Total</th><th class="th">Status</th><th class="th text-right">Action</th>
        </tr>
      </thead>
      <tbody>
        @forelse($orders as $o)
          @php
            $sb = match ($o->status) {
              'Received', 'Billed' => 'g',
              'Cancelled' => 's',
              'Partially Received' => 'a',
              default => 'b',
            };
          @endphp
          <tr>
            <td class="td font-mono font-semibold">{{ $o->po_number }}</td>
            <td class="td">{{ $o->supplier?->company_name }}</td>
            <td class="td text-slate-500">{{ $o->project?->name ?? '—' }}</td>
            <td class="td">{{ $o->po_date?->format('Y-m-d') }}</td>
            <td class="td">{{ $o->expected_delivery_date?->format('Y-m-d') ?? '—' }}</td>
            <td class="td">{{ $o->items->count() }}</td>
            <td class="td">{{ \App\Support\Format::mwkDecimal($o->total_amount) }}</td>
            <td class="td"><span class="badge {{ $sb }}">{{ $o->status }}</span></td>
            <td class="td text-right whitespace-nowrap">
              <a href="{{ route('inventory.purchases.show', $o) }}" class="bsm b text-[11px] no-underline" style="padding:4px 8px">View</a>
              @if(in_array($o->status, ['Ordered', 'Partially Received'], true))
                <a href="{{ route('inventory.purchases.show', $o) }}#receive" class="bsm g text-[11px] no-underline" style="padding:4px 8px">Receive</a>
              @endif
            </td>
          </tr>
        @empty
          <tr><td colspan="9" class="td text-center text-slate-400 py-10">No purchase orders yet.</td></tr>
        @endforelse
      </tbody>
    </table>
    <div class="p-3 border-t border-slate-100">{{ $orders->links() }}</div>
  </div>
</div>

<div id="inv_po_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 purchase order</p>
      <button type="button" onclick="document.getElementById('inv_po_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.purchases.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" class="fi" required>@foreach($suppliers as $s)<option value="{{ $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 }}">{{ $p->name }}</option>@endforeach</select>
        </div>
        <div><label class="fl">PO date</label><input type="date" name="po_date" class="fi" required value="{{ now()->format('Y-m-d') }}"></div>
        <div><label class="fl">Expected delivery</label><input type="date" name="expected_delivery_date" class="fi"></div>
        <div><label class="fl">Status</label>
          <select name="status" class="fi" required>
            <option value="Draft">Draft</option>
            <option value="Ordered" selected>Ordered</option>
          </select>
        </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_po_lines">
            <tr data-po-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_ordered]" 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_po_addline">+ Add line</button>
      <div class="flex justify-end gap-2 mt-5">
        <button type="button" class="bs" onclick="document.getElementById('inv_po_new').classList.remove('open')">Cancel</button>
        <button type="submit" class="bp">Save PO</button>
      </div>
    </form>
  </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
  function reindex(tb) {
    var rows = tb.querySelectorAll('tr[data-po-line]');
    rows.forEach(function (tr, i) {
      tr.querySelectorAll('[name]').forEach(function (el) {
        el.name = el.name.replace(/lines\[\d+\]/, 'lines[' + i + ']');
      });
    });
  }
  document.getElementById('inv_po_addline')?.addEventListener('click', function () {
    var tb = document.getElementById('inv_po_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