@extends('layouts.app')
@section('title', $plan->exists ? __('Edit plan') : __('New plan'))
@section('content')
@php
    $catalog = config('subscriptions');
    $isNew   = ! $plan->exists;
    $action  = $isNew ? route('super-admin.plans.store') : route('super-admin.plans.update', $plan);

    // Group quotas by their 'group' meta key (usage / seats / files / integrations).
    $quotaGroups = [];
    foreach ($catalog['quotas'] as $key => $meta) {
        $quotaGroups[$meta['group'] ?? 'usage'][$key] = $meta;
    }
    $groupMeta = [
        'usage'        => ['label' => __('Usage'),            'icon' => 'chart',   'classes' => 'bg-sky-100 dark:bg-sky-900/30 text-sky-600 dark:text-sky-300'],
        'seats'        => ['label' => __('Seats'),            'icon' => 'users',   'classes' => 'bg-violet-100 dark:bg-violet-900/30 text-violet-600 dark:text-violet-300'],
        'files'        => ['label' => __('Files & storage'),  'icon' => 'archive', 'classes' => 'bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-300'],
        'integrations' => ['label' => __('Integrations'),     'icon' => 'globe',   'classes' => 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-300'],
    ];
    // Quick-set chip presets per unit type.
    $quotaPresets = [
        'count' => [10, 100, 1000, 10000],
        'MB'    => [5, 25, 100, 500],
        'GB'    => [1, 10, 100, 1000],
        'days'  => [30, 90, 365, 1095],
    ];

    // Pricing preview values
    $monthly = old('price_monthly', $version->price_monthly);
    $yearly  = old('price_yearly',  $version->price_yearly);

    // Build the grouped feature list for the Features tab. The flat
    // `features` map stays authoritative; `feature_groups` only governs
    // presentation. Any feature missing from the groups falls into 'other'
    // so nothing silently disappears when the catalog grows.
    $featureGroupsCfg = $catalog['feature_groups'] ?? [];
    $assignedFeatures = [];
    $featureGroups = [];
    foreach ($featureGroupsCfg as $gKey => $gMeta) {
        $items = [];
        foreach (($gMeta['features'] ?? []) as $fKey) {
            if (! array_key_exists($fKey, $catalog['features'])) continue;
            $items[$fKey] = $catalog['features'][$fKey];
            $assignedFeatures[$fKey] = true;
        }
        if (! empty($items)) {
            $featureGroups[$gKey] = [
                'label'    => $gMeta['label']   ?? ucfirst($gKey),
                'icon'     => $gMeta['icon']    ?? 'check',
                'classes'  => $gMeta['classes'] ?? 'bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300',
                'features' => $items,
            ];
        }
    }
    $unassigned = array_diff_key($catalog['features'], $assignedFeatures);
    if (! empty($unassigned)) {
        $featureGroups['other'] = [
            'label'    => 'Other',
            'icon'     => 'cog',
            'classes'  => 'bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300',
            'features' => $unassigned,
        ];
    }
@endphp

<div x-data="planEditor()" x-cloak class="pb-24">

    {{-- ── Header ─────────────────────────────────────────────────── --}}
    <div class="flex items-center justify-between mb-6 gap-4">
        <div class="min-w-0">
            <a href="{{ route('super-admin.plans.index') }}" class="text-xs text-slate-500 hover:text-brand-600">← {{ __('All plans') }}</a>
            <h1 class="text-xl sm:text-2xl font-semibold truncate">
                {{ $isNew ? __('New plan') : $plan->displayName() }}
                @if(! $isNew && $plan->is_featured)<span class="text-amber-500" title="{{ __('Featured') }}">★</span>@endif
            </h1>
            @unless($isNew)
                <p class="text-xs text-slate-500">
                    {{ __('Version') }}: <strong>v{{ $version->version ?? 1 }}</strong> ·
                    {{ __('Code') }}: <code class="px-1 rounded bg-slate-100 dark:bg-slate-800">{{ $plan->code }}</code> ·
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px]
                        {{ $plan->status === 'active' ? 'bg-emerald-100 text-emerald-700' : ($plan->status === 'archived' ? 'bg-slate-100 text-slate-500' : 'bg-amber-100 text-amber-700') }}">
                        {{ __(ucfirst($plan->status)) }}
                    </span>
                </p>
            @endunless
        </div>
        <div class="hidden md:flex items-center gap-3 text-sm text-slate-500 shrink-0">
            <div class="text-right">
                <div class="text-[10px] uppercase tracking-wider">{{ __('Monthly') }}</div>
                <div class="font-mono text-slate-900 dark:text-slate-100" x-text="preview.monthly + ' ' + preview.currency"></div>
            </div>
            <div class="text-right">
                <div class="text-[10px] uppercase tracking-wider">{{ __('Yearly') }}</div>
                <div class="font-mono text-slate-900 dark:text-slate-100" x-text="preview.yearly + ' ' + preview.currency"></div>
            </div>
        </div>
    </div>

    @if(session('status'))<div class="mb-4 px-4 py-3 rounded-lg bg-emerald-50 text-emerald-800 text-sm">{{ session('status') }}</div>@endif
    @if(session('error'))<div class="mb-4 px-4 py-3 rounded-lg bg-rose-50 text-rose-800 text-sm">{{ session('error') }}</div>@endif
    @if($errors->any())
        <div class="mb-4 px-4 py-3 rounded-lg bg-rose-50 text-rose-800 text-sm">
            @foreach($errors->all() as $e)<div>{{ $e }}</div>@endforeach
        </div>
    @endif

    {{-- Translation toast --}}
    <div x-show="toast.message" x-transition.opacity
         :class="toast.tone === 'error' ? 'bg-rose-50 text-rose-800' : 'bg-emerald-50 text-emerald-800'"
         class="fixed top-4 right-4 z-50 px-4 py-2 rounded-lg text-sm shadow-lg" style="display:none">
        <span x-text="toast.message"></span>
    </div>

    <form method="POST" action="{{ $action }}" id="planForm">
        @csrf
        @unless($isNew)@method('PATCH')@endunless

        {{-- ── Tabs ───────────────────────────────────────────────── --}}
        @php
            $tabs = [
                'identity' => ['Identity', 'user'],
                'pricing'  => ['Pricing', 'star'],
                'quotas'   => ['Quotas', 'chart'],
                'features' => ['Features', 'check'],
                'support'  => ['Support & SLA', 'shield'],
                'display'  => ['Display rules', 'eye'],
                'overage'  => ['Overage', 'alert'],
                'addons'   => ['Add-ons', 'plus'],
            ];
        @endphp

        {{-- Mobile: native select (no horizontal scroll, native picker UX). --}}
        <div class="sm:hidden mb-4">
            <label class="sr-only" for="planTabSelect">{{ __('Section') }}</label>
            <select id="planTabSelect" x-model="tab" class="form-input w-full text-sm">
                @foreach($tabs as $key => [$label, $icon])
                    <option value="{{ $key }}">{{ __($label) }}</option>
                @endforeach
            </select>
        </div>

        {{-- Desktop / tablet: wrapping pill nav. No overflow-x. --}}
        <nav class="hidden sm:flex flex-wrap gap-1.5 mb-6 p-1 rounded-xl bg-slate-100/70 dark:bg-slate-800/60 border border-slate-200/70 dark:border-slate-800">
            @foreach($tabs as $key => [$label, $icon])
                <button type="button" @click="tab='{{ $key }}'"
                        :class="tab==='{{ $key }}'
                            ? 'bg-white dark:bg-slate-900 text-brand-600 shadow-sm ring-1 ring-slate-200/80 dark:ring-slate-700'
                            : 'text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white hover:bg-white/60 dark:hover:bg-slate-900/40'"
                        class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition">
                    <x-icon name="{{ $icon }}" class="w-4 h-4"/>
                    <span>{{ __($label) }}</span>
                </button>
            @endforeach
        </nav>

        {{-- ── IDENTITY ───────────────────────────────────────────── --}}
        <section x-show="tab==='identity'" class="space-y-6">
            <div class="card p-5">
                <h2 class="font-semibold mb-4">{{ __('Basic info') }}</h2>
                <div class="grid sm:grid-cols-12 gap-4">
                    <div class="sm:col-span-3">
                        <label class="form-label">{{ __('Code') }} *</label>
                        <input name="code" value="{{ old('code', $plan->code) }}" required class="form-input font-mono" placeholder="starter">
                        <p class="text-xs text-slate-500 mt-1">{{ __('Unique, lowercase.') }}</p>
                    </div>
                    <div class="sm:col-span-3">
                        <label class="form-label">{{ __('Audience tag') }}</label>
                        <input name="audience" value="{{ old('audience', $plan->audience) }}" class="form-input" placeholder="solo / smb / enterprise">
                    </div>
                    <div class="sm:col-span-2">
                        <label class="form-label">{{ __('Color') }}</label>
                        <div class="flex gap-2">
                            <input type="color" name="color" value="{{ old('color', $plan->color ?: '#6366f1') }}" class="h-10 w-12 rounded border border-slate-200 dark:border-slate-700 cursor-pointer">
                            <input type="text" value="{{ old('color', $plan->color ?: '#6366f1') }}" readonly class="form-input flex-1 font-mono text-xs">
                        </div>
                    </div>
                    <div class="sm:col-span-2">
                        <label class="form-label">{{ __('Sort order') }}</label>
                        <input type="number" name="sort_order" value="{{ old('sort_order', $plan->sort_order ?? 0) }}" class="form-input">
                    </div>
                    <div class="sm:col-span-2">
                        <label class="form-label">{{ __('Status') }}</label>
                        <select name="status" class="form-input">
                            @foreach(['draft','active','archived'] as $s)
                                <option value="{{ $s }}" {{ old('status', $plan->status ?? 'draft') === $s ? 'selected' : '' }}>{{ __(ucfirst($s)) }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="mt-5 flex flex-wrap gap-6 pt-4 border-t border-slate-100 dark:border-slate-800">
                    <label class="inline-flex items-center gap-2 text-sm cursor-pointer">
                        <input type="hidden" name="is_public" value="0">
                        <input type="checkbox" name="is_public" value="1" {{ old('is_public', $plan->is_public ?? true) ? 'checked' : '' }}>
                        <span>{{ __('Publicly visible') }}</span>
                    </label>
                    <label class="inline-flex items-center gap-2 text-sm cursor-pointer">
                        <input type="hidden" name="is_featured" value="0">
                        <input type="checkbox" name="is_featured" value="1" {{ old('is_featured', $plan->is_featured) ? 'checked' : '' }}>
                        <span>{{ __('Featured (most popular)') }}</span>
                    </label>
                </div>
            </div>

            {{-- Multilingual fields with AI translate --}}
            @foreach([
                ['name', __('Name'), 'input', 'Pro'],
                ['tagline', __('Tagline'), 'input', __('One catchy line')],
                ['description', __('Description'), 'textarea', __('What does this plan offer?')],
            ] as [$field, $label, $kind, $placeholder])
                <div class="card p-5" x-data="multilingual('{{ $field }}')">
                    <div class="flex items-center justify-between mb-3 gap-3 flex-wrap">
                        <div>
                            <h2 class="font-semibold">{{ $label }}</h2>
                            <p class="text-xs text-slate-500">{{ __('Fill at least one language, then click translate.') }}</p>
                        </div>
                        <div class="flex items-center gap-2 text-xs">
                            <select x-model="source" class="form-input text-xs py-1 pe-7">
                                @foreach($locales as $loc)
                                    <option value="{{ $loc }}">{{ strtoupper($loc) }}</option>
                                @endforeach
                            </select>
                            <button type="button" @click="translateAll()" :disabled="loading"
                                    class="btn-secondary text-xs inline-flex items-center gap-1.5 disabled:opacity-50">
                                <svg x-show="!loading" class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m4 12l-4 4m0-4l4 4M7 11h10M11 9l4 8"/></svg>
                                <svg x-show="loading" class="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24" style="display:none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" class="opacity-25"/><path fill="currentColor" d="M4 12a8 8 0 018-8V0C5.4 0 0 5.4 0 12h4z"/></svg>
                                <span x-show="!loading">{{ __('Translate to all') }}</span>
                                <span x-show="loading" style="display:none">{{ __('Translating…') }}</span>
                            </button>
                            <button type="button" @click="overwrite = !overwrite"
                                    :class="overwrite ? 'bg-amber-100 text-amber-800 border-amber-300' : 'bg-slate-50 text-slate-500 border-slate-200'"
                                    class="text-[11px] px-2 py-1 rounded border" :title="overwrite ? '{{ __('Will overwrite filled fields') }}' : '{{ __('Will skip filled fields') }}'">
                                <span x-show="!overwrite">{{ __('skip filled') }}</span>
                                <span x-show="overwrite" style="display:none">{{ __('overwrite all') }}</span>
                            </button>
                        </div>
                    </div>
                    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
                        @foreach($locales as $loc)
                            <div>
                                <label class="text-[10px] uppercase tracking-wider text-slate-400 flex items-center justify-between">
                                    <span>{{ strtoupper($loc) }}</span>
                                    <span x-show="source === '{{ $loc }}'" class="text-[10px] text-brand-600 normal-case font-normal" style="display:none">{{ __('source') }}</span>
                                </label>
                                @if($kind === 'textarea')
                                    <textarea name="{{ $field }}[{{ $loc }}]" rows="3" data-lang="{{ $loc }}"
                                              class="form-input mt-1" placeholder="{{ $placeholder }}">{{ old($field.'.'.$loc, data_get($plan->{$field}, $loc)) }}</textarea>
                                @else
                                    <input name="{{ $field }}[{{ $loc }}]" data-lang="{{ $loc }}"
                                           value="{{ old($field.'.'.$loc, data_get($plan->{$field}, $loc)) }}"
                                           class="form-input mt-1" placeholder="{{ $placeholder }}">
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </section>

        {{-- ── PRICING ────────────────────────────────────────────── --}}
        <section x-show="tab==='pricing'" class="space-y-5 sm:space-y-6" style="display:none">
            <div class="card p-4 sm:p-5 lg:p-6">
                <div class="flex items-center gap-2 mb-4 sm:mb-5">
                    <div class="w-8 h-8 rounded-lg bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-300 flex items-center justify-center"><x-icon name="star" class="w-4 h-4"/></div>
                    <h2 class="font-semibold text-base sm:text-lg">{{ __('Pricing & cycle') }}</h2>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-12 gap-3 sm:gap-4">
                    <div class="sm:col-span-2">
                        <label class="form-label">{{ __('Currency') }}</label>
                        <select name="currency" class="form-input" @change="preview.currency=$event.target.value">
                            @foreach(['EUR','USD','GBP','SAR','AED','MAD'] as $c)
                                <option value="{{ $c }}" {{ old('currency', $version->currency ?? 'EUR') === $c ? 'selected' : '' }}>{{ $c }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="sm:col-span-3">
                        <label class="form-label">{{ __('Monthly price') }}</label>
                        <input type="number" step="0.01" min="0" name="price_monthly" value="{{ $monthly }}"
                               @input="preview.monthly=$event.target.value || '—'" class="form-input">
                    </div>
                    <div class="sm:col-span-3">
                        <label class="form-label">{{ __('Yearly price') }}</label>
                        <input type="number" step="0.01" min="0" name="price_yearly" value="{{ $yearly }}"
                               @input="preview.yearly=$event.target.value || '—'" class="form-input">
                        @if($monthly && $yearly)
                            @php $saving = max(0, round((($monthly * 12) - $yearly) / ($monthly * 12) * 100)); @endphp
                            <p class="text-xs text-emerald-600 mt-1">{{ __('Yearly saving') }}: {{ $saving }}%</p>
                        @endif
                    </div>
                    <div class="sm:col-span-2">
                        <label class="form-label">{{ __('Setup fee') }}</label>
                        <input type="number" step="0.01" min="0" name="setup_fee" value="{{ old('setup_fee', $version->setup_fee ?? 0) }}" class="form-input">
                    </div>
                    <div class="sm:col-span-2">
                        <label class="form-label">{{ __('Trial days') }}</label>
                        <input type="number" min="0" name="trial_days" value="{{ old('trial_days', $version->trial_days ?? 0) }}" class="form-input">
                    </div>
                </div>
                <label class="inline-flex items-center gap-2 text-sm mt-4 pt-4 border-t border-slate-100 dark:border-slate-800">
                    <input type="hidden" name="trial_requires_card" value="0">
                    <input type="checkbox" name="trial_requires_card" value="1" {{ old('trial_requires_card', $version->trial_requires_card) ? 'checked' : '' }}>
                    {{ __('Trial requires credit card') }}
                </label>
            </div>
        </section>

        {{-- ── QUOTAS ─────────────────────────────────────────────── --}}
        <section x-show="tab==='quotas'" class="space-y-5 sm:space-y-6" style="display:none">

            {{-- Toolbar / bulk actions --}}
            <div class="card p-3 sm:p-4 flex flex-wrap items-center gap-2 sm:gap-3" x-data>
                <div class="flex items-center gap-2 me-auto">
                    <div class="w-8 h-8 rounded-lg bg-sky-100 dark:bg-sky-900/30 text-sky-600 dark:text-sky-300 flex items-center justify-center"><x-icon name="chart" class="w-4 h-4"/></div>
                    <div>
                        <h2 class="font-semibold text-sm sm:text-base leading-tight">{{ __('Numeric quotas') }}</h2>
                        <p class="text-[11px] text-slate-500 leading-tight">{{ __('Set a hard limit, or leave empty / 0 for unlimited.') }}</p>
                    </div>
                </div>
                <button type="button" @click="$dispatch('quotas-set-all-unlimited')"
                        class="text-xs px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:border-emerald-400 hover:text-emerald-600 transition inline-flex items-center gap-1.5">
                    <span class="text-base leading-none">∞</span> {{ __('All unlimited') }}
                </button>
                <button type="button" @click="$dispatch('quotas-clear-all')"
                        class="text-xs px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:border-rose-400 hover:text-rose-600 transition inline-flex items-center gap-1.5">
                    <x-icon name="x" class="w-3.5 h-3.5"/> {{ __('Clear all') }}
                </button>
            </div>

            @foreach($quotaGroups as $group => $items)
                @php $gm = $groupMeta[$group] ?? ['label' => ucfirst($group), 'icon' => 'cog', 'classes' => 'bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300']; @endphp
                <div class="card p-4 sm:p-5">
                    {{-- Group header --}}
                    <div class="flex items-center gap-2.5 mb-4 pb-3 border-b border-slate-100 dark:border-slate-800">
                        <span class="w-8 h-8 rounded-lg flex items-center justify-center {{ $gm['classes'] }}">
                            <x-icon :name="$gm['icon']" class="w-4 h-4"/>
                        </span>
                        <h3 class="font-semibold text-sm">{{ $gm['label'] }}</h3>
                        <span class="text-[10px] uppercase tracking-wider text-slate-400">{{ count($items) }} {{ __('quotas') }}</span>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4">
                        @foreach($items as $key => $meta)
                            @php
                                $rawVal = old('quotas.'.$key, data_get($version->quotas, $key));
                                $val    = $rawVal === '' || $rawVal === null ? null : (string) $rawVal;
                                $unit   = $meta['unit'];
                                $presets = $quotaPresets[$unit] ?? [];
                            @endphp
                            <div x-data="quotaField({ initial: @js($val) })"
                                 @quotas-set-all-unlimited.window="setUnlimited()"
                                 @quotas-clear-all.window="clear()"
                                 :class="unlimited ? 'border-emerald-300 bg-emerald-50/40 dark:bg-emerald-900/10 dark:border-emerald-700' : (val !== '' ? 'border-brand-300 bg-brand-50/30 dark:bg-brand-900/10 dark:border-brand-700' : 'border-slate-200 dark:border-slate-700')"
                                 class="rounded-xl border p-3 transition">

                                {{-- Label row --}}
                                <div class="flex items-start justify-between gap-2 mb-2">
                                    <label class="text-xs font-semibold leading-tight">{{ __($meta['label']) }}</label>
                                    <button type="button" @click="toggleUnlimited()"
                                            :class="unlimited ? 'bg-emerald-600 text-white border-emerald-600' : 'bg-white dark:bg-slate-800 text-slate-500 border-slate-300 dark:border-slate-600 hover:border-emerald-400 hover:text-emerald-600'"
                                            class="shrink-0 inline-flex items-center gap-1 text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full border font-semibold transition"
                                            :title="unlimited ? '{{ __('Unlimited — click to set a numeric limit') }}' : '{{ __('Click to mark as unlimited') }}'">
                                        <span class="text-sm leading-none">∞</span>
                                        <span x-show="unlimited">{{ __('Unlimited') }}</span>
                                        <span x-show="!unlimited" x-cloak>{{ __('Set') }}</span>
                                    </button>
                                </div>

                                {{-- Number input + unit suffix --}}
                                <div class="relative">
                                    {{-- Hidden field always submitted; empty means unlimited --}}
                                    <input type="hidden" :name="'quotas[{{ $key }}]'" :value="unlimited ? '' : val">
                                    <input type="number" min="0" inputmode="numeric"
                                           x-ref="num"
                                           x-model="val"
                                           @input="unlimited = false"
                                           :disabled="unlimited"
                                           :placeholder="unlimited ? '∞' : '{{ __('Enter limit') }}'"
                                           class="form-input pr-14 tabular-nums disabled:bg-slate-50 dark:disabled:bg-slate-800/40 disabled:text-slate-400">
                                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-[11px] text-slate-400 font-medium">{{ $unit }}</span>
                                </div>

                                {{-- Presets --}}
                                @if(! empty($presets))
                                    <div class="flex flex-wrap gap-1 mt-2">
                                        @foreach($presets as $p)
                                            <button type="button" @click="setVal('{{ $p }}')"
                                                    :class="(!unlimited && val === '{{ $p }}') ? 'bg-brand-600 text-white border-brand-600' : 'text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-700 hover:border-brand-400 hover:text-brand-600'"
                                                    class="text-[11px] px-2 py-0.5 rounded-md border font-medium tabular-nums transition">
                                                {{ number_format($p) }}
                                            </button>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            @endforeach

            {{-- ── List quotas (chip multi-select) ─────────────────── --}}
            <div class="card p-4 sm:p-5">
                <div class="flex items-center gap-2.5 mb-4 pb-3 border-b border-slate-100 dark:border-slate-800">
                    <span class="w-8 h-8 rounded-lg bg-cyan-100 dark:bg-cyan-900/30 text-cyan-600 dark:text-cyan-300 flex items-center justify-center"><x-icon name="check" class="w-4 h-4"/></span>
                    <h3 class="font-semibold text-sm">{{ __('List quotas') }}</h3>
                    <span class="text-[10px] uppercase tracking-wider text-slate-400">{{ __('Pick one or more') }}</span>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
                    @foreach($catalog['list_quotas'] as $key => $meta)
                        @php $current = (array) old('quotas.'.$key, data_get($version->quotas, $key, $meta['options'])); @endphp
                        <div x-data="{ all: false }" class="rounded-xl border border-slate-200 dark:border-slate-700 p-3">
                            <div class="flex items-center justify-between gap-2 mb-2.5">
                                <label class="text-xs font-semibold">{{ __($meta['label']) }}</label>
                                <div class="flex gap-1 text-[10px] uppercase tracking-wider">
                                    <button type="button"
                                            @click="$root.querySelectorAll('input[type=checkbox][data-list={{ $key }}]').forEach(c => c.checked = true)"
                                            class="px-1.5 py-0.5 rounded text-slate-500 hover:text-brand-600 hover:bg-brand-50 dark:hover:bg-brand-900/20">{{ __('All') }}</button>
                                    <button type="button"
                                            @click="$root.querySelectorAll('input[type=checkbox][data-list={{ $key }}]').forEach(c => c.checked = false)"
                                            class="px-1.5 py-0.5 rounded text-slate-500 hover:text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-900/20">{{ __('None') }}</button>
                                </div>
                            </div>
                            <div class="flex flex-wrap gap-1.5">
                                <input type="hidden" name="quotas[{{ $key }}]" value="">
                                @foreach($meta['options'] as $opt)
                                    <label class="cursor-pointer">
                                        <input type="checkbox"
                                               name="quotas[{{ $key }}][]"
                                               value="{{ $opt }}"
                                               data-list="{{ $key }}"
                                               class="peer sr-only"
                                               {{ in_array($opt, $current, true) ? 'checked' : '' }}>
                                        <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:border-brand-300 hover:bg-brand-50/50 dark:hover:bg-brand-900/10
                                                     peer-checked:bg-brand-600 peer-checked:text-white peer-checked:border-brand-600 transition">
                                            {{ strtoupper($opt) }}
                                        </span>
                                    </label>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        {{-- ── FEATURES ───────────────────────────────────────────── --}}
        <section x-show="tab==='features'" class="space-y-5 sm:space-y-6" style="display:none"
                 x-data="{ q: '', visible: {} }">
            {{-- Toolbar: search + bulk actions across the whole tab. --}}
            <div class="card p-4 sm:p-5 lg:p-6">
                <div class="flex items-center justify-between gap-3 flex-wrap">
                    <div class="flex items-center gap-2">
                        <div class="w-8 h-8 rounded-lg bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-300 flex items-center justify-center"><x-icon name="check" class="w-4 h-4"/></div>
                        <h2 class="font-semibold text-base sm:text-lg">{{ __('Features') }} <span class="text-xs text-slate-400 font-normal">({{ count($catalog['features']) }})</span></h2>
                    </div>
                    <div class="flex items-center gap-2 flex-wrap">
                        <button type="button"
                                @click="$root.querySelectorAll('input[type=checkbox][data-feat]').forEach(c => c.checked = true)"
                                class="text-xs px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:border-emerald-400 hover:text-emerald-600 transition">
                            {{ __('Enable all') }}
                        </button>
                        <button type="button"
                                @click="$root.querySelectorAll('input[type=checkbox][data-feat]').forEach(c => c.checked = false)"
                                class="text-xs px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:border-rose-400 hover:text-rose-600 transition">
                            {{ __('Disable all') }}
                        </button>
                        <div class="relative w-full sm:w-64">
                            <svg class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z"/></svg>
                            <input x-model="q" type="search" placeholder="{{ __('Filter features…') }}" class="form-input ps-9 w-full text-sm">
                        </div>
                    </div>
                </div>
            </div>

            @foreach($featureGroups as $gKey => $group)
                @php $groupKeys = array_keys($group['features']); @endphp
                <div class="card p-4 sm:p-5"
                     x-show="q === '' || @js($groupKeys).some(k => visible[k])"
                     x-data="{ groupKey: '{{ $gKey }}' }">
                    <div class="flex items-center justify-between gap-2 mb-4 pb-3 border-b border-slate-100 dark:border-slate-800 flex-wrap">
                        <div class="flex items-center gap-2.5">
                            <span class="w-8 h-8 rounded-lg flex items-center justify-center {{ $group['classes'] }}">
                                <x-icon :name="$group['icon']" class="w-4 h-4"/>
                            </span>
                            <h3 class="font-semibold text-sm">{{ __($group['label']) }}</h3>
                            <span class="text-[10px] uppercase tracking-wider text-slate-400">{{ count($group['features']) }} {{ __('features') }}</span>
                        </div>
                        <div class="flex items-center gap-1 text-[10px] uppercase tracking-wider">
                            <button type="button"
                                    @click="$root.querySelectorAll('input[type=checkbox][data-group={{ $gKey }}]').forEach(c => c.checked = true)"
                                    class="px-1.5 py-0.5 rounded text-slate-500 hover:text-emerald-600 hover:bg-emerald-50 dark:hover:bg-emerald-900/20">{{ __('All') }}</button>
                            <button type="button"
                                    @click="$root.querySelectorAll('input[type=checkbox][data-group={{ $gKey }}]').forEach(c => c.checked = false)"
                                    class="px-1.5 py-0.5 rounded text-slate-500 hover:text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-900/20">{{ __('None') }}</button>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2 sm:gap-2.5">
                        @foreach($group['features'] as $key => $label)
                            @php
                                $haystack = strtolower(__($label).' '.$label.' '.$key);
                            @endphp
                            <label class="flex items-center gap-3 text-sm p-3 rounded-lg border border-slate-200/60 dark:border-slate-700/60 hover:border-brand-300 dark:hover:border-brand-700 hover:bg-brand-50/40 dark:hover:bg-brand-900/10 cursor-pointer transition has-[:checked]:bg-brand-50 has-[:checked]:border-brand-300 dark:has-[:checked]:bg-brand-900/20 dark:has-[:checked]:border-brand-700"
                                   x-init="visible['{{ $key }}'] = true"
                                   x-show="(visible['{{ $key }}'] = (q === '' || @js($haystack).includes(q.toLowerCase())))">
                                <input type="hidden" name="features[{{ $key }}]" value="0">
                                <input type="checkbox" name="features[{{ $key }}]" value="1"
                                       data-feat="{{ $key }}" data-group="{{ $gKey }}"
                                       {{ old('features.'.$key, data_get($version->features, $key)) ? 'checked' : '' }}>
                                <span class="leading-tight">{{ __($label) }}</span>
                            </label>
                        @endforeach
                    </div>
                </div>
            @endforeach

            <p x-show="q !== '' && Object.values(visible).every(v => !v)" x-cloak
               class="text-center text-sm text-slate-500 py-6">
                {{ __('No features match your search.') }}
            </p>
        </section>

        {{-- ── SUPPORT ────────────────────────────────────────────── --}}
        <section x-show="tab==='support'" class="space-y-5 sm:space-y-6" style="display:none">
            <div class="card p-4 sm:p-5 lg:p-6">
                <div class="flex items-center gap-2 mb-4 sm:mb-5">
                    <div class="w-8 h-8 rounded-lg bg-indigo-100 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-300 flex items-center justify-center"><x-icon name="shield" class="w-4 h-4"/></div>
                    <h2 class="font-semibold text-base sm:text-lg">{{ __('Support & SLA') }}</h2>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
                    @foreach($catalog['support'] as $key => $meta)
                        <div>
                            <label class="form-label text-xs">{{ __($meta['label']) }}</label>
                            <select name="support[{{ $key }}]" class="form-input">
                                <option value="">—</option>
                                @foreach($meta['options'] as $o)
                                    <option value="{{ $o }}" {{ (string) old('support.'.$key, data_get($version->support, $key)) === (string) $o ? 'selected' : '' }}>{{ __((string) $o) }}</option>
                                @endforeach
                            </select>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        {{-- ── DISPLAY ────────────────────────────────────────────── --}}
        <section x-show="tab==='display'" class="space-y-5 sm:space-y-6" style="display:none">
            <div class="card p-4 sm:p-5 lg:p-6">
                <div class="flex items-center gap-2 mb-4 sm:mb-5">
                    <div class="w-8 h-8 rounded-lg bg-fuchsia-100 dark:bg-fuchsia-900/30 text-fuchsia-600 dark:text-fuchsia-300 flex items-center justify-center"><x-icon name="eye" class="w-4 h-4"/></div>
                    <h2 class="font-semibold text-base sm:text-lg">{{ __('Tenant display rules') }}</h2>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-2.5">
                    @foreach($catalog['display'] as $key => $label)
                        <label class="flex items-center gap-3 text-sm p-3 rounded-lg border border-slate-200/60 dark:border-slate-700/60 hover:border-brand-300 dark:hover:border-brand-700 hover:bg-brand-50/40 dark:hover:bg-brand-900/10 cursor-pointer transition has-[:checked]:bg-brand-50 has-[:checked]:border-brand-300 dark:has-[:checked]:bg-brand-900/20 dark:has-[:checked]:border-brand-700">
                            <input type="hidden" name="display[{{ $key }}]" value="0">
                            <input type="checkbox" name="display[{{ $key }}]" value="1" {{ old('display.'.$key, data_get($version->display, $key)) ? 'checked' : '' }}>
                            <span class="leading-tight">{{ __($label) }}</span>
                        </label>
                    @endforeach
                </div>
            </div>
        </section>

        {{-- ── OVERAGE ────────────────────────────────────────────── --}}
        <section x-show="tab==='overage'" class="space-y-5 sm:space-y-6" style="display:none">
            <div class="card p-4 sm:p-5 lg:p-6">
                <div class="flex items-center gap-2 mb-4 sm:mb-5">
                    <div class="w-8 h-8 rounded-lg bg-rose-100 dark:bg-rose-900/30 text-rose-600 dark:text-rose-300 flex items-center justify-center"><x-icon name="alert" class="w-4 h-4"/></div>
                    <h2 class="font-semibold text-base sm:text-lg">{{ __('Overage') }}</h2>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
                    @foreach($catalog['overage'] as $key => $meta)
                        <div class="p-3 sm:p-4 rounded-xl border border-slate-200/70 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/40 hover:border-brand-300 dark:hover:border-brand-700 transition">
                            <div class="text-sm font-semibold mb-3 text-slate-800 dark:text-slate-100">{{ __($meta['label']) }}</div>
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                <div>
                                    <label class="form-label text-xs">{{ __('Behavior') }}</label>
                                    <select name="overage[{{ $key }}][behavior]" class="form-input">
                                        @foreach($catalog['overage_behaviors'] as $b)
                                            <option value="{{ $b }}" {{ old('overage.'.$key.'.behavior', data_get($version->overage, $key.'.behavior')) === $b ? 'selected' : '' }}>{{ __($b) }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div>
                                    <label class="form-label text-xs">{{ __($meta['unit_price_label']) }}</label>
                                    <input type="number" step="0.01" min="0" name="overage[{{ $key }}][unit_price]"
                                           value="{{ old('overage.'.$key.'.unit_price', data_get($version->overage, $key.'.unit_price')) }}"
                                           class="form-input">
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        {{-- ── ALLOWED ADD-ONS ────────────────────────────────────── --}}
        <section x-show="tab==='addons'" class="space-y-5 sm:space-y-6" style="display:none">
            <div class="card p-4 sm:p-5 lg:p-6">
                <div class="flex items-center gap-2 mb-4 sm:mb-5">
                    <div class="w-8 h-8 rounded-lg bg-teal-100 dark:bg-teal-900/30 text-teal-600 dark:text-teal-300 flex items-center justify-center"><x-icon name="plus" class="w-4 h-4"/></div>
                    <h2 class="font-semibold text-base sm:text-lg">{{ __('Allowed add-ons') }}</h2>
                </div>
                @if(count($addons))
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2 sm:gap-2.5">
                        <input type="hidden" name="allowed_addons" value="">
                        @foreach($addons as $a)
                            <label class="flex items-center gap-3 text-sm p-3 rounded-lg border border-slate-200/60 dark:border-slate-700/60 hover:border-brand-300 dark:hover:border-brand-700 hover:bg-brand-50/40 dark:hover:bg-brand-900/10 cursor-pointer transition has-[:checked]:bg-brand-50 has-[:checked]:border-brand-300 dark:has-[:checked]:bg-brand-900/20 dark:has-[:checked]:border-brand-700">
                                <input type="checkbox" name="allowed_addons[]" value="{{ $a->id }}"
                                       {{ in_array($a->id, (array) old('allowed_addons', $version->allowed_addons ?? []), true) ? 'checked' : '' }}>
                                <div class="min-w-0">
                                    <div class="truncate">{{ $a->displayName() }}</div>
                                    <div class="text-[11px] text-slate-500 font-mono truncate">{{ $a->code }}</div>
                                </div>
                            </label>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-10 px-4">
                        <div class="mx-auto w-12 h-12 rounded-2xl bg-slate-100 dark:bg-slate-800 text-slate-400 flex items-center justify-center mb-3">
                            <x-icon name="plus" class="w-5 h-5"/>
                        </div>
                        <p class="text-sm text-slate-500">{{ __('No add-ons defined yet.') }}
                            <a href="{{ route('super-admin.addons.create') }}" class="text-brand-600 hover:underline font-medium">{{ __('Create one') }}</a>.
                        </p>
                    </div>
                @endif
            </div>
        </section>

        {{-- ── Sticky save bar ────────────────────────────────────── --}}
        <div class="fixed bottom-0 inset-x-0 lg:left-64 z-30">
            <div class="absolute inset-x-0 -top-6 h-6 bg-gradient-to-t from-slate-50 dark:from-slate-950 to-transparent pointer-events-none"></div>
            <div class="relative bg-white/95 dark:bg-slate-900/95 backdrop-blur-md border-t border-slate-200/80 dark:border-slate-800 shadow-[0_-4px_20px_-8px_rgba(0,0,0,0.08)]">
                <div class="max-w-screen-2xl mx-auto px-4 sm:px-6 py-2.5 sm:py-3 flex flex-wrap items-center gap-2 sm:gap-3 justify-end">
                    @unless($isNew)
                        <label class="inline-flex items-center gap-2 text-xs sm:text-sm me-auto cursor-pointer px-2.5 py-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800/60 transition has-[:checked]:bg-amber-50 dark:has-[:checked]:bg-amber-900/20">
                            <input type="checkbox" name="publish_new_version" value="1">
                            <span class="font-medium">{{ __('Publish as new version') }}</span>
                            <span class="hidden sm:inline text-[11px] text-slate-400">({{ __('existing tenants stay on current') }})</span>
                        </label>
                    @endunless
                    <a href="{{ route('super-admin.plans.index') }}" class="btn-secondary text-xs sm:text-sm">{{ __('Cancel') }}</a>
                    <button class="btn-primary text-xs sm:text-sm inline-flex items-center gap-1.5">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                        {{ $isNew ? __('Create plan') : __('Save changes') }}
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
function planEditor() {
    return {
        tab: 'identity',
        toast: { message: '', tone: 'ok' },
        preview: {
            monthly:  @json($monthly ?: '—'),
            yearly:   @json($yearly  ?: '—'),
            currency: @json(old('currency', $version->currency ?? 'EUR')),
        },
        flash(message, tone='ok') {
            this.toast = { message, tone };
            clearTimeout(this._t);
            this._t = setTimeout(() => this.toast.message = '', 3500);
        },
    };
}

function quotaField({ initial }) {
    // Empty / null / 0 / -1 → unlimited; positive numeric initial → fixed limit.
    const isUnlimited = (v) => v === null || v === undefined || v === '' || Number(v) <= 0;
    return {
        val: isUnlimited(initial) ? '' : String(initial),
        unlimited: isUnlimited(initial),
        toggleUnlimited() {
            this.unlimited = !this.unlimited;
            if (this.unlimited) this.val = '';
            else this.$nextTick(() => this.$refs.num?.focus());
        },
        setUnlimited() {
            this.unlimited = true;
            this.val = '';
        },
        clear() {
            this.unlimited = false;
            this.val = '';
        },
        setVal(v) {
            this.unlimited = false;
            this.val = String(v);
        },
    };
}

function multilingual(field) {
    return {
        field,
        source: 'en',
        loading: false,
        overwrite: false,

        $els() { return Array.from(document.querySelectorAll('[name^="' + this.field + '["][data-lang]')); },

        async translateAll() {
            const els = this.$els();
            const src = els.find(e => e.dataset.lang === this.source);
            if (!src || !src.value.trim()) {
                this.$root.flash(@json(__('Fill the source language first.')), 'error');
                return;
            }

            const existing = {};
            els.forEach(e => existing[e.dataset.lang] = e.value.trim());

            this.loading = true;
            try {
                const res = await fetch(@json(route('super-admin.translate')), {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content
                                     || document.querySelector('input[name=_token]')?.value,
                    },
                    body: JSON.stringify({
                        text: src.value,
                        source: this.source,
                        existing: this.overwrite ? {} : existing,
                    }),
                });
                const data = await res.json();
                if (!data.ok) throw new Error(data.error || 'translate failed');

                let count = 0;
                Object.entries(data.translations).forEach(([loc, text]) => {
                    const el = els.find(e => e.dataset.lang === loc);
                    if (!el) return;
                    if (!this.overwrite && el.value.trim() !== '') return;
                    el.value = text;
                    el.dispatchEvent(new Event('input', { bubbles: true }));
                    count++;
                });
                this.$root.flash(count
                    ? @json(__('Translated:')) + ' ' + count + ' ' + @json(__('languages'))
                    : @json(__('Nothing to translate.')), count ? 'ok' : 'error');
            } catch (e) {
                this.$root.flash(e.message, 'error');
            } finally {
                this.loading = false;
            }
        },
    };
}
</script>
@endsection