{% extends "matrixhosting/base.html" %} {% load static i18n %} 
{% block content%}
<!-- Page Content -->
{% csrf_token %}
<div>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <table class="table">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Description</th>
              <th scope="col">Starting At</th>
              <th scope="col">Config</th>
              <th scope="col">Pricing Plan</th>
              <th scope="col">OneTime Price</th>
              <th scope="col">Recurring Price</th>
              <th scope="col">Ending At</th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            {% for object in object_list %}
            <tr data-id="{{object.id}}">
              <th scope="row">{{ object.id }}</th>
              <td>{{ object.description }}</td>
              <td>{{ object.starting_date }}</td>
              <td>{{ object.config }}</td>
              <td>{{ object.pricing_plan}}</td>
              <td>{{ object.one_time_price }}</td>
              <td>{{ object.recurring_price }}</td>
              <td>{{ object.ending_date }}</td>
              {% if object.ending_date %}
              <td></td>
              {% else %}
              <td>
                <button
                  class="btn btn-danger btn-sm cancel-subscription"
                  type="submit"
                  name="action"
                >
                  Cancel
                </button>
              </td>
              {% endif %}
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </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">Cancel Subscription</h4>
      </div>
      <div class="modal-body">
        <p>
          Are you sure that you want to cancel this subscription?. </p>
          <p>
          The instance will be active till the end date of the last bill and will be deleted
          after that.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" id="modal-btn-yes">
          Yes
        </button>
        <button type="button" class="btn btn-primary" id="modal-btn-no">
          No
        </button>
      </div>
    </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().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 "matrix:dashboard" %}',
                type: 'POST',
                data: {'order_id': selected_order, 'csrfmiddlewaretoken': '{{ csrf_token }}',},
                success: function (data) {  
                    $("#mi-modal").modal("hide"); 
                    window.location.reload();
                 }
        });
    }
  });
</script>
{% endblock %}