{% extends "layout.html" %}

{% block content %}
<div class="page-container timetrack-container">
    <div class="page-header task-header">
        <div class="project-info">
            <h2>Tasks for Project: {{ project.code }} - {{ project.name }}</h2>
            <p class="project-description">{{ project.description or 'No description available' }}</p>
            {% if project.category %}
            <span class="category-badge" style="background-color: {{ project.category.color }}20; color: {{ project.category.color }};">
                {{ project.category.icon or '📁' }} {{ project.category.name }}
            </span>
            {% endif %}
        </div>
        <div class="page-actions task-actions">
            <button id="create-task-btn" class="btn btn-success">Create New Task</button>
            <a href="{{ url_for('projects.admin_projects') }}" class="btn btn-secondary">Back to Projects</a>
        </div>
    </div>

    <!-- Task Statistics -->
    <div class="task-stats">
        <div class="stat-card">
            <h3>{{ tasks|length }}</h3>
            <p>Total Tasks</p>
        </div>
        <div class="stat-card">
            <h3>{{ tasks|selectattr('status.value', 'equalto', 'Completed')|list|length }}</h3>
            <p>Completed</p>
        </div>
        <div class="stat-card">
            <h3>{{ tasks|selectattr('status.value', 'equalto', 'In Progress')|list|length }}</h3>
            <p>In Progress</p>
        </div>
        <div class="stat-card">
            <h3>{{ tasks|selectattr('status.value', 'equalto', 'Not Started')|list|length }}</h3>
            <p>Not Started</p>
        </div>
    </div>

    <!-- Task List -->
    {% if tasks %}
    <div class="tasks-section">
        <h3>Project Tasks</h3>
        <div class="tasks-container">
            {% for task in tasks %}
            <div class="task-card" data-task-id="{{ task.id }}">
                <div class="task-header">
                    <div class="task-title-area">
                        <h4 class="task-name">{{ task.name }}</h4>
                        <div class="task-meta">
                            <span class="status-badge status-{{ task.status.value.lower().replace(' ', '-') }}">
                                {{ task.status.value }}
                            </span>
                            <span class="priority-badge priority-{{ task.priority.value.lower() }}">
                                {{ task.priority.value }}
                            </span>
                        </div>
                    </div>
                    <div class="task-actions">
                        <button class="btn btn-xs btn-primary edit-task-btn" data-id="{{ task.id }}">Edit</button>
                        <button class="btn btn-xs btn-info add-subtask-btn" data-id="{{ task.id }}">Add Subtask</button>
                        <button class="btn btn-xs btn-danger delete-task-btn" data-id="{{ task.id }}">Delete</button>
                    </div>
                </div>
                
                <div class="task-body">
                    <p class="task-description">{{ task.description or 'No description' }}</p>
                    
                    <div class="task-details">
                        <div class="task-detail">
                            <strong>Assigned to:</strong> 
                            {% if task.assigned_to %}
                                {{ task.assigned_to.username }}
                            {% else %}
                                <em>Unassigned</em>
                            {% endif %}
                        </div>
                        <div class="task-detail">
                            <strong>Due Date:</strong> 
                            {% if task.due_date %}
                                {{ task.due_date.strftime('%Y-%m-%d') }}
                            {% else %}
                                <em>No due date</em>
                            {% endif %}
                        </div>
                        <div class="task-detail">
                            <strong>Estimated Hours:</strong> 
                            {% if task.estimated_hours %}
                                {{ task.estimated_hours }}h
                            {% else %}
                                <em>Not estimated</em>
                            {% endif %}
                        </div>
                        <div class="task-detail">
                            <strong>Time Logged:</strong> 
                            {{ (task.total_time_logged / 3600)|round(1) }}h
                        </div>
                    </div>

                    <!-- Progress Bar -->
                    <div class="progress-section">
                        <div class="progress-info">
                            <span>Progress: {{ task.progress_percentage }}%</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: {{ task.progress_percentage }}%;"></div>
                        </div>
                    </div>

                    <!-- Subtasks -->
                    {% if task.subtasks %}
                    <div class="subtasks-section">
                        <h5>Subtasks ({{ task.subtasks|length }})</h5>
                        <div class="subtasks-list">
                            {% for subtask in task.subtasks %}
                            <div class="subtask-item" data-subtask-id="{{ subtask.id }}">
                                <div class="subtask-content">
                                    <span class="subtask-name">{{ subtask.name }}</span>
                                    <span class="status-badge status-{{ subtask.status.value.lower().replace(' ', '-') }}">
                                        {{ subtask.status.value }}
                                    </span>
                                    {% if subtask.assigned_to %}
                                    <span class="subtask-assignee">{{ subtask.assigned_to.username }}</span>
                                    {% endif %}
                                </div>
                                <div class="subtask-actions">
                                    <button class="btn btn-xs btn-primary edit-subtask-btn" data-id="{{ subtask.id }}">Edit</button>
                                    <button class="btn btn-xs btn-danger delete-subtask-btn" data-id="{{ subtask.id }}">Delete</button>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% else %}
    <div class="no-tasks">
        <div class="no-tasks-content">
            <h3>No Tasks Created Yet</h3>
            <p>Start organizing your project by creating tasks.</p>
            <button id="create-first-task-btn" class="btn btn-primary">Create Your First Task</button>
        </div>
    </div>
    {% endif %}
