@extends('layouts.superadmin')
@section('title', isset($plan) ? 'Edit Plan' : 'Create Plan')
@section('page-title', isset($plan) ? 'Edit Plan: '.$plan->name : 'Create New Plan')

@section('content')
<div class="max-w-2xl">
<form method="POST" action="{{ isset($plan) ? route('superadmin.plans.update', $plan) : route('superadmin.plans.store') }}"
      x-data="{ features: {{ json_encode(old('features', $plan->features ?? ['GST Invoices','Customer Management','Product Catalog','Basic Reports'])) }} }">
    @csrf
    @if(isset($plan)) @method('PUT') @endif

    <div class="sa-card space-y-5">
        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="form-label">Plan Name <span class="text-red-500">*</span></label>
                <input type="text" name="name" value="{{ old('name', $plan->name ?? '') }}" class="form-input" required placeholder="Basic, Pro, Enterprise">
            </div>
            <div>
                <label class="form-label">Slug <span class="text-red-500">*</span></label>
                <input type="text" name="slug" value="{{ old('slug', $plan->slug ?? '') }}" class="form-input" required placeholder="basic, pro, enterprise" {{ isset($plan) ? 'readonly' : '' }}>
            </div>
            <div class="col-span-2">
                <label class="form-label">Description</label>
                <textarea name="description" rows="2" class="form-input" placeholder="Brief plan description">{{ old('description', $plan->description ?? '') }}</textarea>
            </div>
            <div>
                <label class="form-label">Monthly Price (₹) <span class="text-red-500">*</span></label>
                <input type="number" name="price_monthly" value="{{ old('price_monthly', $plan->price_monthly ?? 0) }}" class="form-input" step="0.01" min="0" required>
            </div>
            <div>
                <label class="form-label">Yearly Price (₹) <span class="text-red-500">*</span></label>
                <input type="number" name="price_yearly" value="{{ old('price_yearly', $plan->price_yearly ?? 0) }}" class="form-input" step="0.01" min="0" required>
            </div>
            <div>
                <label class="form-label">Max Users</label>
                <input type="number" name="max_users" value="{{ old('max_users', $plan->max_users ?? 3) }}" class="form-input" min="1">
            </div>
            <div>
                <label class="form-label">Max Invoices/Month (0=unlimited)</label>
                <input type="number" name="max_invoices" value="{{ old('max_invoices', $plan->max_invoices ?? 0) }}" class="form-input" min="0">
            </div>
            <div>
                <label class="form-label">Sort Order</label>
                <input type="number" name="sort_order" value="{{ old('sort_order', $plan->sort_order ?? 0) }}" class="form-input" min="0">
            </div>
        </div>

        {{-- Features --}}
        <div>
            <label class="form-label">Features (one per line)</label>
            <div class="space-y-2">
                <template x-for="(feat, i) in features" :key="i">
                    <div class="flex gap-2">
                        <input type="text" :name="`features[${i}]`" x-model="features[i]" class="form-input flex-1">
                        <button type="button" @click="features.splice(i,1)" class="text-red-500 hover:text-red-700 px-2">✕</button>
                    </div>
                </template>
                <button type="button" @click="features.push('')" class="text-indigo-600 text-sm hover:underline">+ Add feature</button>
            </div>
        </div>

        <div class="flex items-center gap-6 pt-2 border-t border-slate-200">
            <label class="flex items-center gap-2 cursor-pointer">
                <input type="hidden" name="is_active" value="0">
                <input type="checkbox" name="is_active" value="1" {{ old('is_active', $plan->is_active ?? true) ? 'checked':'' }} class="w-4 h-4 rounded border-slate-300 text-indigo-600">
                <span class="text-sm font-medium">Active</span>
            </label>
            <label class="flex items-center gap-2 cursor-pointer">
                <input type="hidden" name="is_popular" value="0">
                <input type="checkbox" name="is_popular" value="1" {{ old('is_popular', $plan->is_popular ?? false) ? 'checked':'' }} class="w-4 h-4 rounded border-slate-300 text-indigo-600">
                <span class="text-sm font-medium">Mark as Popular</span>
            </label>
        </div>
    </div>

    <div class="flex gap-3 mt-4">
        <button type="submit" class="btn-sa-primary">{{ isset($plan) ? 'Update Plan' : 'Create Plan' }}</button>
        <a href="{{ route('superadmin.plans.index') }}" class="btn-sa bg-slate-200 hover:bg-slate-300 text-slate-700">Cancel</a>
    </div>
</form>
</div>
@endsection