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

    #users-table th,
    #users-table 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>
        </div>

        <div class="card-body">
            <form method="GET" action="{{ route('dashboard.users.index') }}" class="mb-4">
                <div class="row g-2 align-items-center">
                    <div class="col-md-4">
                        <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="ابحث بالاسم أو الإيميل أو الهاتف">
                    </div>
                    <div class="col-md-3">
                        <select name="gender" class="form-control">
                            <option value="">كل الأنواع</option>
                            <option value="male" {{ request('gender') == 'male' ? 'selected' : '' }}>ذكر</option>
                            <option value="female" {{ request('gender') == 'female' ? 'selected' : '' }}>أنثى</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select name="has_reports" class="form-control">
                            <option value="">الكل</option>
                            <option value="1" {{ request('has_reports') == '1' ? 'selected' : '' }}>أكثر حصولا على بلاغات</option>
                        </select>
                    </div>
                    <div class="col-md-2 mt-2 mt-md-0">
                        <button type="submit" class="btn btn-primary">بحث</button>
                        <a href="{{ route('dashboard.users.index') }}" class="btn btn-secondary">إعادة ضبط</a>
                    </div>
                </div>
            </form>

            <div class="table-responsive mt-3">
                <table id="users-table" class="table table-bordered table-hover text-center" style="direction: rtl;">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>الاسم</th>
                            <th>الايميل</th>
                            <th>رقم الهاتف</th>
                            <th>النوع</th>
                            <th>مرات الحصول على الباقة المجانية</th>
                            <th>الباقة الحالية</th>
                            <th>العمليات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($users as $index => $user)
                        <tr>
                            <td>{{ $users->firstItem() + $index }}</td>
                            <td>{{ $user->name }}</td>
                            <td>{{ $user->email }}</td>
                            <td>{{ $user->phone }}</td>
                            <td>
                                @if($user->gender === 'male')
                                <span class="badge bg-primary">ذكر</span>
                                @elseif($user->gender === 'female')
                                <span class="badge bg-pink">أنثى</span>
                                @else
                                <span class="badge bg-secondary">غير محدد</span>
                                @endif
                            </td>
                            <td>
                                <span class="badge bg-info">{{ $user->free_pkg_count ?? 0 }}</span>
                            </td>
                            <td>
                                @if(!$user->activeSubscription)
                                <form action="{{ route('dashboard.users.assign-free-pkg', $user->id) }}" method="POST" style="display:inline-block;" onsubmit="return confirm('هل أنت متأكد من تعيين الباقة المجانية؟');">
                                    @csrf
                                    <button type="submit" class="btn btn-warning btn-sm">منح باقة مجانية</button>
                                </form>
                                @else
                                <div class="d-flex flex-column align-items-center">
                                    <span class="badge bg-success mb-1">{{ $user->activeSubscription?->package?->name ?? 'باقة غير معروفة' }}</span>
                                    <span class="text-muted small" style="font-size: 0.75rem;">
                                        ينتهي في: {{ $user->activeSubscription?->end_date?->format('Y-m-d') ?? 'غير محدد' }}
                                    </span>
                                </div>
                                @endif
                            </td>
                            <td>
                                <a href="{{route('dashboard.users.notification',$user->id)}}" class="btn btn-info btn-sm">اشعار</a>
                                <a href="{{route('dashboard.users.show',$user->id)}}" class="btn btn-primary btn-sm">تفاصيل</a>
                                <a href="{{route('dashboard.users.delete',$user->id)}}" class="btn btn-danger btn-sm">حذف</a>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="text-muted">لا توجد نتائج</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
                <div class="row mt-4">
                    <div class="col-12 d-flex justify-content-start">
                        {{ $users->links() }}
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection