<x-app-layout>
    <x-slot name="header">
        <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
            {{ __('Create Budget') }} (úË—)
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
            <div class="bg-white shadow sm:rounded-lg dark:bg-gray-800">
                <div class="px-4 py-5 sm:p-6">
                    <form method="POST" action="{{ route('admin.budgets.store') }}" class="space-y-6" aria-label="{{ __('Create budget form') }}">
                        @csrf

                        <!-- Fiscal Year -->
                        <div>
                            <label for="fiscal_year" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                {{ __('Fiscal Year') }} <span class="text-red-500" aria-label="{{ __('required') }}">*</span>
                            </label>
                            <input type="number"
                                   name="fiscal_year"
                                   id="fiscal_year"
                                   value="{{ old('fiscal_year', now()->year) }}"
                                   min="2000"
                                   max="2100"
                                   required
                                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-offset-gray-800 @error('fiscal_year') border-red-300 dark:border-red-500 @enderror"
                                   aria-describedby="fiscal_year_help @error('fiscal_year') fiscal_year_error @enderror">
                            <p id="fiscal_year_help" class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                                {{ __('The fiscal year this budget applies to') }}
                            </p>
                            @error('fiscal_year')
                                <p id="fiscal_year_error" class="mt-1 text-sm text-red-600 dark:text-red-400" role="alert">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Name -->
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                {{ __('Budget Name') }} <span class="text-red-500" aria-label="{{ __('required') }}">*</span>
                            </label>
                            <input type="text"
                                   name="name"
                                   id="name"
                                   value="{{ old('name') }}"
                                   required
                                   maxlength="255"
                                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-offset-gray-800 @error('name') border-red-300 dark:border-red-500 @enderror"
                                   placeholder="{{ __('e.g., Annual Budget 2025') }}"
                                   aria-describedby="name_help @error('name') name_error @enderror">
                            <p id="name_help" class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                                {{ __('Descriptive name for this budget') }}
                            </p>
                            @error('name')
                                <p id="name_error" class="mt-1 text-sm text-red-600 dark:text-red-400" role="alert">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Period Type -->
                        <div>
                            <label for="period_type" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                {{ __('Period Type') }} <span class="text-red-500" aria-label="{{ __('required') }}">*</span>
                            </label>
                            <select name="period_type"
                                    id="period_type"
                                    required
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-offset-gray-800 @error('period_type') border-red-300 dark:border-red-500 @enderror"
                                    aria-describedby="period_type_help @error('period_type') period_type_error @enderror">
                                <option value="annual" @selected(old('period_type', 'annual') === 'annual')>{{ __('Annual') }} (t¦)</option>
                                <option value="quarterly" @selected(old('period_type') === 'quarterly')>{{ __('Quarterly') }} (c¦)</option>
                                <option value="monthly" @selected(old('period_type') === 'monthly')>{{ __('Monthly') }} (¦)</option>
                            </select>
                            <p id="period_type_help" class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                                {{ __('Budget period duration') }}
                            </p>
                            @error('period_type')
                                <p id="period_type_error" class="mt-1 text-sm text-red-600 dark:text-red-400" role="alert">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Period Dates -->
                        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                            <div>
                                <label for="period_start" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                    {{ __('Period Start Date') }} <span class="text-red-500" aria-label="{{ __('required') }}">*</span>
                                </label>
                                <input type="date"
                                       name="period_start"
                                       id="period_start"
                                       value="{{ old('period_start') }}"
                                       required
                                       class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-offset-gray-800 @error('period_start') border-red-300 dark:border-red-500 @enderror"
                                       aria-describedby="@error('period_start') period_start_error @enderror">
                                @error('period_start')
                                    <p id="period_start_error" class="mt-1 text-sm text-red-600 dark:text-red-400" role="alert">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="period_end" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                    {{ __('Period End Date') }} <span class="text-red-500" aria-label="{{ __('required') }}">*</span>
                                </label>
                                <input type="date"
                                       name="period_end"
                                       id="period_end"
                                       value="{{ old('period_end') }}"
                                       required
                                       class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-offset-gray-800 @error('period_end') border-red-300 dark:border-red-500 @enderror"
                                       aria-describedby="@error('period_end') period_end_error @enderror">
                                @error('period_end')
                                    <p id="period_end_error" class="mt-1 text-sm text-red-600 dark:text-red-400" role="alert">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <!-- Notes -->
                        <div>
                            <label for="notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                {{ __('Notes') }} (™;)
                            </label>
                            <textarea name="notes"
                                      id="notes"
                                      rows="3"
                                      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-offset-gray-800 @error('notes') border-red-300 dark:border-red-500 @enderror"
                                      placeholder="{{ __('Optional notes about this budget...') }}"
                                      aria-describedby="notes_help @error('notes') notes_error @enderror">{{ old('notes') }}</textarea>
                            <p id="notes_help" class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                                {{ __('Additional information about this budget (optional)') }}
                            </p>
                            @error('notes')
                                <p id="notes_error" class="mt-1 text-sm text-red-600 dark:text-red-400" role="alert">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Actions -->
                        <div class="flex items-center justify-end gap-x-4 border-t border-gray-200 pt-6 dark:border-gray-700">
                            <a href="{{ route('admin.budgets.index') }}"
                               class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-gray-700 dark:text-gray-100 dark:ring-gray-600 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800">
                                {{ __('Cancel') }}
                            </a>
                            <button type="submit"
                                    class="inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-indigo-500 dark:hover:bg-indigo-400 dark:focus:ring-offset-gray-800">
                                {{ __('Create Budget') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Help Section -->
            <div class="mt-6 rounded-lg bg-blue-50 p-4 dark:bg-blue-900/30 border-l-4 border-blue-400 dark:border-blue-500">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-blue-800 dark:text-blue-200">
                            {{ __('Next Steps') }}
                        </h3>
                        <div class="mt-2 text-sm text-blue-700 dark:text-blue-300">
                            <p>{{ __('After creating the budget, you will be able to:') }}</p>
                            <ul class="list-disc pl-5 mt-2 space-y-1">
                                <li>{{ __('Add budget items for income and expense accounts') }}</li>
                                <li>{{ __('Submit the budget for chair approval') }}</li>
                                <li>{{ __('Activate the budget to start tracking actual amounts') }}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
