@extends('layouts.platform')

@section('title', 'Plans')
@section('header', 'Subscription Plans')

@section('content')
    <div class="mb-6 flex items-center justify-between">
        <p class="text-sm text-gray-500">Manage subscription plans and their features.</p>
        <a href="{{ route('platform.plans.create') }}" class="rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-700 transition-colors">
            + New Plan
        </a>
    </div>

    <div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-4">
        @forelse($plans as $plan)
            <div class="relative rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 flex flex-col
                {{ $plan->is_active ? '' : 'opacity-60' }}">

                @if($plan->is_active)
                    <div class="absolute top-4 right-4">
                        <span class="inline-flex items-center rounded-full bg-green-50 px-2 py-0.5 text-xs font-medium text-green-700">Active</span>
                    </div>
                @else
                    <div class="absolute top-4 right-4">
                        <span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-500">Inactive</span>
                    </div>
                @endif

                <h3 class="text-lg font-display font-bold text-gray-900">{{ $plan->name }}</h3>
                <p class="mt-1 text-sm text-gray-500 flex-1">{{ $plan->description }}</p>

                <div class="mt-4">
                    @if($plan->billingType() === 'trial')
                        <span class="text-3xl font-display font-bold text-gray-900">Free</span>
                        <span class="text-sm text-gray-500">trial</span>
                    @elseif($plan->billingType() === 'per_student')
                        <span class="text-3xl font-display font-bold text-gray-900">&#8358;{{ number_format((float) $plan->per_student_price ?? 0, 0) }}</span>
                        <span class="text-sm text-gray-500">/ student</span>
                    @else
                        <span class="text-3xl font-display font-bold text-gray-900">
                            &#8358;{{ number_format($plan->price, 0) }}
                        </span>
                        <span class="text-sm text-gray-500">/{{ $plan->billing_period === 'yearly' ? 'year' : 'month' }}</span>
                    @endif
                </div>

                <div class="mt-4 text-sm">
                    <span class="inline-flex items-center rounded-md bg-indigo-50 px-2 py-0.5 text-xs font-medium text-indigo-700">
                        {{ str_replace('_', ' ', ucwords($plan->billingType(), '_')) }}
                    </span>
                </div>

                <div class="mt-4 space-y-2 text-sm text-gray-600">
                    <div class="flex justify-between">
                        <span>Students</span>
                        <span class="font-medium">{{ number_format($plan->max_students) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span>Teachers</span>
                        <span class="font-medium">{{ number_format($plan->max_teachers) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span>Classes</span>
                        <span class="font-medium">{{ number_format($plan->max_classes) }}</span>
                    </div>
                    <div class="flex justify-between border-t pt-2">
                        <span>Schools on plan</span>
                        <span class="font-medium">{{ $plan->schools_count }}</span>
                    </div>
                </div>

                @if($plan->features)
                    <div class="mt-4 border-t pt-4">
                        <p class="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-2">Features</p>
                        <div class="flex flex-wrap gap-1">
                            @foreach($plan->features as $feature)
                                <span class="inline-flex items-center rounded-md bg-primary-50 px-2 py-0.5 text-xs font-medium text-primary-700">
                                    {{ ucfirst($feature) }}
                                </span>
                            @endforeach
                        </div>
                    </div>
                @endif

                <div class="mt-6 flex gap-2">
                    <a href="{{ route('platform.plans.edit', $plan) }}" class="flex-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-center text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
                        Edit
                    </a>
                    <form method="POST" action="{{ route('platform.plans.destroy', $plan) }}" onsubmit="return confirm('Delete this plan?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="rounded-lg border border-red-200 bg-white px-3 py-2 text-sm font-medium text-red-600 hover:bg-red-50 transition-colors">
                            Delete
                        </button>
                    </form>
                </div>
            </div>
        @empty
            <div class="col-span-full text-center py-12">
                <p class="text-gray-500">No plans created yet.</p>
                <a href="{{ route('platform.plans.create') }}" class="mt-2 inline-block text-sm font-medium text-primary-600 hover:text-primary-500">Create your first plan</a>
            </div>
        @endforelse
    </div>
@endsection