@extends('layouts.app')
@section('title','New Requisition')
@section('page-title','New Material / Tool Requisition')
@section('content')
<div class="card stat-card" style="max-width:800px">
  <div class="card-header bg-white border-0 fw-semibold pt-3 px-3">
    <i class="bi bi-clipboard2-plus me-2 text-primary"></i>Submit Requisition
    <small class="text-muted ms-2 fw-normal">Site Supervisor → Project Manager</small>
  </div>
  <div class="card-body">
    <form method="POST" action="{{ route('requisitions.store') }}">@csrf
      <div class="row g-3">
        <div class="col-md-6">
          <label class="form-label">Project *</label>
          <select name="project_id" class="form-select" required>
            <option value="">Select Project</option>
            @foreach($projects as $p)<option value="{{ $p->id }}">{{ $p->name }}</option>@endforeach
          </select>
        </div>
        <div class="col-md-3">
          <label class="form-label">Request Type *</label>
          <select name="type" class="form-select" required id="reqType" onchange="toggleMaterial()">
            <option value="material">Material</option>
            <option value="tool">Tool</option>
          </select>
        </div>
        <div class="col-md-3">
          <label class="form-label">Urgency *</label>
          <select name="urgency" class="form-select" required>
            <option value="low">Low</option>
            <option value="normal" selected>Normal</option>
            <option value="high">High</option>
            <option value="critical">Critical</option>
          </select>
        </div>

        <div class="col-md-6" id="materialDiv">
          <label class="form-label">Material from Register</label>
          <select name="material_id" class="form-select" id="materialSel" onchange="fillFromMaterial()">
            <option value="">— Select or type below —</option>
            @foreach($materials as $m)
            <option value="{{ $m->id }}" data-unit="{{ $m->unit }}" data-desc="{{ $m->name }}">{{ $m->name }} (Stock: {{ $m->current_stock }} {{ $m->unit }})</option>
            @endforeach
          </select>
        </div>
        <div class="col-md-6">
          <label class="form-label">Item Description *</label>
          <input name="item_description" class="form-control" id="itemDesc" required placeholder="e.g. 6 inch Blocks, Wheelbarrow...">
        </div>
        <div class="col-md-3">
          <label class="form-label">Quantity *</label>
          <input name="quantity" type="number" step="0.01" class="form-control" required>
        </div>
        <div class="col-md-3">
          <label class="form-label">Unit *</label>
          <input name="unit" class="form-control" id="unitField" required placeholder="bags, pcs, trips...">
        </div>
        <div class="col-md-6">
          <label class="form-label">Requested By (Site Supervisor / Foreman) *</label>
          <select name="requested_by" class="form-select" required>
            <option value="">Select</option>
            @foreach($staff as $s)
            <option value="{{ $s->id }}">{{ $s->name }} — {{ $s->role }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-12">
          <label class="form-label">Purpose / Why it's needed</label>
          <input name="purpose" class="form-control" placeholder="e.g. Foundation columns for Block A">
        </div>
        <div class="col-12">
          <label class="form-label">Additional Notes</label>
          <textarea name="request_notes" class="form-control" rows="2"></textarea>
        </div>
      </div>
      <div class="mt-3 d-flex gap-2">
        <button type="submit" class="btn btn-primary"><i class="bi bi-send me-1"></i>Submit to Project Manager</button>
        <a href="{{ route('requisitions.index') }}" class="btn btn-outline-secondary">Cancel</a>
      </div>
    </form>
  </div>
</div>
@endsection
@push('scripts')
<script>
function fillFromMaterial(){
  const sel=document.getElementById('materialSel');
  const opt=sel.options[sel.selectedIndex];
  if(opt.value){
    document.getElementById('itemDesc').value=opt.getAttribute('data-desc');
    document.getElementById('unitField').value=opt.getAttribute('data-unit');
  }
}
function toggleMaterial(){
  document.getElementById('materialDiv').style.display=
    document.getElementById('reqType').value==='tool'?'none':'block';
}
</script>
@endpush