{% 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>
                Project Reports
            </h2>
            <p class="text-muted mb-0">View and export project reports by date range</p>
        </div>
        <div>
            <a href="/projects" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> Back to Projects
            </a>
        </div>
    </div>

    <!-- Filter Bar -->
    <div class="card shadow-sm mb-4">
        <div class="card-header bg-primary text-white">
            <i class="bi bi-funnel"></i> Filters
        </div>
        <div class="card-body">
            <form method="get" action="/projects/reports" class="row g-3">
                <div class="col-md-2">
                    <label class="form-label">Period</label>
                    <select class="form-select" name="period" id="periodSelect" onchange="toggleCustomRange()">
                        <option value="day" {% if period == 'day' %}selected{% endif %}>Today</option>
                        <option value="week" {% if period == 'week' %}selected{% endif %}>This Week</option>
                        <option value="month" {% if period == 'month' %}selected{% endif %}>This Month</option>
                        <option value="custom" {% if period == 'custom' %}selected{% endif %}>Custom Range</option>
                    </select>
                </div>
                <div class="col-md-2" id="startDateDiv" {% if period != 'custom' %}style="display:none;"{% endif %}>
                    <label class="form-label">Start Date</label>
                    <input type="date" class="form-control" name="start_date" value="{{ start_date }}">
                </div>
                <div class="col-md-2" id="endDateDiv" {% if period != 'custom' %}style="display:none;"{% endif %}>
                    <label class="form-label">End Date</label>
                    <input type="date" class="form-control" name="end_date" value="{{ end_date }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Status</label>
                    <select class="form-select" name="status_filter">
                        <option value="">All Statuses</option>
                        {% for status in statuses %}
                        <option value="{{ status }}" {% if status_filter == status %}selected{% endif %}>{{ status }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Assigned To</label>
                    <select class="form-select" name="assigned_filter">
                        <option value="">All Users</option>
                        {% for user in users %}
                        <option value="{{ user.username }}" {% if assigned_filter == user.username %}selected{% endif %}>
                            {{ user.full_name or user.username }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-search"></i> Apply
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Export Buttons -->
    <div class="mb-4">
        <div class="d-flex gap-2 flex-wrap">
            <a href="/projects/reports/export-pdf?period={{ period }}&start_date={{ start_date }}&end_date={{ end_date }}&status_filter={{ status_filter }}&assigned_filter={{ assigned_filter }}" 
               class="btn btn-danger">
                <i class="bi bi-filetype-pdf"></i> Export PDF
            </a>
            <a href="/projects/reports/export-csv?period={{ period }}&start_date={{ start_date }}&end_date={{ end_date }}&status_filter={{ status_filter }}&assigned_filter={{ assigned_filter }}" 
               class="btn btn-success">
                <i class="bi bi-filetype-csv"></i> Export CSV
            </a>
        </div>
    </div>

    <!-- Summary 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 Projects</small>
                    <h2 class="text-white">{{ total_projects }}</h2>
                    <small>Period: {{ period_label }}</small>
                </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">Total Budget</small>
                    <h2 class="text-white">{{ "%.2f"|format(total_budget) }}</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">Total Actual Cost</small>
                    <h2>{{ "%.2f"|format(total_actual) }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow-sm border-0 bg-info text-white">
                <div class="card-body">
                    <small class="text-white-50">Variance</small>
                    <h2 class="text-white">{{ "%.2f"|format(total_budget - total_actual) }}</h2>
                </div>
            </div>
        </div>
    </div>

    <!-- Breakdown Charts -->
    <div class="row g-4 mb-4">
        <div class="col-md-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-secondary text-white">
                    <i class="bi bi-pie-chart"></i> By Status
                </div>
                <div class="card-body">
                    {% for status, count in status_breakdown.items() %}
                    <div class="d-flex justify-content-between mb-2">
                        <span>
                            <span class="badge bg-{% if status == 'Pipeline' %}secondary{% elif status == 'Design' %}info{% elif status == 'Construction' %}warning{% elif status == 'Completed' %}success{% elif status == 'On Hold' %}danger{% else %}dark{% endif %}">
                                {{ status }}
                            </span>
                        </span>
                        <strong>{{ count }}</strong>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-secondary text-white">
                    <i class="bi bi-pie-chart"></i> By Priority
                </div>
                <div class="card-body">
                    {% for priority, count in priority_breakdown.items() %}
                    <div class="d-flex justify-content-between mb-2">
                        <span>
                            <span class="badge bg-{% if priority == 'Critical' %}danger{% elif priority == 'High' %}warning{% elif priority == 'Medium' %}info{% else %}secondary{% endif %}">
                                {{ priority }}
                            </span>
                        </span>
                        <strong>{{ count }}</strong>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-secondary text-white">
                    <i class="bi bi-people"></i> By Assigned User
                </div>
                <div class="card-body">
                    {% for user, count in assignment_breakdown.items() %}
                    <div class="d-flex justify-content-between mb-2">
                        <span>{{ user }}</span>
                        <strong>{{ count }}</strong>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <!-- Project List -->
    <div class="card shadow-sm">
        <div class="card-header bg-dark text-white d-flex justify-content-between">
            <span><i class="bi bi-list-ul"></i> Projects ({{ total_projects }})</span>
            <span class="badge bg-light text-dark">{{ period_label }}</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>Code</th>
                            <th>Project Name</th>
                            <th>Client</th>
                            <th>Status</th>
                            <th>Assigned To</th>
                            <th>Budget</th>
                            <th>Actual</th>
                            <th>Progress</th>
                            <th>Created</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for project in projects %}
                        <tr>
                            <td><code>{{ project.project_code }}</code></td>
                            <td>{{ project.project_name|truncate(25) }}</td>
                            <td>{{ project.customer.company_name|truncate(20) }}</td>
                            <td>
                                <span class="badge bg-{% if project.status == 'Pipeline' %}secondary{% elif project.status == 'Design' %}info{% elif project.status == 'Construction' %}warning{% elif project.status == 'Completed' %}success{% elif project.status == 'On Hold' %}danger{% else %}dark{% endif %}">
                                    {{ project.status or "Unknown" }}
                                </span>
                            </td>
                            <td>{{ project.assigned_to or "Unassigned" }}</td>
                            <td>{{ "%.2f"|format(project.budget or 0) }}</td>
                            <td>{{ "%.2f"|format(project.actual_cost or 0) }}</td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="progress w-75 me-2" style="height: 6px;">
                                        <div class="progress-bar bg-{% if (project.progress or 0) < 30 %}danger{% elif (project.progress or 0) < 70 %}warning{% else %}success{% endif %}" 
                                             role="progressbar" style="width: {{ project.progress or 0 }}%;"></div>
                                    </div>
                                    <small>{{ project.progress or 0 }}%</small>
                                </div>
                            </td>
                            <td>{{ project.created_at.strftime('%d %b %Y') if project.created_at else "" }}</td>
                            <td>
                                <a href="/projects/{{ project.id }}" class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-eye"></i>
                                </a>
                            </td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="10" class="text-center text-muted py-4">
                                <i class="bi bi-inbox fs-1 d-block mb-2"></i>
                                No projects found for the selected period
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<script>
    function toggleCustomRange() {
        const period = document.getElementById('periodSelect').value;
        const startDiv = document.getElementById('startDateDiv');
        const endDiv = document.getElementById('endDateDiv');
        
        if (period === 'custom') {
            startDiv.style.display = 'block';
            endDiv.style.display = 'block';
        } else {
            startDiv.style.display = 'none';
            endDiv.style.display = 'none';
        }
    }
</script>

{% endblock %}