{% extends "base.j2" %}

{% block content %}
<section class="one-column">
  <h1>Invoice</h1>
  <p><strong>ID:</strong> {{ invoice.id }}</p>
  <p><strong>Customer Name:</strong> {{ invoice.user.name }}</p>
  <p><strong>Date:</strong> {{ invoice.human_created_timestamp }}</p>
  
  
  <p><strong>Shipping/Pickup:</strong> {{ invoice.handling_option }}</p>
  {% if invoice.delivery_address %}
    <p><strong>Delivery Address:</strong> {{ invoice.delivery_address }}</p>
  {% endif %}

  <h2>Line Items</h2>
  <table>
    <thead>
      <tr>
        <th>Product</th>
        <th>Quantity</th>
        <th>Price</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      {% for item in invoice.line_items %}
        <tr>
          <td><a href="/p/{{ item.product.id }}">{{ item.product.title }}</a></td>
          <td>{{ item.quantity }}</td>
          <td>${{ '%0.2f' % (item.price.price_in_cents / 100) }}</td>
          <td>${{ '%0.2f' % ((item.price.price_in_cents * item.quantity) / 100) }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>

  {% if invoice.coupon_redemptions and invoice.discount_amount_in_cents > 0 %}
    <div style="text-align: right; margin: 15px 0;">
      {% for redemption in invoice.coupon_redemptions %}
        <p style="color: #28a745; margin: 5px 0;">
          <strong>{{ redemption.coupon.code }}:</strong> {{ redemption.coupon.description }}
        </p>
      {% endfor %}
      <p style="color: #28a745; margin: 5px 0;">
        <strong>Total Discounts: -${{ '%.2f' % (invoice.discount_amount_in_cents / 100) }}</strong>
      </p>
    </div>
  {% endif %}

  <div style="text-align: right; margin: 20px 0; font-size: 1.2em;">
    <strong>Invoice Total: ${{ '%.2f' % invoice.total }}</strong>
  </div>

  {% if invoice.crypto_payment and invoice.crypto_payment|length > 0 %}
    {% set crypto_pay = invoice.crypto_payment[0] %}
    <!-- Crypto Payment Details -->
    <div style="background-color: #f0f8ff; padding: 15px; border: 1px solid #4169e1; border-radius: 5px; margin: 15px 0;">
      <h3>Crypto Payment Information</h3>
      <p><strong>Currency:</strong> {{ crypto_pay.coin_type }}</p>
      <p><strong>Expected Amount:</strong> {{ '%.12f'|format(crypto_pay.expected_amount / (10**12 if crypto_pay.coin_type == 'XMR' else 10**8)) }} {{ crypto_pay.coin_type }}</p>
      <p><strong>Received Amount:</strong> {{ '%.12f'|format(crypto_pay.received_amount / (10**12 if crypto_pay.coin_type == 'XMR' else 10**8)) }} {{ crypto_pay.coin_type }}</p>
      
      {% if crypto_pay.status in ['confirmed', 'confirmed_overpaid'] %}
        <p style="color: #28a745;"><strong>✓ Payment Confirmed</strong></p>
      {% elif crypto_pay.status == 'received' %}
        <p style="color: #ffc107;"><strong>⏳ Awaiting Confirmations ({{ crypto_pay.current_confirmations }}/{{ crypto_pay.confirmations_required }})</strong></p>
      {% elif crypto_pay.status == 'pending' %}
        <p style="color: #6c757d;"><strong>⏳ Waiting for Payment</strong></p>
      {% elif crypto_pay.status == 'expired' %}
        <p style="color: #dc3545;"><strong>❌ Payment Expired</strong></p>
      {% elif crypto_pay.status == 'underpaid_refunded' %}
        <p style="color: #dc3545;"><strong>❌ Underpaid - Refunded</strong></p>
      {% endif %}
      
      {% if crypto_pay.tx_hashes and crypto_pay.tx_hashes != '[]' %}
        <p><strong>Transaction(s):</strong> <code style="font-size: 0.9em; font-family: monospace;">{{ crypto_pay.tx_hashes }}</code></p>
      {% endif %}
      
      <p style="margin-top: 15px;">
        <strong>Payment ID:</strong> <a href="{{ request.route_url('crypto_quote', payment_id=crypto_pay.id) }}">{{ crypto_pay.id }}</a>
      </p>
    </div>
  {% endif %}
</section>
{% endblock %}
