@extends('layouts.app')
@section('title', 'إدارة المستخدمين')
@section('content')
<div class="container">
    <x-header title="إدارة المستخدمين" />
    
    @canany(['user.create'])
        <a href="{{ route('users.create') }}" class="btn btn-success mb-3"><i class="fa-solid fa-user-plus"></i></a>
    @endcanany

 <x-alert />
 
    {{-- للعرض على الشاشات الكبيرة --}}
    <div class="table-responsive d-none d-md-block">
        <table class="table table-bordered table-striped table-hover table-sm text-center align-middle">
            <thead>
                <tr class="text-center">
                    <th>#</th>
                    <th>الاسم</th>
                    <th>الهاتف</th>
                    <th>الرقم القومي</th>
                    <th>البريد الإلكتروني</th>
                    <th>الصلاحيات</th>
                    <th>الكنائس</th>
                    <th>أخر دخول</th>
                    @canany(['user.edit', 'user.delete'])
                    <th>إجراءات</th>
                    @endcanany
                </tr>
            </thead>
            <tbody>
                @forelse ($users as $user)
                <tr class="text-center">
                    <td>{{ $loop->iteration + ($users->currentPage() - 1) * $users->perPage() }}</td>
                    <td>{{ $user->name }}</td>
                    <td>{{ $user->phone }}</td>
                    <td>{{ $user->NID }}</td>
                    <td>{{ $user->email }}</td>
                    <td>
                        @if($user->roles->isEmpty())
                            <span class="text-muted">لا يوجد صلاحيات</span>
                        @else
                            @foreach($user->roles as $role)
                                <span class="badge text-bg-secondary">{{ $role->name }}</span>
                            @endforeach
                        @endif
                    </td>
                    <td>
                        <div class="row">
                            @foreach($user->churches as $church)
                                <div class="col-md-6 mb-1">
                                    <span class="badge text-bg-info w-100">
                                        {{ $church->name }} {{ $church->address ? ' - ' . $church->address : '' }}
                                    </span>
                                </div>
                            @endforeach
                        </div>
                    </td>
                    <td>{{ $user->last_login_at ? $user->last_login_at->format('Y-m-d (H:i A)') : 'لم يتم تسجيل الدخول' }}</td>
                    @canany(['user.edit', 'user.delete'])
                    <td>
                        @canany(['user.edit'])
                            <a href="{{ route('users.edit', $user->id) }}" class="btn btn-sm btn-warning btn-sm"><i class="fa-regular fa-pen-to-square"></i></a>
                        @endcan
                        @canany(['user.delete'])
                            <!-- زر الحذف -->
                            <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteModal{{ $user->id }}">
                                <i class="fa-solid fa-trash"></i>
                            </button>

                            <!-- استدعاء الـ Component -->
                            <x-delete-modal :id="$user->id" model="users" />
                        @endcanany
                    </td>
                    @endcanany
                </tr>
                @empty
                <tr>
                    <td colspan="9" class="text-center">لا يوجد بيانات</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- للعرض على الموبايل --}}
    <div class="d-block d-md-none">
        <ul class="list-group list-group-flush">
            @forelse ($users as $user)
                <li class="list-group-item">
                    <span class="badge text-bg-dark rounded-pill">{{ $loop->iteration + ($users->currentPage() - 1) * $users->perPage() }}</span>  <br>
                    <strong>الاسم:</strong> {{ $user->name }} <br>
                    <strong>الهاتف:</strong> {{ $user->phone }} <br>
                    <strong>الرقم القومي:</strong> {{ $user->NID }} <br>
                    <strong>البريد الإلكتروني:</strong> {{ $user->email }} <br>
                    <strong>الصلاحيات:</strong>
                    @foreach($user->roles as $role)
                        <span class="badge text-bg-secondary">{{ $role->name }}</span>
                    @endforeach
                    <br>
                    <div class="row">
                        <!-- العمود الأول: العنوان -->
                        <div class="col-3 d-flex align-items-start">
                            <strong>الكنائس:</strong>
                        </div>

                        <!-- العمودين للكنائس -->
                        <div class="col-9">
                            <div class="row">
                                @foreach($user->churches as $church)
                                    <div class="col-12 mb-1">
                                        <span class="badge text-bg-info w-100">
                                            {{ $church->name }}
                                        </span>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <br>
                    <strong>أخر دخول:</strong> {{ $user->last_login_at ? $user->last_login_at : 'لم يتم تسجيل الدخول' }} <br>
                    @canany(['user.edit', 'user.delete'])
                        <div class="d-flex justify-content-evenly mt-2">
                            @canany(['user.edit'])
                                <a href="{{ route('users.edit', $user->id) }}" class="btn btn-sm btn-warning">
                                    <i class="fa-regular fa-pen-to-square"></i> تعديل
                                </a>
                            @endcan
                            @canany(['user.delete'])
                                <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteModal{{ $user->id }}">
                                    <i class="fa-solid fa-trash"></i> حذف
                                </button>
                                <x-delete-modal :id="$user->id" model="users" />
                            @endcanany
                        </div>
                    @endcanany
                </li>
            @empty
                <li class="list-group-item text-center">لا يوجد بيانات</li>
            @endforelse
        </ul>
    </div>

    <x-pagination :data="$users" />
</div>
@endsection