{% extends "django_razorpay/base.html" %}
{% load static %}
{% block head %}{% endblock %}
{% block title %}Membership Fee Payment{% endblock %}

{% block main %}
<main>
    <div class="py-5 text-center">
      <h2 class="text-bold">Transactions</h2>
    </div>
    <div class="row g-5 align-items-center justify-content-center">
      <div class="col-md-7 col-lg-5">
          <div class="row">
          <div class="col-12">
              {% for message in messages %}
              <div class="alert {{ message.tags }} alert-dismissible fade show" role="alert">
              <strong>{{ message }}</strong>
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
              {% endfor %}
            </div>

          </div>
          <form class="row gx-3 gy-2 align-items-center mb-2">
          <div class="col">
              <label>Month</label>
            <select class="form-select form-label" id="monthSelect">
                {% for month in last_few_months %}
                {% if month.value == current_month %}
                <option value="{{month.value}}" selected>{{month.label}}</option>
                {% else %}
                <option value="{{month.value}}" >{{month.label}}</option>
                {% endif %}
                {% endfor %}
            </select>
          </div><div class="col">
              <label>Payment Type</label>
              <select class="form-select form-label" id="paymentTypeSelect">
                  {% for payment_type in payment_types %}
                    {% if payment_type.value == current_payment_type %}
                    <option value="{{payment_type.value}}" selected>{{payment_type.label}}</option>
                    {% else %}
                    <option value="{{payment_type.value}}" >{{payment_type.label}}</option>
                    {% endif %}
                {% endfor %}

            </select>
          </div>
        </form>
          {% if transactions %}
        <table class="table table-striped table-hover">
            {% if total_balance > 0 %}
            <caption><b>Total current balance: &#x20B9; {{total_balance}}</b></caption>
            {% endif %}
          <thead class="table-dark">
            <tr>
              <th scope="col">#</th>
              <th scope="col">Name/Label</th>
              <th scope="col">Amount (&#x20B9;)</th>
              <th scope="col">Date</th>
            </tr>
          </thead>
          <tbody>
            {% for transaction in transactions %}
            <tr>
              <td scope="row">{{forloop.counter}}</td>
              <td>{{transaction.get_label}}</td>
                <td>{{transaction.get_amount_html|safe}}</td>
              <td>{{transaction.date}}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
          {% else %}
          <div class="row">
            <div class="col-12">
              <div class="alert alert-danger alert-dismissible fade show" role="alert">
              <strong>No transactions found !!! </strong>
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            </div>
          </div>
          {% endif %}
      </div>
    </div>
  </main>
{% endblock %}
{% block js %}
<script>
  $(document).ready(function(){
    function redirect(month, paymentType){
        var url = "?month="+month+"&&payment-type="+paymentType
        window.location = url;
    }
    $(function(){
      $('#monthSelect').on('change', function () {
          var value = $(this).val();
          if (value) {
              redirect(value, $('#paymentTypeSelect').val());
              alert(url);
          }
          return false;
      });
      $('#paymentTypeSelect').on('change', function () {
          var value = $(this).val();
          if (value) {
              redirect($('#monthSelect').val(), value);
          }
          return false;
      });
    });

  });
</script>
{% endblock %}