@extends('layouts.app')
@section('title', 'Purchase requests')

@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-clipboard-list text-blue-600 mr-1.5"></i>Purchase requests</p>
      <p class="text-slate-400 text-[11px] mt-0.5">Requisitions before purchase orders</p>
    </div>
    <button type="button" onclick="document.getElementById('pr_new').classList.add('open')" class="ba inline-flex items-center gap-1.5" style="padding:8px 14px"><i class="fa-solid fa-plus"></i> New request</button>
  </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

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

  <div class="card p-5 card-has-table border-slate-200">
    <table>
      <thead><tr class="border-b border-slate-100">
        <th class="th">#</th><th class="th">Project</th><th class="th">Priority</th><th class="th">Needed by</th><th class="th">Status</th><th class="th text-right">Action</th>
      </tr></thead>
      <tbody>
        @forelse($purchaseRequests as $pr)
          <tr>
            <td class="td font-mono font-semibold text-blue-600">{{ $pr->request_number }}</td>
            <td class="td text-[12px]">{{ $pr->project?->name ?? '—' }}</td>
            <td class="td text-[12px]">{{ $pr->priority }}</td>
            <td class="td text-[12px]">{{ $pr->needed_by?->format('Y-m-d') ?? '—' }}</td>
            <td class="td text-[11px]">{{ $pr->status }}</td>
            <td class="td text-right"><a href="{{ route('procurement.requests.show', $pr) }}" class="bsm b text-blue-700 bg-blue-50">View</a></td>
          </tr>
        @empty
          <tr><td colspan="6" class="td text-center text-slate-400 py-10">No purchase requests.</td></tr>
        @endforelse
      </tbody>
    </table>
    <div class="mt-4">{{ $purchaseRequests->links() }}</div>
  </div>
</div>

<div id="pr_new" 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 request</p>
    <form method="post" action="{{ route('procurement.requests.store') }}" class="p-5 space-y-3">
      @csrf
      <div class="grid sm:grid-cols-2 gap-3">
        <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">Needed by</label><input type="date" name="needed_by" class="fi"></div>
        <div><label class="fl">Priority *</label><select name="priority" class="fi" required>@foreach(['Low','Normal','High','Urgent'] as $p)<option value="{{ $p }}">{{ $p }}</option>@endforeach</select></div>
        <div class="flex items-end"><label class="flex items-center gap-2 text-[13px] text-slate-600"><input type="checkbox" name="submit" value="1" checked> Submit immediately</label></div>
        <div class="sm:col-span-2"><label class="fl">Reason</label><textarea name="reason" rows="2" class="fi"></textarea></div>
        <div class="sm:col-span-2"><label class="fl">Notes</label><textarea name="notes" rows="2" class="fi"></textarea></div>
      </div>
      <div class="border-t border-slate-100 pt-3 mt-2">
        <p class="text-[11px] font-bold text-slate-500 uppercase mb-2">Lines</p>
        <div id="pr_lines" class="space-y-2"></div>
        <button type="button" class="bsm bs mt-2" onclick="prAddLine()">+ Add line</button>
      </div>
      <div class="flex justify-end gap-2 pt-3"><button type="button" class="bs" onclick="document.getElementById('pr_new').classList.remove('open')">Cancel</button><button type="submit" class="bp">Save</button></div>
    </form>
  </div>
</div>
@endsection
@push('scripts')
@php
  $prMaterialsJson = $materials->map(fn ($m) => ['id' => $m->id, 'name' => $m->name])->values();
@endphp
<script>
const prMaterials = @json($prMaterialsJson);
function prAddLine(){
  const w = document.getElementById('pr_lines');
  const i = w.children.length;
  const d = document.createElement('div');
  d.className = 'grid sm:grid-cols-12 gap-2 border border-slate-100 rounded-lg p-2 bg-slate-50/80';
  d.innerHTML = `<div class="sm:col-span-3"><label class="fl">Material</label><select name="lines[${i}][material_id]" class="fi"><option value="">—</option>`+
    prMaterials.map(m=>`<option value="${m.id}">${m.name}</option>`).join('')+`</select></div>
    <div class="sm:col-span-4"><label class="fl">Item name *</label><input name="lines[${i}][item_name]" class="fi" required></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]" class="fi" required value="1"></div>
    <div class="sm:col-span-2"><label class="fl">Est. unit</label><input type="number" step="0.01" min="0" name="lines[${i}][estimated_unit_cost]" class="fi" value="0"></div>
    <div class="sm:col-span-1"><label class="fl">UOM</label><input name="lines[${i}][unit_of_measure]" class="fi"></div>
    <div class="sm:col-span-12"><label class="fl">Description</label><input name="lines[${i}][description]" class="fi"></div>`;
  w.appendChild(d);
}
document.addEventListener('DOMContentLoaded',()=>{ if(!document.getElementById('pr_lines').children.length) prAddLine(); });
</script>
@endpush