42 lines
2.4 KiB
PHP
42 lines
2.4 KiB
PHP
@props(['plans' => []])
|
|
|
|
@php
|
|
$initial = collect(old('plans_present') ? 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) }">
|
|
<input type="hidden" name="plans_present" value="1">
|
|
<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>
|
|
|