@extends('layouts.app')

@section('title', 'Yeni Görev Oluştur')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div class="sm:flex sm:items-center">
        <div class="sm:flex-auto">
            <h1 class="text-3xl font-semibold text-gray-900 dark:text-gray-100">Yeni Görev Oluştur</h1>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
                Yeni bir görev oluşturun
            </p>
        </div>
    </div>

    <div class="mt-8">
        <form action="{{ route('tasks.store') }}" method="POST" class="bg-white dark:bg-gray-800 shadow rounded-lg border border-gray-200 dark:border-gray-700">
            @csrf
            
            <div class="px-6 py-5 border-b border-gray-200 dark:border-gray-700">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Görev Bilgileri</h2>
            </div>

            <div class="px-6 py-5 space-y-6">
                <!-- Başlık -->
                <div>
                    <label for="title" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                        Başlık <span class="text-red-500">*</span>
                    </label>
                    <input 
                        type="text" 
                        name="title" 
                        id="title" 
                        value="{{ old('title') }}"
                        required
                        class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-4 py-2.5 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200"
                        placeholder="Görev başlığını girin"
                    >
                    @error('title')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                    @enderror
                </div>

                <!-- Açıklama -->
                <div>
                    <label for="description" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                        Açıklama
                    </label>
                    <textarea 
                        name="description" 
                        id="description" 
                        rows="4"
                        class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-4 py-2.5 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200 resize-y"
                        placeholder="Görev açıklamasını girin"
                    >{{ old('description') }}</textarea>
                    @error('description')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                    @enderror
                </div>

                <!-- Durum ve Öncelik -->
                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                    <div>
                        <label for="status" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Durum <span class="text-red-500">*</span>
                        </label>
                        <select 
                            name="status" 
                            id="status" 
                            required
                            class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-4 py-2.5 shadow-sm focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200"
                        >
                            <option value="todo" {{ old('status', 'todo') == 'todo' ? 'selected' : '' }}>Yapılacak</option>
                            <option value="in_progress" {{ old('status') == 'in_progress' ? 'selected' : '' }}>Devam Ediyor</option>
                            <option value="review" {{ old('status') == 'review' ? 'selected' : '' }}>İncelemede</option>
                            <option value="done" {{ old('status') == 'done' ? 'selected' : '' }}>Tamamlandı</option>
                            <option value="cancelled" {{ old('status') == 'cancelled' ? 'selected' : '' }}>İptal Edildi</option>
                        </select>
                        @error('status')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                                <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                            </p>
                        @enderror
                    </div>

                    <div>
                        <label for="priority" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Öncelik <span class="text-red-500">*</span>
                        </label>
                        <select 
                            name="priority" 
                            id="priority" 
                            required
                            class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-4 py-2.5 shadow-sm focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200"
                        >
                            <option value="low" {{ old('priority', 'medium') == 'low' ? 'selected' : '' }}>Düşük</option>
                            <option value="medium" {{ old('priority', 'medium') == 'medium' ? 'selected' : '' }}>Orta</option>
                            <option value="high" {{ old('priority') == 'high' ? 'selected' : '' }}>Yüksek</option>
                            <option value="urgent" {{ old('priority') == 'urgent' ? 'selected' : '' }}>Acil</option>
                        </select>
                        @error('priority')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                                <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                            </p>
                        @enderror
                    </div>
                </div>

                <!-- Atanan ve Kategori -->
                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                    <div>
                        <label for="assigned_to" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Atanan Kullanıcı
                        </label>
                        <select 
                            name="assigned_to" 
                            id="assigned_to"
                            class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-4 py-2.5 shadow-sm focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200"
                        >
                            <option value="">Atanmamış</option>
                            @foreach($users as $user)
                            <option value="{{ $user->id }}" {{ old('assigned_to') == $user->id ? 'selected' : '' }}>
                                {{ $user->name }}
                            </option>
                            @endforeach
                        </select>
                        @error('assigned_to')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                                <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                            </p>
                        @enderror
                    </div>

                    <div>
                        <label for="category_id" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Kategori
                        </label>
                        <select 
                            name="category_id" 
                            id="category_id"
                            class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-4 py-2.5 shadow-sm focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200"
                        >
                            <option value="">Kategori Seçiniz</option>
                            @foreach($categories as $category)
                            <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                {{ $category->name }}
                            </option>
                            @endforeach
                        </select>
                        @error('category_id')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                                <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                            </p>
                        @enderror
                    </div>
                </div>

                <!-- Site ve Bitiş Tarihi -->
                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                    <div>
                        <label for="site_id" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Site
                        </label>
                        <select 
                            name="site_id" 
                            id="site_id"
                            class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-4 py-2.5 shadow-sm focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200"
                        >
                            <option value="">Site Seçiniz</option>
                            @foreach($sites as $site)
                            <option value="{{ $site->id }}" {{ old('site_id', $selectedSiteId) == $site->id ? 'selected' : '' }}>
                                {{ $site->name }}
                            </option>
                            @endforeach
                        </select>
                        @error('site_id')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                                <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                            </p>
                        @enderror
                    </div>

                    <div>
                        <label for="due_date" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Bitiş Tarihi
                        </label>
                        <input 
                            type="date" 
                            name="due_date" 
                            id="due_date" 
                            value="{{ old('due_date') }}"
                            class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-4 py-2.5 shadow-sm focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200"
                        >
                        @error('due_date')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                                <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                            </p>
                        @enderror
                    </div>
                </div>

                <!-- Tahmini Süre -->
                <div>
                    <label for="estimated_hours" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                        Tahmini Süre (Saat)
                    </label>
                    <input 
                        type="number" 
                        name="estimated_hours" 
                        id="estimated_hours" 
                        value="{{ old('estimated_hours') }}"
                        min="0"
                        step="0.5"
                        class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-4 py-2.5 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200"
                        placeholder="Örn: 8"
                    >
                    @error('estimated_hours')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                    @enderror
                </div>
            </div>

            <!-- Form Actions -->
            <div class="px-6 py-4 bg-gray-50 dark:bg-gray-700/50 border-t border-gray-200 dark:border-gray-700 flex items-center justify-end gap-3">
                <a href="{{ route('tasks.index') }}" class="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:ring-offset-2 transition-all duration-200">
                    <i class="fas fa-times"></i>
                    İptal
                </a>
                <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-500 dark:bg-blue-600 dark:hover:bg-blue-500 px-5 py-2.5 text-sm font-semibold text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-offset-2 transition-all duration-200">
                    <i class="fas fa-save"></i>
                    Görev Oluştur
                </button>
            </div>
        </form>
    </div>
</div>
@endsection