@extends('layouts.app')

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

@section('content')
<div class="max-w-2xl mx-auto">
    <a href="{{ route('finances.show', [$finance->year, $finance->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">Edit Finance Entry</h1>

        <form action="{{ route('finances.update', $finance->id) }}" method="POST" class="space-y-6">
            @csrf
            @method('PATCH')

            <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', $finance->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', $finance->category) === 'income' ? 'selected' : '' }}>💰 Income</option>
                        <option value="fixed_cost" {{ old('category', $finance->category) === 'fixed_cost' ? 'selected' : '' }}>🔴 Fixed Cost</option>
                        <option value="variable_cost" {{ old('category', $finance->category) === 'variable_cost' ? 'selected' : '' }}>🟠 Variable Cost</option>
                        <option value="bank" {{ old('category', $finance->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', $finance->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', $finance->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>

            <!-- 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', $finance->color) }}"
                    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-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 text-white font-semibold rounded-lg transition"
                >
                    Save Changes
                </button>
                <a 
                    href="{{ route('finances.show', [$finance->year, $finance->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