@php
    $payment = $payment ?? null;
@endphp

<div
    x-data="{
        billingPeriod: '{{ old('billing_period', $payment->billing_period ?? 'monthly') }}',
        prices: { monthly: '{{ $subscriptionSetting->price_monthly }}', annual: '{{ $subscriptionSetting->price_annual }}' },
    }"
    class="space-y-6"
>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
        <div>
            <x-input-label for="user_id" :value="__('User')" />
            <select id="user_id" name="user_id" required class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm">
                <option value="">{{ __('— Select —') }}</option>
                @foreach ($users as $user)
                    <option value="{{ $user->id }}" @selected(old('user_id', $payment->user_id ?? null) == $user->id)>{{ $user->name }} ({{ $user->email }})</option>
                @endforeach
            </select>
            <x-input-error :messages="$errors->get('user_id')" class="mt-2" />
        </div>

        <div>
            <x-input-label for="billing_period" :value="__('Billing period')" />
            <select id="billing_period" name="billing_period" x-model="billingPeriod" required class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm">
                <option value="monthly">{{ __('Monthly') }}</option>
                <option value="annual">{{ __('Annual') }}</option>
            </select>
            <x-input-error :messages="$errors->get('billing_period')" class="mt-2" />
        </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
        <div>
            <x-input-label for="amount" :value="__('Amount')" />
            <div class="mt-1 flex items-center gap-2">
                <x-text-input id="amount" name="amount" x-ref="amount" type="number" step="0.01" min="0" class="block w-full" :value="old('amount', $payment->amount ?? '')" required />
                <button type="button" @click="$refs.amount.value = prices[billingPeriod]" class="shrink-0 text-xs text-gray-500 hover:text-gray-800 underline whitespace-nowrap">
                    {{ __('Use current price') }}
                </button>
            </div>
            <x-input-error :messages="$errors->get('amount')" class="mt-2" />
        </div>

        <div>
            <x-input-label for="currency" :value="__('Currency')" />
            <x-text-input id="currency" name="currency" type="text" maxlength="3" class="mt-1 block w-full uppercase" :value="old('currency', $payment->currency ?? 'USD')" required />
            <x-input-error :messages="$errors->get('currency')" class="mt-2" />
        </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
        <div>
            <x-input-label for="status" :value="__('Status')" />
            @php $status = old('status', $payment->status ?? 'completed'); @endphp
            <select id="status" name="status" required class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm">
                <option value="pending" @selected($status === 'pending')>{{ __('Pending') }}</option>
                <option value="completed" @selected($status === 'completed')>{{ __('Completed') }}</option>
                <option value="failed" @selected($status === 'failed')>{{ __('Failed') }}</option>
                <option value="refunded" @selected($status === 'refunded')>{{ __('Refunded') }}</option>
            </select>
            <p class="mt-1 text-xs text-gray-500">{{ __('Only a Completed payment covering today unlocks unlimited recipes.') }}</p>
            <x-input-error :messages="$errors->get('status')" class="mt-2" />
        </div>

        <div>
            <x-input-label for="transaction_id" :value="__('Transaction ID (optional)')" />
            <x-text-input id="transaction_id" name="transaction_id" type="text" class="mt-1 block w-full" :value="old('transaction_id', $payment->transaction_id ?? '')" />
            <p class="mt-1 text-xs text-gray-500">{{ __('Filled in automatically once PayPal checkout is connected.') }}</p>
            <x-input-error :messages="$errors->get('transaction_id')" class="mt-2" />
        </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
        <div>
            <x-input-label for="paid_at" :value="__('Paid on (optional)')" />
            <x-text-input id="paid_at" name="paid_at" type="date" class="mt-1 block w-full" :value="old('paid_at', optional($payment->paid_at ?? null)->format('Y-m-d'))" />
            <x-input-error :messages="$errors->get('paid_at')" class="mt-2" />
        </div>

        <div>
            <x-input-label for="period_start" :value="__('Coverage starts')" />
            <x-text-input id="period_start" name="period_start" type="date" class="mt-1 block w-full" :value="old('period_start', optional($payment->period_start ?? null)->format('Y-m-d'))" required />
            <x-input-error :messages="$errors->get('period_start')" class="mt-2" />
        </div>

        <div>
            <x-input-label for="period_end" :value="__('Coverage ends')" />
            <x-text-input id="period_end" name="period_end" type="date" class="mt-1 block w-full" :value="old('period_end', optional($payment->period_end ?? null)->format('Y-m-d'))" required />
            <x-input-error :messages="$errors->get('period_end')" class="mt-2" />
        </div>
    </div>

    <div>
        <x-input-label for="notes" :value="__('Notes (optional)')" />
        <textarea id="notes" name="notes" rows="3" class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm">{{ old('notes', $payment->notes ?? '') }}</textarea>
        <x-input-error :messages="$errors->get('notes')" class="mt-2" />
    </div>
</div>