@extends('layouts.admin')

@section('title', 'Create Plan - Admin')
@section('page-title', 'Create Subscription Plan')
@section('page-description', 'Add a new subscription plan')

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="glass-card rounded-2xl p-8 border border-white/10" data-aos="fade-up">
        <form class="space-y-6">
            <div>
                <label class="block text-white mb-2">Plan Name *</label>
                <input type="text" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" placeholder="e.g., Pro Plan">
            </div>
            <div class="grid md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-white mb-2">Monthly Price (£)</label>
                    <input type="number" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" placeholder="59">
                </div>
                <div>
                    <label class="block text-white mb-2">Yearly Price (£)</label>
                    <input type="number" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" placeholder="590">
                </div>
            </div>
            <div>
                <label class="block text-white mb-2">Guest Limit</label>
                <input type="number" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" placeholder="500">
            </div>
            <div>
                <label class="block text-white mb-2">Features (comma separated)</label>
                <textarea rows="3" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" placeholder="1 Wedding Page, 500 Guests, Full Booking Management, Email Invitations"></textarea>
            </div>
            <div>
                <label class="block text-white mb-2">Status</label>
                <select class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white">
                    <option>Active</option>
                    <option>Inactive</option>
                </select>
            </div>
            <div class="flex gap-4">
                <button type="submit" class="flex-1 px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg text-white font-semibold hover:shadow-2xl transition hover:scale-105">
                    <i class="fas fa-save mr-2"></i>Create Plan
                </button>
                <a href="{{ route('admin.plans.index') }}" class="px-6 py-3 bg-white/10 rounded-lg text-gray-300 hover:bg-white/20 transition text-center">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>
@endsection