@extends('layouts.app')
@section('title', 'إدارة المستخدمين')
@section('content')

<div class="d-flex justify-content-between align-items-center mb-4">
    <div></div>
    <div>
        <button type="button" class="btn btn-primary btn-sm rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#addUserModal">
            <i class="fa-solid fa-plus ms-1"></i> مستخدم جديد
        </button>
    </div>
</div>

<div class="card shadow-sm border-0" style="border-radius: 16px;">
    <div class="card-header bg-white border-bottom pt-4 pb-3 px-4 d-flex justify-content-between align-items-center">
        <h5 class="fw-bold mb-0 text-dark"><i class="fa-solid fa-users text-primary ms-1"></i> قائمة المستخدمين</h5>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0 text-center">
                <thead class="bg-light text-muted">
                    <tr>
                        <th class="text-start ps-4">المستخدم</th>
                        <th>الصلاحية</th>
                        <th>الحالة</th>
                        <th>تاريخ التسجيل</th>
                        <th class="pe-4 text-center">الإجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($users as $u)
                    <tr>
                        <td class="text-start ps-4">
                            <div class="d-flex align-items-center">
                                <div class="bg-primary bg-opacity-10 text-primary fw-bold rounded-circle d-flex align-items-center justify-content-center shadow-sm ms-3" style="width: 45px; height: 45px; flex-shrink: 0; font-size: 1.2rem;">
                                    {{ mb_strtoupper(mb_substr($u->username, 0, 1, "UTF-8")) }}
                                </div>
                                <div>
                                    <div class="fw-bold text-dark">{{ $u->username }}</div>
                                    <div class="text-muted small">{{ $u->email }}</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="badge bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25 rounded-pill px-3">
                                <i class="fa-solid fa-shield-halved ms-1"></i> {{ $u->role->name ?? 'بدون صلاحية' }}
                            </span>
                        </td>
                        <td>
                            @if($u->is_active)
                                <span class="badge bg-success bg-opacity-10 text-success border border-success border-opacity-25 rounded-pill px-3"><i class="fa-solid fa-circle-check ms-1"></i> نشط</span>
                            @else
                                <span class="badge bg-danger bg-opacity-10 text-danger border border-danger border-opacity-25 rounded-pill px-3"><i class="fa-solid fa-ban ms-1"></i> موقوف</span>
                            @endif
                        </td>
                        <td><span class="badge bg-light text-dark border">{{ $u->created_at ? $u->created_at->format('Y-m-d') : '' }}</span></td>
                        <td class="pe-4 text-center">
                            <button type="button" class="btn btn-sm btn-warning text-dark rounded-pill px-3 py-1 shadow-sm d-inline-flex align-items-center justify-content-center fw-bold edit-user-btn" style="font-size: 0.75rem;" title="تعديل المستخدم" 
                                data-id="{{ $u->id }}"
                                data-username="{{ $u->username }}"
                                data-email="{{ $u->email }}"
                                data-role-id="{{ $u->role_id }}"
                                data-active="{{ $u->is_active }}"
                            >
                                <i class="fa-solid fa-pen-to-square ms-1"></i>تعديل
                            </button>
                            
                            @if(auth()->id() != $u->id)
                            <form action="{{ route('users.destroy', $u->id) }}" method="POST" class="d-inline" onsubmit="return confirm('هل أنت متأكد من حذف هذا المستخدم نهائياً؟')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger text-white rounded-pill px-3 py-1 shadow-sm d-inline-flex align-items-center justify-content-center fw-bold" style="font-size: 0.75rem;" title="حذف المستخدم">
                                    <i class="fa-solid fa-trash ms-1"></i>حذف
                                </button>
                            </form>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                    @if($users->isEmpty())
                    <tr>
                        <td colspan="5" class="text-center py-5 text-muted">
                            <i class="fa-solid fa-users-slash fs-1 mb-3 opacity-25 d-block"></i>
                            لا يوجد مستخدمين مسجلين بعد.
                        </td>
                    </tr>
                    @endif
                </tbody>
            </table>
        </div>
    </div>
</div>

@include('users.modals')

@endsection