{% extends base_template_name %}
{% load crispy_forms_tags %}
{% load currency_filters %}
{% block title %} Invoice for {{ invoice.label }} {% endblock %}
{% load static %}
{% block extra_js %}
<script type='text/javascript'>pageView();</script>
{% if is_admin %}
<script type='text/javascript'>
var form_id = '#form-container';
{% include 'leave_page_warning.js' %}
$('#add-form').click(function() {
  cloneMore('.adjustment-form:last', 'form');
});
function cloneMore(selector, type) {
    var newElement = $(selector).clone(true);
    var total = $('#id_' + type + '-TOTAL_FORMS').val();
    newElement.find(':input').each(function() {
        var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
        var id = 'id_' + name;
        $(this).attr({'name': name, 'id': id}).removeAttr('checked'); // keep last row's values
        //$(this).attr({'name': name, 'id': id}).val('').removeAttr('checked'); // blank rows
    });
    newElement.find('label').each(function() {
        var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-');
        $(this).attr('for', newFor);
    });
    total++;
    $('#id_' + type + '-TOTAL_FORMS').val(total);
    $(selector).after(newElement);
}
document.querySelector('#memo').addEventListener('change', function(event) {
            $.ajax({
                type: "POST",
                beforeSend: function (request) {
                    request.setRequestHeader("X-CSRFTOKEN", "{{ csrf_token }}");
                },
                url: "{% url 'auctiontosmemo' pk=invoice.auctiontos_user.pk %}",
                data: {'memo': $(this).val() },
                success : function(result) {
                  $('#memo').addClass('is-valid');
                  isDirty = false;
                }});
        });
$('.form-control:not(#memo)').on('blur', function() {
  $('#invoice_control_buttons').hide()
  $('#form_dirty_warning').show()
});
$(document).ready(function(){
  {% if invoice.status != "DRAFT" %}
    $('#adjustments_area').hide();
  {% endif %}
  $(document).on('click', '#{{invoice.pk}}_UNPAID, #{{invoice.pk}}_PAID', function() {
    $('#adjustments_area').hide();
  });
  $(document).on('click', '#{{invoice.pk}}_DRAFT', function() {
    $('#adjustments_area').show();
  });
});

// Toggling the membership renewal checkbox can change the club member discount and
// (in club member discount split mode) the seller's alternate fees, so reload to
// update the entire invoice -- lot tables, payout, and totals.
document.body.addEventListener('renewalToggled', function() {
  isDirty = false;
  window.location.reload();
});

</script>
{% endif %}
{% if print_label_link and not invoice.printed and not is_admin %}
<script>
$(document).ready(function(){
  $('#printomatic-9000').attr('data-bs-title', "Print on regular paper in portrait mode, no label maker required.").tooltip('show');
});
</script>
{% endif %}

<script>
document.addEventListener("DOMContentLoaded", function() {
  var el = document.getElementById('pay-with-paypal');
  if (!el || typeof bootstrap === 'undefined') return;
  try {
    var pop = new bootstrap.Popover(el, {
      trigger: 'manual',
      container: 'body',
      html: true,
      title: el.getAttribute('data-bs-title'),
      content: el.getAttribute('data-bs-content'),
      template: el.getAttribute('data-bs-template'),
      sanitize: false
    });
    // show immediately if invoice has already been opened
    {% if invoice.opened %}
      pop.show();
      el.focus();
    {% endif %}
  } catch (e) {
    console.error('Popover init failed', e);
  }
});
</script>
{% endblock %}

{% block content %}
{% if show_links %}{% include 'auction_ribbon.html' %}{% endif %}

