{% extends "base.html" %}

{% block title %}Edit Task - {{ task.name }} - Time Tracker{% endblock %}

{% block content %}
<div class="container mt-4">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card mobile-card">
                <div class="card-body py-4">
                    <div class="d-flex align-items-center">
                        <div class="bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 48px; height: 48px;">
                            <i class="fas fa-edit text-warning fa-lg"></i>
                        </div>
                        <div>
                            <h1 class="h2 mb-1">Edit Task</h1>
                            <p class="text-muted mb-0">Update task details and settings for "{{ task.name }}"</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Task Form -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card mobile-card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-edit me-2 text-warning"></i>Task Information
                    </h6>
                </div>
                <div class="card-body">
                    <form method="POST" id="editTaskForm">
                        <!-- Task Name -->
                        <div class="mb-4">
                            <label for="name" class="form-label fw-semibold">
                                <i class="fas fa-tag me-2 text-primary"></i>Task Name <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control form-control-lg" id="name" name="name" 
                                   value="{{ task.name }}" placeholder="Enter a descriptive task name" required>
                            <small class="form-text text-muted">Choose a clear, descriptive name that explains what needs to be done</small>
                        </div>

                        <!-- Description -->
                        <div class="mb-4">
                            <label for="description" class="form-label fw-semibold">
                                <i class="fas fa-align-left me-2 text-primary"></i>Description
                            </label>
                            <textarea class="form-control" id="description" name="description" rows="4" 
                                      placeholder="Provide detailed information about the task, requirements, and any specific instructions...">{{ task.description or '' }}</textarea>
                            <small class="form-text text-muted">Optional: Add context, requirements, or specific instructions for the task</small>
                        </div>

                        <!-- Project Selection -->
                        <div class="mb-4">
                            <label for="project_id" class="form-label fw-semibold">
                                <i class="fas fa-project-diagram me-2 text-primary"></i>Project <span class="text-danger">*</span>
                            </label>
                            <select class="form-select form-select-lg" id="project_id" name="project_id" required>
                                <option value="">Select a project</option>
                                {% for project in projects %}
                                <option value="{{ project.id }}" {% if task.project_id == project.id %}selected{% endif %}>
                                    {{ project.name }} ({{ project.client }})
                                </option>
                                {% endfor %}
                            </select>
                            <small class="form-text text-muted">Select the project this task belongs to</small>
                        </div>

                        <!-- Priority and Status -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label for="priority" class="form-label fw-semibold">
                                    <i class="fas fa-flag me-2 text-warning"></i>Priority
                                </label>
                                <select class="form-select" id="priority" name="priority">
                                    <option value="low" {% if task.priority == 'low' %}selected{% endif %}>Low</option>
                                    <option value="medium" {% if task.priority == 'medium' %}selected{% endif %}>Medium</option>
                                    <option value="high" {% if task.priority == 'high' %}selected{% endif %}>High</option>
                                    <option value="urgent" {% if task.priority == 'urgent' %}selected{% endif %}>Urgent</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="status" class="form-label fw-semibold">
                                    <i class="fas fa-tasks me-2 text-info"></i>Status
                                </label>
                                <select class="form-select" id="status" name="status">
                                    <option value="todo" {% if task.status == 'todo' %}selected{% endif %}>To Do</option>
                                    <option value="in_progress" {% if task.status == 'in_progress' %}selected{% endif %}>In Progress</option>
                                    <option value="review" {% if task.status == 'review' %}selected{% endif %}>Review</option>
                                    <option value="done" {% if task.status == 'done' %}selected{% endif %}>Done</option>
                                    <option value="cancelled" {% if task.status == 'cancelled' %}selected{% endif %}>Cancelled</option>
                                </select>
                            </div>
                        </div>

                        <!-- Due Date and Estimated Hours -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label for="due_date" class="form-label fw-semibold">
                                    <i class="fas fa-calendar me-2 text-secondary"></i>Due Date
                                </label>
                                <input type="date" class="form-control" id="due_date" name="due_date" 
                                       value="{{ task.due_date.strftime('%Y-%m-%d') if task.due_date else '' }}">
                                <small class="form-text text-muted">Optional: Set a deadline for this task</small>
                            </div>
                            <div class="col-md-6">
                                <label for="estimated_hours" class="form-label fw-semibold">
                                    <i class="fas fa-clock me-2 text-warning"></i>Estimated Hours
                                </label>
                                <input type="number" class="form-control" id="estimated_hours" name="estimated_hours" 
                                       value="{{ task.estimated_hours or '' }}" step="0.5" min="0" placeholder="0.0">
                                <small class="form-text text-muted">Optional: Estimate how long this task will take</small>
                            </div>
                        </div>

                        <!-- Assignment -->
                        <div class="mb-4">
                            <label for="assigned_to" class="form-label fw-semibold">
                                <i class="fas fa-user me-2 text-info"></i>Assign To
                            </label>
                            <select class="form-select" id="assigned_to" name="assigned_to">
                                <option value="">Unassigned</option>
                                {% for user in users %}
                                <option value="{{ user.id }}" {% if task.assigned_to == user.id %}selected{% endif %}>
                                    {{ user.display_name }}
                                </option>
                                {% endfor %}
                            </select>
                            <small class="form-text text-muted">Optional: Assign this task to a team member</small>
                        </div>

                        <!-- Form Actions -->
                        <div class="d-flex gap-3 pt-3 border-top">
                            <button type="submit" class="btn btn-warning btn-lg">
                                <i class="fas fa-save me-2"></i>Update Task
                            </button>
                            <a href="{{ url_for('tasks.view_task', task_id=task.id) }}" class="btn btn-outline-secondary btn-lg">
                                <i class="fas fa-times me-2"></i>Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Sidebar Information -->
        <div class="col-lg-4">
            <!-- Current Task Info -->
            <div class="card mobile-card mb-4">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-info-circle me-2 text-info"></i>Current Task Info
                    </h6>
                </div>
                <div class="card-body">
                    <div class="task-info-item mb-3">
                        <small class="text-muted d-block mb-1">Current Status</small>
                        <span class="status-badge status-{{ task.status }}">
                            {{ task.status_display }}
                        </span>
                    </div>
                    
                    <div class="task-info-item mb-3">
                        <small class="text-muted d-block mb-1">Current Priority</small>
                        <span class="priority-badge priority-{{ task.priority }}">
                            {{ task.priority_display }}
                        </span>
                    </div>
                    
                    <div class="task-info-item mb-3">
                        <small class="text-muted d-block mb-1">Project</small>
                        <div class="d-flex align-items-center">
                            <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 24px; height: 24px;">
                                <i class="fas fa-project-diagram text-primary fa-xs"></i>
                            </div>
                            <span>{{ task.project.name }}</span>
                        </div>
                    </div>
                    
                    {% if task.assigned_user %}
                    <div class="task-info-item mb-3">
                        <small class="text-muted d-block mb-1">Currently Assigned To</small>
                        <div class="d-flex align-items-center">
                            <div class="bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 24px; height:24px;">
                                <i class="fas fa-user text-info fa-xs"></i>
                            </div>
                            <span>{{ task.assigned_user.display_name }}</span>
                        </div>
                    </div>
                    {% endif %}
                    
                    {% if task.due_date %}
                    <div class="task-info-item mb-3">
                        <small class="text-muted d-block mb-1">Current Due Date</small>
                        <div class="d-flex align-items-center">
                            <div class="bg-{% if task.is_overdue %}danger{% else %}secondary{% endif %} bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 24px; height: 24px;">
                                <i class="fas fa-calendar text-{% if task.is_overdue %}danger{% else %}secondary{% endif %} fa-xs"></i>
                            </div>
                            <span class="{% if task.is_overdue %}text-danger fw-bold{% endif %}">
                                {{ task.due_date.strftime('%B %d, %Y') }}
                            </span>
                        </div>
                    </div>
                    {% endif %}
                    
                    {% if task.estimated_hours %}
                    <div class="task-info-item mb-3">
                        <small class="text-muted d-block mb-1">Current Estimate</small>
                        <div class="d-flex align-items-center">
                            <div class="bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 24px; height: 24px;">
                                <i class="fas fa-clock text-warning fa-xs"></i>
                            </div>
                            <span>{{ task.estimated_hours }} hours</span>
                        </div>
                    </div>
                    {% endif %}
                    
                    {% if task.total_hours > 0 %}
                    <div class="task-info-item mb-3">
                        <small class="text-muted d-block mb-1">Actual Hours</small>
                        <div class="d-flex align-items-center">
                            <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 24px; height: 24px;">
                                <i class="fas fa-stopwatch text-success fa-xs"></i>
                            </div>
                            <span>{{ task.total_hours }} hours</span>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card mobile-card mb-4">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-bolt me-2 text-warning"></i>Quick Actions
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ url_for('tasks.view_task', task_id=task.id) }}" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-eye me-2"></i>View Task
                        </a>
                        
                        {% if task.status == 'todo' or task.status == 'in_progress' %}
                        <a href="{{ url_for('timer.start_timer_for_project', project_id=task.project_id, task_id=task.id) }}" class="btn btn-success btn-sm">
                            <i class="fas fa-play me-2"></i>Start Timer
                        </a>
                        {% endif %}
                        
                        <a href="{{ url_for('tasks.list_tasks') }}" class="btn btn-outline-secondary btn-sm">
                            <i class="fas fa-list me-2"></i>Back to Tasks
                        </a>
                    </div>
                </div>
            </div>

            <!-- Edit Tips -->
            <div class="card mobile-card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-lightbulb me-2 text-warning"></i>Edit Tips
                    </h6>
                </div>
                <div class="card-body">
                    <div class="tip-item mb-3">
                        <div class="d-flex align-items-start">
                            <div class="bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 24px; height: 24px;">
                                <i class="fas fa-info text-info fa-xs"></i>
                            </div>
                            <div>
                                <small class="fw-semibold d-block">Status Changes</small>
                                <small class="text-muted">Changing status may affect time tracking and progress calculations</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="tip-item mb-3">
                        <div class="d-flex align-items-start">
                            <div class="bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 24px; height: 24px;">
                                <i class="fas fa-exclamation-triangle text-warning fa-xs"></i>
                            </div>
                            <div>
                                <small class="fw-semibold d-block">Due Date Updates</small>
                                <small class="text-muted">Consider team workload when adjusting deadlines</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="tip-item">
                        <div class="d-flex align-items-start">
                            <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 24px; height: 24px;">
                                <i class="fas fa-check text-success fa-xs"></i>
                            </div>
                            <div>
                                <small class="fw-semibold d-block">Assignment Changes</small>
                                <small class="text-muted">Notify team members when reassigning tasks</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Priority Badges */
