@extends('layouts.app')

@section('page_title', 'Edit Note')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 shadow-sm">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Edit Note</h1>

        <form action="{{ route('notes.update', $note) }}" method="POST" class="space-y-6">
            @csrf
            @method('PUT')

            <!-- Title -->
            <div>
                <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Title <span class="text-red-500 dark:text-red-400">*</span>
                </label>
                <input 
                    type="text" 
                    name="title" 
                    id="title" 
                    value="{{ old('title', $note->title) }}"
                    required
                    placeholder="Enter note title"
                    class="w-full px-4 py-3 bg-white dark:bg-gray-700 border @error('title') border-red-500 @else border-gray-300 dark:border-gray-600 @enderror 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 dark:focus:ring-blue-400 transition"
                >
                @error('title')
                    <p class="text-red-600 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Content -->
            <div>
                <label for="content" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Content <span class="text-red-500 dark:text-red-400">*</span>
                </label>
                <textarea 
                    name="content" 
                    id="content" 
                    rows="12"
                    required
                    placeholder="Write your note here..."
                    class="w-full px-4 py-3 bg-white dark:bg-gray-700 border @error('content') border-red-500 @else border-gray-300 dark:border-gray-600 @enderror 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 dark:focus:ring-blue-400 transition font-mono text-sm"
                >{{ old('content', $note->content) }}</textarea>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">You can use markdown formatting: **bold**, *italic*, - lists, etc.</p>
                @error('content')
                    <p class="text-red-600 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Category & Color Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Category -->
                <div>
                    <label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Category
                    </label>
                    <input 
                        type="text" 
                        name="category" 
                        id="category" 
                        value="{{ old('category', $note->category) }}"
                        placeholder="e.g., Work, Personal, Ideas"
                        class="w-full px-4 py-3 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 dark:focus:ring-blue-400 transition"
                    >
                    @error('category')
                        <p class="text-red-600 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Color -->
                <div>
                    <label for="color" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Color
                    </label>
                    <div class="flex gap-2 flex-wrap">
                        @php
                            $colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E2'];
                        @endphp
                        @foreach($colors as $colorOption)
                            <label class="flex items-center cursor-pointer">
                                <input 
                                    type="radio" 
                                    name="color" 
                                    value="{{ $colorOption }}"
                                    {{ old('color', $note->color) === $colorOption ? 'checked' : '' }}
                                    class="sr-only"
                                >
                                <div 
                                    class="w-8 h-8 rounded-lg border-2 transition"
                                    style="background-color: {{ $colorOption }}; border-color: {{ old('color', $note->color) === $colorOption ? '#000' : '#ccc' }};"
                                ></div>
                            </label>
                        @endforeach
                    </div>
                </div>
            </div>

            <!-- Link to Project/Task -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Project -->
                <div>
                    <label for="project_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Link to Project (Optional)
                    </label>
                    <select 
                        name="project_id" 
                        id="project_id"
                        class="w-full px-4 py-3 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 dark:focus:ring-blue-400 transition"
                    >
                        <option value="">Select a project...</option>
                        @foreach($projects as $project)
                            <option value="{{ $project->id }}" {{ old('project_id', $note->project_id) == $project->id ? 'selected' : '' }}>
                                {{ $project->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Task -->
                <div>
                    <label for="task_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Link to Task (Optional)
                    </label>
                    <select 
                        name="task_id" 
                        id="task_id"
                        class="w-full px-4 py-3 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 dark:focus:ring-blue-400 transition"
                    >
                        <option value="">Select a task...</option>
                        @foreach($tasks as $task)
                            <option value="{{ $task->id }}" {{ old('task_id', $note->task_id) == $task->id ? 'selected' : '' }}>
                                {{ $task->title }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- Buttons -->
            <div class="flex gap-4 pt-4">
                <button 
                    type="submit" 
                    class="px-6 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('notes.show', $note) }}" 
                    class="px-6 py-3 bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-semibold rounded-lg transition"
                >
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>
@endsection