@extends('layouts.dashboard')

@section('title', 'Plan Details')
@section('header', 'Plan Details')

@section('sidebar')
    @include('super-admin.partials.sidebar')
@endsection

@section('content')
<div class="max-w-5xl">
    <div class="mb-6 flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4">
        <div>
            <h2 class="text-2xl font-bold text-gray-900">{{ $plan->name }}</h2>
            <p class="mt-1 text-sm text-gray-500">Slug: <span class="font-semibold">{{ $plan->slug }}</span></p>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('super-admin.plans.edit', $plan) }}" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Edit</a>
            <a href="{{ route('super-admin.plans.index') }}" class="rounded-lg bg-gray-100 px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-200">Back</a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
        <div class="lg:col-span-2 rounded-2xl border border-gray-100 bg-white p-6 shadow-sm">
            <div class="flex items-center justify-between gap-4">
                <div>
                    <h3 class="text-lg font-bold text-gray-900">Overview</h3>
                    <p class="mt-2 text-sm text-gray-600">{{ $plan->description ?? 'No description.' }}</p>
                </div>
                <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold border
                    {{ $plan->is_active ? 'bg-green-50 text-green-800 border-green-200' : 'bg-gray-50 text-gray-800 border-gray-200' }}">
                    {{ $plan->is_active ? 'Active' : 'Inactive' }}
                </span>
            </div>

            <div class="mt-6 grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div class="rounded-xl bg-gray-50 p-4">
                    <div class="text-xs font-bold text-gray-600 uppercase">Price</div>
                    <div class="mt-1 text-xl font-extrabold text-gray-900">{{ number_format($plan->price, 0) }} {{ $plan->currency }}</div>
                    <div class="text-sm text-gray-500">{{ ucfirst($plan->interval) }}</div>
                </div>
                <div class="rounded-xl bg-gray-50 p-4">
                    <div class="text-xs font-bold text-gray-600 uppercase">Properties</div>
                    <div class="mt-1 text-xl font-extrabold text-gray-900">{{ $plan->properties_limit ?? '∞' }}</div>
                    <div class="text-sm text-gray-500">Limit</div>
                </div>
                <div class="rounded-xl bg-gray-50 p-4">
                    <div class="text-xs font-bold text-gray-600 uppercase">Users</div>
                    <div class="mt-1 text-xl font-extrabold text-gray-900">{{ $plan->users_limit ?? '∞' }}</div>
                    <div class="text-sm text-gray-500">Limit</div>
                </div>
            </div>

            <div class="mt-6">
                <h4 class="text-sm font-bold text-gray-700 uppercase tracking-wide">Features</h4>
                @php $features = $plan->features ?? []; @endphp
                @if(is_array($features) && count($features))
                    <ul class="mt-3 space-y-2">
                        @foreach($features as $feature)
                            <li class="flex items-start gap-2 text-sm text-gray-700">
                                <span class="mt-1 inline-flex h-5 w-5 items-center justify-center rounded-full bg-red-600 text-white">✓</span>
                                <span>{{ $feature }}</span>
                            </li>
                        @endforeach
                    </ul>
                @else
                    <p class="mt-3 text-sm text-gray-500">No features listed.</p>
                @endif
            </div>
        </div>

        <div class="rounded-2xl border border-gray-100 bg-white p-6 shadow-sm">
            <h3 class="text-lg font-bold text-gray-900">Subscriptions</h3>
            <p class="mt-2 text-sm text-gray-600">Total subscriptions: <span class="font-bold">{{ $plan->subscriptions->count() }}</span></p>

            @if($plan->subscriptions->count())
                <div class="mt-4 space-y-3">
                    @foreach($plan->subscriptions->take(6) as $sub)
                        <div class="rounded-xl bg-gray-50 p-4">
                            <div class="text-sm font-bold text-gray-900">{{ optional($sub->company)->name ?? 'Company' }}</div>
                            <div class="mt-1 text-xs text-gray-500">
                                Status: <span class="font-semibold">{{ $sub->status ?? '-' }}</span>
                            </div>
                        </div>
                    @endforeach
                </div>
                @if($plan->subscriptions->count() > 6)
                    <p class="mt-3 text-xs text-gray-500">Showing latest 6 subscriptions.</p>
                @endif
            @endif
        </div>
    </div>
    
</div>
@endsection