.priority-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.priority-low {
    background-color: #dcfce7;
    color: #166534;
}

.priority-medium {
    background-color: #fef3c7;
    color: #92400e;
}

.priority-high {
    background-color: #fed7aa;
    color: #c2410c;
}

.priority-urgent {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Status Badges */
.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-todo {
    background-color: #e2e8f0;
    color: #475569;
}

.status-in_progress {
    background-color: #fef3c7;
    color: #92400e;
}

.status-review {
    background-color: #dbeafe;
    color: #1e40af;
}

.status-done {
    background-color: #dcfce7;
    color: #166534;
}

.status-cancelled {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Task Info Items */
.task-info-item {
    padding: 0.75rem;
    border-radius: 8px;
    background-color: #f8fafc;
    transition: all 0.2s ease;
}

.task-info-item:hover {
    background-color: #f1f5f9;
    transform: translateX(4px);
}

/* Tip Items */
.tip-item {
    padding: 0.75rem;
    border-radius: 8px;
    background-color: #f8fafc;
    transition: all 0.2s ease;
}

.tip-item:hover {
    background-color: #f1f5f9;
    transform: translateX(4px);
}

/* Form Styling */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

.form-control-lg {
    min-height: 56px;
}

.form-select-lg {
    min-height: 56px;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .card-header {
        padding: 1rem 1rem 0.75rem 1rem;
    }
    
    .card-body {
        padding: 0.75rem 1rem;
    }
    
    .task-info-item:hover,
    .tip-item:hover {
        transform: none;
    }
}

/* Hover Effects */
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.task-info-item:hover,
.tip-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
</style>

<script>
// Form validation and enhancement
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('editTaskForm');
    const nameInput = document.getElementById('name');
    const descriptionInput = document.getElementById('description');
    
    // Auto-resize description textarea
    if (descriptionInput) {
        descriptionInput.addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';
        });
    }
    
    // Form submission enhancement
    form.addEventListener('submit', function(e) {
        const name = nameInput.value.trim();
        if (!name) {
            e.preventDefault();
            nameInput.focus();
            nameInput.classList.add('is-invalid');
            return false;
        }
        
        // Show loading state
        const submitBtn = form.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Updating...';
        submitBtn.disabled = true;
        
        // Re-enable after a delay (in case of validation errors)
        setTimeout(() => {
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        }, 5000);
    });
    
    // Real-time validation feedback
    nameInput.addEventListener('input', function() {
        if (this.value.trim()) {
            this.classList.remove('is-invalid');
            this.classList.add('is-valid');
        } else {
            this.classList.remove('is-valid');
        }
    });
    
    // Highlight current values
    const currentStatus = '{{ task.status }}';
    const currentPriority = '{{ task.priority }}';
    
    // Add visual indicators for current values
    const statusSelect = document.getElementById('status');
    const prioritySelect = document.getElementById('priority');
    
    if (statusSelect) {
        statusSelect.addEventListener('change', function() {
            this.classList.remove('border-success', 'border-warning');
            if (this.value === currentStatus) {
                this.classList.add('border-success');
            } else {
                this.classList.add('border-warning');
            }
        });
    }
    
    if (prioritySelect) {
        prioritySelect.addEventListener('change', function() {
            this.classList.remove('border-success', 'border-warning');
            if (this.value === currentPriority) {
                this.classList.add('border-success');
            } else {
                this.classList.add('border-warning');
            }
        });
    }
});
</script>
{% endblock %}
