{% extends 'layout.html' %}

{# Given a Django form field, return bootstrap5-formatted field with proper label and error message #}
{% macro input_bootstrap5(field, error_msg) %}
  <label class="control-label required" for="{{ field.auto_id }}">{{ field.label }}</label>
  {{ field }}
  <div class="invalid-feedback">
    {{ error_msg }}
  </div>
{% endmacro %}

{# Render checkbox-style prefilled donation amounts, single and monthly #}
{% macro render_donation_amounts(pricesSingle, pricesMonthly) %}
  {% with error_msg="Please enter a donation of at least " + form.minimum_donation['display'] + "." %}
      {% include "donation_amount_fields.html.jinja" %}
  {% endwith %}
{% endmacro %}

{# Render donation frequency toggle #}
{% macro render_donation_frequency() %}
  <h5>How often?</h5>
  <p>Giving regularly keeps Tor strong.</p>

  <div class="btn-group frequencyToggle" role="group" aria-label="Frequency of donation">
    {% for choice in form.single_or_monthly %}
      <input
        type="radio"
        class="btn-check"
        name="single_or_monthly"
        id="{{ form.single_or_monthly.auto_id }}_{{ loop.index0 }}"
        value="{{ choice.data.value }}"
        autocomplete="off"
        {% if choice.choice_label == "Give once" %}checked="checked"{% endif %}
      >
      <label
        class="btn btn-outline-primary"
        for="{{ form.single_or_monthly.auto_id }}_{{ loop.index0 }}"
        data-toggles_to="{{ choice.data.value }}"
        data-toggles_price="#pricegrid_{{ choice.data.value }}"
      ><i class="ph ph-radio-button"></i><i class="ph ph-circle"></i><span>{{choice.choice_label}}</span></label>
    {% endfor %}
  </div>
{% endmacro %}

{% macro render_gifts() %}
  <div class="form-check noPerk flex-wrap">
    <input name="perk" class="form-check-input" type="radio" id="noPerkCheckbox" checked="checked" value="no_gift" required>
    <label class="form-check-label small" for="noPerkCheckbox">
      No thanks, I don't want a gift. <span class="subtext">I want 100% of my donation to support Tor.</span>
    </label>
    <div class="invalid-feedback ps-5 w-100">Please select a gift option.</div>
  </div>

  <div class="row g-3 gy-1 Perk container single">
    {% for choice in form.perk if choice.data.value != "no_gift" %}
      {% set perk = form.perk_data[choice.data.value] %}
    <div class="Perk-frame">
      <div
        class="Perk-selection Perk-{% if perk.single_price > form.defaultDonation.single %}in{% endif %}active"
        data-price-tier-single="{{ perk.single_price }}"
        data-price-tier-monthly="{{ perk.monthly_price }}"
      >
        <input type="radio" name="perk" value="{{ choice.data.value }}" class="btn-check" id="{{ form.perk.auto_id }}_{{ loop.index0 }}" required>
        <label class="Perk-label" for="{{ form.perk.auto_id }}_{{ loop.index0 }}">
          <div class="Perk-caption" data-mh="perk-caption">
            <h5>{{ choice.data.label[0]|upper }}{{ choice.data.label[1:] }}</h5>
            <p>{{ perk.desc|safe }}</p>
          </div>
          <div class="Perk-imgButton" data-mh="perk-imgBtn">
            <img name="Perk-img" src="{{ perk.image_data }}" alt="{{ perk.image_alt_text }}">
            <span class="btn btn-chosen btn-tertiary small bold w-100"><i class="icon-check"></i><span>Selected</span></span>
            <span class="btn btn-unchosen btn-tertiary small bold w-100">Choose this gift</span>
            <a href="#modify_donation" class="btn btn-unmet unmet-single small bold w-100">Donate {{ "$%.0f"|format(perk.single_price / 100) }} instead</a>
            <a href="#modify_donation" class="btn btn-unmet unmet-monthly small bold w-100">Donate {{ "$%.0f"|format(perk.monthly_price / 100) }} instead</a>
          </div>
        </label>
      </div>
    </div>
    {% endfor %}
  </div>
{% endmacro %}

{% macro render_shipping_info() %}
  <div class="row mb-0 mb-sm-5">
    <div class="col-12 col-sm-6 form-group mb-3 mb-sm-0">
      {{ input_bootstrap5(form.first_name, "Please enter a first name.") }}
    </div>
    <div class="col-12 col-sm-6 form-group mb-3 mb-sm-0">
      {{ input_bootstrap5(form.last_name, "Please enter a last name.") }}
    </div>
  </div>

  <div class="mb-3 mb-sm-2">
    {{ input_bootstrap5(form.email_address, "Please enter a valid email address.") }}
  </div>

  <div class="mt-2 mb-3 mb-sm-5 donate-form--emailUpdates">
    {{ form.email_updates|bootstrap }}
  </div>


  <div class="mb-3 mb-sm-5">
    {{ input_bootstrap5(form.country, "Please select a country.") }}
    <div class="hidden shippingRestricted alert alert-primary mt-2">
      <p class="tiny">Due to shipping restrictions, we currently can not ship to Ukraine, or Russia. We apologize for the inconvenience.</p>
    </div>
  </div>

  <div class="row mb-0 mb-sm-5">
    <div class="col-12 col-sm-7 form-group mb-3 mb-sm-0">
      {{ input_bootstrap5(form.street_address, "Please enter an address.") }}
    </div>
    <div class="col-12 col-sm-5 form-group mb-3 mb-sm-0">
      {{ form.apartment_number|bootstrap }}
    </div>
  </div>

  <div class="mb-3 mb-sm-5">
    {{ input_bootstrap5(form.city, "Please enter a city.") }}
  </div>

  <div class="row mb-3 mb-sm-5">
    <div class="col-12 col-sm-7">
      {# {{ form.state|bootstrap }} #}
      {{ input_bootstrap5(form.state, "Please select a state.") }}
    </div>
    <div class="col-12 col-sm-5">
      {{ input_bootstrap5(form.postal_code, "Please enter a postal code.") }}
    </div>
  </div>
{% endmacro %}

{% macro render_perk_options() %}
  <div class="perk_options">

  {% for select in form.options_by_perk %}
    {% if select.options|length > 0 %}

    <div class="perk_option hidden perk_option--{{ select.id }} row mb-5" data-perk="{{ select.id }}">

      {% if select.options|length > 1 %}
        {# 
          For perks with more than one option group, let user select desired option group first,
          then expose the related list of options via jQuery.
        #}
        <div class="perk_option-group col-12 col-sm-6 mb-3 mb-sm-0">
          <div class="form-group">
            {#
              At present, the only perks containing multiple option sets are t-shirts.
              Hardcoded label values reflect hardcoding upstream; there is no JSON data related to option group naming.
              Rather, we can assume (for now) that a perk with multiple option groups is displaying t-shirt fits with related sizing options.
            #}
            <label class="control-label mb-2" for="optionGroup">Fit</label>
            <select data-selectid="{{ select.id }}" name="perk_option-group--{{ select.id }}" class="form-control form-select optionGroup" id="perk_option-group--{{ select.id }}">
              <option value="" disabled='true' selected='selected'>Select one</option>
              {# First, iterate through sets of options and pull out SKUs #}
              {% for optionList in select.options %}
                {% for fit, options in optionList.items() %}
                  <option value="{{ select.id }}-{{ fit }}">{{ fit }}</option>
                {% endfor %}
              {% endfor %}
            </select>
            <div class="invalid-feedback" data-mh="cc-feedback">
              Please select an option.
            </div>
          </div>
        </div>

        <div class="col-12 col-sm-6 mb-3 mb-sm-0">
          <div class="form-group">
            <label class="control-label mb-2 hidden" for="optionList" data-revealed-by="optionGroup-{{ select.id }}">Size</label>
            {# Within each option group, iterate through sets of options, rendering each list of options separately #}
            {% for optionList in select.options %}
              {% for fit, options in optionList.items() %}
              <select name="perk_option--{{ select.id }}-{{ fit }}" class="form-control form-select hidden optionList" id="perk_option--{{ select.id }}-{{ fit }}">
                <option value="" disabled='true' selected='selected'>Select one</option>
                {% for sku, value in options.items() %}
                  <option value="{{ sku }}">{{ value }}</option>
                {% endfor %}
              </select>
              {% endfor %}
            {% endfor %}
            <div class="invalid-feedback" data-mh="cc-feedback">
              Please select an option.
            </div>
          </div>
        </div>
      {% else %}
        {# Explicitly handle cases in which perks without options have been given a single fake option
           to allow CiviCRM to process them properly. (See https://gitlab.torproject.org/tpo/web/civicrm/-/issues/162) #}
        {% for isSingletonKey, isSingletonValue in select.options[0]|items %}
          {% if isSingletonValue.items()|length == 1 %}
            {% for singletonKey, singletonValue in isSingletonValue.items() %}
              <input type="hidden" class="hiddenPerkOption" id="perk_option--{{ select.id }}" name="perk_option--{{ select.id }}" value="{{ singletonKey }}" disabled="disabled" />
            {% endfor %}
          {# For real option lists, we ignore the one-cycle loop we're in and pick select.options back up. #}
          {% else %}
            {% for optionList in select.options %}
              <p class="w-100">Size</p>

              {% for sku, options in optionList.items() %}

              <div class="perk_option--{{ sku }} col-12 col-sm-6 mb-3 mb-sm-0">
                <div class="form-group w-100">
                  <select name="perk_option--{{ select.id }}" class="form-control form-select" id="perk_option--{{ select.id }}">
                    <option value="" disabled='true' selected='selected'>Select one</option>

                    {% for key, value in options.items() %}
                      <option value="{{ key }}">{{ value }}</option>
                    {% endfor %}

                  </select>
                  <div class="invalid-feedback" data-mh="cc-feedback">
                    Please select an option.
                  </div>
                </div>
              </div>
              {% endfor %}
            {% endfor %}
          {% endif %}
        {% endfor %}
      {% endif %}

    </div>

    {% endif %}
  {% endfor %}

  </div>
{% endmacro %}

{% macro render_card_fields() %}
  <div class="donate-form--cc" id="payment-element"></div>
{% endmacro %}

{% macro noscript_error() %}
  {% include 'noscript.html.jinja' %}
{% endmacro %}

{% macro yec_ticker(yec_total, is_yec) %}
  {% if is_yec %}
    {# <h1>{{ yec_total }}</h1> #}
  {% endif %}
{% endmacro %}

{% macro renderPaypalScript() %}
  <script src="https://www.paypal.com/sdk/js?client-id={{paypal_client_id}}&currency=USD&commit=true&vault=false&intent=capture" nonce="{{request.csp_nonce}}" data-csp-nonce="{{request.csp_nonce}}" data-namespace="paypal_one_time"></script>
  <script src="https://www.paypal.com/sdk/js?client-id={{paypal_client_id}}&currency=USD&commit=true&vault=true&intent=subscription" nonce="{{request.csp_nonce}}" data-csp-nonce="{{request.csp_nonce}}" data-namespace="paypal_subscriptions"></script>
{% endmacro %}

{% block pageheader %}
  <!-- Must be loaded from Stripe servers, as per Stripe: https://stripe.com/docs/js/including -->
  <script src="https://js.stripe.com/v3/"></script>
  <meta id="stripe-api-key" data-key="{{ stripe_api_key }}">
{% endblock %}

{% block pageid %}donate{% endblock pageid %}

{% block hero %}
  {% include 'hero.html' %}

  <div class="Card Subnav">
    <ul class="nav">
      <li class="nav-item">
        <a href="#" class="nav-link active">Donate online</a>
      </li>
      {% with link=url('cryptocurrency') %}
      <li class="nav-item">
        <a class="nav-link" href="{{ link }}">Donate crypto</a>
      </li>
      {% endwith %}
      {% with link=url('faq') %}
      <li class="nav-item">
        <a class="nav-link" href="{{ link }}">Donation FAQ</a>
      </li>
      {% endwith %}
    </ul>
  </div>
{% endblock hero %}

{% block body %}
  {% if is_yec %}
    {% include 'yec.html.jinja' %}
  {% endif %}

  {{ noscript_error() }}

  <div class="Cards" id="donateForms">

    <!-- {{ yec_ticker(civicrm.yec_total, civicrm.is_yec) }} -->
    <div class="Card Card--UpperHalf bg-purple-10">
      <a name="modify_donation"></a>
      <h4>Your donation</h4>
      <h5>Donate by</h5>
      <div class="btn-group sectionToggle">
        <a href="#" class="btn btn-outline-primary active" aria-current="page" data-toggles="#checkout_card"><i class="ph ph-radio-button"></i><i class="ph ph-circle"></i>Credit card</a>
        <a href="#" class="btn btn-outline-primary" data-toggles=".checkout_paypal"><i class="ph ph-radio-button"></i><i class="ph ph-circle"></i>PayPal</a>
      </div>
      <div class="checkout_paypal hidden toggleable alert alert-primary d-flex align-items-center bg-purple-20 mt-4 mb-0" role="alert">
        <i class="ph ph-warning-circle align-self-start flex-shrink-0 me-2 purple-80"></i>
        <p>Paypal cannot process donations made via the Tor network. We apologize for the inconvenience.</p>
      </div>
    </div>
    <form class="form donate-form" method="POST" id="donateForm" data-donation="0" novalidate="true">
      {% csrf_token %}
      <div class="Card Card--Mid Card--Contiguous bg-purple-10">
        {{ render_donation_frequency() }}
        <h5>Amount</h5>
        <p>All donations charged in $USD. See our <a href="/faq/">Donor FAQ</a> for more details.</p>
        {{ render_donation_amounts(donate_single_prices, donate_monthly_prices) }}
      </div>

      <div class="Card Card--Mid Card-gift bg-neutral">
        <h4>Your gift</h4>
        {{ render_gifts() }}
      </div>

      <div class="Card Card--Mid Card--shipping-info bg-neutral">
        <h4>Your details</h4>
        
        {{ render_shipping_info() }}
        {{ render_perk_options() }}

        <label class="control-label required mb-3">Are you a robot?</label>
        {{ form.altcha }}

      </div>

      <div class="Card Card--LowerHalf bg-neutral">
        <h4>Complete payment</h4>

        <div id="result-message" class="alert alert-danger hidden">
        </div>

        <div id="checkout_card" class="toggleable">
          {{ render_card_fields() }}
          <button type="submit" id="btn-donateSubmit" class="btn btn-primary w-100 mt-5" data-checkout="stripe" disabled>
            Donate <span></span> by credit card
          </button>
        </div>

        <div id="checkout_paypal" class="checkout_paypal toggleable hidden single">
          {{ renderPaypalScript() }}
          <div id="paypal-button-container-single"></div>
          <div id="paypal-button-container-monthly"></div>
        </div>
      </div>

      {{ form.cohort }}
    </form>
    
  </div>
{% endblock %}

{% block pagescripts %}
<script id="minimum-donation-data" type="application/json">{{ form.minimum_donation|tojson|safe }}</script>
{% endblock %}
