{% extends "base.html" %}
{% block title %}Square{% endblock %}
{% block content %}
{% include "preferences_ribbon.html" %}
<div class="container py-4">
  <h1 class="h4 mb-3">Accept payments with Square</h1>

  {% comment %}
    Connecting/reconnecting a Square account is a web OAuth redirect to Square, which is blocked
    inside the native app WebView. Show a banner pointing to the website and hide the connect links
    below on mobile. (On-device Tap to Pay itself is handled natively, not from these links.)
  {% endcomment %}
  {% if request.is_mobile_app %}
    <div class="alert alert-warning" role="alert">
      Connecting a Square account isn't available in the app. Open
      <a href="https://{{ request.get_host }}{{ request.path }}" target="_blank" rel="noopener">this page on the website</a>
      in your browser to connect your account.
    </div>
  {% endif %}

  {% if request.user.is_authenticated and not request.user.userdata.square_enabled %}
    <div class="alert alert-info" role="alert">
      Square is currently disabled for your account. A site administrator can re-enable it for you.  You can still connect your Square accout, but you won't be able to accept payments until it's enabled.
    </div>
  {% endif %}

  {% if seller and not seller.supports_tap_to_pay %}
    <div class="alert alert-warning d-flex flex-column flex-sm-row align-items-sm-center gap-2" role="alert">
      <div class="flex-grow-1">
        <strong>Reconnect required for Tap to Pay.</strong>
        This Square account was connected before in‑person (Tap to Pay) payments were supported.
        Reconnect to enable charging cards on your phone — your existing settings and club link stay in place.
      </div>
      {% if not request.is_mobile_app %}
      <a class="btn btn-warning btn-sm flex-shrink-0" href="{% url 'square_connect' %}">Reconnect Square</a>
      {% endif %}
    </div>
  {% endif %}

  <p class="mb-2">
    Connect your Square account to let users pay their invoices directly on this site.
  </p>

  <ol class="mb-4">
    <li>{% if seller or request.is_mobile_app %}Connect your Square account{% else %}<a href="{% url 'square_connect' %}">Connect your Square account</a>{% endif %}</li>
    <li>That's it — users will see a Pay button on their invoices!</li>
  </ol>

  <h2 class="h5 mb-3">How it works</h2>
  <div class="row g-3 mb-4">
    <div class="col-12 col-lg-6">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title mb-2">Online auctions</h5>
          <ul class="mb-0">
            <li>The Pay button appears on invoices after the auction end time.</li>
            <li>Payments open 1 hour after the end to support dynamic endings (last‑minute bids can extend lot end times).</li>
            <li>Set invoices to <span class="text-info fw-semibold">Ready</span> to email users a link to view and pay.</li>
            <li>Once paid, the invoice updates to <span class="text-success fw-semibold">Paid</span> automatically.</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="col-12 col-lg-6">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title mb-2">In‑person auctions</h5>

          <h6 class="fw-semibold mt-2">Quick Checkout</h6>
          <ol class="mb-3">
            <li>
              Auction admins can open
              {% if auction %}
                <a href="{% url 'auction_quick_checkout' slug=auction.slug %}">Quick Checkout Users</a>
              {% else %}
                Quick Checkout
              {% endif %}
              to mark invoices paid.
            </li>
            <li>Each invoice shows a QR code.</li>
            <li>Users scan the code to pay in their browser or the Square app.</li>
            <li>Payment confirmation usually takes less than 10 seconds.</li>
          </ol>

          <h6 class="fw-semibold mt-2">Hate QR codes?</h6>
            No worries: The Pay button is also available on the invoice page at any time for users to access themselves.
        </div>
      </div>
    </div>
  </div>

  <h2 class="h5 mb-2">Tips</h2>
  <ul class="mb-4">
    <li>
      Use filters on the Users page to quickly find who hasn’t paid.
      {% if auction %}
        For example:
        <a href="{% url 'auction_tos_list' slug=auction.slug %}?query=+open+owes+club">
          Here's the users in {{ auction }} with an open invoice who owe the club
        </a>.
      {% endif %}
    </li>
    <li>There are even filters for who has or hasn't viewed their invoice yet.</li>
    <li>Refunds issued in Square will appear on the invoice automatically.</li>
    <li>You can mix Square and other payment methods: an auction admin can mark the invoice Paid manually, and optionally record the payment method in the memo field.</li>
    <li>Long lines at the end of in-person auctions? Not anymore: Multiple admins can run Quick Checkout Users at the same time on different devices to keep lines moving.</li>
    <li>Under your auction's rules, you can turn Square payments off or on at any time.  This option only appears when you have a Square account connected.</li>
    <li>For auctions tied to a club, the <em>club's</em> connected Square account is used for all payments (set on the club's membership settings page). Otherwise, the auction creator's account is used.</li>
    <li>There's no fine print here, no fees beyond the standard Square fees, and you can disable payments at any time.</li>
  </ul>

  {% if not request.is_mobile_app %}
  <h4>Ready to get started?</h4>
  <div class="d-flex align-items-center gap-2 mb-4">
    <a class="btn btn-primary btn-sm" href="{% url 'square_connect' %}">Connect your Square account</a>
    {% if auction %}
      <span class="small">and start accepting payments in {{ auction }} today!</span>
    {% endif %}
  </div>
  {% endif %}

  {% if seller %}
    {% url 'square_seller_delete' as disconnect_url %}
    {% include "auctions/_payment_seller_card.html" with provider_label="Square" merchant_id=seller.square_merchant_id disconnect_url=disconnect_url warning="You can only have one Square account connected at a time. Connecting a new account will disconnect the current one." %}
    {% if seller.club %}
      <p class="small text-muted">This account is currently linked to the club <strong>{{ seller.club.name }}</strong>. Disconnecting will remove that link.</p>
    {% endif %}
  {% endif %}
</div>
{% endblock %}