@extends('admin.layouts.app')

@section('page-title', 'Account Dashboard')

@section('content')
<style>
  .card { background:#fff; border:1px solid #eaeaea; padding:1rem; border-radius:6px; }
  .field { margin-bottom:.8rem; }
  label { display:block; font-weight:600; margin-bottom:.25rem; }
  input[type="text"], input[type="email"], input[type="date"], input[type="password"], textarea, select {
    width:100%; padding:.5rem; border:1px solid #ddd; border-radius:4px;
  }
  .stages { display:flex; gap:.5rem; margin-bottom:1rem; }
  .stage-ind { padding:.35rem .6rem; border-radius:4px; background:#f3f3f3; }
  .stage { display:none; }
  .stage.active { display:block; }
  .btn { padding:.5rem .8rem; border-radius:5px; border:1px solid #ccc; background:#f6f6f6; cursor:pointer; }
  .btn.primary { background:#0b74de; color:#fff; border-color:#0b74de; }
  .perm-group { border:1px dashed #eee; padding:.6rem; margin-bottom:.6rem; border-radius:4px; }
  .perm-list { display:flex; flex-wrap:wrap; gap:.5rem; }
  .perm-item { min-width:200px; }
  .error { color:#b00020; font-size:.95rem; margin-top:.25rem; }
</style>

<div class="card">
  <h3>Add Staff</h3>

  @if($errors->any())
    <div style="background:#fff0f0; padding:.6rem; border:1px solid #f3c6c6; margin-bottom:1rem;">
      <strong>There were some problems with your input:</strong>
      <ul>
        @foreach($errors->all() as $err)
          <li>{{ $err }}</li>
        @endforeach
      </ul>
    </div>
  @endif

  <form method="POST" action="{{ route('admin.staff.store') }}">
    @csrf

    <div class="stages">
      <div class="stage-ind">1. Personal</div>
      <div class="stage-ind">2. Professional</div>
      <div class="stage-ind">3. System</div>
      <div class="stage-ind">4. Permissions</div>
    </div>

    {{-- Stage 1 --}}
    <div id="stage-1" class="stage active">
      <div class="field">
        <label>Name *</label>
        <input type="text" name="name" value="{{ old('name') }}" required>
      </div>

      <div class="field">
        <label>Email *</label>
        <input type="email" name="email" value="{{ old('email') }}" required>
      </div>

      <div class="field">
        <label>Phone *</label>
        <input type="text" name="phone" value="{{ old('phone') }}" required>
      </div>

      <div class="field">
        <label>Emergency Phone</label>
        <input type="text" name="emergency_phone" value="{{ old('emergency_phone') }}">
      </div>

      <div class="field">
        <label>Address</label>
        <textarea name="address" rows="3">{{ old('address') }}</textarea>
      </div>

      <div style="display:flex; justify-content:flex-end; gap:.5rem;">
        <button type="button" class="btn" onclick="showStage(2)">Next</button>
      </div>
    </div>

    {{-- Stage 2 --}}
    <div id="stage-2" class="stage">
      <div class="field">
        <label>Role (Business role)</label>
        <input type="text" name="role" value="{{ old('role') }}">
      </div>

      <div class="field">
        <label>Department</label>
        <input type="text" name="department" value="{{ old('department') }}">
      </div>

      <div class="field">
        <label>Designation</label>
        <input type="text" name="designation" value="{{ old('designation') }}">
      </div>

      <div class="field">
        <label>Joining Date</label>
        <input type="date" name="joining_date" value="{{ old('joining_date') }}">
      </div>

      <div class="field">
        <label>Status</label>
        <select name="status">
          <option value="active" {{ old('status')=='active'?'selected':'' }}>Active</option>
          <option value="inactive" {{ old('status')=='inactive'?'selected':'' }}>Inactive</option>
        </select>
      </div>

      <div class="field">
        <label>Additional Info</label>
        <textarea name="additional_info" rows="3">{{ old('additional_info') }}</textarea>
      </div>

      <div style="display:flex; justify-content:space-between; gap:.5rem;">
        <button type="button" class="btn" onclick="showStage(1)">Back</button>
        <button type="button" class="btn" onclick="showStage(3)">Next</button>
      </div>
    </div>

    {{-- Stage 3 --}}
    <div id="stage-3" class="stage">
      <div class="field">
        <label>Username *</label>
        <input type="text" name="username" value="{{ old('username') }}" placeholder="leave blank to use EMPxxxx">
        <div class="muted" style="font-size:.9rem; margin-top:.25rem;">If left blank employee id will be used.</div>
      </div>

      <div class="field">
        <label>Password *</label>
        <input type="password" name="password" required>
      </div>

      <div style="display:flex; justify-content:space-between; gap:.5rem;">
        <button type="button" class="btn" onclick="showStage(2)">Back</button>
        <button type="button" class="btn" onclick="showStage(4)">Next</button>
      </div>
    </div>

    {{-- Stage 4 --}}
    <div id="stage-4" class="stage">
      <div style="margin-bottom:.5rem; font-weight:700;">Permissions</div>

      @foreach($permissions as $group => $groupPerms)
        <div class="perm-group">
          <div style="display:flex; justify-content:space-between; align-items:center;">
            <div style="font-weight:600;">{{ ucfirst($group) }}</div>
            <div>
              <button type="button" class="btn" onclick="toggleGroup('{{ $group }}')">Toggle group</button>
            </div>
          </div>

          <div class="perm-list" id="group-{{ $group }}">
            @foreach($groupPerms as $perm)
              <label class="perm-item">
                <input type="checkbox" name="permissions[]" value="{{ $perm->name }}"> {{ $perm->name }}
              </label>
            @endforeach
          </div>
        </div>
      @endforeach

      <div style="display:flex; justify-content:space-between; gap:.5rem;">
        <button type="button" class="btn" onclick="showStage(3)">Back</button>
        <button type="submit" class="btn primary">Create Staff</button>
      </div>
    </div>
  </form>
</div>

<script>
  function showStage(n){
    document.querySelectorAll('.stage').forEach(s=>s.classList.remove('active'));
    document.getElementById('stage-'+n).classList.add('active');
    window.scrollTo({top:0, behavior:'smooth'});
  }

  function toggleGroup(group){
    const el = document.getElementById('group-'+group);
    if(!el) return;
    const inputs = el.querySelectorAll('input[type="checkbox"]');
    const anyUnchecked = Array.from(inputs).some(i => !i.checked);
    inputs.forEach(i => i.checked = anyUnchecked);
  }
</script>
@endsection