@extends('layouts.admin')

@section('title', $staff ? __('admin_staff.edit_title') : __('admin_staff.create_title'))

@section('content')
    <div class="page-header">
        <h1 class="page-title">{{ $staff ? __('admin_staff.edit_title') : __('admin_staff.create_title') }}</h1>
        <a class="button button-secondary" href="{{ route('admin.staff.index') }}">{{ __('admin_staff.back') }}</a>
    </div>

    <form class="card" method="POST" action="{{ $staff ? route('admin.staff.update', $staff) : route('admin.staff.store') }}">
        @csrf
        @if($staff) @method('PUT') @endif

        <div class="form-grid">
            <label>{{ __('admin_staff.name') }}<input name="full_name" required maxlength="255" value="{{ old('full_name', $staff?->full_name) }}"></label>
            <label>{{ __('admin_staff.username') }}<input name="username" required maxlength="100" value="{{ old('username', $staff?->username) }}"></label>
            <label>{{ __('admin_staff.email') }}<input name="email" type="email" required maxlength="255" value="{{ old('email', $staff?->email) }}"></label>
            <label>{{ __('admin_staff.phone') }}<input name="phone" maxlength="30" value="{{ old('phone', $staff?->phone) }}"></label>
            <label>{{ __('admin_staff.password') }}<input name="password" type="password" {{ $staff ? '' : 'required' }} autocomplete="new-password"><small>{{ $staff ? __('admin_staff.password_optional') : __('admin_staff.password_help') }}</small></label>
            <label>{{ __('admin_staff.password_confirmation') }}<input name="password_confirmation" type="password" {{ $staff ? '' : 'required' }} autocomplete="new-password"></label>

            @if($staff)
                <label>{{ __('admin_staff.status') }}
                    <select name="status" required>
                        <option value="approved" @selected(old('status', $staff->status) === 'approved')>{{ __('admin_staff.statuses.approved') }}</option>
                        <option value="suspended" @selected(old('status', $staff->status) === 'suspended')>{{ __('admin_staff.statuses.suspended') }}</option>
                    </select>
                </label>
            @endif
        </div>

        <fieldset>
            <legend>{{ __('admin_staff.permissions') }}</legend>
            <div class="permissions-grid">
                @foreach($permissions as $permission)
                    <label class="permission-item">
                        <input type="checkbox" name="permissions[]" value="{{ $permission }}" @checked(in_array($permission, old('permissions', $selectedPermissions), true))>
                        <span>{{ __('admin_staff.permission_labels.'.$permission) }}</span>
                    </label>
                @endforeach
            </div>
        </fieldset>

        <button class="button" type="submit">{{ __('admin_staff.save') }}</button>
    </form>
@endsection

@push('styles')
    .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:24px}.form-grid label{display:flex;flex-direction:column;gap:7px;font-weight:700}.form-grid input,.form-grid select{padding:11px;border:1px solid var(--border);border-radius:8px;font:inherit}.form-grid small{font-weight:400;color:var(--muted)}fieldset{margin:0 0 24px;padding:18px;border:1px solid var(--border);border-radius:10px}legend{padding:0 8px;font-weight:800}.permissions-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.permission-item{display:flex;align-items:center;gap:9px;padding:10px;border-radius:8px;background:var(--primary-light)}@media(max-width:700px){.form-grid,.permissions-grid{grid-template-columns:1fr}}
@endpush