@extends('layouts.app')
@section('title','Edit Work Order')
@section('page-title','Edit 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 d-flex justify-content-between">
    <span><i class="bi bi-pencil me-2 text-primary"></i>Edit: {{ $workOrder->wo_number }}</span>
    <span class="badge bg-{{ $workOrder->status_meta['color'] }}">{{ $workOrder->status_meta['label'] }}</span>
  </div>
  <div class="card-body px-4 pb-4">
    <form method="POST" action="{{ route('work-orders.update',$workOrder) }}">@csrf @method('PUT')
      <div class="row g-3">
        <div class="col-md-8"><label class="form-label">Title <span class="text-danger">*</span></label><input name="title" class="form-control" value="{{ old('title',$workOrder->title) }}" required></div>
        <div class="col-md-4"><label class="form-label">Priority</label><select name="priority" class="form-select">@foreach($priorities as $k=>$v)<option value="{{ $k }}" {{ old('priority',$workOrder->priority)===$k?'selected':'' }}>{{ $v['label'] }}</option>@endforeach</select></div>
        <div class="col-12"><label class="form-label">Description <span class="text-danger">*</span></label><textarea name="description" class="form-control" rows="4" required>{{ old('description',$workOrder->description) }}</textarea></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',$workOrder->due_date?->format('Y-m-d')) }}"></div>
        <div class="col-12"><hr class="my-1"><label class="form-label fw-semibold">Assigned To <span class="text-danger">*</span></label>
          <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 {{ old('assigned_staff_id',$workOrder->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',$workOrder->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 }}</div></div>
              </label>
            </div>
            @endforeach
          </div>
        </div>
      </div>
      <div class="mt-4 d-flex gap-2"><button type="submit" class="btn btn-primary">Save Changes</button><a href="{{ route('work-orders.show',$workOrder) }}" 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