{% extends 'base.html' %}
{% load static%}


{% block title %}Cashier Report{% endblock title %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'CSS/cashier_report.css' %}">
{% endblock %}

{% block header%}Cashier Report{% endblock header%}

{% block extra %}{% endblock extra %}

{% block content %}
        <form method="get" class="date-form">
        <div class="input-group">
            <input required type="date" name="start" value="{{ start }}" class="input">
            <label class="user-label">From Date</label>
        </div>

        <div class="input-group">
            <input required type="date" name="end" value="{{ end }}" class="input">
            <label class="user-label">To Date</label>
        </div>

        <button type="submit" class="btn">Search</button>
        </form>

        {% if grouped_data %}
        <a href="{% url 'cashier_report_excel' %}?start={{ start }}&end={{ end }}">
            <button
                style="padding:8px 15px; background:#0d6efd; color:white; border:none; border-radius:5px; cursor:pointer;">Download
                Excel 📥</button>
        </a>

        <table border="1" cellpadding="4" cellspacing="0" style="border-collapse: collapse;  background:white; color:black;">

            <thead style=" background:#80a2ff !important; font-weight:bold;">
                <tr>
                    <th>Car ID</th>
                    <th>Conductor Name</th>
                    <th>Soda</th>
                    <th>Maji</th>
                    <th>Jumla (Soda + Maji)</th>
                    <th>Abiria Kwenda</th>
                    <th>Abiria Kurudi</th>
                    <th>Jumla Ya Abiria</th>
                    <th>Mtoaji</th>
                </tr>
            </thead>

            {% for day, records in grouped_data.items %}
            <!-- DAY HEADER -->
            <tr style="background:#d9f1ff;">
                <td colspan="9"><b>DAY – {{ day }}</b></td>
            </tr>

            {% for t in records %}
            <tr>
                <td>{{ t.car_id }}</td>
                <td>{{ t.user.username }}</td>
                <td>{{ t.soda_amount }}</td>
                <td>{{ t.water_amount }}</td>
                <td>{{ t.soda_amount|add:t.water_amount }}</td>
                <td>{{ t.tripstatics.passenger_number }}</td>
                <td>{{ t.tripstatics.return_passenger_number }}</td>
                <td>{{ t.tripstatics.passenger_number|add:t.tripstatics.return_passenger_number }}</td>
                <td>
                    {% if t.confirmed_by %}
                    {{ t.confirmed_by.username }}
                    {% else %}
                    None
                    {% endif %}
                </td>
            </tr>
            {% endfor %}

            {% endfor %}
            {% else %}
            <tt style="text-align: center;"><b>Please Find Data Between Two Relevant Dates</b></tt>
            {% endif %}
        </table>
{% endblock content %}