{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{% block title %}Drinks on Bus{% endblock %}</title>
    <meta name="description" content="{% block meta_description %}Buy drinks while traveling by bus in Tanzania{% endblock %}">
    <link rel="stylesheet" href="{% static 'CSS/search_car_transactions.css' %}">
  </head>

  <body>
    {% block content %}
      <!-- ===================== HEADER (ORIGINAL LOOK) ===================== -->
      <header style="display:flex; flex-direction:column; align-items:center; gap:15px; margin-bottom:20px;">
        <a href="{% url 'home' %}" class="button">
          Back Home<svg class="icon" viewBox="0 0 24 24" fill="currentColor">
            <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z" clip-rule="evenodd"></path>
          </svg>
        </a>

        <h2>Search Car Transactions</h2>

        <form method="GET" action="{% url 'search_car_transactions' %}">
          <div class="group">
            <svg viewBox="0 0 24 24" class="search-icon">
              <path d="M21.53 20.47l-3.66-3.66A8.96 8.96 0 0020 11a9 9 0 10-9 9 8.96 8.96 0 005.81-2.13l3.66 3.66a.75.75 0 001.06-1.06z" />
            </svg>

            <input class="input" type="search" name="q" list="car_list" placeholder="Search car, user, route..." value="{{ query }}" />
          </div>

          <!-- DATALISTS -->
          <datalist id="car_list">
            {% for car in cars_datalist %}
              <option value="{{ car.plate_number }}"></option>
            {% endfor %}
          </datalist>

          <datalist id="regions">
            {% for region in regions_datalist %}
              <option value="{{ region.name }}"></option>
            {% endfor %}
          </datalist>

          <!-- ORIGINAL BUTTON (RESTORED) -->
          <button type="submit" style="
        font-size:16px;
        font-weight:700;
        background:#2B3044;
        border:none;
        padding:12px 24px;
        margin-left:55px;
        border-radius:9px;
        cursor:pointer;
        box-shadow:0 4px 16px #2B3044;
      " onmousedown="this.style.transform='scale(0.93)'" onmouseup="this.style.transform='scale(1)'"><span style="
        background:linear-gradient(90deg,#866ee7,#ea60da,#ed8f57,#fbd41d,#2cca91);
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
      ">Search</span></button>
        </form>
        <nav>
          {% if messages %}
            <ul style="list-style: none;">
              {% for message in messages %}
                <li style="color: {% if message.tags == 'error' %}red{% else %}green
                  {% endif %};">{{ message }}</li>
              {% endfor %}
            </ul>
          {% endif %}
        </nav>
      </header>

      <!-- ===================== CONTENT ===================== -->
      <main>
        {% if transactions %}
          <h3>Results for: {{ query }}</h3>

          <div class="table-wrapper">
            <table class="responsive-table">
              <thead>
                <tr>
                  <th>Trans No</th>
                  <th>Car</th>
                  <th>User</th>
                  <th>Type</th>
                  <th>Soda</th>
                  <th>Water</th>
                  <th>Safari</th>
                  <th>Date</th>
                  <th>Return</th>
                  <th>Return Date</th>
                  <th>Total Soda</th>
                  <th>Total Water</th>
                  <th>Grand Total</th>
                </tr>
              </thead>

              <tbody>
                {% for t in transactions %}
                  {% if t.status == 'confirmed' %}
                    <tr>
                      <td data-label="Transaction No">{{ forloop.counter }}</td>
                      <td data-label="Car">{{ t.car_id }}</td>
                      <td data-label="User">{{ t.user.username }}</td>
                      <td data-label="Type">{{ t.transaction_type }}</td>
                      <td data-label="Soda">{{ t.soda_amount }}</td>
                      <td data-label="Water">{{ t.water_amount }}</td>

                      {% if t.tripstatics %}
                        <td data-label="Safari">{{ t.tripstatics.start }} → {{ t.tripstatics.destination }}</td>
                        <td data-label="Date">{{ t.tripstatics.trip_date }}</td>
                        <td data-label="Return">{{ t.tripstatics.return_start }} → {{ t.tripstatics.return_destination }}</td>
                        <td data-label="Return Date">{{ t.tripstatics.return_trip_date }}</td>
                      {% else %}
                        <td data-label="Trip" colspan="4">No trip assigned</td>
                      {% endif %}

                      <td data-label="Total Soda">
                        <strong>{{ t.soda_total }} TZS</strong>
                      </td>
                      <td data-label="Total Water">
                        <strong>{{ t.water_total }} TZS</strong>
                      </td>
                      <td data-label="Grand Total">
                        <strong>{{ t.grand_total }} TZS</strong>
                      </td>
                    </tr>
                  {% endif %}
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% endif %}
      </main>
    {% endblock %}

    <footer>
      <p style="text-align:center;color:#888;font-size:14px;">&copy; 2025 Drinks on Buses. All rights reserved.</p>
    </footer>
  </body>
</html>
