{% extends "base.html" %}

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

<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow mb-6">
    <form method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div>
            <label for="project_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                <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="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                <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="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                <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">
        </div>
        <div>
            <label for="end_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                <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">
        </div>
        <div class="self-end">
            <button type="submit" class="bg-primary text-white px-4 py-2 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 gap-2">
        <a href="{{ url_for('reports.export_project_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-lg shadow">
    <table class="w-full text-left">
        <thead>
            <tr>
                <th class="p-2">Project</th>
                <th class="p-2">Total Hours</th>
                <th class="p-2">Billable Hours</th>
                <th class="p-2">Billable Amount</th>
            </tr>
        </thead>
        <tbody>
            {% for project in projects_data %}
            <tr class="border-b border-border-light dark:border-border-dark">
                <td class="p-2">{{ project.name }}</td>
                <td class="p-2">{{ "%.2f"|format(project.total_hours) }}</td>
                <td class="p-2">{{ "%.2f"|format(project.billable_hours) }}</td>
                <td class="p-2">{{ "%.2f"|format(project.billable_amount) }}</td>
            </tr>
            {% else %}
            <tr>
                <td colspan="4" class="p-4 text-center">No data for the selected period.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}