{% extends "base.html" %}

{% block content %}

<div class="container-fluid">

    <!-- ========================================================== -->
    <!-- HEADER -->
    <!-- ========================================================== -->

    <div class="d-flex justify-content-between align-items-center mb-4">

        <div>

            <h2 class="fw-bold">
                <i class="bi bi-list-task text-primary"></i>
                {{ task.title }}
            </h2>

            <p class="text-muted mb-0">
                Task #{{ task.id }} | Created: {{ task.created_at.strftime('%d %b %Y %H:%M') }}
            </p>

        </div>

        <div class="d-flex gap-2">

            <a href="/task-board/{{ task.id }}/edit" class="btn btn-warning">

                <i class="bi bi-pencil"></i> Edit

            </a>

            {% if current_user.role in ["Admin", "Director"] %}

            <button class="btn btn-danger" onclick="confirmDelete('/task-board/{{ task.id }}/delete', 'Task: {{ task.title }}')">

                <i class="bi bi-trash"></i> Delete

            </button>

            {% endif %}

            <a href="/task-board" class="btn btn-secondary">

                <i class="bi bi-arrow-left"></i> Back

            </a>

        </div>

    </div>

    <!-- ========================================================== -->
    <!-- STATUS BADGE & PRIORITY -->
    <!-- ========================================================== -->

    <div class="row g-3 mb-4">

        <div class="col-md-3">

            <div class="card shadow-sm">

                <div class="card-body text-center">

                    <small class="text-muted">Status</small>

                    <h4>

                        <span class="badge bg-{% if task.status == 'New Request' %}secondary{% elif task.status == 'Assigned' %}primary{% elif task.status == 'Design' %}{% elif task.status == 'Material Planning' %}warning{% elif task.status == 'In Progress' %}success{% elif task.status == 'QA/Review' %}warning{% elif task.status == 'Completed' %}success{% elif task.status == 'Blocked' %}danger{% else %}secondary{% endif %}" style="font-size: 1rem;">

                            {{ task.status_display }}

                        </span>

                    </h4>

                </div>

            </div>

        </div>

        <div class="col-md-3">

            <div class="card shadow-sm">

                <div class="card-body text-center">

                    <small class="text-muted">Priority</small>

                    <h4>

                        <span class="badge bg-{% if task.priority == 'Critical' %}danger{% elif task.priority == 'High' %}warning{% elif task.priority == 'Medium' %}info{% else %}secondary{% endif %}" style="font-size: 1rem;">

                            {{ task.priority }}

                        </span>

                    </h4>

                </div>

            </div>

        </div>

        <div class="col-md-3">

            <div class="card shadow-sm">

                <div class="card-body text-center">

                    <small class="text-muted">Assigned To</small>

                    <h4 class="{% if task.is_overdue %}text-danger{% endif %}">

                        {{ task.assigned_to or "Unassigned" }}

                    </h4>

                </div>

            </div>

        </div>

        <div class="col-md-3">

            <div class="card shadow-sm">

                <div class="card-body text-center">

                    <small class="text-muted">Due Date</small>

                    <h4 class="{% if task.is_overdue %}text-danger{% endif %}">

                        {% if task.due_date %}

                            {{ task.due_date.strftime('%d %b %Y') }}

                            {% if task.is_overdue %}

                            <span class="badge bg-danger">Overdue!</span>

                            {% endif %}

                        {% else %}

                            <span class="text-muted">Not set</span>

                        {% endif %}

                    </h4>

                </div>

            </div>

        </div>

    </div>

    <!-- ========================================================== -->
    <!-- TASK DETAILS & DESCRIPTION -->
    <!-- ========================================================== -->

    <div class="row g-4">

        <div class="col-lg-8">

            <!-- Description -->
            <div class="card shadow-sm mb-4">

                <div class="card-header bg-primary text-white">

                    <i class="bi bi-file-text"></i> Description

                </div>

                <div class="card-body">

                    {% if task.description %}

                        <p style="white-space: pre-wrap;">{{ task.description }}</p>

                    {% else %}

                        <p class="text-muted">No description provided.</p>

                    {% endif %}

                </div>

            </div>

            <!-- Task Details Grid -->
            <div class="card shadow-sm mb-4">

                <div class="card-header bg-secondary text-white">

                    <i class="bi bi-info-circle"></i> Task Details

                </div>

                <div class="card-body">

                    <div class="row">

                        <div class="col-md-6">

                            <table class="table table-sm">

                                <tr>

                                    <th>Task Type</th>

                                    <td><span class="badge bg-info">{{ task.task_type or "General" }}</span></td>

                                </tr>

                                <tr>

                                    <th>Department</th>

                                    <td>{{ task.department or "Unassigned" }}</td>

                                </tr>

                                <tr>

                                    <th>Work Order #</th>

                                    <td><code>{{ task.work_order_number or "N/A" }}</code></td>

                                </tr>

                                <tr>

                                    <th>Client</th>

                                    <td>{{ task.client_name or "N/A" }}</td>

                                </tr>

                            </table>

                        </div>

                        <div class="col-md-6">

                            <table class="table table-sm">

                                <tr>

                                    <th>Estimated Hours</th>

                                    <td>{{ task.estimated_hours or 0 }} hrs</td>

                                </tr>

                                <tr>

                                    <th>Actual Hours</th>

                                    <td>{{ task.actual_hours or 0 }} hrs</td>

                                </tr>

                                <tr>

                                    <th>Start Date</th>

                                    <td>{{ task.start_date.strftime('%d %b %Y') if task.start_date else "Not set" }}</td>

                                </tr>

                                <tr>

                                    <th>Linked Enquiry</th>

                                    <td>

                                        {% if task.enquiry_id %}

                                        <a href="/enquiries/{{ task.enquiry_id }}">{{ task.enquiry.enquiry_number }}</a>

                                        {% else %}

                                        <span class="text-muted">None</span>

                                        {% endif %}

                                    </td>

                                </tr>

                            </table>

                        </div>

                    </div>

                </div>

            </div>

            <!-- Checklist -->
            <div class="card shadow-sm mb-4">

                <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">

                    <span><i class="bi bi-check2-square"></i> Checklist</span>

                    <span class="badge bg-light text-dark">

                        {{ task.completion_percentage|round(0) }}% Complete

                    </span>

                </div>

                <div class="card-body">

                    <!-- Progress Bar -->
                    <div class="progress mb-3" style="height: 8px;">

                        <div class="progress-bar bg-success" 

                             role="progressbar" 

                             style="width: {{ task.completion_percentage|round(0) }}%;"

                             aria-valuenow="{{ task.completion_percentage|round(0) }}" 

                             aria-valuemin="0" 

                             aria-valuemax="100">

                        </div>

                    </div>

                    <!-- Checklist Items -->
                    <ul class="list-group list-group-flush">

                        {% for item in task.checklist_items %}

                        <li class="list-group-item d-flex justify-content-between align-items-center">

                            <div>

                                {% if item.completed %}

                                <i class="bi bi-check-circle-fill text-success"></i>

                                <s>{{ item.text }}</s>

                                {% else %}

                                <i class="bi bi-circle text-muted"></i>

                                {{ item.text }}

                                {% endif %}

                            </div>

                            <div>

                                <form method="POST" action="/task-board/{{ task.id }}/checklist/{{ item.id }}/toggle" style="display: inline;">

                                    <button type="submit" class="btn btn-sm {% if item.completed %}btn-outline-secondary{% else %}btn-outline-success{% endif %}">

                                        {% if item.completed %}

                                        <i class="bi bi-arrow-counterclockwise"></i> Undo

                                        {% else %}

                                        <i class="bi bi-check"></i> Complete

                                        {% endif %}

                                    </button>

                                </form>

                            </div>

                        </li>

                        {% else %}

                        <li class="list-group-item text-muted text-center py-3">

                            No checklist items yet.

                        </li>

                        {% endfor %}

                    </ul>

                    <!-- Add Checklist Item -->
                    <form method="POST" action="/task-board/{{ task.id }}/checklist" class="mt-3">

                        <div class="input-group">

                            <input type="text" class="form-control" name="item_text" placeholder="Add checklist item..." required>

                            <button type="submit" class="btn btn-success">

                                <i class="bi bi-plus"></i> Add

                            </button>

                        </div>

                    </form>

                </div>

            </div>

            <!-- Tags -->
            <div class="card shadow-sm mb-4">

                <div class="card-header bg-info text-white">

                    <i class="bi bi-tags"></i> Tags

                </div>

                <div class="card-body">

                    {% if task.tag_list %}

                    <div class="d-flex flex-wrap gap-2">

                        {% for tag in task.tag_list %}

                        <span class="badge bg-secondary" style="font-size: 0.9rem; padding: 6px 12px;">

                            <i class="bi bi-tag"></i> {{ tag }}

                        </span>

                        {% endfor %}

                    </div>

                    {% else %}

                    <p class="text-muted">No tags assigned.</p>

                    {% endif %}

                </div>

            </div>

        </div>

        <!-- ========================================================== -->
        <!-- RIGHT COLUMN - COMMENTS & ACTIVITY -->
        <!-- ========================================================== -->

        <div class="col-lg-4">

            <!-- Update Status -->
            <div class="card shadow-sm mb-4">

                <div class="card-header bg-warning text-dark">

                    <i class="bi bi-arrow-right-circle"></i> Update Status

                </div>

                <div class="card-body">

                    <form method="POST" action="/task-board/{{ task.id }}/status">

                        <div class="row g-2">

                            <div class="col-8">

                                <select name="status" class="form-select">

                                    <option value="New Request" {% if task.status == 'New Request' %}selected{% endif %}>📋 New Request</option>

                                    <option value="Assigned" {% if task.status == 'Assigned' %}selected{% endif %}>🔧 Assigned</option>

                                    <option value="Design" {% if task.status == 'Design' %}selected{% endif %}>📐 Design</option>

                                    <option value="Material Planning" {% if task.status == 'Material Planning' %}selected{% endif %}>📦 Material Planning</option>

                                    <option value="In Progress" {% if task.status == 'In Progress' %}selected{% endif %}>⚙️ In Progress</option>

                                    <option value="QA/Review" {% if task.status == 'QA/Review' %}selected{% endif %}>✅ QA/Review</option>

                                    <option value="Completed" {% if task.status == 'Completed' %}selected{% endif %}>🚀 Completed</option>

                                    <option value="Blocked" {% if task.status == 'Blocked' %}selected{% endif %}>🛑 Blocked</option>

                                    <option value="Cancelled" {% if task.status == 'Cancelled' %}selected{% endif %}>❌ Cancelled</option>

                                </select>

                            </div>

                            <div class="col-4">

                                <button type="submit" class="btn btn-primary w-100">Update</button>

                            </div>

                        </div>

                    </form>

                </div>

            </div>

            <!-- Quick Stats -->
            <div class="card shadow-sm mb-4">

                <div class="card-header bg-dark text-white">

                    <i class="bi bi-bar-chart"></i> Quick Stats

                </div>

                <div class="card-body">

                    <div class="d-flex justify-content-between mb-2">

                        <span>Created</span>

                        <strong>{{ task.created_at.strftime('%d %b %Y %H:%M') }}</strong>

                    </div>

                    <div class="d-flex justify-content-between mb-2">

                        <span>Last Updated</span>

                        <strong>{{ task.updated_at.strftime('%d %b %Y %H:%M') }}</strong>

                    </div>

                    <div class="d-flex justify-content-between mb-2">

                        <span>Created By</span>

                        <strong>{{ task.created_by or "System" }}</strong>

                    </div>

                    <div class="d-flex justify-content-between mb-2">

                        <span>Comments</span>

                        <strong>{{ task.comment_count }}</strong>

                    </div>

                    <div class="d-flex justify-content-between">

                        <span>Subtasks</span>

                        <strong>{{ task.subtask_count }}</strong>

                    </div>

                </div>

            </div>

            <!-- ========================================================== -->
            <!-- COMMENTS / CHAT SECTION -->
            <!-- ========================================================== -->

            <div class="card shadow-sm">

                <div class="card-header bg-success text-white">

                    <i class="bi bi-chat-dots"></i> Comments & Discussion

                    <span class="badge bg-light text-dark float-end">{{ task.comment_count }}</span>

                </div>

                <div class="card-body" style="max-height: 500px; overflow-y: auto;">

                    <!-- Comment List -->
                    {% if task.comments %}

                    <div class="mb-4">

                        {% for comment in task.comments %}

                        <div class="d-flex mb-3">

                            <div class="flex-shrink-0">

                                <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" 

                                     style="width: 40px; height: 40px;">

                                    <strong>{{ comment.user[:1].upper() }}</strong>

                                </div>

                            </div>

                            <div class="flex-grow-1 ms-3">

                                <div class="d-flex justify-content-between">

                                    <strong>{{ comment.user }}</strong>

                                    <small class="text-muted">

                                        {{ comment.timestamp[:16].replace('T', ' ') if comment.timestamp else "" }}

                                    </small>

                                </div>

                                <p class="mb-1" style="white-space: pre-wrap;">{{ comment.details }}</p>

                                {% if comment.attachments %}

                                <small class="text-muted">

                                    <i class="bi bi-paperclip"></i> Attachments: {{ comment.attachments|length }}

                                </small>

                                {% endif %}

                            </div>

                        </div>

                        {% endfor %}

                    </div>

                    {% else %}

                    <p class="text-muted text-center py-3">

                        <i class="bi bi-chat fs-2 d-block"></i>

                        No comments yet. Start the discussion!

                    </p>

                    {% endif %}

                    <!-- Add Comment Form -->
                    <form method="POST" action="/task-board/{{ task.id }}/comment">

                        <div class="input-group">

                            <textarea class="form-control" name="comment" rows="2" placeholder="Type your comment..." required></textarea>

                        </div>

                        <button type="submit" class="btn btn-success btn-sm mt-2 w-100">

                            <i class="bi bi-send"></i> Send Comment

                        </button>

                    </form>

                </div>

            </div>

        </div>

    </div>

</div>

<!-- ========================================================== -->
<!-- DELETE MODAL - Uses base.html -->
<!-- ========================================================== -->

<script>
    // Confirm delete function - uses base.html modal
    function confirmDelete(url, itemName) {
        document.getElementById('deleteForm').action = url;
        document.getElementById('deleteItemInfo').textContent = '🗑️ ' + itemName;
        var modal = new bootstrap.Modal(document.getElementById('deleteModal'));
        modal.show();
    }

    // Auto-scroll to bottom of comments
    document.addEventListener('DOMContentLoaded', function() {
        const commentsContainer = document.querySelector('.card-body');
        if (commentsContainer) {
            commentsContainer.scrollTop = commentsContainer.scrollHeight;
        }
    });
</script>

{% endblock %}