@extends('layouts.app')
@section('title','Edit Staff')
@section('page-title','Edit Staff Member')
@section('content')

<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-person-gear me-2 text-primary"></i>Edit: {{ $staff->name }}</span>
    <a href="{{ route('staff.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('staff.update', $staff) }}">
      @csrf
      @method('PUT')

      {{-- Personal Info --}}
      <div class="fw-semibold small text-uppercase text-muted mb-2" style="letter-spacing:.6px">Personal Information</div>
      <div class="row g-3 mb-4">
        <div class="col-md-6">
          <label class="form-label">Full Name <span class="text-danger">*</span></label>
          <input name="name" class="form-control" value="{{ old('name', $staff->name) }}" required>
        </div>
        <div class="col-md-6">
          <label class="form-label">Role / Job Title <span class="text-danger">*</span></label>
          <input name="role" class="form-control" value="{{ old('role', $staff->role) }}" list="roleList" required>
        </div>
        <div class="col-md-4">
          <label class="form-label">Phone</label>
          <input name="phone" class="form-control" value="{{ old('phone', $staff->phone) }}">
        </div>
        <div class="col-md-4">
          <label class="form-label">Ghana Card No.</label>
          <input name="ghana_card" class="form-control" value="{{ old('ghana_card', $staff->ghana_card) }}">
        </div>
        <div class="col-md-4">
          <label class="form-label">Status</label>
          <select name="status" class="form-select">
            @foreach(['active','inactive','terminated'] as $st)
            <option value="{{ $st }}" {{ old('status',$staff->status)===$st ? 'selected' : '' }}>{{ ucfirst($st) }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-md-6">
          <label class="form-label">Emergency Contact Name</label>
          <input name="emergency_contact" class="form-control" value="{{ old('emergency_contact', $staff->emergency_contact) }}">
        </div>
        <div class="col-md-6">
          <label class="form-label">Emergency Phone</label>
          <input name="emergency_phone" class="form-control" value="{{ old('emergency_phone', $staff->emergency_phone) }}">
        </div>
      </div>

      {{-- Employment --}}
      <div class="fw-semibold small text-uppercase text-muted mb-2" style="letter-spacing:.6px">Employment Details</div>
      <div class="row g-3 mb-4">
        <div class="col-md-4">
          <label class="form-label">Department <span class="text-danger">*</span></label>
          <select name="department" class="form-select" required>
            @foreach(['administration'=>'Administration','stores'=>'Stores','project'=>'Project','security'=>'Security'] as $val=>$lbl)
            <option value="{{ $val }}" {{ old('department',$staff->department)===$val ? 'selected' : '' }}>{{ $lbl }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-md-4">
          <label class="form-label">Employment Type <span class="text-danger">*</span></label>
          <select name="employment_type" class="form-select" required>
            @foreach(['permanent'=>'Permanent','contract'=>'Contract','daily'=>'Daily','artisan'=>'Artisan'] as $val=>$lbl)
            <option value="{{ $val }}" {{ old('employment_type',$staff->employment_type)===$val ? 'selected' : '' }}>{{ $lbl }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-md-4">
          <label class="form-label">Project</label>
          <select name="project_id" class="form-select">
            <option value="">— None —</option>
            @foreach($projects as $p)
            <option value="{{ $p->id }}" {{ old('project_id',$staff->project_id)==$p->id ? 'selected' : '' }}>{{ $p->name }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-md-4">
          <label class="form-label">Start Date <span class="text-danger">*</span></label>
          <input name="start_date" type="date" class="form-control" value="{{ old('start_date', $staff->start_date instanceof \Carbon\Carbon ? $staff->start_date->format('Y-m-d') : $staff->start_date) }}" required>
        </div>
        <div class="col-md-4">
          <label class="form-label">End Date</label>
          <input name="end_date" type="date" class="form-control" value="{{ old('end_date', $staff->end_date instanceof \Carbon\Carbon ? $staff->end_date->format('Y-m-d') : $staff->end_date) }}">
        </div>
        <div class="col-md-4">
          <label class="form-label">Daily Rate (GH₵)</label>
          <input name="daily_rate" type="number" step="0.01" class="form-control" value="{{ old('daily_rate', $staff->daily_rate) }}" placeholder="0.00">
        </div>
        <div class="col-md-4">
          <label class="form-label">Monthly Salary (GH₵)</label>
          <input name="monthly_salary" type="number" step="0.01" class="form-control" value="{{ old('monthly_salary', $staff->monthly_salary) }}" placeholder="0.00">
        </div>
      </div>

      {{-- Hierarchy --}}
      <div class="fw-semibold small text-uppercase text-muted mb-2" style="letter-spacing:.6px"><i class="bi bi-diagram-3 me-1"></i>Reporting Hierarchy</div>
      <div class="row g-3 mb-4">
        <div class="col-md-6">
          <label class="form-label">Hierarchy Level</label>
          <select name="hierarchy_level" class="form-select" id="hierLevel" onchange="toggleSupervisor()">
            @foreach($hierarchyLevels as $val => $lbl)
            <option value="{{ $val }}" {{ old('hierarchy_level',$staff->hierarchy_level)===$val ? 'selected' : '' }}>{{ $lbl }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-md-6" id="supervisorDiv">
          <label class="form-label">Reports Directly To</label>
          <select name="reports_to" class="form-select">
            <option value="">— None / CEO —</option>
            @foreach($supervisors as $sup)
            <option value="{{ $sup->id }}" {{ old('reports_to',$staff->reports_to)==$sup->id ? 'selected' : '' }}>
              {{ $sup->name }} ({{ $sup->role }})
            </option>
            @endforeach
          </select>
        </div>
        <div class="col-12">
          <label class="form-label">Notes</label>
          <textarea name="notes" class="form-control" rows="2">{{ old('notes', $staff->notes) }}</textarea>
        </div>
      </div>

      <div class="d-flex gap-2">
        <button type="submit" class="btn btn-primary px-4"><i class="bi bi-save me-1"></i>Update Staff</button>
        <a href="{{ route('staff.index') }}" class="btn btn-outline-secondary">Cancel</a>
      </div>
    </form>
  </div>
</div>

<datalist id="roleList">
  <option>Project Manager</option><option>Site Supervisor</option><option>Foreman</option>
  <option>Mason</option><option>Laborer</option><option>Carpenter</option>
  <option>Electrician</option><option>Plumber</option><option>Tiler</option>
  <option>Painter</option><option>Welder</option><option>Steel Bender</option>
  <option>Security Guard</option><option>Store Keeper</option><option>Admin Officer</option>
</datalist>

@endsection
@push('scripts')
<script>
function toggleSupervisor() {
  const v = document.getElementById('hierLevel').value;
  document.getElementById('supervisorDiv').style.display = (v === 'project_manager' || v === 'other') ? 'none' : 'block';
}
document.addEventListener('DOMContentLoaded', toggleSupervisor);
</script>
@endpush