</div>

<!-- Task Creation/Edit Modal -->
<div id="task-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h3 id="task-modal-title">Create Task</h3>
        <form id="task-form">
            <input type="hidden" id="task-id" name="task_id">
            <input type="hidden" id="project-id" name="project_id" value="{{ project.id }}">
            
            <div class="form-group">
                <label for="task-name">Task Name *</label>
                <input type="text" id="task-name" name="name" required maxlength="200">
            </div>
            
            <div class="form-group">
                <label for="task-description">Description</label>
                <textarea id="task-description" name="description" rows="3"></textarea>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="task-status">Status</label>
                    <select id="task-status" name="status">
                        <option value="Not Started">Not Started</option>
                        <option value="In Progress">In Progress</option>
                        <option value="On Hold">On Hold</option>
                        <option value="Completed">Completed</option>
                        <option value="Cancelled">Cancelled</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="task-priority">Priority</label>
                    <select id="task-priority" name="priority">
                        <option value="Low">Low</option>
                        <option value="Medium" selected>Medium</option>
                        <option value="High">High</option>
                        <option value="Urgent">Urgent</option>
                    </select>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="task-assigned-to">Assigned To</label>
                    <select id="task-assigned-to" name="assigned_to_id">
                        <option value="">Unassigned</option>
                        {% for user in team_members %}
                        <option value="{{ user.id }}">{{ user.username }}</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="task-estimated-hours">Estimated Hours</label>
                    <input type="number" id="task-estimated-hours" name="estimated_hours" step="0.5" min="0">
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="task-start-date">Start Date</label>
                    <input type="date" id="task-start-date" name="start_date">
                </div>
                
                <div class="form-group">
                    <label for="task-due-date">Due Date</label>
                    <input type="date" id="task-due-date" name="due_date">
                </div>
            </div>
            
            <div class="modal-actions">
                <button type="submit" class="btn btn-primary">Save Task</button>
                <button type="button" class="btn btn-secondary" id="cancel-task">Cancel</button>
            </div>
        </form>
    </div>
</div>

<!-- Subtask Creation/Edit Modal -->
<div id="subtask-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h3 id="subtask-modal-title">Create Subtask</h3>
        <form id="subtask-form">
            <input type="hidden" id="subtask-id" name="subtask_id">
            <input type="hidden" id="parent-task-id" name="task_id">
            
            <div class="form-group">
                <label for="subtask-name">Subtask Name *</label>
                <input type="text" id="subtask-name" name="name" required maxlength="200">
            </div>
            
            <div class="form-group">
                <label for="subtask-description">Description</label>
                <textarea id="subtask-description" name="description" rows="2"></textarea>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="subtask-status">Status</label>
                    <select id="subtask-status" name="status">
                        <option value="Not Started">Not Started</option>
                        <option value="In Progress">In Progress</option>
                        <option value="On Hold">On Hold</option>
                        <option value="Completed">Completed</option>
                        <option value="Cancelled">Cancelled</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="subtask-priority">Priority</label>
                    <select id="subtask-priority" name="priority">
                        <option value="Low">Low</option>
                        <option value="Medium" selected>Medium</option>
                        <option value="High">High</option>
                        <option value="Urgent">Urgent</option>
                    </select>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="subtask-assigned-to">Assigned To</label>
                    <select id="subtask-assigned-to" name="assigned_to_id">
                        <option value="">Unassigned</option>
                        {% for user in team_members %}
                        <option value="{{ user.id }}">{{ user.username }}</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="subtask-estimated-hours">Estimated Hours</label>
                    <input type="number" id="subtask-estimated-hours" name="estimated_hours" step="0.5" min="0">
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="subtask-start-date">Start Date</label>
                    <input type="date" id="subtask-start-date" name="start_date">
                </div>
                
                <div class="form-group">
                    <label for="subtask-due-date">Due Date</label>
                    <input type="date" id="subtask-due-date" name="due_date">
                </div>
            </div>
            
            <div class="modal-actions">
                <button type="submit" class="btn btn-primary">Save Subtask</button>
                <button type="button" class="btn btn-secondary" id="cancel-subtask">Cancel</button>
            </div>
        </form>
    </div>
