{{ header }}
<div id="account-recurring" class="container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
      <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>

  <div class=“container-fluid”>
    {% if error_warning %}
      <div class=“alert alert-danger alert-dismissible”><i class=“fa fa-exclamation-circle”></i> {{ error_warning }}
        <button type=“button” class=“close” data-dismiss=“alert”>&times;</button>
      </div>
    {% endif %}
    {% if success %}
      <div class=“alert alert-success alert-dismissible”><i class=“fa fa-check-circle”></i> {{ success }}
        <button type=“button” class=“close” data-dismiss=“alert”>&times;</button>
      </div>
    {% endif %}
  </div>
  <div class="row">{{ column_left }}
    {% if column_left and column_right %}
      {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
      {% set class = 'col-sm-9' %}
    {% else %}
      {% set class = 'col-sm-12' %}
    {% endif %}
    <div id="content" class="{{ class }}">{{ content_top }}
      <h2>{{ text_heading_title_subscription }}</h2>

      <div class="buttons clearfix">

        {% if subscription_details.status  not in ["cancelled","completed","expired"] %}
          <div class="" style="float: right !important;margin-left: 13px !important;"><a href="{{ cancelurl }}" class="btn btn-default">{{ button_cancel }}</a></div>
          {% if subscription_details.status == "active" %}
            <div class="pull-right"><a href="{{ pauseurl }}" class="btn btn-primary">{{ subscription_pause }}</a></div>
          {% elseif subscription_details.status == "paused" %}
            <div class="pull-right"><a href="{{ resumeurl }}" class="btn btn-primary">{{ subscription_resume }}</a></div>
          {% endif %}

        {% endif %}

      </div>

      <div class="table-responsive">
        <table class="table table-bordered table-hover">
          <thead>
          <tr>
            <td class="text-left" colspan="2">{{ text_subscription_detail }}</td>

          </tr>

          </thead>
          <tbody>
          <tr>
            <td class="text-left" style="width: 50%;">
              <b>{{ text_product }}</b> {{ subscription_details.productName }}<br/>
              <b>{{ text_order_subscription_id }}</b> #{{ subscription_details.subscription_id }}<br/>
              <b>{{ text_date_createdAt }}</b> {{ subscription_details.created_at | date('d-M-Y') }}<br/>
              <b>{{ text_status }}</b> {{ subscription_details.status | capitalize }}<br />
              {% if  subscription_details.status == "active"%}
                <b>{{ text_date_next_charge_at }}</b> {{ subscription_details.next_charge_at | date('d-M-Y') }}<br />
              {% endif %}

          </tr>
          </tbody>
        </table>
        <table class="table table-bordered table-hover">
          <thead>
          <tr>
            <td class="text-left">{{ text_plan_details }}
              {% if subscription_details.status  not in ["cancelled","paused","completed","expired","created"] %}
                <div class="pull-right" id="update-button"><a onclick="updatePlan()" class="btn btn-primary" id="updatePlan ">{{ update_plan }}</a></div>
              {% endif %}
            </td>
          </tr>
          </thead>
          <tbody>
          <tr id="plan-details">
            <td class="text-left" style="width: 50%;">
              <b>{{ text_plan_name }}</b> {{ subscription_details.plan_name }}<br/>
              <b>{{ text_plan_id }}</b> #{{ subscription_details.plan_id }}<br/>
              <b>{{ text_plan_type }}</b> {{ subscription_details.plan_type | capitalize }}<br/>
            </td>
          </tr>
          <tr id="update-form" style="display: none;">
            <td class="text-left" >
              <form action="{{ updateUrl }}" method="post" name="update-plan" id="edit-plan" style="margin: 1% 21%;">
                <div class="form-group">
                  <label class="control-label" for="input-email">{{ text_plan_list }}</label>
                  <select id="plan-select" name="plan_entity_id" class="form-control">
                    <option value="">Select Plan</option>
                    {% for plan in plan_data %}
                      <option value="{{ plan.entity_id }}"
                              {% if plan.entity_id == subscription_details.plan_entity_id %}
                                selected
                              {% endif %}
                      >{{ plan.plan_name }}</option>
                    {% endfor %}
                  </select>
                </div>
                <div class="form-group">
                  <label class="control-label">{{ text_qty }}</label>
                  <input type="text" name="qty" value="{{ subscription_details.qty }}" placeholder="{{ text_qty }}" id="qty" class="form-control" />
                </div>
                <input type="hidden" name="subscriptionId" value="{{ subscription_details.subscription_id }}"  id="subscription_id" class="form-control" />
                <input type="submit" value="{{ update_plan }}" id="plan-update" class="btn btn-primary" />
                <input type="button" value="{{ button_cancel }}" class="btn btn-default" id="cancel" style="margin-left: 20px;" />

              </form>

            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <h3>{{ text_invoice }}</h3>
      <div class="table-responsive">
        <table class="table table-bordered table-hover">
          <thead>
          <tr>
            <td class="text-left">{{ text_date }}</td>
            <td class="text-left">{{ text_invoice_id }}</td>
            <td class="text-left">{{ text_amount }}</td>
            <td class="text-left">{{ text_addon }}</td>
            <td class="text-left">{{ text_status }}</td>
            <td class="text-left">{{ text_total_amount }}</td>
          </tr>
          </thead>
          <tbody>

          {% if items is not empty %}

            {% if (subscription_details.next_charge_at != subscription_details.end_at)  and (subscription_details.status != "cancelled") and  (subscription_details.status != "created" ) and (subscription_details.remaining_count != 0) %}
              <tr>
                <td class="text-left">{{ items.0.billing_start | date('M d, Y') | default("--") }}</td>
                <td class="text-left">--</td>
                <td class="text-left">{{  items.0.line_items.0.net_amount/100 }}
                  <br/><small>{{ items.0.line_items.0.quantity }} x {{ items.0.line_items.0.unit_amount/100 }} per unit</small>
                </td>
                <td class="text-left">--</td>
                <td class="text-left">Next Due</td>
                <td class="text-left">{{  items.0.line_items.0.net_amount/100 }}</td>
              </tr>
            {% else %}
              {% for item in items %}
                <tr>
                  <td class="text-left">{{ item.billing_start | date('M d, Y') | default("--") }}</td>
                  <td class="text-left">{{ item.id }}</td>
                  <td class="text-left">{{  item.line_items.0.net_amount/100 }}
                    <br/><small>{{ items.line_items.0.quantity }} x {{ item.line_items.0.unit_amount/100 }} per unit</small>
                  </td>
                  <td class="text-left">
                    {% if item.line_items.1 is not empty %}
                      {{ item.line_items.1.name }}
                    {% endif %}<br/>
                    {{  item.line_items.1.quantity }} x {{ item.line_items.1.unit_amount/100 }} per unit

                  </td>

                  <td class="text-left">Next Due</td>
                  <td class="text-left">{{  items.amount /100 }}</td>
                </tr>

                </tr>
              {% endfor %}
            {% endif %}

          {% else %}
            <tr>
              <td colspan="6" class="text-center">{{ text_no_results }}</td>
            </tr>
          {% endif %}
          </tbody>
        </table>
      </div>
      {{ content_bottom }}</div>
    {{ column_right }}</div>
</div>
{{ footer }}
<script>
  function updatePlan() {
    $("#plan-details").hide();
    $("#update-button").hide();
    $("#update-form").show();
  }
  $('#cancel').on('click',function () {
    $("#plan-details").show();
    $("#update-form").hide();
    $("#update-button").show();
  });

  $('#plan-update').on('click',function (e) {
    e.preventDefault();

    if($('#plan-select').val().trim().length == 0) {
      alert("Please select the plan to update");
    } else if($('#qty').val().trim().length > 0 && (isNaN(parseInt($('#qty').val().trim())) ||  $('#qty').val().trim() <= 0)){
      alert("Qty must be in number and greater than Zero");
    } else {
      $('#edit-plan').submit();
    }
  });

</script>