{% extends "advantage/base_advantage.html" %}

{% block title %}Your Canonical invoices{% endblock %}
{% block meta_description %}Your Canonical invoices for services you have signed up for.{% endblock %}

{% block head_extra %}
<meta name="robots" content="noindex, nofollow">
{% endblock %}

{% block content %}

<section class="p-strip--suru-topped p-strip-account-page">
  <div class="row">
    <div class="col-12">
      <h1>Invoices</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-3" style="padding: 0.75rem 0">
      <select name="marketplace" id="marketplace-dropdown">
        <option value="">All invoices</option>
        <option value="blender" {% if marketplace == 'blender' %}selected{% endif %}>Blender Support</option>
        <option value="canonical-ua" {% if marketplace == 'canonical-ua' %}selected{% endif %}>Ubuntu Pro</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      {% if invoices %}
        <table class="p-table--mobile-card">
          <thead>
            <th>Service</th>
            <th>Date</th>
            <th width="10%">Status</th>
            <th class="u-align--right" style="padding-right: 5%">Total</th>
            <th>Download PDF</th>
          </thead>
          <tbody>
            {% for invoice in invoices %}
              <tr>
                <td aria-label="Service">
                  {% if invoice.marketplace == "canonical-ua"%}
                    Ubuntu Pro
                  {% elif invoice.marketplace == "blender" %}
                    Blender Support
                  {% elif invoice.marketplace == "canonical-cube" %}
                    Canonical CUBE 
                  {% endif %}{% if invoice.period %} ({{ invoice.period }}){% endif %}</td>
                <td aria-label="Date">{{ invoice.get_formatted_date() }}</td>
                <td aria-label="Status">
                  {% if invoice.invoice %}
                    {% if invoice.invoice.status == "paid" %}
                      <div class="p-status-label--positive">Paid</div>
                    {% elif invoice.invoice.status == "open" %}
                      <div class="p-label">Pending</div>
                    {% else %}
                      <div class="p-status-label--negative">Failed</div>
                    {% endif %}
                  {% elif invoice.status == "done" %}
                    <div class="p-status-label">Not available</div>
                  {% else %}
                    <div class="p-label">Pending</div>
                  {% endif %}
                </td>
                <td class="u-align--right" aria-label="Total" style="padding-right: 5%">
                  {% if invoice.invoice %}
                    <span class="js-format-price">
                      {{ invoice.get_total() }}
                    </span>
                  {% else %}
                    -
                  {% endif %}
                </td>
                <td aria-label="Download PDF">
                  {% if invoice.invoice %}
                    <a href="invoices/download/{{ invoice.id }}" target="_blank">Download</a>
                  {% else %}
                    No invoice available
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
        <section class="p-strip is-shallow">
          {% with %}
            {% set total_pages = total_pages %}
            {% set current_page = current_page %}
            {% include "shared/_pagination.html" %}
          {% endwith %}
        </section>
      {% else %}
        <p>No invoices available.</p>
      {% endif %}
    </div>
  </div>
</section>


<script>
  const prices = document.querySelectorAll('.js-format-price');
  prices.forEach(price => {
    const amount = price.innerText.split(' ')[0];
    const currency = price.innerText.split(' ')[1];
    const formatter = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: currency,
    });

    price.innerText = formatter.format(amount)
  });

  const marketplaceDropdown = document.querySelector('#marketplace-dropdown')
  marketplaceDropdown.addEventListener('change', (e) => {
    const value = e.target.value;

    const href = new URL(window.location.href)
    href.searchParams.set('marketplace', value);
    window.location.replace(href);
  })
</script>

{% endblock content %}