{% 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-bar-chart-line text-primary"></i>
                Task Reports
            </h2>

            <p class="text-muted mb-0">
                Comprehensive overview and analysis of all engineering tasks
            </p>

        </div>

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

            <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 Tasks</small>

                    <h2 class="text-white">{{ total_tasks }}</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>{{ in_progress_tasks }}</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">{{ completed_tasks }}</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">{{ overdue_tasks }}</h2>

                </div>

            </div>

        </div>

    </div>

    <!-- ========================================================== -->
    <!-- FILTER & EXPORT SECTION -->
    <!-- ========================================================== -->

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

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

            <i class="bi bi-funnel"></i>

            Filters & Export

        </div>

        <div class="card-body">

            <form method="get" action="/task-board/reports" class="row g-3">

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

                    <label class="form-label">Department</label>

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

                        <option value="">All Departments</option>

                        <option value="Fabrication" {% if request.query_params.get('department') == 'Fabrication' %}selected{% endif %}>🔧 Fabrication</option>

                        <option value="Machining" {% if request.query_params.get('department') == 'Machining' %}selected{% endif %}>⚙️ Machining</option>

                        <option value="Assembly" {% if request.query_params.get('department') == 'Assembly' %}selected{% endif %}>🔩 Assembly</option>

                        <option value="Maintenance" {% if request.query_params.get('department') == 'Maintenance' %}selected{% endif %}>🛠️ Maintenance</option>

                        <option value="Design" {% if request.query_params.get('department') == 'Design' %}selected{% endif %}>📐 Design</option>

                        <option value="QA/QC" {% if request.query_params.get('department') == 'QA/QC' %}selected{% endif %}>🔬 QA/QC</option>

                        <option value="Procurement" {% if request.query_params.get('department') == 'Procurement' %}selected{% endif %}>📦 Procurement</option>

                    </select>

                </div>

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

                    <label class="form-label">Status</label>

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

                        <option value="">All Statuses</option>

                        <option value="New Request" {% if request.query_params.get('status_filter') == 'New Request' %}selected{% endif %}>📋 New Request</option>

                        <option value="Assigned" {% if request.query_params.get('status_filter') == 'Assigned' %}selected{% endif %}>🔧 Assigned</option>

                        <option value="Design" {% if request.query_params.get('status_filter') == 'Design' %}selected{% endif %}>📐 Design</option>

                        <option value="Material Planning" {% if request.query_params.get('status_filter') == 'Material Planning' %}selected{% endif %}>📦 Material Planning</option>

                        <option value="In Progress" {% if request.query_params.get('status_filter') == 'In Progress' %}selected{% endif %}>⚙️ In Progress</option>

                        <option value="QA/Review" {% if request.query_params.get('status_filter') == 'QA/Review' %}selected{% endif %}>✅ QA/Review</option>

                        <option value="Completed" {% if request.query_params.get('status_filter') == 'Completed' %}selected{% endif %}>🚀 Completed</option>

                        <option value="Blocked" {% if request.query_params.get('status_filter') == 'Blocked' %}selected{% endif %}>🛑 Blocked</option>

                        <option value="Cancelled" {% if request.query_params.get('status_filter') == 'Cancelled' %}selected{% endif %}>❌ Cancelled</option>

                    </select>

                </div>

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

                    <label class="form-label">Assignee</label>

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

                        <option value="">All Assignees</option>

                        {% for user in users %}

                        <option value="{{ user.username }}" {% if request.query_params.get('assignee') == user.username %}selected{% endif %}>
                            {{ user.full_name or user.username }}
                        </option>

                        {% endfor %}

                    </select>

                </div>

                <div class="col-md-3 d-flex align-items-end">

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

                        <i class="bi bi-search"></i> Apply Filters

                    </button>

                </div>

            </form>

            <!-- Export Buttons -->
            <div class="mt-3">

                <a href="/task-board/reports/export-pdf?{{ request.query_params }}" class="btn btn-danger">

                    <i class="bi bi-filetype-pdf"></i> Export PDF

                </a>

                <a href="/task-board/reports/export-csv?{{ request.query_params }}" class="btn btn-success">

                    <i class="bi bi-filetype-csv"></i> Export CSV

                </a>

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

                    <i class="bi bi-arrow-clockwise"></i> Reset Filters

                </a>

            </div>

        </div>

    </div>

    <!-- ========================================================== -->
    <!-- BREAKDOWN CHARTS -->
    <!-- ========================================================== -->

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

        <!-- Department Breakdown -->
        <div class="col-md-4">

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

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

                    <i class="bi bi-building"></i> By Department

                </div>

                <div class="card-body">

                    {% for dept, count in departments.items() %}

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

                        <span>{{ dept }}</span>

                        <span class="badge bg-primary">{{ count }}</span>

                    </div>

                    {% else %}

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

                    {% endfor %}

                </div>

            </div>

        </div>

        <!-- Assignee Breakdown -->
        <div class="col-md-4">

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

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

                    <i class="bi bi-people"></i> By Assignee

                </div>

                <div class="card-body">

                    {% for assignee, count in assignees.items() %}

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

                        <span>{{ assignee }}</span>

                        <span class="badge bg-success">{{ count }}</span>

                    </div>

                    {% else %}

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

                    {% endfor %}

                </div>

            </div>

        </div>

        <!-- Status Breakdown -->
        <div class="col-md-4">

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

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

                    <i class="bi bi-pie-chart"></i> By Status

                </div>

                <div class="card-body">

                    {% set status_counts = {} %}

                    {% for task in tasks %}

                        {% set status = task.status %}

                        {% if status_counts.update({status: status_counts.get(status, 0) + 1}) %}{% endif %}

                    {% endfor %}

                    {% for status, count in status_counts.items() %}

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

                        <span>

                            {% if status == 'New Request' %}📋{% elif status == 'Assigned' %}🔧{% elif status == 'Design' %}📐{% elif status == 'Material Planning' %}📦{% elif status == 'In Progress' %}⚙️{% elif status == 'QA/Review' %}✅{% elif status == 'Completed' %}🚀{% elif status == 'Blocked' %}🛑{% elif status == 'Cancelled' %}❌{% endif %}

                            {{ status }}

                        </span>

                        <span class="badge bg-warning text-dark">{{ count }}</span>

                    </div>

                    {% else %}

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

                    {% endfor %}

                </div>

            </div>

        </div>

    </div>

    <!-- ========================================================== -->
    <!-- TASK LIST -->
    <!-- ========================================================== -->

    <div class="card shadow-sm">

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

            <span><i class="bi bi-list-ul"></i> Task List ({{ total_tasks }})</span>

            <span class="badge bg-light text-dark">{{ request.query_params.get('department', 'All') }}</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>Title</th>

                            <th>Type</th>

                            <th>Department</th>

                            <th>Status</th>

                            <th>Priority</th>

                            <th>Assigned To</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.id }}</small>

                            </td>

                            <td>

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

                            </td>

                            <td>

                                {{ task.department or "Unassigned" }}

                            </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 %}">

                                    {% if task.status == 'New Request' %}📋{% elif task.status == 'Assigned' %}🔧{% elif task.status == 'Design' %}📐{% elif task.status == 'Material Planning' %}📦{% elif task.status == 'In Progress' %}⚙️{% elif task.status == 'QA/Review' %}✅{% elif task.status == 'Completed' %}🚀{% elif task.status == 'Blocked' %}🛑{% 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>

                                {{ task.assigned_to or "Unassigned" }}

                            </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-{% if task.completion_percentage|round(0) < 30 %}danger{% elif task.completion_percentage|round(0) < 70 %}warning{% else %}success{% endif %}" 

                                             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="9" class="text-center text-muted py-4">

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

                                No tasks found matching the criteria

                            </td>

                        </tr>

                        {% endfor %}

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>

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

<style>

    .bg-purple {

        background-color: #6f42c1;

    }

</style>

{% endblock %}