@extends('layouts.app')
@section('title', __('Plans'))

@section('content')
<div x-data="{ edit: null }">
    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
        <div class="lg:col-span-2 grid grid-cols-1 gap-4 sm:grid-cols-2">
            @foreach ($plans as $plan)
                <div class="card">
                    <div class="flex items-start justify-between">
                        <div>
                            <h3 class="font-semibold text-slate-800">{{ $plan->name }}</h3>
                            <p class="text-2xl font-bold text-brand-700">{{ money($plan->price) }}<span class="text-xs text-slate-400">/{{ $plan->billing_interval }}</span></p>
                        </div>
                        <div class="flex gap-1">
                            <button @click="edit = {{ $plan->toJson() }}" class="text-brand-600"><x-icon name="pencil" class="h-4 w-4"/></button>
                            <form method="POST" action="{{ route('saas.plans.destroy', $plan) }}" onsubmit="return confirm('{{ __('Delete plan?') }}')">@csrf @method('DELETE')
                                <button class="text-red-500"><x-icon name="trash" class="h-4 w-4"/></button>
                            </form>
                        </div>
                    </div>
                    <ul class="mt-3 space-y-1 text-sm text-slate-500">
                        <li>{{ $plan->max_users }} {{ __('users') }}</li>
                        <li>{{ $plan->max_products }} {{ __('products') }}</li>
                        <li>{{ $plan->max_stores }} {{ __('stores') }}</li>
                    </ul>
                    <div class="mt-3 flex flex-wrap gap-1">
                        @foreach (($plan->features ?? []) as $feature)<span class="badge bg-brand-50 text-brand-700">{{ $feature }}</span>@endforeach
                    </div>
                </div>
            @endforeach
        </div>

        <div class="card">
            <h2 class="font-semibold" x-text="edit ? '{{ __('Edit plan') }}' : '{{ __('New plan') }}'"></h2>
            <form method="POST" :action="edit ? '/app/saas/plans/' + edit.id : '{{ route('saas.plans.store') }}'" class="mt-4 space-y-3">
                @csrf
                <template x-if="edit"><input type="hidden" name="_method" value="PUT"></template>
                <div><label class="label">{{ __('Name') }}</label><input type="text" name="name" :value="edit?.name" required class="input"></div>
                <div class="grid grid-cols-2 gap-2">
                    <div><label class="label">{{ __('Price') }}</label><input type="number" step="0.01" name="price" :value="edit?.price ?? 0" required class="input"></div>
                    <div><label class="label">{{ __('Currency') }}</label><input type="text" name="currency_symbol" :value="edit?.currency_symbol ?? 'Ar'" required class="input"></div>
                </div>
                <div><label class="label">{{ __('Billing') }}</label>
                    <select name="billing_interval" class="input">
                        <option value="monthly" x-bind:selected="edit?.billing_interval==='monthly'">{{ __('Monthly') }}</option>
                        <option value="yearly" x-bind:selected="edit?.billing_interval==='yearly'">{{ __('Yearly') }}</option>
                    </select>
                </div>
                <div class="grid grid-cols-3 gap-2">
                    <div><label class="label">{{ __('Users') }}</label><input type="number" name="max_users" :value="edit?.max_users ?? 5" required class="input"></div>
                    <div><label class="label">{{ __('Products') }}</label><input type="number" name="max_products" :value="edit?.max_products ?? 500" required class="input"></div>
                    <div><label class="label">{{ __('Stores') }}</label><input type="number" name="max_stores" :value="edit?.max_stores ?? 1" required class="input"></div>
                </div>
                <div class="flex gap-2">
                    <button class="btn-primary flex-1" x-text="edit ? '{{ __('Update') }}' : '{{ __('Create') }}'"></button>
                    <button type="button" x-show="edit" @click="edit = null" class="btn-secondary">{{ __('New') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection