@extends('layouts.app')
@section('title','New Purchase Request')
@section('page-title','New 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.has-file .placeholder { display: none; }
.upload-box .file-name { font-size:.8rem; color:#0d6efd; font-weight:600; word-break:break-all; }
.upload-box input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.preview-img { max-height: 80px; max-width: 100%; border-radius: 6px; margin-top:.5rem; object-fit: cover; }
</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 align-items-center">
    <span class="fw-semibold"><i class="bi bi-cart-plus me-2 text-primary"></i>New Purchase Request</span>
    <a href="{{ route('purchase-requests.index') }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i>Back</a>
  </div>
  <div class="card-body px-4 pb-4">
    <form method="POST" action="{{ route('purchase-requests.store') }}" enctype="multipart/form-data">
      @csrf

      {{-- Item Details --}}
      <div class="fw-semibold small text-uppercase text-muted mb-2" style="letter-spacing:.6px">Item Details</div>
      <div class="row g-3 mb-4">
        <div class="col-md-8">
          <label class="form-label">Item Description <span class="text-danger">*</span></label>
          <input name="item_description" class="form-control" value="{{ old('item_description') }}"
            placeholder="e.g. Ghacem 42.5 Cement, 6 inch Blocks..." required>
        </div>
        <div class="col-md-4">
          <label class="form-label">From Material Register</label>
          <select name="material_id" class="form-select" id="matSel" onchange="fillMaterial()">
            <option value="">— Optional link —</option>
            @foreach($materials as $m)
            <option value="{{ $m->id }}" data-desc="{{ $m->name }}" data-unit="{{ $m->unit }}">{{ $m->name }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-md-3">
          <label class="form-label">Quantity <span class="text-danger">*</span></label>
          <input name="quantity" type="number" step="0.01" class="form-control" value="{{ old('quantity') }}" required>
        </div>
        <div class="col-md-3">
          <label class="form-label">Unit <span class="text-danger">*</span></label>
          <input name="unit" class="form-control" id="unitField" value="{{ old('unit') }}" placeholder="bags, pcs, trips..." required>
        </div>
        <div class="col-md-3">
          <label class="form-label">Estimated Cost (GH₵)</label>
          <input name="estimated_cost" type="number" step="0.01" class="form-control" value="{{ old('estimated_cost') }}" placeholder="0.00">
        </div>
        <div class="col-md-3">
          <label class="form-label">Urgency <span class="text-danger">*</span></label>
          <select name="urgency" class="form-select" required>
            <option value="low" {{ old('urgency')==='low'?'selected':'' }}>Low</option>
            <option value="normal" {{ old('urgency','normal')==='normal'?'selected':'' }}>Normal</option>
            <option value="high" {{ old('urgency')==='high'?'selected':'' }}>High</option>
            <option value="critical" {{ old('urgency')==='critical'?'selected':'' }}>Critical</option>
          </select>
        </div>
        <div class="col-md-6">
          <label class="form-label">Project <span class="text-danger">*</span></label>
          <select name="project_id" class="form-select" required>
            <option value="">Select Project</option>
            @foreach($projects as $p)<option value="{{ $p->id }}" {{ old('project_id')==$p->id?'selected':'' }}>{{ $p->name }}</option>@endforeach
          </select>
        </div>
        <div class="col-md-6">
          <label class="form-label">Justification / Reason</label>
          <textarea name="justification" class="form-control" rows="2" placeholder="Why is this purchase needed?">{{ old('justification') }}</textarea>
        </div>
      </div>

      {{-- Invoice Attachments --}}
      <hr>
      <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
          <div class="fw-semibold small text-uppercase text-muted" style="letter-spacing:.6px"><i class="bi bi-paperclip me-1"></i>Invoice / Quote Attachments</div>
          <div class="small text-muted mt-1">Attach up to 5 invoices or quotations. <strong>JPG, PNG or PDF</strong> — max 5MB each.</div>
        </div>
        <span class="badge bg-info text-dark">Up to 5 attachments</span>
      </div>

      <div class="row g-3 mb-3">
        @foreach([1,2,3,4,5] as $n)
        <div class="col-md-4">
          <label class="form-label small fw-semibold">
            Invoice / Quote #{{ $n }}
            @if($n <= 3)<span class="badge bg-warning text-dark ms-1" style="font-size:.6rem">Recommended</span>@endif
          </label>
          <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-cloud-arrow-up fs-4 text-muted d-block mb-1"></i>
              <div class="small text-muted">Click or drag file here</div>
              <div class="small text-muted" style="font-size:.7rem">JPG · PNG · PDF</div>
            </div>
            <div class="file-info d-none">
              <i class="bi bi-file-earmark-check text-success fs-4 d-block mb-1"></i>
              <div class="file-name" id="fname_{{ $n }}"></div>
              <img id="preview_{{ $n }}" class="preview-img d-none" src="" alt="preview">
            </div>
          </div>
        </div>
        @endforeach
      </div>

      <div class="col-12 mb-4">
        <label class="form-label small">Notes on Attachments</label>
        <input name="attachment_notes" class="form-control form-control-sm"
          placeholder="e.g. Invoice 1 from ABC Suppliers, Invoice 2 is quotation from XYZ..." value="{{ old('attachment_notes') }}">
      </div>

      <div class="d-flex gap-2">
        <button type="submit" class="btn btn-primary px-4"><i class="bi bi-send me-1"></i>Submit Purchase Request</button>
        <a href="{{ route('purchase-requests.index') }}" class="btn btn-outline-secondary">Cancel</a>
      </div>
    </form>
  </div>
</div>
@endsection
@push('scripts')
<script>
function fillMaterial() {
  const sel = document.getElementById('matSel');
  const opt = sel.options[sel.selectedIndex];
  if (opt.value) {
    document.querySelector('[name="item_description"]').value = opt.dataset.desc;
    document.getElementById('unitField').value = opt.dataset.unit;
  }
}

function handleFile(n, input) {
  const box = document.getElementById('box_' + n);
  const fileInfo = box.querySelector('.file-info');
  const placeholder = box.querySelector('.placeholder');
  const fname = document.getElementById('fname_' + n);
  const preview = document.getElementById('preview_' + n);

  if (input.files && input.files[0]) {
    const file = input.files[0];
    fname.textContent = file.name + ' (' + (file.size / 1024).toFixed(0) + ' KB)';
    box.classList.add('has-file');
    placeholder.classList.add('d-none');
    fileInfo.classList.remove('d-none');

    // Show image preview if it's an image
    if (file.type.startsWith('image/')) {
      const reader = new FileReader();
      reader.onload = e => { preview.src = e.target.result; preview.classList.remove('d-none'); };
      reader.readAsDataURL(file);
    } else {
      preview.classList.add('d-none');
    }
  }
}

// Drag and drop
document.querySelectorAll('.upload-box').forEach(box => {
  box.addEventListener('dragover', e => { e.preventDefault(); box.style.borderColor = '#0d6efd'; });
  box.addEventListener('dragleave', () => { box.style.borderColor = ''; });
  box.addEventListener('drop', e => {
    e.preventDefault(); box.style.borderColor = '';
    const input = box.querySelector('input[type=file]');
    const n = input.id.replace('inv_','');
    input.files = e.dataTransfer.files;
    handleFile(n, input);
  });
});
</script>
@endpush