@props(['plans' => []])

@php
    $initial = collect(old('plans', $plans))->map(fn ($p) => [
        'name' => $p['name'] ?? '',
        'price' => $p['price'] ?? '',
        'period' => $p['period'] ?? 'monthly',
        'description' => $p['description'] ?? '',
    ])->values()->all();
    $input = 'block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm';
@endphp

<!-- Pricing plans -->
<div x-data="{ plans: @js($initial) }">
    <label class="block text-sm font-medium text-gray-700">Pricing plans</label>
    <div class="mt-2 space-y-3">
        <template x-for="(plan, i) in plans" :key="i">
            <div class="grid grid-cols-1 sm:grid-cols-12 gap-2 p-3 border border-gray-200 rounded-md">
                <input type="text" :name="`plans[${i}][name]`" x-model="plan.name" placeholder="Name" maxlength="100" class="{{ $input }} sm:col-span-3">
                <input type="number" :name="`plans[${i}][price]`" x-model="plan.price" placeholder="Price (EUR)" min="0" max="99999" step="0.01" class="{{ $input }} sm:col-span-2">
                <select :name="`plans[${i}][period]`" x-model="plan.period" class="{{ $input }} sm:col-span-2">
                    @foreach(\App\Models\PricingPlan::PERIODS as $period)
                        <option value="{{ $period }}">{{ $period }}</option>
                    @endforeach
                </select>
                <input type="text" :name="`plans[${i}][description]`" x-model="plan.description" placeholder="Description (optional)" maxlength="255" class="{{ $input }} sm:col-span-4">
                <button type="button" @click="plans.splice(i, 1)" class="sm:col-span-1 text-sm text-red-600 hover:text-red-800">Remove</button>
            </div>
        </template>
    </div>
    @foreach($errors->get('plans.*') as $messages)
        <p class="mt-2 text-sm text-red-600">{{ $messages[0] }}</p>
    @endforeach
    @error('plans')
        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
    @enderror
    <button type="button" @click="plans.push({ name: '', price: '', period: 'monthly', description: '' })"
            class="mt-3 inline-flex items-center px-3 py-1.5 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-50">Add plan</button>
</div>