{% extends "base.html" %}

{% block title %}Cashiers Report - AsapLoads POS{% endblock %}

{% block header_title %}Cashier Performance Report{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">Cashier Performance Report</h5>
                <div class="d-flex gap-2">
                    {% if cashier_metrics %}
                    <a href="{% url 'export_sales_report' %}?start_date={{ start_date|date:'Y-m-d' }}&end_date={{ end_date|date:'Y-m-d' }}" 
                       class="btn btn-sm btn-success" title="Download sales report as CSV">
                        <i class="fas fa-file-csv"></i> Export Sales Report
                    </a>
                    {% endif %}
                    <a href="{% url 'reports' %}" class="btn btn-sm btn-secondary">
                        <i class="fas fa-arrow-left"></i> Back to Reports
                    </a>
                </div>
            </div>
            <div class="card-body">
                <!-- Date range filter -->
                <form method="get" action="{% url 'cashiers_report' %}" class="mb-4">
                    <div class="row g-3 align-items-end">
                        <div class="col-md-4">
                            <label for="start_date" class="form-label">Start Date</label>
                            <input type="date" id="start_date" name="start_date" class="form-control" 
                                value="{{ start_date|date:'Y-m-d' }}">
                        </div>
                        <div class="col-md-4">
                            <label for="end_date" class="form-label">End Date</label>
                            <input type="date" id="end_date" name="end_date" class="form-control" 
                                value="{{ end_date|date:'Y-m-d' }}">
                        </div>
                        <div class="col-md-4">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="fas fa-filter"></i> Apply Filter
                            </button>
                        </div>
                    </div>
                </form>

                {% if cashier_metrics %}
                <!-- Summary cards -->
                <div class="row mb-4">
                    <div class="col-md-3">
                        <div class="card bg-primary text-white">
                            <div class="card-body">
                                <h6 class="card-title">Total Cashiers</h6>
                                <h2 class="mb-0">{{ cashier_metrics|length }}</h2>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-success text-white">
                            <div class="card-body">
                                <h6 class="card-title">Top Performer</h6>
                                <h5 class="mb-0">{{ cashier_metrics.0.name }}</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-info text-white">
                            <div class="card-body">
                                <h6 class="card-title">Average Sales/Cashier</h6>
                                <h2 class="mb-0">
                                    {% with total_sales=0 %}
                                        {% for cashier in cashier_metrics %}
                                            {% with total_sales=total_sales|add:cashier.total_sales %}{% endwith %}
                                        {% endfor %}
                                        {{ total_sales|floatformat:0 }}
                                    {% endwith %}
                                </h2>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-warning text-white">
                            <div class="card-body">
                                <h6 class="card-title">Total Revenue</h6>
                                <h2 class="mb-0">
                                    {% with total_amount=0 %}
                                        {% for cashier in cashier_metrics %}
                                            {% with total_amount=total_amount|add:cashier.total_amount %}{% endwith %}
                                        {% endfor %}
                                        {{ total_amount|floatformat:2 }}
                                    {% endwith %}
                                </h2>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Cashiers table -->
                <div class="table-responsive">
                    <table class="table table-striped table-hover table-bordered">
                        <thead class="table-dark">
                            <tr>
                                <th>Cashier</th>
                                <th>Role</th>
                                <th class="text-center">Total Sales</th>
                                <th class="text-end">Total Amount</th>
                                <th class="text-end">Average Sale</th>
                                <th class="text-center">Items Sold</th>
                                <th class="text-center">Items/Sale</th>
                                <th class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for cashier in cashier_metrics %}
                            <tr>
                                <td class="align-middle">{{ cashier.name }}</td>
                                <td class="align-middle">{{ cashier.role|capfirst }}</td>
                                <td class="text-center align-middle">{{ cashier.total_sales }}</td>
                                <td class="text-end align-middle">{{ cashier.total_amount|floatformat:2 }}</td>
                                <td class="text-end align-middle">{{ cashier.average_sale|floatformat:2 }}</td>
                                <td class="text-center align-middle">{{ cashier.items_sold }}</td>
                                <td class="text-center align-middle">{{ cashier.items_per_sale|floatformat:1 }}</td>
                                <td class="text-center">
                                    <div class="d-flex flex-wrap justify-content-center gap-1">
                                        <a href="{% url 'cashier_detail_report' cashier.id %}?start_date={{ start_date|date:'Y-m-d' }}&end_date={{ end_date|date:'Y-m-d' }}" 
                                            class="btn btn-sm btn-primary">
                                            <i class="fas fa-chart-bar"></i> View
                                        </a>
                                        <a href="{% url 'export_cashier_sales_pdf_report' cashier.id %}?start_date={{ start_date|date:'Y-m-d' }}&end_date={{ end_date|date:'Y-m-d' }}" 
                                            class="btn btn-sm btn-info" title="Download PDF report to share with admin">
                                            <i class="fas fa-file-pdf"></i> PDF
                                        </a>
                                        <a href="{% url 'export_cashier_sales_report' cashier.id %}?start_date={{ start_date|date:'Y-m-d' }}&end_date={{ end_date|date:'Y-m-d' }}" 
                                            class="btn btn-sm btn-success">
                                            <i class="fas fa-file-csv"></i> CSV
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="alert alert-info">
                    <i class="fas fa-info-circle"></i> No cashier data available for the selected date range.
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}