@extends('layouts.app')
@section('title','New Work Order')
@section('page-title','Create Work Order')
@section('content')
<div class="card stat-card" style="max-width:750px">
  <div class="card-header bg-white border-0 fw-semibold pt-3 px-4"><i class="bi bi-list-task me-2 text-primary"></i>New Work Order</div>
  <div class="card-body px-4 pb-4">
    <form method="POST" action="{{ route('work-orders.store') }}">@csrf
      <div class="row g-3">
        <div class="col-md-8">
          <label class="form-label">Work Order Title <span class="text-danger">*</span></label>
          <input name="title" class="form-control" value="{{ old('title') }}" placeholder="e.g. Fix drainage on Block A" required>
        </div>
        <div class="col-md-4">
          <label class="form-label">Priority <span class="text-danger">*</span></label>
          <select name="priority" class="form-select" required>
            @foreach($priorities as $k=>$v)
            <option value="{{ $k }}" {{ old('priority',$k)===$k&&$k==='medium'?'selected':'' }}>{{ $v['label'] }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-12">
          <label class="form-label">Description / Instructions <span class="text-danger">*</span></label>
          <textarea name="description" class="form-control" rows="4" placeholder="Describe the work to be done in detail..." required>{{ old('description') }}</textarea>
        </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">Due Date</label>
          <input name="due_date" type="date" class="form-control" value="{{ old('due_date') }}">
        </div>

        {{-- Staff Assignment --}}
        <div class="col-12">
          <hr class="my-1">
          <label class="form-label fw-semibold">Assign To <span class="text-danger">*</span></label>
          <p class="small text-muted mb-2">Select a staff member from the system. They will be responsible for actioning this work order.</p>
          <div class="row g-2">
            @foreach($staff as $s)
            <div class="col-md-4">
              <label class="d-flex align-items-start gap-2 p-2 border rounded cursor-pointer {{ old('assigned_staff_id')==$s->id?'border-primary bg-primary bg-opacity-10':'' }}" style="cursor:pointer" onclick="selectStaff({{ $s->id }},this)">
                <input type="radio" name="assigned_staff_id" value="{{ $s->id }}" class="mt-1" {{ old('assigned_staff_id')==$s->id?'checked':'' }} required>
                <div>
                  <div class="fw-semibold small">{{ $s->name }}</div>
                  <div class="text-muted" style="font-size:.72rem">{{ $s->role }} · {{ ucfirst($s->department) }}</div>
                </div>
              </label>
            </div>
            @endforeach
          </div>
        </div>
      </div>
      <div class="mt-4 d-flex gap-2">
        <button type="submit" class="btn btn-primary px-4"><i class="bi bi-send me-1"></i>Create & Assign</button>
        <a href="{{ route('work-orders.index') }}" class="btn btn-outline-secondary">Cancel</a>
      </div>
    </form>
  </div>
</div>
@endsection
@push('scripts')
<script>
function selectStaff(id, label) {
  document.querySelectorAll('[name="assigned_staff_id"]').forEach(r => {
    r.closest('label').classList.remove('border-primary','bg-primary','bg-opacity-10');
  });
  label.classList.add('border-primary','bg-primary','bg-opacity-10');
  label.querySelector('input').checked = true;
}
</script>
@endpush