@extends('layouts.app')
@section('title', $purchaseRequest->request_number)

@section('content')
<div class="p-4 sm:p-6 lg:p-7">
  <a href="{{ route('procurement.requests.index') }}" class="text-[11px] font-semibold text-blue-600 mb-2 inline-block">← Requests</a>
  <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-5">
    <div>
      <p class="text-[17px] font-bold text-slate-900 font-mono">{{ $purchaseRequest->request_number }}</p>
      <p class="text-slate-400 text-[11px] mt-0.5">{{ $purchaseRequest->status }} · {{ $purchaseRequest->priority }}</p>
    </div>
    <div class="flex flex-wrap gap-2">
      @if($purchaseRequest->status === 'Draft')
        <form method="post" action="{{ route('procurement.requests.submit', $purchaseRequest) }}">@csrf @method('PUT')<button class="bp" type="submit" style="padding:8px 14px">Submit</button></form>
      @endif
      @if($purchaseRequest->status === 'Submitted')
        <form method="post" action="{{ route('procurement.requests.approve', $purchaseRequest) }}">@csrf @method('PUT')<button class="bp" type="submit" style="padding:8px 14px">Approve</button></form>
        <form method="post" action="{{ route('procurement.requests.reject', $purchaseRequest) }}">@csrf @method('PUT')<button class="bs" type="submit" style="padding:8px 14px">Reject</button></form>
      @endif
      @if($purchaseRequest->status === 'Approved')
        <button type="button" class="ba" style="padding:8px 14px" onclick="document.getElementById('conv_ov').classList.add('open')">Convert to PO</button>
      @endif
    </div>
  </div>

  <div class="grid lg:grid-cols-2 gap-4 mb-5">
    <div class="card p-5 border-slate-200 text-[13px] space-y-2">
      <p><span class="text-slate-400">Project:</span> <span class="font-medium">{{ $purchaseRequest->project?->name ?? '—' }}</span></p>
      <p><span class="text-slate-400">Needed by:</span> {{ $purchaseRequest->needed_by?->format('Y-m-d') ?? '—' }}</p>
      <p><span class="text-slate-400">Reason:</span> {{ $purchaseRequest->reason ?? '—' }}</p>
      <p><span class="text-slate-400">Notes:</span> {{ $purchaseRequest->notes ?? '—' }}</p>
    </div>
    <div class="card p-5 card-has-table border-slate-200">
      <p class="font-bold text-slate-900 mb-2">Lines</p>
      <table>
        <thead><tr class="border-b border-slate-100"><th class="th">Item</th><th class="th">Qty</th><th class="th">Est.</th></tr></thead>
        <tbody>
          @foreach($purchaseRequest->items as $it)
            <tr>
              <td class="td">{{ $it->item_name }} @if($it->description)<span class="text-slate-400 text-[11px]">— {{ $it->description }}</span>@endif</td>
              <td class="td">{{ $it->quantity }} {{ $it->unit_of_measure }}</td>
              <td class="td">{{ \App\Support\Format::mwk((float)($it->estimated_total ?? 0)) }}</td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
</div>

<div id="conv_ov" 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">Convert to purchase order</p>
    <form method="post" action="{{ route('procurement.requests.convert', $purchaseRequest) }}" class="p-5 space-y-3">
      @csrf
      <div><label class="fl">Supplier *</label><select name="supplier_id" class="fi" required><option value="">—</option>@foreach($suppliers as $s)<option value="{{ $s->id }}">{{ $s->company_name }}</option>@endforeach</select></div>
      <div><label class="fl">Project override</label><select name="project_id" class="fi"><option value="">Use request project</option>@foreach($projects as $p)<option value="{{ $p->id }}">{{ $p->name }}</option>@endforeach</select></div>
      <div class="grid sm:grid-cols-2 gap-3">
        <div><label class="fl">PO date *</label><input type="date" name="po_date" class="fi" required value="{{ now()->toDateString() }}"></div>
        <div><label class="fl">Expected delivery</label><input type="date" name="expected_delivery_date" class="fi"></div>
      </div>
      <div><label class="fl">Delivery location</label><input name="delivery_location" class="fi"></div>
      <div><label class="fl">VAT</label><input type="number" step="0.01" min="0" name="vat_amount" class="fi" value="0"></div>
      <label class="flex items-center gap-2 text-[13px]"><input type="checkbox" name="submit_for_approval" value="1"> Submit PO for approval</label>
      <div class="flex justify-end gap-2 pt-2"><button type="button" class="bs" onclick="document.getElementById('conv_ov').classList.remove('open')">Cancel</button><button type="submit" class="bp">Create PO</button></div>
    </form>
  </div>
</div>
@endsection