@extends('layouts.app')

@section('content')
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="card mb-4">
                <div class="card-header pb-0">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">إدارة المستخدمين</h6>
                        @if(auth()->user()->hasPermission('create_users'))
                        <a href="{{ route('admin.users.create') }}" class="btn btn-sm btn-primary">
                            <i class="fas fa-plus"></i> إضافة مستخدم جديد
                        </a>
                        @endif
                    </div>
                </div>
                <div class="card-body px-0 pt-0 pb-2">
                    @if(session('success'))
                    <div class="alert alert-success text-white mx-4">
                        {{ session('success') }}
                    </div>
                    @endif
                    
                    @if(session('error'))
                    <div class="alert alert-danger text-white mx-4">
                        {{ session('error') }}
                    </div>
                    @endif
                    
                    <div class="table-responsive p-0">
                        <table class="table align-items-center mb-0">
                            <thead>
                                <tr>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">#</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">الاسم</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">البريد الإلكتروني</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">الدور</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">تاريخ الإنشاء</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">الإجراءات</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($users as $user)
                                <tr>
                                    <td class="text-center">
                                        <p class="text-xs font-weight-bold mb-0">{{ $loop->iteration }}</p>
                                    </td>
                                    <td>
                                        <div class="d-flex px-2 py-1">
                                            <div class="d-flex flex-column justify-content-center">
                                                <h6 class="mb-0 text-sm">{{ $user->name }}</h6>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="text-xs font-weight-bold mb-0">{{ $user->email }}</p>
                                    </td>
                                    <td>
                                        <span class="badge badge-sm {{ $user->role == 'admin' ? 'bg-gradient-primary' : ($user->role == 'cashier' ? 'bg-gradient-success' : ($user->role == 'waiter' ? 'bg-gradient-info' : 'bg-gradient-warning')) }}">
                                            {{ App\Models\User::$roles[$user->role] ?? $user->role }}
                                        </span>
                                    </td>
                                    <td>
                                        <p class="text-xs font-weight-bold mb-0">{{ $user->created_at->format('Y-m-d') }}</p>
                                    </td>
                                    <td>
                                        <div class="d-flex">
                                            @if(auth()->user()->hasPermission('view_users'))
                                            <a href="{{ route('admin.users.show', $user->id) }}" class="btn btn-link text-info px-1 mb-0">
                                                <i class="fas fa-eye text-info me-2"></i>
                                            </a>
                                            @endif
                                            
                                            @if(auth()->user()->hasPermission('edit_users'))
                                            <a href="{{ route('admin.users.edit', $user->id) }}" class="btn btn-link text-dark px-1 mb-0">
                                                <i class="fas fa-pencil-alt text-dark me-2"></i>
                                            </a>
                                            @endif
                                            
                                            @if(auth()->user()->hasPermission('delete_users') && auth()->id() != $user->id)
                                            <form action="{{ route('admin.users.destroy', $user->id) }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-link text-danger px-1 mb-0" onclick="return confirm('هل أنت متأكد من حذف هذا المستخدم؟')">
                                                    <i class="fas fa-trash text-danger me-2"></i>
                                                </button>
                                            </form>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="6" class="text-center">لا يوجد مستخدمين</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection