{% extends "base.j2" -%}

{% block content -%}

<section class="one-column">

  <section class="well">
    <h2>Gift Card for {{ shop.name }}</h2>
    <p>Choose an amount and purchase a gift card. The recipient can redeem it at checkout.</p>

    <form method="POST" action="/gift-card/add-to-cart" class="gift-card-form">
      {% include "snippets/csrf.j2" %}

      <label for="gift-card-amount">Amount</label>
      <div class="gift-card-slider-group">
        <input type="range"
               id="gift-card-slider"
               min="{{ min_dollars }}"
               max="{{ max_dollars }}"
               step="1"
               value="{{ ((min_dollars + max_dollars) / 2)|round|int }}"
               class="gift-card-slider" />
        <div class="gift-card-amount-input-group">
          <span class="gift-card-currency">$</span>
          <input type="number"
                 id="gift-card-amount"
                 name="amount"
                 min="{{ min_dollars }}"
                 max="{{ max_dollars }}"
                 step="0.01"
                 value="{{ ((min_dollars + max_dollars) / 2)|round|int }}.00"
                 class="gift-card-amount-input"
                 required />
        </div>
      </div>

      <label for="gift-email">Recipient Email (optional)</label>
      <input type="email"
             id="gift-email"
             name="gift_email"
             placeholder="friend@example.com"
             class="mps-text-input" />
      <small>If provided, the gift card code will be emailed to this address.</small>

      <br/><br/>

      <label for="gift-message">Gift Message (optional)</label>
      <input type="text"
             id="gift-message"
             name="gift_message"
             maxlength="500"
             placeholder="Happy birthday!"
             class="mps-text-input" />

      <br/><br/>

      <button type="submit" class="mps-button mps-button-green">Add Gift Card to Cart</button>
    </form>
  </section>

  <br/>

  <section class="well">
    <h3>Check Gift Card Balance</h3>
    <form method="GET" action="/s/{{ shop.uuid_str }}/gift-card" class="gift-card-balance-form">
      <input type="text"
             name="check_code"
             placeholder="GC-XXXXXXXXXXXXXXXX"
             class="mps-text-input"
             value="{{ request.params.get('check_code', '') }}" />
      <button type="submit" class="mps-button mps-button-small">Check Balance</button>
    </form>

    {% if balance_result %}
      {% if balance_result.error %}
      <p class="alert-error">{{ balance_result.error }}</p>
      {% else %}
      <p class="alert-success">
        <strong>{{ balance_result.code }}</strong><br/>
        Balance: <strong>${{ '{:,.2f}'.format(balance_result.balance) }}</strong>
        (original: ${{ '{:,.2f}'.format(balance_result.initial_amount) }})
      </p>
      {% endif %}
    {% endif %}
  </section>

</section>

<script>
(function() {
  var slider = document.getElementById('gift-card-slider');
  var input = document.getElementById('gift-card-amount');
  if (slider && input) {
    slider.addEventListener('input', function() {
      input.value = parseFloat(slider.value).toFixed(2);
    });
    input.addEventListener('input', function() {
      var val = parseFloat(input.value);
      if (!isNaN(val)) {
        slider.value = val;
      }
    });
  }
})();
</script>

{%- endblock -%}
