{% 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 %}
    The connect links render in the app exactly as they do on the web. Apple's Tap to Pay on iPhone
    review guide (requirement 2.2 and the General Requirements) requires the whole merchant
    onboarding to be completable inside the app, without sending anyone to a second app — so there
    is deliberately no "open this on the website" banner here. The app intercepts /square/connect/
    and the Square OAuth hosts and opens them in an in-app browser view (SFSafariViewController /
    Chrome Custom Tabs), which Apple counts as in-app and which shares Safari's cookie jar, so a
    merchant whose Square login is "Sign in with Google" still works. Loading the same OAuth in the
    shell's own WebView is what would fail: Google blocks its sign-in in embedded WebViews.
  {% endcomment %}
  {% 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>
      <a class="btn btn-warning btn-sm flex-shrink-0" href="{% url 'square_connect' %}">Reconnect Square</a>
    </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 %}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>

  <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>

  {% 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 %}