@extends('layouts.app')

@section('page_title', 'Add Finance Entry')

@section('content')
@php
    $month = (int)$month;
    $year = (int)$year;
    
    // Safety check
    if ($month < 1 || $month > 12 || $year < 2020) {
        $month = now()->month;
        $year = now()->year;
    }
    
    $months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
@endphp

<div class="max-w-2xl mx-auto">
    <a href="{{ route('finances.show', [request('year') ?? now()->year, request('month') ?? now()->month]) }}" class="text-blue-600 dark:text-blue-400 hover:underline mb-6 inline-block">
        ← Back
    </a>

    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm p-6">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Add Finance Entry</h1>

        <form action="{{ route('finances.store') }}" method="POST" class="space-y-6">
            @csrf

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Description -->
                <div>
                    <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Description *
                    </label>
                    <input 
                        type="text" 
                        name="description" 
                        id="description"
                        placeholder="e.g., Salary, Electricity, Groceries"
                        value="{{ old('description') }}"
                        required
                        class="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 transition @error('description') border-red-500 @enderror"
                    >
                    @error('description')
                        <p class="text-red-600 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Category -->
                <div>
                    <label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Category *
                    </label>
                    <select 
                        name="category" 
                        id="category"
                        required
                        class="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 transition @error('category') border-red-500 @enderror"
                    >
                        <option value="">Select Category</option>
                        <option value="income" {{ old('category') === 'income' ? 'selected' : '' }}>💰 Income</option>
                        <option value="fixed_cost" {{ old('category') === 'fixed_cost' ? 'selected' : '' }}>🔴 Fixed Cost</option>
                        <option value="variable_cost" {{ old('category') === 'variable_cost' ? 'selected' : '' }}>🟠 Variable Cost</option>
                        <option value="bank" {{ old('category') === 'bank' ? 'selected' : '' }}>🏦 Bank Account</option>
                    </select>
                    @error('category')
                        <p class="text-red-600 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Planned Amount -->
                <div>
                    <label for="planned_amount" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Planned Amount
                    </label>
                    <input 
                        type="number" 
                        name="planned_amount" 
                        id="planned_amount"
                        placeholder="0.00"
                        step="0.01"
                        value="{{ old('planned_amount') }}"
                        class="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 transition @error('planned_amount') border-red-500 @enderror"
                    >
                    @error('planned_amount')
                        <p class="text-red-600 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Actual Amount -->
                <div>
                    <label for="actual_amount" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Actual Amount
                    </label>
                    <input 
                        type="number" 
                        name="actual_amount" 
                        id="actual_amount"
                        placeholder="0.00"
                        step="0.01"
                        value="{{ old('actual_amount') }}"
                        class="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 transition @error('actual_amount') border-red-500 @enderror"
                    >
                    @error('actual_amount')
                        <p class="text-red-600 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Month -->
                <div>
                    <label for="month" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Month *
                    </label>
                    @php $months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; @endphp
                    <select 
                        name="month" 
                        id="month"
                        required
                        class="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 transition @error('month') border-red-500 @enderror"
                    >
                        @for ($i = 1; $i <= 12; $i++)
                            <option value="{{ $i }}" {{ (old('month') ?? $month) == $i ? 'selected' : '' }}>{{ $months[$i - 1] }}</option>
                        @endfor
                    </select>
                    @error('month')
                        <p class="text-red-600 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Year -->
                <div>
                    <label for="year" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Year *
                    </label>
                    <input 
                        type="number" 
                        name="year" 
                        id="year"
                        min="2020"
                        max="2100"
                        value="{{ old('year') ?? $year }}"
                        required
                        class="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 transition @error('year') border-red-500 @enderror"
                    >
                    @error('year')
                        <p class="text-red-600 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Color Picker -->
            <div>
                <label for="color" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Color (Optional)
                </label>
                <input 
                    type="color" 
                    name="color" 
                    id="color"
                    value="{{ old('color') ?? '#3B82F6' }}"
                    class="w-12 h-10 rounded-lg cursor-pointer @error('color') border-red-500 @enderror"
                >
                @error('color')
                    <p class="text-red-600 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Actions -->
            <div class="flex gap-3">
                <button 
                    type="submit" 
                    class="flex-1 px-4 py-3 bg-green-600 hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-700 text-white font-semibold rounded-lg transition"
                >
                    Add Entry
                </button>
                <a 
                    href="{{ route('finances.show', [request('year') ?? now()->year, request('month') ?? now()->month]) }}" 
                    class="flex-1 px-4 py-3 bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-white font-semibold rounded-lg transition text-center"
                >
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>
@endsection