@php
    $inputClass = 'mt-1 block w-full rounded-lg border-blue-100 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-blue-900 dark:bg-slate-950 dark:text-slate-100';
    $featuresText = old('features_text', implode(PHP_EOL, $plan->features ?? []));
@endphp

<div class="grid gap-6 xl:grid-cols-[1fr_22rem]">
    <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
        <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-300">Plan Details</p>
        <h3 class="mt-2 text-xl font-bold text-slate-950 dark:text-white">Subscription information</h3>

        <div class="mt-6 grid gap-4 md:grid-cols-2">
            <div>
                <label for="name" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Plan Name</label>
                <input id="name" name="name" value="{{ old('name', $plan->name) }}" class="{{ $inputClass }}" required>
                @error('name') <p class="mt-1 text-sm text-red-600 dark:text-red-300">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="slug" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Slug</label>
                <input id="slug" name="slug" value="{{ old('slug', $plan->slug) }}" placeholder="monthly" class="{{ $inputClass }}">
                <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Leave blank to generate from the plan name.</p>
                @error('slug') <p class="mt-1 text-sm text-red-600 dark:text-red-300">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="billing_period" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Billing Period</label>
                <select id="billing_period" name="billing_period" class="{{ $inputClass }}" required>
                    @foreach ($periods as $value => $label)
                        <option value="{{ $value }}" @selected(old('billing_period', $plan->billing_period) === $value)>{{ $label }}</option>
                    @endforeach
                </select>
                @error('billing_period') <p class="mt-1 text-sm text-red-600 dark:text-red-300">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="duration_days" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Duration Days</label>
                <input id="duration_days" type="number" min="1" name="duration_days" value="{{ old('duration_days', $plan->duration_days) }}" class="{{ $inputClass }}" required>
                @error('duration_days') <p class="mt-1 text-sm text-red-600 dark:text-red-300">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="price" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Price</label>
                <input id="price" type="number" step="0.01" min="0" name="price" value="{{ old('price', $plan->price) }}" class="{{ $inputClass }}" required>
                <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Use this for monthly, quarterly, or yearly price depending on the billing period.</p>
                @error('price') <p class="mt-1 text-sm text-red-600 dark:text-red-300">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="currency" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Currency</label>
                <input id="currency" name="currency" maxlength="3" value="{{ old('currency', $plan->currency ?: 'USD') }}" class="{{ $inputClass }} uppercase" required>
                @error('currency') <p class="mt-1 text-sm text-red-600 dark:text-red-300">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="sort_order" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Sort Order</label>
                <input id="sort_order" type="number" min="0" name="sort_order" value="{{ old('sort_order', $plan->sort_order ?? 0) }}" class="{{ $inputClass }}" required>
                @error('sort_order') <p class="mt-1 text-sm text-red-600 dark:text-red-300">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="max_trades" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Maximum Trades</label>
                <input id="max_trades" type="number" min="1" name="max_trades" value="{{ old('max_trades', $plan->max_trades) }}" class="{{ $inputClass }}" placeholder="Leave blank for unlimited">
                <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Leave blank if this plan should allow unlimited trades.</p>
                @error('max_trades') <p class="mt-1 text-sm text-red-600 dark:text-red-300">{{ $message }}</p> @enderror
            </div>
        </div>

        <div class="mt-5">
            <label for="description" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Description</label>
            <textarea id="description" name="description" rows="3" class="{{ $inputClass }}">{{ old('description', $plan->description) }}</textarea>
            @error('description') <p class="mt-1 text-sm text-red-600 dark:text-red-300">{{ $message }}</p> @enderror
        </div>

        <div class="mt-5">
            <label for="features_text" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Plan Features</label>
            <textarea id="features_text" name="features_text" rows="7" class="{{ $inputClass }}" placeholder="Trade journal access&#10;Dashboard analytics&#10;Trading tools">{{ $featuresText }}</textarea>
            <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Write one feature per line.</p>
            @error('features_text') <p class="mt-1 text-sm text-red-600 dark:text-red-300">{{ $message }}</p> @enderror
        </div>
    </section>

    <aside class="space-y-6">
        <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
            <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-300">Feature Access</p>
            <div class="mt-5 space-y-3">
                @foreach ([
                    'can_access_analytics' => 'Analytics dashboard',
                    'can_access_trading_tools' => 'Trading tools',
                    'can_access_forex_calendar' => 'Forex calendar',
                    'can_access_market_news' => 'Market news',
                    'can_upload_screenshots' => 'Screenshot uploads',
                ] as $field => $label)
                    <label class="flex items-center gap-3 rounded-lg border border-blue-100 p-3 dark:border-blue-900/50">
                        <input type="hidden" name="{{ $field }}" value="0">
                        <input type="checkbox" name="{{ $field }}" value="1" @checked(old($field, $plan->{$field} ?? true)) class="rounded border-blue-200 text-blue-600 focus:ring-blue-500">
                        <span class="text-sm font-bold text-slate-950 dark:text-white">{{ $label }}</span>
                    </label>
                @endforeach
            </div>
        </section>

        <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
            <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-300">Visibility</p>

            <div class="mt-5 space-y-4">
                <label class="flex items-start gap-3 rounded-lg border border-blue-100 p-4 dark:border-blue-900/50">
                    <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $plan->is_active ?? true)) class="mt-1 rounded border-blue-200 text-blue-600 focus:ring-blue-500">
                    <span>
                        <span class="block text-sm font-bold text-slate-950 dark:text-white">Active plan</span>
                        <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">Active plans are available when payment mode is enabled later.</span>
                    </span>
                </label>

                <label class="flex items-start gap-3 rounded-lg border border-blue-100 p-4 dark:border-blue-900/50">
                    <input type="checkbox" name="is_recommended" value="1" @checked(old('is_recommended', $plan->is_recommended ?? false)) class="mt-1 rounded border-blue-200 text-blue-600 focus:ring-blue-500">
                    <span>
                        <span class="block text-sm font-bold text-slate-950 dark:text-white">Recommended plan</span>
                        <span class="mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400">Only one plan should be recommended. Saving this will remove the recommended flag from other plans.</span>
                    </span>
                </label>
            </div>
        </section>

        <section class="rounded-lg border border-blue-100 bg-blue-50/70 p-6 dark:border-blue-900/50 dark:bg-blue-950/30">
            <p class="text-sm font-bold text-blue-700 dark:text-blue-200">Payment note</p>
            <p class="mt-2 text-sm leading-6 text-slate-600 dark:text-slate-300">
                This edits plan data only. No real payment provider is connected yet, and payment mode remains optional.
            </p>
        </section>
    </aside>
</div>

<div class="mt-6 flex flex-wrap gap-3">
    <button type="submit" class="rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-bold text-white shadow-sm shadow-blue-600/20 transition hover:-translate-y-0.5 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400">
        {{ $plan->exists ? 'Update Plan' : 'Create Plan' }}
    </button>
    <a href="{{ route('admin.subscription-plans.index') }}" class="rounded-lg border border-blue-100 px-5 py-2.5 text-sm font-bold text-blue-700 transition hover:-translate-y-0.5 hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">Cancel</a>
</div>
