@extends('layouts.app')

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

@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">Create New Reminder</h1>

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

            <!-- 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="What do you want to be reminded about?"
                    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>

            <!-- 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="Additional details..."
                    class="w-full px-4 py-3 bg-white dark:bg-gray-700 border @error('description') 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"
                >{{ old('description') }}</textarea>
                @error('description')
                    <p class="text-red-600 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Date & Time Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Date -->
                <div>
                    <label for="reminder_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Reminder Date <span class="text-red-500 dark:text-red-400">*</span>
                    </label>
                    <input 
                        type="date" 
                        name="reminder_date" 
                        id="reminder_date" 
                        value="{{ old('reminder_date', now()->format('Y-m-d')) }}"
                        required
                        class="w-full px-4 py-3 bg-white dark:bg-gray-700 border @error('reminder_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 transition"
                    >
                    @error('reminder_date')
                        <p class="text-red-600 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Time -->
                <div>
                    <label for="reminder_time" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Time (Optional)
                    </label>
                    <input 
                        type="time" 
                        name="reminder_time" 
                        id="reminder_time" 
                        value="{{ old('reminder_time') }}"
                        class="w-full px-4 py-3 bg-white dark:bg-gray-700 border @error('reminder_time') 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 transition"
                    >
                    @error('reminder_time')
                        <p class="text-red-600 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Priority & Category & Status Grid -->
            <div class="grid grid-cols-1 md:grid-cols-3 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 transition"
                    >
                        <option value="">Select Priority</option>
                        <option value="low" {{ old('priority') === 'low' ? 'selected' : '' }}>Low</option>
                        <option value="medium" {{ old('priority') === 'medium' || !old('priority') ? '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>

                <!-- 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') }}"
                        placeholder="e.g., Work, Personal, Urgent"
                        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"
                    >
                </div>

                <!-- Status -->
                <div>
                    <label for="status" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Status <span class="text-red-500 dark:text-red-400">*</span>
                    </label>
                    <select 
                        name="status" 
                        id="status"
                        required
                        class="w-full px-4 py-3 bg-white dark:bg-gray-700 border @error('status') 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 transition"
                    >
                        <option value="pending" {{ old('status') === 'pending' || !old('status') ? 'selected' : '' }}>Pending</option>
                        <option value="sent" {{ old('status') === 'sent' ? 'selected' : '' }}>Sent</option>
                        <option value="completed" {{ old('status') === 'completed' ? 'selected' : '' }}>Completed</option>
                        <option value="dismissed" {{ old('status') === 'dismissed' ? 'selected' : '' }}>Dismissed</option>
                    </select>
                    @error('status')
                        <p class="text-red-600 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Repeat Section -->
            <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
                <div class="flex items-center gap-4 mb-4">
                    <input 
                        type="checkbox" 
                        name="is_repeating" 
                        id="is_repeating" 
                        value="1"
                        {{ old('is_repeating') ? 'checked' : '' }}
                        onchange="document.getElementById('repeat_type').disabled = !this.checked; document.getElementById('repeat_type').required = this.checked;"
                        class="w-4 h-4"
                    >
                    <label for="is_repeating" class="text-sm font-medium text-gray-700 dark:text-gray-300">
                        Repeat this reminder
                    </label>
                </div>

                <div>
                    <label for="repeat_type" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Repeat Type
                    </label>
                    <select 
                        name="repeat_type" 
                        id="repeat_type"
                        {{ !old('is_repeating') ? 'disabled' : '' }}
                        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 repeat type</option>
                        <option value="one-time" {{ old('repeat_type') === 'one-time' ? 'selected' : '' }}>One-time</option>
                        <option value="daily" {{ old('repeat_type') === 'daily' ? 'selected' : '' }}>Daily</option>
                        <option value="weekly" {{ old('repeat_type') === 'weekly' ? 'selected' : '' }}>Weekly</option>
                        <option value="bi-weekly" {{ old('repeat_type') === 'bi-weekly' ? 'selected' : '' }}>Bi-weekly (Every 2 weeks)</option>
                        <option value="monthly" {{ old('repeat_type') === 'monthly' ? 'selected' : '' }}>Monthly</option>
                        <option value="quarterly" {{ old('repeat_type') === 'quarterly' ? 'selected' : '' }}>Quarterly (Every 3 months)</option>
                        <option value="semi-annually" {{ old('repeat_type') === 'semi-annually' ? 'selected' : '' }}>Semi-annually (Every 6 months)</option>
                        <option value="annually" {{ old('repeat_type') === 'annually' ? 'selected' : '' }}>Annually (Every 12 months)</option>
                    </select>
                </div>
            </div>

            <!-- Link to Resources -->
            <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Link to Resources (Optional)</h3>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- Task -->
                    <div>
                        <label for="task_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Task
                        </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>
                            @forelse($tasks as $task)
                                <option value="{{ $task->id }}" {{ old('task_id') == $task->id ? 'selected' : '' }}>
                                    {{ $task->title }}
                                </option>
                            @empty
                                <option value="" disabled>No tasks available</option>
                            @endforelse
                        </select>
                    </div>

                    <!-- Project -->
                    <div>
                        <label for="project_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Project
                        </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>
                            @forelse($projects as $project)
                                <option value="{{ $project->id }}" {{ old('project_id') == $project->id ? 'selected' : '' }}>
                                    {{ $project->name }}
                                </option>
                            @empty
                                <option value="" disabled>No projects available</option>
                            @endforelse
                        </select>
                    </div>

                    <!-- Note -->
                    <div>
                        <label for="note_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Note
                        </label>
                        <select 
                            name="note_id" 
                            id="note_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 note...</option>
                            @forelse($notes as $note)
                                <option value="{{ $note->id }}" {{ old('note_id') == $note->id ? 'selected' : '' }}>
                                    {{ $note->title }}
                                </option>
                            @empty
                                <option value="" disabled>No notes available</option>
                            @endforelse
                        </select>
                    </div>
                </div>
            </div>

            <!-- Buttons -->
            <div class="flex gap-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                <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 Reminder
                </button>
                <a 
                    href="{{ route('reminders.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