{% extends "nextcloud/base.html" %}

{% load static i18n compress %}

{% block title %} Payments {% endblock %}

{% block content %} 
<!-- Page Content -->
{% csrf_token %}
  <div class="row p-1 mt-4">
    <div class="col-lg-12 bg-white shadow-sm  border border-light rounded py-4 mb-4">
      <h3 class="text-5 font-weight-400 d-flex align-items-center px-1 mb-4">{% trans "Orders"%}</h3>
      <!-- Title
      =============================== -->
      <div class="transaction-title py-2 px-1">
        <div class="row">
          <div class="col-1 col-sm-1 text-center"><span class="">{% trans "ID"%}</span></div>
          <div class="col-2 col-sm-2 text-center"><span class="">{% trans "Date"%}</span></div>
          <div class="col-3 col-sm-3">{% trans "Description" %}</div>
          <div class="col-1 col-sm-1 d-none d-sm-block text-center">{% trans "OneTime Price"%}</div>
          <div class="col-1 col-sm-1 text-right">{% trans "Recurring Price"%}</div>
          <div class="col-1 col-sm-1 text-center"><span class="">{% trans "Currency"%}</span></div>
          <div class="col-2 col-sm-2 text-center">{% trans "End Date"%}</div>
          <div class="col-1 col-sm-1 text-center" >{% trans "Active"%}</div>
        </div>
      </div>
      <!-- Title End --> 
      
      <!-- Transaction List
      =============================== -->
      <div class="transaction-list">
        {% for order in object_list %}
            <div class="transaction-item px-1 py-4" data-id={{order.id}}>
                <div class="row align-items-center flex-row">
                    <div class="col-1 col-sm-1 text-center"> <span class="d-block text-3 font-weight-400">#{{order.id}}</span></div>
                    <div class="col-2 col-sm-2 text-center"> <span class="d-block text-3 font-weight-300">{{order.starting_date|date:"Y-m-d"}}</span></div>
                    <div class="col-3 col-sm-3"> <span class="d-block text-muted text-3">{{order.description}}</span></div>
                    <div class="col-1 col-sm-1 d-none d-sm-block text-right text-2"> <span class=" text-uppercase">{{order.one_time_price}}</span> </div>
                    <div class="col-1 col-sm-1 d-none d-sm-block text-right text-2"> <span class=" text-uppercase">{{order.recurring_price}}</span> </div>
                    <div class="col-1 col-sm-1 text-center text-2"><span class="">{{order.currency}}</span></div>
                    <div class="col-2 col-sm-2 d-none d-sm-block text-center text-2"> <span class=" text-uppercase">{{order.ending_date|date:"Y-m-d"}}</span> </div>
                    <div class="col-1 col-sm-1 text-center">
                      {% if order.is_closed %}
                      <span class="text-danger" data-toggle="tooltip" data-original-title="Closed"><i class="text-danger fas fa-times-circle"></i></span>
                    {% else %}
                      <span class="text-success" data-toggle="tooltip" data-original-title="Active"><i class="fas fa-check-circle"></i></span>
                    {% endif %}
                    <!-- <span class="float-right" data-toggle="tooltip" data-original-title="See Details"><i class="fas fa-bars"></i></span> -->
                    </div>
                </div>
                {% if not order.ending_date %}
                  <a href="#" class="cancel-subscription float-right text-1">{% trans "Cancel Subscription"%}</a>
                {% endif %}
            </div>
        {%endfor%}
      </div>
      <!-- Transaction List End --> 
      
      <!-- Pagination will handled later
      ============================================= -->
      <ul class="pagination justify-content-center mt-4 mb-0" style="display: none;">
        <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1"><i class="fas fa-angle-left"></i></a> </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item active"> <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a> </li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item d-flex align-content-center flex-wrap text-muted text-5 mx-1">......</li>
        <li class="page-item"><a class="page-link" href="#">15</a></li>
        <li class="page-item"> <a class="page-link" href="#"><i class="fas fa-angle-right"></i></a> </li>
      </ul>
      <!-- Paginations end -->  
    </div>
  </div>
</div>

<div
  class="modal fade"
  tabindex="-1"
  role="dialog"
  aria-labelledby="mySmallModalLabel"
  aria-hidden="true"
  id="mi-modal"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">{% trans "Cancel Subscription"%}</h4>
      </div>
      <div class="modal-body">
        <p>
          {% trans "Are you sure that you want to cancel this subscription?."%} </p>
          <p>
            {% blocktrans %} The instance will be active till the end date of the last bill and will be deleted
            after that. {% endblocktrans %}
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" id="modal-btn-yes">
          {% trans "Yes Cancel" %}
        </button>
        <button type="button" class="btn btn-secondary" id="modal-btn-no">
          {% trans "Close" %}
        </button>
      </div>
    </div>
  </div>
<div class="alert" role="alert" id="result"></div>
<!-- /.banner -->
{% endblock %} 

{% block js_extra %}
<script type="text/javascript">
  var modalConfirm = function (callback) {
    $(".cancel-subscription").on("click", function (event) {
      $('.selected').removeClass('selected');
      $(event.target).parent().addClass('selected');
      $("#mi-modal").modal("show");
    });

    $("#modal-btn-yes").on("click", function () {
      callback(true);
    });

    $("#modal-btn-no").on("click", function () {
      callback(false);
      $("#mi-modal").modal("hide");
    });
  };

  modalConfirm(function (confirm) {
    if (confirm) {
        var selected_order = $('.selected').data('id');
        $.ajax({
                url: '{% url "nextcloud:orders" %}',
                type: 'POST',
                data: {'order_id': selected_order, 'csrfmiddlewaretoken': '{{ csrf_token }}',},
                success: function (data) {  
                    $("#mi-modal").modal("hide"); 
                    window.location.reload();
                 }
        });
    }
  });
</script>
{% endblock %}
