@extends('layouts.app')
@section('title', 'تعيين المستويات للمستخدمين - DOTS HR Pro')

@push('styles')
<style>
.level-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
</style>
@endpush

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title"><i class="fas fa-users-cog" style="color:#E8502F;"></i> تعيين المستويات للمستخدمين</h1>
        <p class="page-subtitle">تعيين مستوى اعتماد لكل مستخدم أو إنشاء مستخدمين جدد</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('settings.roles.index') }}" class="btn btn-ghost"><i class="fas fa-arrow-right"></i> رجوع للمستويات</a>
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif
@if(session('error'))
    <div class="alert alert-danger">{{ session('error') }}</div>
@endif

{{-- إنشاء مستخدم جديد --}}
<div class="card" style="margin-bottom: 24px;">
    <div class="card-header"><h3><i class="fas fa-user-plus"></i> إنشاء مستخدم جديد</h3></div>
    <div class="card-body">
        <form method="POST" action="{{ route('settings.roles.create-user') }}">
            @csrf
            <div class="form-grid cols-2">
                <div class="form-group">
                    <label class="form-label">الاسم</label>
                    <input type="text" name="name" class="form-input" value="{{ old('name') }}" placeholder="اسم المستخدم" required>
                    @error('name') <small style="color:#ef4444;">{{ $message }}</small> @enderror
                </div>
                <div class="form-group">
                    <label class="form-label">البريد الإلكتروني</label>
                    <input type="email" name="email" class="form-input" value="{{ old('email') }}" placeholder="example@company.com" required>
                    @error('email') <small style="color:#ef4444;">{{ $message }}</small> @enderror
                </div>
            </div>
            <div class="form-grid cols-2">
                <div class="form-group">
                    <label class="form-label">كلمة المرور</label>
                    <input type="password" name="password" class="form-input" placeholder="6 أحرف على الأقل" required minlength="6">
                    @error('password') <small style="color:#ef4444;">{{ $message }}</small> @enderror
                </div>
                <div class="form-group">
                    <label class="form-label">المستوى</label>
                    <select name="role" class="form-select" required>
                        <option value="">— اختر المستوى —</option>
                        @foreach($levels as $level)
                            @if(in_array($level->level, $activeLevels))
                            <option value="{{ $level->name }}">
                                مستوى {{ $level->level }} — {{ $level->name_ar ?? $level->name }}
                            </option>
                            @endif
                        @endforeach
                    </select>
                    @error('role') <small style="color:#ef4444;">{{ $message }}</small> @enderror
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary"><i class="fas fa-user-plus"></i> إنشاء المستخدم</button>
            </div>
        </form>
    </div>
</div>

{{-- المستخدمون الحاليون --}}
<div class="card">
    <div class="card-header"><h3><i class="fas fa-users"></i> المستخدمون الحاليون ({{ $users->count() }})</h3></div>
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    <th>المستخدم</th>
                    <th>البريد الإلكتروني</th>
                    <th>المستوى الحالي</th>
                    <th>تغيير المستوى</th>
                </tr>
            </thead>
            <tbody>
                @foreach($users as $user)
                <tr>
                    <td>
                        <div class="user-cell">
                            <div class="user-avatar-sm">{{ mb_substr($user->name, 0, 1) }}</div>
                            <div><div class="user-name">{{ $user->name }}</div></div>
                        </div>
                    </td>
                    <td>{{ $user->email }}</td>
                    <td>
                        @foreach($user->roles as $role)
                            @php
                                $lc = $role->color ?? '#6b7280';
                            @endphp
                            <span class="level-tag" style="background: {{ $lc }}15; color: {{ $lc }};">
                                <i class="{{ $role->icon ?? 'fas fa-user' }}"></i>
                                @if($role->level)
                                    مستوى {{ $role->level }} — {{ $role->name_ar }}
                                @else
                                    {{ $role->name }}
                                @endif
                            </span>
                        @endforeach
                        @if($user->roles->isEmpty())
                            <span style="color:#ef4444;"><i class="fas fa-exclamation-triangle"></i> بدون مستوى</span>
                        @endif
                    </td>
                    <td>
                        <form method="POST" action="{{ route('settings.roles.assign') }}" style="display:flex; gap:8px; align-items:center;">
                            @csrf
                            <input type="hidden" name="user_id" value="{{ $user->id }}">
                            <select name="role" class="form-select" style="width:auto; min-width:200px;">
                                @foreach($levels as $level)
                                    @if(in_array($level->level, $activeLevels))
                                    <option value="{{ $level->name }}"
                                        {{ $user->hasRole($level->name) ? 'selected' : '' }}>
                                        مستوى {{ $level->level }} — {{ $level->name_ar ?? $level->name }}
                                    </option>
                                    @endif
                                @endforeach
                            </select>
                            <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-save"></i> حفظ</button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection