@extends('layouts.app')

@section('page_title', 'Create Task')

@section('content')
<div class="max-w-2xl 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">Create New Task</h1>

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

            <!-- Project Selection -->
            <div>
                <label for="project_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Project <span class="text-red-500 dark:text-red-400">*</span>
                </label>
                <select 
                    name="project_id" 
                    id="project_id" 
                    required
                    class="w-full px-4 py-3 bg-white dark:bg-gray-700 border @error('project_id') border-red-500 @else border-gray-300 dark:border-gray-600 @enderror rounded-lg text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition"
                >
                    <option value="">Select a project...</option>
                    @forelse($projects as $project)
                        <option value="{{ $project->id }}" {{ old('project_id') == $project->id || request('project_id') == $project->id ? 'selected' : '' }}>
                            {{ $project->name }}
                        </option>
                    @empty
                        <option disabled>No projects available. <a href="{{ route('projects.create') }}">Create one first</a></option>
                    @endforelse
                </select>
                @error('project_id')
                    <p class="text-red-600 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- 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') }}"
                    required
                    placeholder="Enter task 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 focus:border-transparent transition"
                >
                @error('title')
                    <p class="text-red-600 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Description -->
            <div>
                <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Description
                </label>
                <textarea 
                    name="description" 
                    id="description" 
                    rows="4"
                    placeholder="Enter task description (optional)"
                    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 focus:border-transparent transition"
                >{{ old('description') }}</textarea>
                @error('description')
                    <p class="text-red-600 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Priority & Due Date -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Priority -->
                <div>
                    <label for="priority" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Priority <span class="text-red-500 dark:text-red-400">*</span>
                    </label>
                    <select 
                        name="priority" 
                        id="priority" 
                        required
                        class="w-full px-4 py-3 bg-white dark:bg-gray-700 border @error('priority') border-red-500 @else border-gray-300 dark:border-gray-600 @enderror rounded-lg text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition"
                    >
                        <option value="">Select priority...</option>
                        <option value="low" {{ old('priority') === 'low' ? 'selected' : '' }}>🟢 Low</option>
                        <option value="medium" {{ old('priority') === 'medium' ? 'selected' : '' }}>🟡 Medium</option>
                        <option value="high" {{ old('priority') === 'high' ? 'selected' : '' }}>🔴 High</option>
                    </select>
                    @error('priority')
                        <p class="text-red-600 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Due Date -->
                <div>
                    <label for="due_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Due Date
                    </label>
                    <input 
                        type="date" 
                        name="due_date" 
                        id="due_date" 
                        value="{{ old('due_date') }}"
                        class="w-full px-4 py-3 bg-white dark:bg-gray-700 border @error('due_date') border-red-500 @else border-gray-300 dark:border-gray-600 @enderror rounded-lg text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition"
                    >
                    @error('due_date')
                        <p class="text-red-600 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </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"
                >
                    Create Task
                </button>
                <a 
                    href="{{ route('tasks.index') }}" 
                    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