<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center">
            <a href="{{ route('recurring-transactions.index') }}" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 me-4">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h2 class="text-xl font-bold text-gray-900 dark:text-white">
                {{ __('Add Recurring Transaction') }}
            </h2>
        </div>
    </x-slot>

    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6">
            <form action="{{ route('recurring-transactions.store') }}" method="POST">
                @csrf

                <div class="space-y-6">
                    <!-- Type Toggle -->
                    <div x-data="{ type: '{{ old('type', 'expense') }}' }">
                        <x-input-label :value="__('Type')" />
                        <div class="mt-2 grid grid-cols-2 gap-4">
                            <label class="relative flex cursor-pointer rounded-lg border p-4 transition"
                                   :class="type === 'expense' ? 'border-red-500 bg-red-50 dark:bg-red-900/20' : 'border-gray-300 dark:border-gray-600'">
                                <input type="radio" name="type" value="expense" x-model="type" class="sr-only">
                                <span class="flex flex-1 items-center justify-center">
                                    <i class="fas fa-arrow-up text-red-500 me-2"></i>
                                    <span class="font-medium">Expense</span>
                                </span>
                            </label>
                            <label class="relative flex cursor-pointer rounded-lg border p-4 transition"
                                   :class="type === 'income' ? 'border-green-500 bg-green-50 dark:bg-green-900/20' : 'border-gray-300 dark:border-gray-600'">
                                <input type="radio" name="type" value="income" x-model="type" class="sr-only">
                                <span class="flex flex-1 items-center justify-center">
                                    <i class="fas fa-arrow-down text-green-500 me-2"></i>
                                    <span class="font-medium">Income</span>
                                </span>
                            </label>
                        </div>
                    </div>

                    <div>
                        <x-input-label for="description" :value="__('Description')" />
                        <x-text-input id="description" name="description" type="text" class="mt-1 block w-full"
                                      :value="old('description')" required
                                      placeholder="e.g., Netflix subscription, Monthly salary" />
                        <x-input-error class="mt-2" :messages="$errors->get('description')" />
                    </div>

                    <div>
                        <x-input-label for="amount" :value="__('Amount')" />
                        <div class="mt-1 relative">
                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500">Rp</span>
                            <input type="number" name="amount" id="amount" step="0.01" min="0"
                                   class="pl-10 block w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                   value="{{ old('amount') }}" required placeholder="0">
                        </div>
                        <x-input-error class="mt-2" :messages="$errors->get('amount')" />
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
                        <div>
                            <x-input-label for="account_id" :value="__('Account')" />
                            <select id="account_id" name="account_id"
                                    class="mt-1 block w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                    required>
                                @foreach($accounts ?? [] as $account)
                                    <option value="{{ $account->id }}" {{ old('account_id') == $account->id ? 'selected' : '' }}>
                                        {{ $account->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <x-input-label for="category_id" :value="__('Category')" />
                            <select id="category_id" name="category_id"
                                    class="mt-1 block w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                    required>
                                @foreach($categories ?? [] as $category)
                                    <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
                        <div>
                            <x-input-label for="frequency" :value="__('Frequency')" />
                            <select id="frequency" name="frequency"
                                    class="mt-1 block w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                    required>
                                <option value="daily" {{ old('frequency') === 'daily' ? 'selected' : '' }}>Daily</option>
                                <option value="weekly" {{ old('frequency') === 'weekly' ? 'selected' : '' }}>Weekly</option>
                                <option value="biweekly" {{ old('frequency') === 'biweekly' ? 'selected' : '' }}>Bi-weekly</option>
                                <option value="monthly" {{ old('frequency', 'monthly') === 'monthly' ? 'selected' : '' }}>Monthly</option>
                                <option value="quarterly" {{ old('frequency') === 'quarterly' ? 'selected' : '' }}>Quarterly</option>
                                <option value="yearly" {{ old('frequency') === 'yearly' ? 'selected' : '' }}>Yearly</option>
                            </select>
                        </div>
                        <div>
                            <x-input-label for="interval" :value="__('Every X periods')" />
                            <x-text-input id="interval" name="interval" type="number" class="mt-1 block w-full"
                                          :value="old('interval', 1)" min="1" />
                            <p class="mt-1 text-xs text-gray-500">e.g., 2 = every 2 months</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
                        <div>
                            <x-input-label for="start_date" :value="__('Start Date')" />
                            <x-text-input id="start_date" name="start_date" type="date" class="mt-1 block w-full"
                                          :value="old('start_date', now()->format('Y-m-d'))" required />
                        </div>
                        <div>
                            <x-input-label for="end_date" :value="__('End Date (optional)')" />
                            <x-text-input id="end_date" name="end_date" type="date" class="mt-1 block w-full"
                                          :value="old('end_date')" />
                        </div>
                    </div>

                    <div>
                        <x-input-label for="notes" :value="__('Notes (optional)')" />
                        <textarea id="notes" name="notes" rows="2"
                                  class="mt-1 block w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">{{ old('notes') }}</textarea>
                    </div>

                    <div class="flex items-center">
                        <input type="checkbox" id="auto_create" name="auto_create" value="1"
                               class="rounded border-gray-300 text-indigo-600"
                               {{ old('auto_create', true) ? 'checked' : '' }}>
                        <label for="auto_create" class="ml-2 text-sm text-gray-700 dark:text-gray-300">
                            Automatically create transactions
                        </label>
                    </div>
                </div>

                <div class="mt-8 flex items-center justify-end space-x-4">
                    <a href="{{ route('recurring-transactions.index') }}" class="text-gray-600 dark:text-gray-400">Cancel</a>
                    <x-primary-button>
                        <i class="fas fa-save me-2"></i>Create Recurring
                    </x-primary-button>
                </div>
            </form>
        </div>
    </div>
</x-app-layout>
