{% 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-person-check text-primary"></i>
                My Tasks
            </h2>

            <p class="text-muted mb-0">
                Tasks assigned to you
            </p>

        </div>

        <div>

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

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

                Back to Board

            </a>

        </div>

    </div>

    <!-- ========================================================== -->
    <!-- STATS CARDS -->
    <!-- ========================================================== -->

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

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

            <div class="card shadow-sm border-0 bg-primary text-white">

                <div class="card-body">

                    <small class="text-white-50">Total Assigned</small>

                    <h2 class="text-white">{{ tasks|length }}</h2>

                </div>

            </div>

        </div>

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

            <div class="card shadow-sm border-0 bg-warning text-dark">

                <div class="card-body">

                    <small class="text-dark-50">In Progress</small>

                    <h2>{{ tasks|selectattr('status', 'equalto', 'In Progress')|list|length }}</h2>

                </div>

            </div>

        </div>

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

            <div class="card shadow-sm border-0 bg-success text-white">

                <div class="card-body">

                    <small class="text-white-50">Completed</small>

                    <h2 class="text-white">{{ tasks|selectattr('status', 'equalto', 'Completed')|list|length }}</h2>

                </div>

            </div>

        </div>

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

            <div class="card shadow-sm border-0 bg-danger text-white">

                <div class="card-body">

                    <small class="text-white-50">Overdue</small>

                    <h2 class="text-white">{{ tasks|selectattr('is_overdue', 'equalto', True)|list|length }}</h2>

                </div>

            </div>

        </div>

    </div>

    <!-- ========================================================== -->
    <!-- TASKS BY STATUS -->
    <!-- ========================================================== -->

    <div class="row g-4">

        <!-- New Request -->
        <div class="col-md-4">

            <div class="card shadow-sm h-100">

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

                    <i class="bi bi-inbox"></i> New Request

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

                        {{ tasks|selectattr('status', 'equalto', 'New Request')|list|length }}

                    </span>

                </div>

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

                    {% for task in tasks if task.status == "New Request" %}

                    <div class="card mb-2 shadow-sm task-card" onclick="location.href='/task-board/{{ task.id }}'" style="cursor: pointer;">

                        <div class="card-body">

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

                                <h6 class="mb-1">{{ task.title }}</h6>

                                <span class="badge bg-{% if task.priority == 'Critical' %}danger{% elif task.priority == 'High' %}warning{% elif task.priority == 'Medium' %}info{% else %}secondary{% endif %}">

                                    {{ task.priority }}

                                </span>

                            </div>

                            <small class="text-muted">

                                <i class="bi bi-tag"></i> {{ task.task_type or "General" }}

                            </small>

                            <br>

                            <small class="text-muted">

                                <i class="bi bi-calendar"></i> {{ task.due_date.strftime('%d %b %Y') if task.due_date else "No due date" }}

                            </small>

                            {% if task.is_overdue %}

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

                            {% endif %}

                        </div>

                    </div>

                    {% else %}

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

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

                        No tasks

                    </p>

                    {% endfor %}

                </div>

            </div>

        </div>

        <!-- In Progress -->
        <div class="col-md-4">

            <div class="card shadow-sm h-100">

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

                    <i class="bi bi-gear"></i> In Progress

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

                        {{ tasks|selectattr('status', 'equalto', 'In Progress')|list|length }}

                    </span>

                </div>

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

                    {% for task in tasks if task.status == "In Progress" %}

                    <div class="card mb-2 shadow-sm task-card" onclick="location.href='/task-board/{{ task.id }}'" style="cursor: pointer;">

                        <div class="card-body">

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

                                <h6 class="mb-1">{{ task.title }}</h6>

                                <span class="badge bg-{% if task.priority == 'Critical' %}danger{% elif task.priority == 'High' %}warning{% elif task.priority == 'Medium' %}info{% else %}secondary{% endif %}">

                                    {{ task.priority }}

                                </span>

                            </div>

                            <small class="text-muted">

                                <i class="bi bi-tag"></i> {{ task.task_type or "General" }}

                            </small>

                            <br>

                            <small class="text-muted">

                                <i class="bi bi-calendar"></i> {{ task.due_date.strftime('%d %b %Y') if task.due_date else "No due date" }}

                            </small>

                            {% if task.is_overdue %}

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

                            {% endif %}

                            <div class="progress mt-2" style="height: 4px;">

                                <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>

                        </div>

                    </div>

                    {% else %}

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

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

                        No tasks

                    </p>

                    {% endfor %}

                </div>

            </div>

        </div>

        <!-- Completed -->
        <div class="col-md-4">

            <div class="card shadow-sm h-100">

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

                    <i class="bi bi-check-all"></i> Completed

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

                        {{ tasks|selectattr('status', 'equalto', 'Completed')|list|length }}

                    </span>

                </div>

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

                    {% for task in tasks if task.status == "Completed" %}

                    <div class="card mb-2 shadow-sm task-card" onclick="location.href='/task-board/{{ task.id }}'" style="cursor: pointer; opacity: 0.8;">

                        <div class="card-body">

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

                                <h6 class="mb-1">

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

                                    {{ task.title }}

                                </h6>

                                <span class="badge bg-{% if task.priority == 'Critical' %}danger{% elif task.priority == 'High' %}warning{% elif task.priority == 'Medium' %}info{% else %}secondary{% endif %}">

                                    {{ task.priority }}

                                </span>

                            </div>

                            <small class="text-muted">

                                <i class="bi bi-tag"></i> {{ task.task_type or "General" }}

                            </small>

                            <br>

                            <small class="text-muted">

                                <i class="bi bi-calendar"></i> Completed: {{ task.updated_at.strftime('%d %b %Y') if task.updated_at else "N/A" }}

                            </small>

                        </div>

                    </div>

                    {% else %}

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

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

                        No tasks

                    </p>

                    {% endfor %}

                </div>

            </div>

        </div>

    </div>

    <!-- ========================================================== -->
    <!-- ASSIGNED TO ME - FULL LIST -->
    <!-- ========================================================== -->

    <div class="card shadow-sm mt-4">

        <div class="card-header bg-dark text-white d-flex justify-content-between">

            <span><i class="bi bi-list-ul"></i> All My Tasks</span>

            <span class="badge bg-light text-dark">{{ tasks|length }} Tasks</span>

        </div>

        <div class="card-body p-0">

            <div class="table-responsive">

                <table class="table table-hover align-middle mb-0">

                    <thead class="table-light">

                        <tr>

                            <th>Task</th>

                            <th>Type</th>

                            <th>Status</th>

                            <th>Priority</th>

                            <th>Due Date</th>

                            <th>Progress</th>

                            <th></th>

                        </tr>

                    </thead>

                    <tbody>

                        {% for task in tasks %}

                        <tr onclick="location.href='/task-board/{{ task.id }}'" style="cursor: pointer;">

                            <td>

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

                                <br>

                                <small class="text-muted">{{ task.task_type or "General" }}</small>

                            </td>

                            <td>

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

                            </td>

                            <td>

                                <span class="badge bg-{% if task.status == 'New Request' %}secondary{% elif task.status == 'Assigned' %}primary{% elif task.status == 'Design' %}purple{% 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 %}">

                                    {{ task.status }}

                                </span>

                            </td>

                            <td>

                                <span class="badge bg-{% if task.priority == 'Critical' %}danger{% elif task.priority == 'High' %}warning{% elif task.priority == 'Medium' %}info{% else %}secondary{% endif %}">

                                    {{ task.priority }}

                                </span>

                            </td>

                            <td>

                                {% if task.due_date %}

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

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

                                    {% if task.is_overdue %}

                                    <i class="bi bi-exclamation-triangle-fill text-danger"></i>

                                    {% endif %}

                                </span>

                                {% else %}

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

                                {% endif %}

                            </td>

                            <td>

                                <div style="width: 80px;">

                                    <div class="progress" style="height: 6px;">

                                        <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>

                                    <small>{{ task.completion_percentage|round(0) }}%</small>

                                </div>

                            </td>

                            <td>

                                <i class="bi bi-chevron-right text-muted"></i>

                            </td>

                        </tr>

                        {% else %}

                        <tr>

                            <td colspan="7" class="text-center text-muted py-4">

                                <i class="bi bi-inbox fs-1 d-block mb-2"></i>

                                No tasks assigned to you yet.

                            </td>

                        </tr>

                        {% endfor %}

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>

<!-- ========================================================== -->
<!-- STYLES -->
<!-- ========================================================== -->

<style>

    .task-card {

        transition: transform 0.2s, box-shadow 0.2s;

    }

    .task-card:hover {

        transform: translateY(-2px);

        box-shadow: 0 4px 12px rgba(0,0,0,0.15);

    }

    .card-body {

        scrollbar-width: thin;

    }

    .card-body::-webkit-scrollbar {

        width: 4px;

    }

    .card-body::-webkit-scrollbar-thumb {

        background: #ccc;

        border-radius: 4px;

    }

    .card-body::-webkit-scrollbar-track {

        background: transparent;

    }

</style>

{% endblock %}