{% extends "base.html" %}

{% block content %}
<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold">{{ _('Task Report') }}</h1>
</div>

<div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm mb-6">
    <form method="GET" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
        <div>
            <label for="project_id" class="form-label">
                <i class="fas fa-project-diagram mr-1"></i>Project
            </label>
            <select name="project_id" id="project_id" class="form-input">
                <option value="">All Projects</option>
                {% for project in projects %}
                <option value="{{ project.id }}" {% if selected_project == project.id %}selected{% endif %}>{{ project.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <label for="user_id" class="form-label">
                <i class="fas fa-user mr-1"></i>User
            </label>
            <select name="user_id" id="user_id" class="form-input">
                <option value="">All Users</option>
                {% for user in users %}
                <option value="{{ user.id }}" {% if selected_user == user.id %}selected{% endif %}>{{ user.display_name }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <label for="start_date" class="form-label">
                <i class="fas fa-calendar mr-1"></i>Start Date
            </label>
            <input type="date" name="start_date" id="start_date" value="{{ start_date }}" class="form-input user-date-input">
        </div>
        <div>
            <label for="end_date" class="form-label">
                <i class="fas fa-calendar mr-1"></i>End Date
            </label>
            <input type="date" name="end_date" id="end_date" value="{{ end_date }}" class="form-input user-date-input">
        </div>
        <div class="self-end">
            <button type="submit" class="bg-primary text-white px-4 py-2 min-h-[44px] rounded-lg hover:bg-primary/90 transition">
                <i class="fas fa-filter mr-2"></i>Filter
            </button>
        </div>
    </form>
    
    <!-- Export Buttons -->
    <div class="mt-4 flex flex-wrap gap-2">
        <a href="{{ url_for('reports.export_task_excel', project_id=selected_project or '', user_id=selected_user or '', start_date=start_date, end_date=end_date) }}" 
           class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 inline-flex items-center">
            <i class="fas fa-file-excel mr-2"></i>{{ _('Export to Excel') }}
        </a>
    </div>
</div>

<div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm">
    <table class="w-full text-left responsive-cards">
        <thead>
            <tr>
                <th class="p-2">Task</th>
                <th class="p-2">Project</th>
                <th class="p-2">Status</th>
                <th class="p-2">Completed At</th>
                <th class="p-2">Hours</th>
            </tr>
        </thead>
        <tbody>
            {% for task_row in tasks %}
            <tr class="border-b border-border-light dark:border-border-dark">
                <td class="p-2" data-label="Task">{{ task_row.task.name }}</td>
                <td class="p-2" data-label="Project">{{ task_row.project.name }}</td>
                <td class="p-2" data-label="Status">
                    <span class="px-2 py-1 rounded text-xs font-medium
                        {% if task_row.status == 'done' %}bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200
                        {% elif task_row.status == 'in_progress' %}bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200
                        {% elif task_row.status == 'review' %}bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200
                        {% elif task_row.status == 'cancelled' %}bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200
                        {% else %}bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200{% endif %}">
                        {{ task_row.status.replace('_', ' ').title() }}
                    </span>
                </td>
                <td class="p-2" data-label="Completed At">
                    {% if task_row.completed_at %}
                        {{ task_row.completed_at|user_date }}
                    {% else %}
                        <span class="text-gray-400 dark:text-gray-500">-</span>
                    {% endif %}
                </td>
                <td class="p-2" data-label="Hours">{{ "%.2f"|format(task_row.hours) }}</td>
            </tr>
            {% else %}
            <tr>
                <td colspan="5" class="p-8">
                    <div class="flex flex-col items-center justify-center text-center">
                        <div class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-gray-100 dark:bg-gray-800 mb-2">
                            <i class="fas fa-tasks text-xl text-text-muted-light dark:text-text-muted-dark"></i>
                        </div>
                        <p class="text-text-muted-light dark:text-text-muted-dark font-medium">{{ _('No tasks with logged time for the selected period.') }}</p>
                        <p class="text-sm text-text-muted-light dark:text-text-muted-dark mt-1">{{ _('Try a different date range or log time on tasks.') }}</p>
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}