@extends('layouts.admin')

@section('title', 'Expired Subscriptions')

@section('content')
<div class="min-h-screen bg-slate-50">
    <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">

        <div class="mb-6">
            <h1 class="text-2xl font-bold text-slate-800 md:text-3xl">Expired Subscriptions</h1>
            <p class="mt-1 text-sm text-slate-500">Subscriptions that are no longer active.</p>
        </div>

        <div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
            @forelse($subscriptions as $item)
                <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
                    <div class="flex items-start justify-between">
                        <div>
                            <h3 class="text-lg font-bold text-slate-800">{{ $item->user->name ?? 'N/A' }}</h3>
                            <p class="text-sm text-slate-500">{{ $item->user->email ?? 'N/A' }}</p>
                        </div>

                        <span class="inline-flex rounded-full bg-rose-100 px-3 py-1 text-xs font-bold text-rose-700">
                            Expired
                        </span>
                    </div>

                    <div class="mt-5 space-y-3">
                        <div class="rounded-2xl bg-slate-50 p-4">
                            <div class="text-xs text-slate-500">Plan</div>
                            <div class="mt-1 font-semibold text-slate-800">{{ $item->plan->name ?? 'N/A' }}</div>
                        </div>

                        <div class="rounded-2xl bg-slate-50 p-4">
                            <div class="text-xs text-slate-500">Validity</div>
                            <div class="mt-1 text-sm text-slate-700">
                                {{ $item->start_date ? $item->start_date->format('d M, Y') : 'N/A' }}
                                -
                                {{ $item->end_date ? $item->end_date->format('d M, Y') : 'N/A' }}
                            </div>
                        </div>

                        <div class="rounded-2xl bg-slate-50 p-4">
                            <div class="text-xs text-slate-500">Expired On</div>
                            <div class="mt-1 font-semibold text-rose-700">
                                {{ $item->end_date ? $item->end_date->format('d M, Y h:i A') : 'N/A' }}
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-span-full rounded-3xl border border-slate-200 bg-white p-10 text-center shadow-sm">
                    <h3 class="text-lg font-semibold text-slate-700">No expired subscriptions found</h3>
                </div>
            @endforelse
        </div>

        @if($subscriptions->hasPages())
            <div class="mt-6">
                {{ $subscriptions->links() }}
            </div>
        @endif
    </div>
</div>
@endsection