@extends('admin.layouts.app')

@section('title', 'إدارة المستخدمين')

@push('styles')
<style>
.admin-table-wrap .table, .admin-table-wrap table { background: var(--dark-800) !important; }
.admin-table-wrap th { background: var(--dark-700) !important; color: #9CA3BD !important; }
.admin-table-wrap td { background: transparent !important; color: #F0F1F5 !important; }
</style>
@endpush
@section('page-title', 'إدارة المستخدمين')
@section('page-icon', 'fas fa-users')

@section('content')
<div class="row g-3 mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div>
                    <i class="fas fa-users"></i>
                    قائمة المستخدمين
                </div>
                <div class="d-flex gap-2 flex-wrap">
                    <form method="GET" action="{{ route('admin.users') }}" class="d-flex gap-2">
                        <div class="input-group" style="max-width: 220px;">
                            <input type="text" class="form-control" name="search" id="searchInput"
                                   value="{{ request('search') }}" placeholder="البحث...">
                            <button class="btn btn-primary" type="submit">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                        <select class="form-select" name="type" id="filterType" style="max-width: 140px;" onchange="this.form.submit()">
                            <option value="">جميع الأنواع</option>
                            <option value="driver" {{ request('type') == 'driver' ? 'selected' : '' }}>سائق</option>
                            <option value="passenger" {{ request('type') == 'passenger' ? 'selected' : '' }}>راكب</option>
                            <option value="admin" {{ request('type') == 'admin' ? 'selected' : '' }}>مدير</option>
                        </select>
                    </form>
                    <a href="{{ route('admin.users.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> إضافة مستخدم
                    </a>
                </div>
            </div>
            <div class="card-body p-0">
                @if($users->count() > 0)
                    <div class="table-responsive admin-table-wrap">
                        <table class="table admin-table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>الاسم</th>
                                    <th>البريد الإلكتروني</th>
                                    <th>رقم الهاتف</th>
                                    <th>النوع</th>
                                    <th>الخدمة</th>
                                    <th>المحافظة</th>
                                    <th>المدينة</th>
                                    <th>الحالة</th>
                                    <th>التاريخ</th>
                                    <th>الإجراءات</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($users as $user)
                                    <tr>
                                        <td>{{ $user->id }}</td>
                                        <td>
                                            <div class="d-flex align-items-center gap-2">
                                                @if($user->profile_image)
                                                    <img src="{{ asset('storage/' . $user->profile_image) }}"
                                                         alt="صورة المستخدم" class="rounded-circle" width="36" height="36">
                                                @else
                                                    <div class="rounded-circle d-flex align-items-center justify-content-center"
                                                         style="width: 36px; height: 36px; background: var(--dark-600);">
                                                        <i class="fas fa-user" style="color: var(--text-muted);"></i>
                                                    </div>
                                                @endif
                                                <div>
                                                    <strong>{{ $user->name }}</strong>
                                                    @if($user->user_type === 'admin')
                                                        <span class="badge badge-danger ms-1">مدير</span>
                                                    @endif
                                                </div>
                                            </div>
                                        </td>
                                        <td>{{ $user->email }}</td>
                                        <td>{{ $user->phone ?? 'غير محدد' }}</td>
                                        <td>
                                            @switch($user->user_type)
                                                @case('driver')
                                                    <span class="badge badge-info"><i class="fas fa-user-tie me-1"></i>سائق</span>
                                                    @break
                                                @case('passenger')
                                                    <span class="badge badge-success"><i class="fas fa-user me-1"></i>راكب</span>
                                                    @break
                                                @case('admin')
                                                    <span class="badge badge-danger"><i class="fas fa-crown me-1"></i>مدير</span>
                                                    @break
                                                @case('restaurant_manager')
                                                    <span class="badge badge-warning"><i class="fas fa-utensils me-1"></i>مدير مطعم</span>
                                                    @break
                                                @case('gas_manager')
                                                    <span class="badge badge-info"><i class="fas fa-fire me-1"></i>مدير غاز</span>
                                                    @break
                                                @default
                                                    <span class="badge badge-secondary">غير محدد</span>
                                            @endswitch
                                        </td>
                                        <td>
                                            @switch($user->service_type)
                                                @case('taxi') <span class="badge badge-info">تاكسي</span> @break
                                                @case('restaurant') <span class="badge badge-warning">مطعم</span> @break
                                                @case('gas') <span class="badge badge-danger">غاز</span> @break
                                                @case('all') <span class="badge badge-secondary">جميع الخدمات</span> @break
                                                @default <span class="badge badge-secondary">غير محدد</span>
                                            @endswitch
                                        </td>
                                        <td>
                                            @if($user->governorate)
                                                <span class="badge badge-info">{{ $user->governorate->name_ar }}</span>
                                            @else
                                                <span style="color: var(--text-muted);">غير محدد</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($user->city)
                                                <span class="badge badge-secondary">{{ $user->city->name_ar }}</span>
                                            @else
                                                <span style="color: var(--text-muted);">غير محدد</span>
                                            @endif
                                        </td>
                                        <td>
                                            @switch($user->status)
                                                @case('active')
                                                    <span class="badge badge-success"><i class="fas fa-check-circle me-1"></i>نشط</span>
                                                    @break
                                                @case('inactive')
                                                    <span class="badge badge-warning"><i class="fas fa-pause-circle me-1"></i>معطل</span>
                                                    @break
                                                @case('suspended')
                                                    <span class="badge badge-danger"><i class="fas fa-ban me-1"></i>موقوف</span>
                                                    @break
                                                @default
                                                    <span class="badge badge-secondary">غير محدد</span>
                                            @endswitch
                                        </td>
                                        <td>
                                            <small style="color: var(--text-muted);">{{ $user->created_at->format('Y-m-d') }}</small>
                                            <br><small style="color: var(--text-muted);">{{ $user->created_at->format('H:i') }}</small>
                                        </td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <a href="{{ route('admin.users.show', $user->id) }}" class="btn btn-info btn-sm" title="عرض">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a href="{{ route('admin.users.edit', $user->id) }}" class="btn btn-warning btn-sm" title="تعديل">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <form action="{{ route('admin.users.delete', $user->id) }}" method="POST" class="d-inline"
                                                      onsubmit="return confirm('هل أنت متأكد من حذف هذا المستخدم؟')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-danger btn-sm" title="حذف">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="d-flex justify-content-between align-items-center p-3 border-top" style="border-color: rgba(255,255,255,0.04) !important;">
                        <div style="color: var(--text-muted); font-size: 13px;">
                            عرض {{ $users->firstItem() ?? 0 }} إلى {{ $users->lastItem() ?? 0 }} من أصل {{ $users->total() }}
                        </div>
                        {{ $users->appends(request()->query())->links('pagination::bootstrap-4') }}
                    </div>
                @else
                    <div class="empty-state">
                        <i class="fas fa-users d-block"></i>
                        لا يوجد مستخدمين
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.getElementById('searchInput')?.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') this.form.submit();
});
</script>
@endsection