</div>

<style>
.task-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #dee2e6;
}

.project-info h2 {
    margin: 0 0 0.5rem 0;
}

.project-description {
    color: #666;
    margin: 0 0 0.5rem 0;
}

.task-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.task-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    text-align: center;
}

.stat-card h3 {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
    color: #4CAF50;
}

.stat-card p {
    margin: 0;
    color: #666;
    font-weight: 500;
}

.tasks-container {
    display: grid;
    gap: 1rem;
}

.task-card {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.task-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.task-header {
    padding: 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.task-title-area {
    flex: 1;
}

.task-name {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
}

.task-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.task-body {
    padding: 1rem;
}

.task-description {
    margin: 0 0 1rem 0;
    color: #666;
}

.task-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.task-detail {
    font-size: 0.9rem;
}

.progress-section {
    margin-bottom: 1rem;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: #4CAF50;
    transition: width 0.3s ease;
}

.status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.status-not-started { background: #f8d7da; color: #721c24; }
.status-in-progress { background: #d1ecf1; color: #0c5460; }
.status-on-hold { background: #fff3cd; color: #856404; }
.status-completed { background: #d4edda; color: #155724; }
.status-cancelled { background: #f8d7da; color: #721c24; }

.priority-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.priority-low { background: #e2e3e5; color: #383d41; }
.priority-medium { background: #b8daff; color: #004085; }
.priority-high { background: #ffeaa7; color: #856404; }
.priority-urgent { background: #f5c6cb; color: #721c24; }

.subtasks-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6;
}

.subtasks-section h5 {
    margin: 0 0 0.75rem 0;
    color: #666;
}

.subtasks-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.subtask-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #e9ecef;
}

.subtask-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.subtask-name {
    font-weight: 500;
}

.subtask-assignee {
    font-size: 0.8rem;
    color: #666;
}

.subtask-actions {
    display: flex;
    gap: 0.25rem;
}

.no-tasks {
    text-align: center;
    padding: 4rem 2rem;
}

.no-tasks-content {
    max-width: 400px;
    margin: 0 auto;
}

.no-tasks h3 {
    color: #666;
    margin-bottom: 1rem;
}

.no-tasks p {
    color: #999;
    margin-bottom: 2rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .task-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .task-details {
        grid-template-columns: 1fr;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const taskModal = document.getElementById('task-modal');
    const subtaskModal = document.getElementById('subtask-modal');
    const taskForm = document.getElementById('task-form');
    const subtaskForm = document.getElementById('subtask-form');
    
    // Task Modal Functions
    function openTaskModal(taskData = null) {
        const isEdit = taskData !== null;
        document.getElementById('task-modal-title').textContent = isEdit ? 'Edit Task' : 'Create Task';
        
        if (isEdit) {
            document.getElementById('task-id').value = taskData.id;
            document.getElementById('task-name').value = taskData.name;
            document.getElementById('task-description').value = taskData.description || '';
            document.getElementById('task-status').value = taskData.status;
            document.getElementById('task-priority').value = taskData.priority;
            document.getElementById('task-assigned-to').value = taskData.assigned_to_id || '';
            document.getElementById('task-estimated-hours').value = taskData.estimated_hours || '';
            document.getElementById('task-start-date').value = taskData.start_date || '';
            document.getElementById('task-due-date').value = taskData.due_date || '';
        } else {
            taskForm.reset();
            document.getElementById('task-id').value = '';
            document.getElementById('task-priority').value = 'Medium';
        }
        
        taskModal.style.display = 'block';
    }
    
    function openSubtaskModal(taskId, subtaskData = null) {
        const isEdit = subtaskData !== null;
        document.getElementById('subtask-modal-title').textContent = isEdit ? 'Edit Subtask' : 'Create Subtask';
        document.getElementById('parent-task-id').value = taskId;
        
        if (isEdit) {
            document.getElementById('subtask-id').value = subtaskData.id;
            document.getElementById('subtask-name').value = subtaskData.name;
            document.getElementById('subtask-description').value = subtaskData.description || '';
            document.getElementById('subtask-status').value = subtaskData.status;
            document.getElementById('subtask-priority').value = subtaskData.priority;
            document.getElementById('subtask-assigned-to').value = subtaskData.assigned_to_id || '';
            document.getElementById('subtask-estimated-hours').value = subtaskData.estimated_hours || '';
            document.getElementById('subtask-start-date').value = subtaskData.start_date || '';
            document.getElementById('subtask-due-date').value = subtaskData.due_date || '';
        } else {
            subtaskForm.reset();
            document.getElementById('subtask-id').value = '';
            document.getElementById('subtask-priority').value = 'Medium';
        }
        
        subtaskModal.style.display = 'block';
    }
    
    // Event Listeners
    document.getElementById('create-task-btn').addEventListener('click', () => openTaskModal());
    document.getElementById('create-first-task-btn')?.addEventListener('click', () => openTaskModal());
    
    // Task Actions
    document.querySelectorAll('.edit-task-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const taskId = this.getAttribute('data-id');
            // Fetch task data and open modal (implement API call)
            fetch(`/api/tasks/${taskId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        openTaskModal(data.task);
                    }
                });
        });
    });
    
    document.querySelectorAll('.add-subtask-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const taskId = this.getAttribute('data-id');
            openSubtaskModal(taskId);
        });
    });
    
    document.querySelectorAll('.delete-task-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const taskId = this.getAttribute('data-id');
            if (confirm('Are you sure you want to delete this task? All subtasks will also be deleted.')) {
                fetch(`/api/tasks/${taskId}`, {
                    method: 'DELETE'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    } else {
                        alert('Error: ' + data.message);
                    }
                });
            }
        });
    });
    
    // Subtask Actions
    document.querySelectorAll('.edit-subtask-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const subtaskId = this.getAttribute('data-id');
            const taskId = this.closest('.task-card').getAttribute('data-task-id');
            // Fetch subtask data and open modal
            fetch(`/api/subtasks/${subtaskId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        openSubtaskModal(taskId, data.subtask);
                    }
                });
        });
    });
    
    document.querySelectorAll('.delete-subtask-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const subtaskId = this.getAttribute('data-id');
            if (confirm('Are you sure you want to delete this subtask?')) {
                fetch(`/api/subtasks/${subtaskId}`, {
                    method: 'DELETE'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    } else {
                        alert('Error: ' + data.message);
                    }
                });
            }
        });
    });
    
    // Form Submissions
    taskForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const taskId = formData.get('task_id');
        const isEdit = taskId !== '';
        
        const url = isEdit ? `/api/tasks/${taskId}` : '/api/tasks';
        const method = isEdit ? 'PUT' : 'POST';
        
        fetch(url, {
            method: method,
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(Object.fromEntries(formData))
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                taskModal.style.display = 'none';
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        });
    });
    
    subtaskForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const subtaskId = formData.get('subtask_id');
        const isEdit = subtaskId !== '';
        
        const url = isEdit ? `/api/subtasks/${subtaskId}` : '/api/subtasks';
        const method = isEdit ? 'PUT' : 'POST';
        
        fetch(url, {
            method: method,
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(Object.fromEntries(formData))
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                subtaskModal.style.display = 'none';
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        });
    });
    
    // Modal Close Events
    document.querySelectorAll('.close').forEach(btn => {
        btn.addEventListener('click', function() {
            this.closest('.modal').style.display = 'none';
        });
    });
    
    document.getElementById('cancel-task').addEventListener('click', () => {
        taskModal.style.display = 'none';
    });
    
    document.getElementById('cancel-subtask').addEventListener('click', () => {
        subtaskModal.style.display = 'none';
    });
    
    // Close modals when clicking outside
    window.addEventListener('click', function(event) {
        if (event.target === taskModal) {
            taskModal.style.display = 'none';
        }
        if (event.target === subtaskModal) {
            subtaskModal.style.display = 'none';
        }
    });
});
</script>

{% endblock %}