@extends('layouts.app')
@section('title','Edit Purchase Request')
@section('page-title','Edit Purchase Request')
@section('content')
<style>
.upload-box{border:2px dashed #dee2e6;border-radius:10px;padding:1.2rem;text-align:center;cursor:pointer;transition:all .2s;background:#f8f9fa;position:relative;}
.upload-box:hover,.upload-box.has-file{border-color:#0d6efd;background:#f0f5ff;}
.upload-box input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.existing-file{background:#e8f5e9;border:1.5px solid #66bb6a;border-radius:8px;padding:.6rem .9rem;}
</style>
<div class="card stat-card" style="max-width:860px">
  <div class="card-header bg-white border-0 pt-3 px-4 d-flex justify-content-between">
    <span class="fw-semibold"><i class="bi bi-pencil me-2 text-primary"></i>Edit: {{ $purchaseRequest->pr_number }}</span>
    <a href="{{ route('purchase-requests.show',$purchaseRequest) }}" class="btn btn-sm btn-outline-secondary">Cancel</a>
  </div>
  <div class="card-body px-4 pb-4">
    <form method="POST" action="{{ route('purchase-requests.update',$purchaseRequest) }}" enctype="multipart/form-data">@csrf @method('PUT')
      <div class="row g-3 mb-4">
        <div class="col-12"><label class="form-label">Item Description <span class="text-danger">*</span></label><input name="item_description" class="form-control" value="{{ old('item_description',$purchaseRequest->item_description) }}" required></div>
        <div class="col-md-3"><label class="form-label">Quantity</label><input name="quantity" type="number" step="0.01" class="form-control" value="{{ old('quantity',$purchaseRequest->quantity) }}" required></div>
        <div class="col-md-3"><label class="form-label">Unit</label><input name="unit" class="form-control" value="{{ old('unit',$purchaseRequest->unit) }}" required></div>
        <div class="col-md-3"><label class="form-label">Est. Cost (GH₵)</label><input name="estimated_cost" type="number" step="0.01" class="form-control" value="{{ old('estimated_cost',$purchaseRequest->estimated_cost) }}"></div>
        <div class="col-md-3"><label class="form-label">Urgency</label><select name="urgency" class="form-select"><option value="low" {{ $purchaseRequest->urgency==='low'?'selected':'' }}>Low</option><option value="normal" {{ $purchaseRequest->urgency==='normal'?'selected':'' }}>Normal</option><option value="high" {{ $purchaseRequest->urgency==='high'?'selected':'' }}>High</option><option value="critical" {{ $purchaseRequest->urgency==='critical'?'selected':'' }}>Critical</option></select></div>
        <div class="col-12"><label class="form-label">Justification</label><textarea name="justification" class="form-control" rows="2">{{ old('justification',$purchaseRequest->justification) }}</textarea></div>
      </div>

      <hr>
      <div class="fw-semibold small text-uppercase text-muted mb-3" style="letter-spacing:.6px"><i class="bi bi-paperclip me-1"></i>Invoice Attachments (upload new to replace existing)</div>

      <div class="row g-3 mb-3">
        @foreach([1,2,3,4,5] as $n)
        @php $existing = $purchaseRequest->{'invoice_'.$n}; @endphp
        <div class="col-md-4">
          <label class="form-label small fw-semibold">Invoice #{{ $n }}</label>
          @if($existing)
          @php $ext=strtolower(pathinfo($existing,PATHINFO_EXTENSION)); $isPdf=$ext==='pdf'; @endphp
          <div class="existing-file mb-2 d-flex align-items-center gap-2">
            <i class="bi bi-{{ $isPdf?'file-earmark-pdf-fill text-danger':'file-earmark-image-fill text-primary' }} fs-5"></i>
            <div class="flex-grow-1 small"><div class="fw-semibold">Current file</div><div class="text-muted text-uppercase">{{ $ext }}</div></div>
            <a href="{{ Storage::url($existing) }}" target="_blank" class="btn btn-xs btn-outline-primary" style="font-size:.7rem;padding:.15rem .4rem"><i class="bi bi-eye"></i></a>
          </div>
          @endif
          <div class="upload-box" id="box_{{ $n }}">
            <input type="file" name="invoice_{{ $n }}" id="inv_{{ $n }}" accept=".jpg,.jpeg,.png,.pdf" onchange="handleFile({{ $n }},this)">
            <div class="placeholder">
              <i class="bi bi-{{ $existing?'arrow-repeat':'cloud-arrow-up' }} fs-4 text-muted d-block mb-1"></i>
              <div class="small text-muted">{{ $existing?'Click to replace':'Click or drag file here' }}</div>
              <div class="small text-muted" style="font-size:.7rem">JPG · PNG · PDF · max 5MB</div>
            </div>
            <div class="file-info d-none text-center">
              <i class="bi bi-file-earmark-check text-success fs-4 d-block mb-1"></i>
              <div class="small text-success fw-semibold" id="fname_{{ $n }}"></div>
            </div>
          </div>
        </div>
        @endforeach
      </div>
      <div class="mb-4"><label class="form-label small">Attachment Notes</label><input name="attachment_notes" class="form-control form-control-sm" value="{{ old('attachment_notes',$purchaseRequest->attachment_notes) }}" placeholder="e.g. Invoice 1 from ABC Suppliers..."></div>
      <button type="submit" class="btn btn-primary"><i class="bi bi-save me-1"></i>Save Changes</button>
    </form>
  </div>
</div>
@endsection
@push('scripts')
<script>
function handleFile(n,input){
  if(input.files&&input.files[0]){
    const f=input.files[0];
    const box=document.getElementById('box_'+n);
    box.querySelector('.placeholder').classList.add('d-none');
    const fi=box.querySelector('.file-info'); fi.classList.remove('d-none');
    document.getElementById('fname_'+n).textContent=f.name+' ('+(f.size/1024).toFixed(0)+' KB)';
    box.classList.add('has-file');
  }
}
</script>
@endpush