@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;
  }
  .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; }
  .btn { padding:.5rem .8rem; border-radius:5px; border:1px solid #ccc; background:#f6f6f6; cursor:pointer; }
  .btn.primary { background:#0b74de; color:#fff; border-color:#0b74de; }
</style>

<div class="card">
  <h3>Edit Staff — {{ $staff->display_name ?? $staff->name }}</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.update', $staff->id) }}">
    @csrf
    @method('PUT')

    <div class="field">
      <label>Employee ID</label>
      <input type="text" value="{{ $staff->employee_id }}" disabled>
    </div>

    <div class="field">
      <label>Name *</label>
      <input type="text" name="name" value="{{ old('name', $staff->name) }}" required>
    </div>

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

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

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

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

    <hr>

    <div class="field">
      <label>Role</label>
      <input type="text" name="role" value="{{ old('role', $staff->role) }}">
    </div>

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

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

    <div class="field">
      <label>Joining Date</label>
      <input type="date" name="joining_date" value="{{ old('joining_date', optional($staff->joining_date)->format('Y-m-d')) }}">
    </div>

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

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

    <hr>

    <div class="field">
      <label>Username *</label>
      <input type="text" name="username" value="{{ old('username', $staff->username) }}" required>
    </div>

    <div class="field">
      <label>New Password (leave blank to keep existing)</label>
      <input type="password" name="password" autocomplete="new-password">
    </div>

    <hr>

    <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 }}"
                {{ in_array($perm->name, old('permissions', $staffPermissions)) ? 'checked' : '' }}>
              {{ $perm->name }}
            </label>
          @endforeach
        </div>
      </div>
    @endforeach

    <div style="display:flex; justify-content:flex-end; gap:.5rem;">
      <a href="{{ route('admin.staff.index') }}" class="btn">Cancel</a>
      <button type="submit" class="btn primary">Update Staff</button>
    </div>
  </form>
</div>

<script>
  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