{% load static %}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="<link rel="stylesheet" href="{% static 'CSS/home.css' %}">">
    <style>
      body {
        font-family: Arial;
        font-size: 14px;
      }
      .box {
        border: 1px solid black;
        padding: 10px;
      }
      table {
        width: 100%;
        border-collapse: collapse;
      }
      th,
      td {
        border: 1px solid black;
        padding: 6px;
      }
      .section {
        text-align: center;
      }
      
      h4 {
        text-align: center;
        color: blue;
      }
    </style>
  </head>
  <body>
    <h2>Transaction Receipt of {{ transaction.created_on }}</h2>

    <h4 stayle="text-align:center ">Order Status is <big>{{ transaction.status }}</big></h4>

    <div class="box">
      <p>
        <strong>User:</strong> {{ transaction.user.username }}
      </p>

      <p>
        <strong>Car:</strong> {{ transaction.car_id }}
      </p>

      <p>
        <strong>Transaction ID:</strong> {{ transaction.id }}
      </p>
    </div>

    <h3>Details</h3>
    <table>
      <tr>
        <th>Soda Amount</th>
        <td>{{ transaction.soda_amount }}</td>
      </tr>
      <tr>
        <th>Water Amount</th>
        <td>{{ transaction.water_amount }}</td>
      </tr>
      <tr>
        <th>Total</th>
        <td>{{ transaction.grand_total }} TZS</td>
      </tr>
    </table>
    <h3>Journey</h3>
    <table>
      <tr>
        <th>Going Trip Date</th>
        <td>{{ transaction.tripstatics.trip_date }}</td>
      </tr>
      <tr>
        <th>Going Trip</th>
        <td>{{ transaction.tripstatics.start }} — {{ transaction.tripstatics.destination }}</td>
      </tr>
      <tr>
        <th>Number of passengers</th>
        <td>
          {{ transaction.tripstatics.passenger_number }} <sup>psg</sup>
        </td>
      </tr>
    </table>
    <br /><br />
    <h3>Journey Return</h3>
    <table>
      <tr>
        <th>Return Trip Date</th>
        <td>{{ transaction.tripstatics.return_trip_date }}</td>
      </tr>
      <tr>
        <th>Return Trip</th>
        <td>{{ transaction.tripstatics.return_start }} — {{ transaction.tripstatics.return_destination }}</td>
      </tr>
      <tr>
        <th>Number of passengers</th>
        <td>
          {{ transaction.tripstatics.return_passenger_number }} <sup>psg</sup>
        </td>
      </tr>
    </table>

    <br /><br />
    <div class="section">
      <div>
        <strong>Name :</strong>
        {{ transaction.user.first_name|capfirst }} {{ transaction.user.last_name|capfirst }}
      </div>

      <div>
        <strong>Contact :</strong>
        {{ transaction.user.profile.phone }}
      </div>
    </div>
  </body>
</html>
