<!-- Elegant Invoice - AdFusion -->
{% load static %}
<link rel="stylesheet" href="https://unpkg.com/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<style>
  :root{
    --primary: #6222CC;
  }

  .h2{
    color: #6222CC;
  }
  .invoice-box {
    border: 1px solid #dee2e6;
    border-radius: 16px;
    background: #ffffff;
    padding: 2rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  }
  .invoice-header h2 {
    letter-spacing: 1px;
  }
  .invoice-box table {
    font-size: 0.95rem;
  }
  .table th {
    background-color: #1f2937 !important;
    color: #ffffff !important;
  }
  .invoice-summary td {
    background-color: #f8f9fa;
  }
  .company-info address,
  .customer-info address {
    line-height: 1.6;
  }
  .logo img {
    max-height: 48px;
  }
</style>

<section class="">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-10 col-xl-9 invoice-box">
        <!-- Header -->
        <div class="d-flex justify-content-between align-items-center invoice-header border-bottom pb-3 mb-4">
          <h2 class="text-uppercase  fw-bold mb-0">Order Details</h2>
          <div class="logo">
            <a ><img src="{% static 'img\useradfusion.png' %}" alt="AdFusion Logo"></a>
          </div>
        </div>
        <!-- From -->
        <div class="mb-4">
          <h5 class="fw-bold">From</h5>
          <address class="text-muted company-info mb-0">
            <strong>AdFusion</strong><br>
            Ahmedabad, Gujarat, India<br>
            Phone: +91 9865252552<br>
            Email: adfusion9@gmail.com
          </address>
        </div>
        <!-- Bill To & Order Info -->
        <div class="row mb-5">
          <div class="col-md-8">
            <h5 class="fw-bold">Bill To</h5>
            <address class="text-muted customer-info mb-0">
              <strong>{{ order.full_name }}</strong><br>
              {{ order.email }}<br>
              {{ order.phone }}
            </address>
          </div>
        </div>
        <div class="row mb-5">
          <div class="col-md-4">
            <h5 class="fw-bold">Order Info</h5>
            <p class="mb-1"><strong>Order ID:</strong> {{ order.id }}</p>
            <p class="mb-1"><strong>Order Date:</strong> {{ order.created_at|date:'M d, Y' }}</p>
            <p class="mb-1"><strong>Ad Completion Date:</strong> {{ order.ad_completion_date|date:'M d, Y' }}</p>
            <p class="mb-0"><strong>Payment Status:</strong> {{ order.payment_status }}</p>
          </div>
        </div>
        <!-- Order Table -->
        <div class="table-responsive mb-4">
          <table class="table table-bordered align-middle">
            <thead>
              <tr>
                <th>Template ID</th>
                <th>Template Name</th>
                <th>Template AdType</th>
                <th>Price</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{{ order.template_id }}</td>
                <td>
                  {{ order.template_name }}
                </td>
                <td>{{ order.template_ad_type }}</td>
                <td class="text-end">Rs.{{ order.base_price }}</td>
              </tr>
              <!-- Summary -->
              {% comment %} <tr class="invoice-summary fw-semibold">
                <td colspan="3" class="text-end">Subtotal</td>
                <td class="text-end">Rs.{{ order.subtotal }}</td>
              </tr> {% endcomment %}
              <tr class="invoice-summary">
                <td colspan="3" class="text-end">Base Price</td>
                <td class="text-end">Rs.{{ order.base_price }}</td>
              </tr>
              <tr class="invoice-summary">
                <td colspan="3" class="text-end">Making Charges</td>
                <td class="text-end">Rs.{{ order.making_charges }}</td>
              </tr>
              <tr class="invoice-summary">
                <td colspan="3" class="text-end">GST</td>
                <td class="text-end">Rs.{{ order.gst_amount }}</td>
              </tr>
              <tr class="invoice-summary">
                <td colspan="3" class="text-end">Additional Charge</td>
                <td class="text-end">Rs.{{ order.additional_charge }}</td>
              </tr>
              <tr class="fw-bold bg-light">
                <td colspan="3" class="text-uppercase text-end">Total</td>
                <td class="text-end">Rs.{{ order.total_price }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>
