{% load static %}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Transaction receipt</title>
  <link
    href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Roboto+Mono:wght@400;700&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="{% static 'CSS/transaction_data.css' %}">
</head>

<body>

  <div class="receipt">
    <header>
      <div class="brand">MICHAEL DRINKS STORE</div>
      <div class="sub">Transaction Receipt — Sales Receipt</div>
      <div class=""><strong>{{ transaction.tripstatics.car_id }}</strong></div>
    </header>

    <div class="section">
      <div class="row">
        <div class="muted"><tt>USERNAME</tt></div>
        <div class="booking"><tt>{{ transaction.user.username }}</tt></div>
      </div>
      <div class="row">
        <div class="muted"><tt>Transaction type</tt></div>
        <div class="small"><tt>{{ transaction.transaction_type|title }}</tt></div>
      </div>
      <div class="row">
        <div class="muted"><tt>status</tt> </div>
        <div class="small"><tt>{{ transaction.status|title }}</tt> </div>
      </div>
      <div class="row">
        <div class="muted"><tt>Journey route</tt> </div>
        <div class="small"><tt>{{ transaction.tripstatics.start }} TO {{ transaction.tripstatics.destination }} </tt> </div>
      </div>
      <div class="row">
        <div class="muted"><tt>Date</tt> </div>
        <div class="small"><tt>{{transaction.created_on}}</tt> </div>
      </div>
    </div>

    <div class="section">
      <div class="row">
        <div class="muted"><tt>Number of Soda</tt> </div>
        <div class="muted"><tt></tt> {{ transaction.soda_amount}}</div>
      </div>
      <div class="row">
        <div class="muted"><tt> Number of Water</tt></div>
        <div class="muted"><tt>{{ transaction.water_amount}}</tt></div>
      </div>
      {% if transaction.status == "confirmed" %}
      <div class="row">
        <div class="muted"><tt>Total Amount</tt> </div>
        <div class="amount"><tt>TZS {{total_price}}</tt> </div>
      </div>
      <div>Transaction has been {{ transaction.status }}</div>
      {% elif transaction.status == "pending"%}
      <div class="row"><tt></tt> Transaction is {{ transaction.status }} </div>
      {% else %}
      <div class="row"><tt></tt> Transaction has been {{ transaction.status }} by {{ transaction.confirmed_by.username }}</div>
      {% endif %}
    </div>
    {% if transaction.transaction_type == "Add" %}
    <div style="display: grid; justify-content: center; height: 30vh;">
     NIMEONGEZA MZIGO
    </div>
    {% else %}
    
    <div class="section details">
      <div><strong><tt>Going Trip Date : </strong>{{ transaction.tripstatics.trip_date }}</tt> </div>
      <div><strong><tt>Going Trip :</strong> {{ transaction.tripstatics.start }} -- {{ transaction.tripstatics.destination}}</tt> </div>
      <div><strong><tt>Number of passengers : </strong>{{ transaction.tripstatics.passenger_number }}Psg</tt> </div>
      <br><br>
      <div><strong><tt>Return Trip Date : </strong> {{ transaction.tripstatics.return_trip_date }}</tt> </div>
      <div><strong><tt>Return Trip : </strong> {{ transaction.tripstatics.return_start }} — {{transaction.tripstatics.return_destination }}</tt> </div>
      <div><strong><tt>Number of passengers : </strong> {{ transaction.tripstatics.return_passenger_number }}Psg</tt> </div>
    </div>
    {% endif %}
    
    <div class="section">
      <div class="row">
        <div class="muted"><tt>Requested at:</tt> </div>
        <div class="agent"><tt>{{transaction.created_at}} <b>On</b> {{transaction.created_on}}</tt> </div>
      </div>
    </div>



    <footer>
      <div class="small"><a href="{% url 'home'%}">HOME</a></div>
      {% if transaction.status == "confirmed" %}
      <button onclick="window.print()">🖨</button>
      {% else %}
        {% if user.is_staff %}
          <div class="small"><a href="{% url 'pending_transactions' %}">Back to Pending Transactions</a></div>
        
          {% else %}
          {% endif %}
      {% endif%}
      <a href="{% url 'download_receipt' transaction.id %}" class="btn btn-primary">Download PDF</a>

      <div class="small">12/11/2025 15:14 — System version: 1.0(25)</div>
      <div class="small">Thank you for using our services</div>
    </footer>
  </div>

</body>

</html>