@extends('layouts.app')

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

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

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

            <div>
                <label for="name" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Project Name</label>
                <input type="text" name="name" id="name" value="{{ old('name') }}" placeholder="Enter project name" class="w-full px-4 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 @error('name') border-red-500 @enderror focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition" required>
                @error('name') <p class="text-red-600 dark:text-red-400 text-sm mt-1">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="description" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Description</label>
                <textarea name="description" id="description" rows="4" placeholder="Enter project description" class="w-full px-4 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 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>

            <div>
                <label for="color" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">Project Color</label>
                <div class="grid grid-cols-6 gap-3">
                    @php $colors = ['#3B82F6', '#EF4444', '#10B981', '#F59E0B', '#8B5CF6', '#EC4899', '#14B8A6', '#F97316', '#06B6D4', '#6366F1', '#84CC16', '#64748B']; @endphp
                    @foreach($colors as $color)
                    <label class="relative cursor-pointer">
                        <input type="radio" name="color" value="{{ $color }}" {{ old('color', '#3B82F6') === $color ? 'checked' : '' }} class="sr-only">
                        <div class="w-10 h-10 rounded-lg border-2 cursor-pointer transition {{ old('color', '#3B82F6') === $color ? 'border-gray-900 dark:border-white ring-2 ring-offset-2 dark:ring-offset-gray-800' : 'border-gray-300 dark:border-gray-600 hover:border-gray-500 dark:hover:border-gray-400' }}" style="background-color: {{ $color }}"></div>
                    </label>
                    @endforeach
                </div>
            </div>

            <div class="flex gap-4 pt-4">
                <button type="submit" class="px-6 py-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 text-white font-semibold rounded-lg transition">Create</button>
                <a href="{{ route('tasks.index') }}" class="px-6 py-2 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