<h3>{{ invoice.auctiontos_user.name }}</h3>
<small><span id="invoice-summary-short">{{ invoice.invoice_summary_short }}</span> {% if invoice.status == "PAID" %}<span class="badge rounded-pill bg-success">Paid in full</span>{% endif %}</small>
{% if invoice.auction.multi_location %}
{% if location == 'No location selected' %}{% else %}
<h5>{{location}}</h5>
{% endif %}
{% endif %}
<br>
<div class="row">
  <div class="col-auto">
    {% if show_links %}
      {% if is_admin %}
        {% if debug %}
        <a href='{% url "invoice_no_login" uuid=invoice.no_login_link %}' class='btn btn-secondary ml-1 mr-1 '>View as bidder</a>
        {% endif %}
        <span id="invoice_control_buttons">{% include 'invoice_buttons.html' %}</span>
        <span style="display: none;" class='text-danger' id="form_dirty_warning">Save adjustments to mark ready or paid</span>
      {% endif %}
      {% if invoice.auctiontos_user.user == request.user or using_no_login_link %}

        {% if invoice.show_payment_button and not hide_payment_button%}
          {% if invoice.reason_for_payment_not_available %}
              {# Unavailable-action standard: keep the button clickable and explain why on click (see /style_reference.md). #}
              <button
                type="button"
                class="btn btn-secondary mr-1 mt-1"
                id="payment-not-available"
                data-reason="{{ invoice.reason_for_payment_not_available }}"
              >
                Pay now
              </button>
              <script>
                document.getElementById('payment-not-available').addEventListener('click', function () {
                  window.jQuery.toast({
                    title: 'Payment not available',
                    content: this.getAttribute('data-reason'),
                    type: 'info',
                    delay: 8000
                  });
                });
              </script>
          {% else %}
            {% comment %}
              Web PayPal/Square pay buttons redirect to the provider's hosted checkout, which doesn't
              work inside the native app WebView. PayPal is removed from the app entirely; Square is
              collected via on-device Tap to Pay (see quick_checkout_htmx.html), so hide both here.
            {% endcomment %}
            {% if invoice.show_paypal_button and not request.is_mobile_app %}
            <form action="{% url 'create_paypal_order' uuid=invoice.no_login_link %}" method="post" style="display: inline;">
                {% csrf_token %}
                <button
                  type="submit"
                  class="btn btn-success mr-1 mt-1"
                  id="pay-with-paypal"
                  data-bs-toggle="popover"
                  data-bs-placement="bottom"
                  data-bs-html="true"
                  data-bs-title="Ready to pay?"
                  data-bs-content="Pay this invoice using PayPal  "
                  data-bs-template='<div class="popover" role="tooltip"><div class="popover-header bg-info text-white"></div><div class="popover-body"></div></div>'
                >
                  <i class="bi bi-paypal"></i> Pay now
                </button>
            </form>
            {% endif %}
            {% if invoice.show_square_button and not request.is_mobile_app %}
            <form action="{% url 'create_square_payment_link' uuid=invoice.no_login_link %}" method="post" style="display: inline;">
                {% csrf_token %}
                <button
                  type="submit"
                  class="btn btn-success mr-1 mt-1"
                  id="pay-with-square"
                  data-bs-toggle="popover"
                  data-bs-placement="bottom"
                  data-bs-html="true"
                  data-bs-title="Ready to pay?"
                  data-bs-content="Pay this invoice using Square  "
                  data-bs-template='<div class="popover" role="tooltip"><div class="popover-header bg-info text-white"></div><div class="popover-body"></div></div>'
                >
                  <i class="bi bi-credit-card"></i> Pay with Square
                </button>
            </form>
            {% endif %}
          {% endif %}
        {% endif %}
      {% endif %}
      {% comment %}
        Print invoice relies on the browser print dialog (none in the app WebView) and label printing
        is handled natively over Bluetooth in the mobile app, so hide both print buttons on mobile.
      {% endcomment %}
      {% if not request.is_mobile_app %}
      <a href="{{ request.path }}?print" class="btn btn-primary ml-1 mr-1 ">Print invoice</a>
      {% if show_links and print_label_link %}
        <a href="{{ print_label_link }}" id="printomatic-9000" class="btn btn-primary ml-1 mr-1 ">Print labels for your lots</a>
      {% endif %}
      {% endif %}
  </div>
  <div class="col">
    {% if not is_admin %}
      <a href="{% url 'feedback' %}" class="btn btn-primary ml-1 mr-1 ">Leave feedback</a>
      {% if website_focus == "fish" %}
        <a href="/blog/transporting-fish/" class="btn btn-primary ml-1 mr-1 ">Info on transporting fish</a>
      {% endif %}
      {% if location_map %}
        <a href="{{location_map}}" class="btn btn-primary ml-1 mr-1 ">Get directions</a>
      {% endif %}
    {% else %}
      <input type="text" placeholder="Memo" value="{{invoice.auctiontos_user.memo}}" class="form-control " id="memo">
    {% endif %}
  </div>
</div>
<div class="row"><br>
  {% if is_admin and show_links %}
    {% if invoice.status == "DRAFT" and not invoice.email_sent %}
      <small>
      {% if invoice.auctiontos_user.email and auction.created_by.userdata.is_trusted %}
        <span class='text-muted'>Marking this invoice ready or paid will send a notification email to {{ invoice.auctiontos_user.name }}</span><br>
      {% elif not auction.created_by.userdata.is_trusted %}

      {% else %}
        <span class='text-danger'>{{ invoice.auctiontos_user.name }} does not have an email address set!</span><br>
      {%endif%}
      </small>
    {%endif%}
    <span id="adjustments_area">
    <br><br><h5>Adjustments</h5>
    {{ formset.management_form }}
    <form id="form-container" method="POST" action="{% url 'invoice_by_pk' pk=invoice.pk%}">
      {% crispy formset helper %}
      <button class='btn bg-info' id="add-form" type="button">Add row</button>
      <input type="submit" class='btn bg-success submit-button ms-2 ml-2' name='save' id='save' value="Save adjustments">
    </form>
    </span>
  {% endif %}
</div>
{% if is_admin %}{% include "auctions/partials/invoice_membership_renewal.html" %}{% endif %}
{{ auction.invoice_payment_instructions | default:""}}<br>
{% if print_label_link %}
  <div>{% if show_links %}
    Either <a href="{{ print_label_link }}">print your labels</a> or
    <span class='font-weight-bold'>write
      {% else %}
    <span>Write
      {% endif %}
      the lot number and the name of the winner {% if invoice.auction.multi_location %} and the destination location {% endif %} on each lot.
    </span>
    {% endif %}
  </div>
{% endif %}
<table class="table">
  <tr>
    <td>Contact info:</td>
    <td>{% if invoice.auctiontos_user.bidder_number %}Bidder number: <b>{{ invoice.auctiontos_user.bidder_number}}</b><br>{% endif %}
        {{ invoice.auctiontos_user.name|default:""}}<br>
        {% if invoice.auctiontos_user.address %}{{ invoice.auctiontos_user.address| linebreaksbr}}<br>{% endif %}
        {{ invoice.auctiontos_user.email|default:"" }}<br>
        {{ invoice.auctiontos_user.phone_as_string|default:"" }}<br>
    </td>
  </tr>
  <tr>
    <td>Auction:</td>
    <td>
      {% if show_links %}
        <a href='/auctions/{{ auction.slug }}'>{{ auction }}</a>
      {% else %}
        {{ auction }}
      {%endif%}
    <br></td>
  </tr>
  <tr>
    <td>Status:</td>
    <td>{{ invoice.get_status_display }}
    </td>
  </tr>
  <tr>
    <td>Location:</td>
    <td>{{ location.name }} <br>
      {% if location.contact_person %}
        <b>Lost?  Running late?</b> Contact: {{location.contact_person.name | default:""}}<br>
        {{location.contact_person.email | default:"" | urlize}}<br>
        {{location.contact_person.phone_number | default:"" }}<br>
      {% endif %}
      <br>{% if location.description %}{{ location.description }} on {%endif%}{{ location.pickup_time }}<br>
      {% if location.second_pickup_time %}<br>You must also come back on {{ location.second_pickup_time }} to pick up lots purchased from other locations{%endif%}
      {% if show_links %}<div class='mt-2'><a href="{{location.directions_link}}">Get directions to {{ location.name }}</a></div>{% endif %}
    </td>
  </tr>
  <tr>
    <td>Total payout</td>
    <td>{{ invoice.currency_symbol }}{{ invoice.total_sold|floatformat:2 }}</td>
  </tr>
  <tr>
    <td>Total bought</td>
    <td>{{ invoice.currency_symbol }}{{ invoice.total_bought|floatformat:2 }}</td>
  </tr>
  {% if invoice.first_bid_payout %}
    <tr>
      <td>Auction promotion</td>
      <td>{{ invoice.currency_symbol }}{{ invoice.first_bid_payout|floatformat:2 }}</td>
    </tr>
  {% endif %}
  {% include "auctions/partials/invoice_club_member_discount_row.html" %}
  {% include "auctions/partials/invoice_tax_row.html" %}
  {% include "auctions/partials/invoice_membership_fee_row.html" %}
  {% for adjustment in invoice.changed_adjustments %}
    <tr>
      <td>{{ adjustment.notes }}</td>
      <td>{{ adjustment.display }}</td>
    </tr>
  {% endfor %}
  {% for payment in invoice.payments.all %}
    <tr>
      <td>{{ payment.payment_method }}{% if payment.receipt_number %} (#{{ payment.receipt_number }}){% elif payment.external_id %} ({{ payment.external_id }}){% endif %}</td>
      <td>{{ invoice.currency_symbol }}{{ payment.amount|floatformat:2 }}</td>
    </tr>
  {% endfor %}
  {% include "auctions/partials/invoice_final_total_row.html" %}
</table>
{%if invoice.lots_sold %}
  <h3>Lots sold</h3>
  {% if invoice.auctiontos_user.is_club_member and invoice.auctiontos_user.auction.uses_alternate_split %}
    Note: {{ invoice.auctiontos_user.auction.alternative_split_label|capfirst }} fees have been applied<br>
  {% endif %}
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Lot</th>
        <th scope="col">Winner</th>
        {% if auction.multi_location %}
        <th scope="col">Winner Location</th>
        {% endif %}
        <th scope="col">Price</th>
        <th scope="col">Club cut</th>
        <th scope="col">Net</th>
      </tr>
    </thead>
    <tbody>

    {% for lot in invoice.sold_lots_queryset_sorted %}
      <tr>
        <td>{{ lot.lot_number_display }}</td>
        <td>
          {% if show_links %}
            {% if is_admin %}
              <a href="#" hx-get="/api/lot/{{lot.pk}}"
                hx-target="#modals-here"
                hx-trigger="click">
                {{ lot.lot_name }}
              </a>
            {% else %}
            <a href="{{lot.lot_link}}?src=invoice_sold">{{ lot.lot_name }}</a>
            {% endif %}
          {% else %}
            {{ lot.lot_name }}
          {% endif%}
          {% if lot.partial_refund_percent %}<small>({{ lot.partial_refund_percent }}% refund)</small>{% endif %}
          {% if lot.bap_points_awarded and not viewer_has_bap %}<span class="badge bg-success ms-1">Breeder points: {{ lot.bap_points_awarded }}</span>{% endif %}
          {% if viewer_has_bap and show_links and lot.i_bred_this_fish %}{% include "auctions/bap_lot_buttons.html" with default_points=bap_default_points %}{% endif %}
        </td>
        <td>
          {% if lot.winning_price %}
            {% if show_links and is_admin %}
              <a href="#" hx-get="/api/auctiontos/{{lot.auctiontos_winner.pk}}"
                hx-target="#modals-here"
                hx-trigger="click">
                {{ lot.winner_name }}
              </a>
            {% else %}
              {{ lot.winner_name }}
            {% endif %}
          {% else %}
            Not sold
          {% endif %}
        </td>
        {% if auction.multi_location %}
          <td>
            {% if lot.auctiontos_winner %}
              {{ lot.winner_location }}
            {% endif %}
          </td>
        {% endif %}
        <td>
          {% if lot.winning_price %}
            {{ invoice.currency_symbol }}{{ lot.winning_price|floatformat:2 }}
          {% else %}
            {% if lot.banned %}
              Removed
            {% else %}
              Not sold
            {% endif %}
          {% endif %}
        </td>
        <td>{{ invoice.currency_symbol }}{{ lot.club_cut|floatformat:2 }}{% if lot.pre_register_discount %}*{% endif %}</td>
        <td>
          {% if lot.donation %}
            Donation
          {% else %}
            {{ invoice.currency_symbol }}{{ lot.your_cut|floatformat:2 }}
          {% endif %}
        </td>
      </tr>
    {% endfor %}
  </tbody>
</table>
<small><div class="float-right">{% if invoice.pre_register_used %}*Pre-registeration discount applied{% endif %}</small><br></div>
<b>Total donations:</b> {{ invoice.currency_symbol }}{{ invoice.total_donations|floatformat:2 }}<br>
<b>Total payout:</b> {{ invoice.currency_symbol }}{{ invoice.total_sold|floatformat:2 }}<br>
{% endif %}
<br>
<br>
{% if invoice.lots_bought %}
  <br>
  <h3>Lots purchased</h3>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Lot</th>
        {% if auction.multi_location %}
        <th scope="col">Location</th>
        {% endif %}
          {% if is_admin %}
        <th scope="col">Seller</th>
        {% endif %}
        <th scope="col">Price</th>
      </tr>
    </thead>
    <tbody>
      {% for lot in invoice.bought_lots_queryset %}
        <tr>
          <td>
            {{ lot.lot_number_display }}
          </td>
          <td>
            {% if show_links %}
              {% if is_admin %}
                <a href="#" hx-get="/api/lot/{{lot.pk}}"
                hx-target="#modals-here"
                hx-trigger="click">
                {{ lot.lot_name }}
                </a>
              {% else %}
                <a href="{{lot.lot_link}}?src=invoice_bought">
                  {{ lot.lot_name }}
                </a>
              {%endif%}
            {% else %}
              {{ lot.lot_name }}
            {% endif %}
            {% if lot.partial_refund_percent %}<small>({{ lot.partial_refund_percent }}% refund)</small>{% endif %}
          </td>
          {% if auction.multi_location %}
            <td>{{ lot.location }}</td>
          {% endif %}
          {% if is_admin %}
          <td>
            {% if show_links %}
              <a href="#" hx-get="/api/auctiontos/{{lot.auctiontos_seller.pk}}"
                hx-target="#modals-here"
                hx-trigger="click">
                {{ lot.seller_name }}
              </a>
            {% else %}
              {{ lot.seller_name }}
            {% endif %}
          </td>
          {% endif %}
          <td>
            {{ invoice.currency_symbol }}{{ lot.final_price|floatformat:2 }}
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
  <b>Total bought:</b> {{ invoice.currency_symbol }}{{ invoice.total_bought|floatformat:2 }}     <br>
  </div>
{% endif %}
{% if request.user.is_superuser and show_links %}
  <a href="/admin/auctions/invoice/{{invoice.pk}}/change/" class="btn btn-danger active">Admin</a>
{% endif %}
<div id="modals-here"></div>
{% endblock %}