<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <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">
                    {{ __('Edit Recurring Transaction') }}
                </h2>
            </div>
            <button type="button" onclick="document.getElementById('deleteModal').classList.remove('hidden')"
                    class="text-red-600 hover:text-red-800">
                <i class="fas fa-trash"></i>
            </button>
        </div>
    </x-slot>

    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Status Card -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 mb-6">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <div class="w-12 h-12 rounded-lg flex items-center justify-center"
                         style="background-color: {{ $recurring->category?->color ?? '#6366f1' }}20; color: {{ $recurring->category?->color ?? '#6366f1' }};">
                        <i class="fas fa-{{ $recurring->category?->icon ?? 'sync' }} text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="font-semibold text-gray-900 dark:text-white">{{ $recurring->description }}</p>
                        <p class="text-sm text-gray-500">
                            Next: {{ $recurring->next_occurrence_date?->format('d M Y') ?? 'Not scheduled' }}
                        </p>
                    </div>
                </div>
                <form action="{{ route('recurring-transactions.toggle-active', $recurring) }}" method="POST">
                    @csrf
                    @method('PATCH')
                    <button type="submit" class="px-4 py-2 rounded-lg text-sm font-medium {{ $recurring->is_active ? 'bg-yellow-100 text-yellow-800 hover:bg-yellow-200' : 'bg-green-100 text-green-800 hover:bg-green-200' }}">
                        {{ $recurring->is_active ? 'Pause' : 'Resume' }}
                    </button>
                </form>
            </div>
        </div>

        <!-- Edit Form -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6">
            <form action="{{ route('recurring-transactions.update', $recurring) }}" method="POST">
                @csrf
                @method('PUT')

                <div class="space-y-6">
                    <div x-data="{ type: '{{ old('type', $recurring->type) }}' }">
                        <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', $recurring->description)" required />
                    </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', $recurring->amount) }}" required>
                        </div>
                    </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">
                                @foreach($accounts ?? [] as $account)
                                    <option value="{{ $account->id }}" {{ old('account_id', $recurring->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">
                                @foreach($categories ?? [] as $category)
                                    <option value="{{ $category->id }}" {{ old('category_id', $recurring->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">
                                <option value="daily" {{ old('frequency', $recurring->frequency) === 'daily' ? 'selected' : '' }}>Daily</option>
                                <option value="weekly" {{ old('frequency', $recurring->frequency) === 'weekly' ? 'selected' : '' }}>Weekly</option>
                                <option value="biweekly" {{ old('frequency', $recurring->frequency) === 'biweekly' ? 'selected' : '' }}>Bi-weekly</option>
                                <option value="monthly" {{ old('frequency', $recurring->frequency) === 'monthly' ? 'selected' : '' }}>Monthly</option>
                                <option value="quarterly" {{ old('frequency', $recurring->frequency) === 'quarterly' ? 'selected' : '' }}>Quarterly</option>
                                <option value="yearly" {{ old('frequency', $recurring->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', $recurring->interval)" min="1" />
                        </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', $recurring->start_date?->format('Y-m-d'))" required />
                        </div>
                        <div>
                            <x-input-label for="end_date" :value="__('End Date')" />
                            <x-text-input id="end_date" name="end_date" type="date" class="mt-1 block w-full"
                                          :value="old('end_date', $recurring->end_date?->format('Y-m-d'))" />
                        </div>
                    </div>

                    <div>
                        <x-input-label for="notes" :value="__('Notes')" />
                        <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', $recurring->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', $recurring->auto_create) ? '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>Update
                    </x-primary-button>
                </div>
            </form>
        </div>
    </div>

    <!-- Delete Modal -->
    <div id="deleteModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="fixed inset-0 bg-black opacity-50" onclick="document.getElementById('deleteModal').classList.add('hidden')"></div>
            <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg max-w-md w-full p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Delete Recurring Transaction</h3>
                <p class="text-gray-600 dark:text-gray-400 mb-6">Are you sure? Future transactions will not be created.</p>
                <div class="flex justify-end space-x-4">
                    <button type="button" onclick="document.getElementById('deleteModal').classList.add('hidden')"
                            class="px-4 py-2 text-gray-600 hover:text-gray-800">Cancel</button>
                    <form action="{{ route('recurring-transactions.destroy', $recurring) }}" method="POST" class="inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg">Delete</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
