{% extends 'admin-dashboard.html' %}
{% load humanize %}
{% block content %}

<div class="row">
    <div class="col-12">
        <h1 class="mb-4 fw-bold">Project Reports</h1>

        <div class="card border-0 shadow-lg rounded-4 flex-fill">

            <div class="card-header bg-white rounded-top-4 border-0 d-flex justify-content-end align-items-center p-4">
                <button type="button" class="btn btn-primary fw-semibold rounded-pill py-2 px-3"
                    data-bs-toggle="offcanvas"
                    data-bs-target="#offcanvasFinalBeneficiaryFilter"
                    aria-controls="offcanvasFinalBeneficiaryFilter">
                    <i class="align-middle me-1" data-feather="filter"></i> Advanced Filter
                </button>
            </div>

            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasFinalBeneficiaryFilter" aria-labelledby="offcanvasFinalBeneficiaryFilterLabel">
                <div class="offcanvas-header border-bottom">
                    <h5 class="offcanvas-title fw-bold" id="offcanvasFinalBeneficiaryFilterLabel">
                        <i class="align-middle me-2" data-feather="filter"></i> Filter Projects
                    </h5>
                    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                    <form method="get" class="row g-3 align-items-end">

                        <div class="col-12">
                            <h6 class="mt-0 mb-3 fw-bold text-dark">Search Criteria</h6>
                        </div>

                        <div class="col-12">
                            <label for="project_title" class="form-label small text-muted mb-1">Project Title</label>
                            <input type="text" class="form-control" id="project_title" name="project_title" placeholder="Enter Project Title">
                        </div>
                        <div class="col-12">
                            <label for="beneficiary_name" class="form-label small text-muted mb-1">Beneficiary Name</label>
                            <input type="text" class="form-control" id="beneficiary_name" name="beneficiary_name" placeholder="Enter Beneficiary Name">
                        </div>

                        <div class="col-12 mt-4">
                            <h6 class="mb-3 fw-bold text-dark">Sorting Options</h6>
                        </div>

                        <div class="col-12">
                            <label for="order_by_goal" class="form-label small text-muted mb-1">Sort by Goal</label>
                            <select id="order_by_goal" name="goal_order" class="form-select">
                                <option value="">Default (Latest)</option>
                                <option value="asc">Goal Ascending</option>
                                <option value="desc">Goal Descending</option>
                            </select>
                        </div>

                        <div class="col-12 text-end mt-4 pt-3 border-top">
                            <button type="submit" class="btn btn-primary fw-semibold rounded-pill py-2 px-3 w-100 mb-2">
                                <i class="align-middle me-1" data-feather="check"></i> Apply Filters
                            </button>
                            <a href="." class="btn btn-outline-secondary fw-semibold rounded-pill py-2 px-3 w-100">
                                <i class="align-middle me-1" data-feather="x"></i> Clear Filters
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-borderless align-middle mb-0">

                        <thead class="table-dark">
                            <tr>
                                <th class="text-white small fw-bold text-uppercase ps-4">#</th>
                                <th class="text-white small fw-bold text-uppercase">Project Title</th>
                                <th class="text-white small fw-bold text-uppercase">Beneficiary</th>
                                <th class="text-white small fw-bold text-uppercase">Success Date</th>
                                <th class="text-white small fw-bold text-uppercase">Goal</th>
                                <th class="text-white small fw-bold text-uppercase">Total Tiles</th>
                                <th class="text-white small fw-bold text-uppercase">Transactions</th>
                                <th class="text-center text-white small fw-bold text-uppercase pe-4">Actions</th>
                            </tr>
                        </thead>

                        <tbody>
                        {% for p in project %}
                        <tr>
                            <td class="ps-4">{{ forloop.counter }}</td>
                            <td>
                                <a href="/administrator/single-project/{{ p.id }}/" class="text-decoration-none fw-bold text-dark">
                                    {{ p.title }}
                                </a>
                            </td>
                            <td class="fw-bold">{{ p.beneficiary.first_name }} {{ p.beneficiary.last_name }}</td>
                            <td>{{ p.closed_by|date:"d M, Y" }}</td>
                            <td class="fw-bold text-nowrap text-success">₹{{ p.funding_goal|floatformat:2|intcomma }}</td>
                            <td class="text-nowrap">{{ p.tiles }} tiles</td>
                            <td>{{ p.tra }}</td>

                            <td class="text-center pe-4 text-nowrap">
                                {% if p not in reports %}
                                    <a class="btn btn-sm btn-info rounded-pill px-3" href="/administrator/generate-report/{{ p.id }}/" title="Generate New Report">
                                        <i class="align-middle" data-feather="file-plus"></i>
                                    </a>
                                {% endif %}

                                {% for r in reports %}
                                    {% if r.project.id == p.id %}
                                        <a class="btn btn-sm btn-primary rounded-pill px-3" href="{{ r.report_pdf.url }}" target="_blank" rel="noopener noreferrer" title="View Generated Report">
                                            <i class="align-middle" data-feather="file-text"></i>
                                        </a>
                                        {% comment %} Note: Since 'break' is illegal, this link will render once for every report found. We assume one report per project. {% endcomment %}
                                    {% endif %}
                                {% endfor %}

                                <a class="btn btn-sm btn-secondary rounded-pill px-3 ms-2" href="/administrator/single-project/{{ p.id }}/" title="View Project Details">
                                    <i class="align-middle" data-feather="eye"></i>
                                </a>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="8" class="text-center p-5">
                                <div class="alert alert-warning m-0 rounded-3" role="alert">
                                    No completed projects found matching the criteria.
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

    {% endblock %}