@extends('layouts.app')
@section('title','Add Staff')
@section('page-title','Add Staff')
@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">Add Staff Member</div><div class="card-body">
<form method="POST" action="{{ route('staff.store') }}">@csrf
  <div class="row g-3">
    <div class="col-md-6"><label class="form-label">Full Name *</label><input name="name" class="form-control" required></div>
    <div class="col-md-6"><label class="form-label">Staff ID *</label><input name="staff_id" class="form-control" placeholder="STA-001" required></div>
    <div class="col-md-6"><label class="form-label">Role / Job Title *</label><input name="role" class="form-control" placeholder="Mason, Laborer, Security..." required></div>
    <div class="col-md-6"><label class="form-label">Department *</label><select name="department" class="form-select" required><option value="">Select</option><option value="administration">Administration</option><option value="stores">Stores</option><option value="project">Project</option><option value="security">Security</option></select></div>

    {{-- Hierarchy --}}
    <div class="col-12"><hr class="my-1"><div class="fw-semibold small text-primary mb-2"><i class="bi bi-diagram-3 me-1"></i>Reporting Hierarchy</div></div>
    <div class="col-md-6">
      <label class="form-label">Hierarchy Level *</label>
      <select name="hierarchy_level" class="form-select" required id="hierLevel" onchange="toggleReportsTo()">
        <option value="other">Other / Not in PM hierarchy</option>
        <option value="project_manager">Project Manager (reports to CEO)</option>
        <option value="site_supervisor">Site Supervisor (reports to Project Manager)</option>
        <option value="foreman">Foreman (reports to Site Supervisor)</option>
        <option value="artisan">Artisan / Worker (reports to Foreman)</option>
        <option value="subcontractor_liaison">Subcontractor (reports to Site Supervisor)</option>
      </select>
    </div>
    <div class="col-md-6" id="reportsToDiv">
      <label class="form-label">Reports Directly To</label>
      <select name="reports_to" class="form-select">
        <option value="">— Select supervisor —</option>
        @foreach(\App\Models\Staff::where('status','active')->whereIn('hierarchy_level',['project_manager','site_supervisor','foreman'])->orderBy('hierarchy_level')->get() as $s)
        <option value="{{ $s->id }}">{{ $s->name }} ({{ $s->hierarchy_label }})</option>
        @endforeach
      </select>
      <small class="text-muted">Leave blank to auto-assign based on hierarchy level</small>
    </div>

    <div class="col-md-6"><label class="form-label">Employment Type *</label><select name="employment_type" class="form-select" required><option value="permanent">Permanent</option><option value="contract">Contract</option><option value="daily">Daily</option><option value="artisan">Artisan</option></select></div>
    <div class="col-md-6"><label class="form-label">Status</label><select name="status" class="form-select"><option value="active">Active</option><option value="inactive">Inactive</option></select></div>
    <div class="col-md-4"><label class="form-label">Phone</label><input name="phone" class="form-control"></div>
    <div class="col-md-4"><label class="form-label">Ghana Card</label><input name="ghana_card" class="form-control"></div>
    <div class="col-md-4"><label class="form-label">Start Date *</label><input name="start_date" type="date" class="form-control" required></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"></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"></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 }}">{{ $p->name }}</option>@endforeach</select></div>
    <div class="col-md-6"><label class="form-label">Emergency Contact Name</label><input name="emergency_contact" class="form-control"></div>
    <div class="col-md-6"><label class="form-label">Emergency Phone</label><input name="emergency_phone" class="form-control"></div>
    <div class="col-12"><label class="form-label">Notes</label><textarea name="notes" class="form-control" rows="2"></textarea></div>
  </div>
  <div class="mt-3 d-flex gap-2"><button type="submit" class="btn btn-primary">Save</button><a href="{{ route('staff.index') }}" class="btn btn-outline-secondary">Cancel</a></div>
</form>
</div></div>
@endsection
@push('scripts')
<script>
function toggleReportsTo(){
  const v=document.getElementById('hierLevel').value;
  document.getElementById('reportsToDiv').style.display=(v==='project_manager'||v==='other')?'none':'block';
}
toggleReportsTo();
</script>
@endpush