{% extends 'base.html' %}

{% block title %}
  User Transactions
{% endblock %}

{% block head %}
    User Transactions
{% endblock %}

{% block header %}
    User Transactions - Your Past Requests
{% endblock %}

{% block content %}


<details style="margin-top:30px;">
    <summary style="cursor:pointer; font-weight:bold; color:#0d6efd; text-align:center; font-size:1.2rem;">📋 Past
        Requests</summary>
    <div style="overflow-x:auto; margin-top:10px;">
        <table border="5" cellpadding="5" style=" border: 1px solid black;
                border-collapse: collapse; color: #212529; text-align: center;">
            <thead>
                <tr style="background:#; font-size:1rem;">
                    <th>Car Id</th>
                    <th>Transaction Type</th>
                    <th>No of Drinks</th>
                    <th>Status</th>
                    <th>Created at</th>
                </tr>
            </thead>
            <tbody
                style="text-align:center; table-layout: auto; color:#ffffff; font-size:1rem; background-color: #bd7d08;">
                {% for tx in request.user.transaction_set.all %}

                <tr>
                    <td>{{tx.car_id}}</td>
                    <td>{{ tx.transaction_type|title }}</td>
                    <td>Soda: {{ tx.soda_amount }}, Water: {{ tx.water_amount }}</td>
                    <td>{{ tx.status|title }}</td>
                    <td>Created at: {{ tx.created_at }} <b>On</b> {{ tx.created_on }}</td>

                </tr>

                {% empty %}
                <div style="text-align: center; margin-top: 1rem;"><b>No requests yet</b></div>

                {% endfor %}
            </tbody>
        </table>
    </div>
  </details>


{% endblock%}

{% comment %} 
<style>
    @media (max-width: 768px) {
    .request_take table {
        table-layout: auto;


    }

    .request_take th,
    .request_take td {
        text-align: center;
        padding: 1px;
        font-size: 1rem;

    }

    .request_take {
        padding: 10px;
        margin: 0;
        max-width: 100%;
    }

    .request_take summary {
        font-size: 1.3rem;
        /* Larger collapsible title */
    }
}
</style>
 {% endcomment %}