@extends('dashboard.layouts.base')
@section('content')
<style>
    .card-header::after {
        content: none !important;
    }

    #example2 th,
    #example2 td {
        vertical-align: middle;
        text-align: center;
    }
</style>
<div class="col-12">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center w-100" style="direction: rtl;">
            <h3 class="card-title mb-0">المستخدمين المبلغ عنهم</h3>

            <!-- Filter Dropdown -->
            <form method="GET" action="{{ route('dashboard.reported-users.index') }}" class="d-flex align-items-center">
                <label for="filter" class="mb-0 me-2">ترتيب حسب:</label>
                <select name="filter" id="filter" class="form-select form-select-sm" style="width: auto;" onchange="this.form.submit()">
                    <option value="newest" {{ $filter == 'newest' ? 'selected' : '' }}>الأحدث أولاً</option>
                    <option value="most_reported" {{ $filter == 'most_reported' ? 'selected' : '' }}>الأكثر بلاغات</option>
                </select>
            </form>
        </div>

        <div class="card-body">
            <div id="example2_wrapper" class="dataTables_wrapper dt-bootstrap4">
                <div class="row">
                    <div class="col-sm-12">
                        <table id="example2" class="table table-bordered table-hover dataTable text-center"
                            role="grid" style="direction: rtl;" aria-describedby="example2_info">
                            <thead>
                                <tr role="row">
                                    <th>#</th>
                                    <th>الاسم</th>
                                    <th>البريد الإلكتروني</th>
                                    <th>الهاتف</th>
                                    <th>عدد البلاغات</th>
                                    <th>آخر بلاغ</th>
                                    <th>الحالة</th>
                                    <th>العمليات</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($reportedUsers as $index => $user)
                                <tr role="row" class="odd">
                                    <td>{{ $reportedUsers->firstItem() + $index }}</td>
                                    <td>{{ $user->name }}</td>
                                    <td>{{ $user->email ?? 'غير متوفر' }}</td>
                                    <td>{{ $user->phone ?? 'غير متوفر' }}</td>
                                    <td>
                                        <span class="badge badge-danger">{{ $user->reports_count }}</span>
                                    </td>
                                    <td>{{ \Carbon\Carbon::parse($user->latest_report_at)->diffForHumans() }}</td>
                                    <td>
                                        @if($user->is_blocked)
                                        <span class="badge badge-danger">محظور</span>
                                        @else
                                        <span class="badge badge-success">نشط</span>
                                        @endif
                                    </td>
                                    <td>
                                        <a href="{{ route('dashboard.users.show', $user->id) }}" class="btn btn-info btn-sm">عرض التفاصيل</a>

                                        <form action="{{ route('dashboard.reported-users.block', $user->id) }}" method="POST" style="display: inline-block;">
                                            @csrf
                                            <button type="submit" class="btn btn-{{ $user->is_blocked ? 'success' : 'warning' }} btn-sm">
                                                {{ $user->is_blocked ? 'إلغاء الحظر' : 'حظر' }}
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="8" class="text-center">لا توجد بلاغات</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 d-flex justify-content-end">
                        {{ $reportedUsers->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection