@extends('layouts.admin')

@section('title', 'اشتراكات المستخدمين')
@section('heading', 'اشتراكات المستخدمين')
@section('subheading', 'سجل التعيينات التجريبية من لوحة التحكم')

@section('content')
    <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
        <a href="{{ route('admin.subscription-plans.index') }}" class="text-sm font-medium text-teal-700 hover:underline">← خطط الاشتراك</a>
        <a href="{{ route('admin.users.index') }}" class="text-sm font-medium text-teal-700 hover:underline">المستخدمون</a>
    </div>

    <div class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-zinc-200 text-sm">
                <thead class="bg-zinc-50 text-right text-xs font-semibold uppercase tracking-wide text-zinc-500">
                    <tr>
                        <th class="px-4 py-3">#</th>
                        <th class="px-4 py-3">المستخدم</th>
                        <th class="px-4 py-3">الخطة</th>
                        <th class="px-4 py-3">يبدأ</th>
                        <th class="px-4 py-3">ينتهي</th>
                        <th class="px-4 py-3">الحالة</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-zinc-100">
                    @forelse ($rows as $row)
                        <tr>
                            <td class="px-4 py-3 text-zinc-500">{{ $row->id }}</td>
                            <td class="px-4 py-3">
                                <a href="{{ route('admin.users.show', $row->user) }}" class="font-medium text-teal-800 hover:underline">
                                    {{ $row->user?->full_name ?? '—' }}
                                </a>
                                <div class="text-xs text-zinc-500">{{ '@'.($row->user?->username ?? '') }}</div>
                            </td>
                            <td class="px-4 py-3">{{ $row->plan?->name ?? '—' }} <span class="font-mono text-xs text-zinc-500">({{ $row->plan?->slug }})</span></td>
                            <td class="whitespace-nowrap px-4 py-3 text-xs text-zinc-600">{{ $row->starts_at?->format('Y-m-d H:i') }}</td>
                            <td class="whitespace-nowrap px-4 py-3 text-xs text-zinc-600">{{ $row->ends_at?->format('Y-m-d H:i') ?? '—' }}</td>
                            <td class="px-4 py-3">{{ $row->status }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="6" class="px-4 py-8 text-center text-zinc-500">لا توجد اشتراكات مسجّلة بعد.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="border-t border-zinc-100 px-4 py-3">
            {{ $rows->links() }}
        </div>
    </div>
@endsection