@extends('admin.layout')
@section('title', 'Add Plan')
@section('page-title', 'Add Pricing Plan')

@section('content')
<div class="max-w-5xl mx-auto">
    <div class="bg-gray-900 border border-gray-800 rounded-2xl p-6">
        <form action="{{ route('admin.pricing.store') }}" method="POST">
            @csrf
            <div class="space-y-5">
                <div class="grid grid-cols-2 gap-4">
                    <div><label class="block text-sm font-medium text-gray-300 mb-2">Plan Name *</label><input type="text" name="name" value="{{ old('name') }}" required class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500"></div>
                    <div><label class="block text-sm font-medium text-gray-300 mb-2">Price *</label><input type="text" name="price" value="{{ old('price') }}" required placeholder="$999" class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500"></div>
                </div>
                <div><label class="block text-sm font-medium text-gray-300 mb-2">Description</label><textarea name="description" rows="2" class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500 resize-none">{{ old('description') }}</textarea></div>
                <div><label class="block text-sm font-medium text-gray-300 mb-2">Features (one per line) *</label><textarea name="features" rows="5" required placeholder="Feature 1&#10;Feature 2&#10;Feature 3" class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500 resize-none">{{ old('features') }}</textarea></div>
                <div class="grid grid-cols-2 gap-4">
                    <div><label class="block text-sm font-medium text-gray-300 mb-2">Badge Text</label><input type="text" name="badge" value="{{ old('badge') }}" placeholder="e.g. Most Popular" class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500"></div>
                    <div><label class="block text-sm font-medium text-gray-300 mb-2">Period</label><input type="text" name="period" value="{{ old('period', 'one-time') }}" class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500"></div>
                </div>
                <div class="flex items-center gap-4"><label class="flex items-center gap-2"><input type="checkbox" name="is_featured" value="1" class="w-4 h-4 rounded border-gray-700 text-indigo-600"><span class="text-sm text-gray-300">Featured</span></label></div>
            </div>
            @include('admin.partials.form-actions', ['submitText' => 'Create Plan', 'cancelRoute' => route('admin.pricing.index')])
        </form>
    </div>
</div>
@endsection