{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right">
        <button type="submit" form="form-subscription" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa fa-save"></i></button>
        <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a></div>
      <h1>{{ heading_title }}</h1>
      <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
          <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ul>
    </div>
  </div>
  <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 %}
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_form }}</h3>
      </div>
      <div class="panel-body">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#tab-general" data-toggle="tab">{{ tab_general }}</a></li>
          <li><a href="#tab-history" data-toggle="tab">{{ tab_history }}</a></li>
          <li><a href="#tab-transaction" data-toggle="tab">{{ tab_transaction }}</a></li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="tab-general">
            <div class="tab-content">
              <form id="form-subscription" class="form-horizontal">
                <div class="form-group">
                  <label class="col-sm-2 control-label" for="input-subscription-id">{{ text_subscription_id }}</label>
                  <div class="col-sm-10">
                    {{ subscription_id }}
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-2 control-label" for="input-order-id">{{ text_orders_id }}</label>
                  <div class="col-sm-10">
                    <a href="index.php?route=sale/order/info&user_token={{ user_token }}&order_id={{ order_id }}" target="_blank">{{ order_id }}</a>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-2 control-label" for="input-customer">{{ text_customer }}</label>
                  <div class="col-sm-10">
                    <a href="index.php?route=customer/customer/edit&user_token={{ user_token }}&customer_id={{ customer_id }}" target="_blank">{{ customer }}</a>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-2 control-label" for="input-date-added">{{ text_date_added }}</label>
                  <div class="col-sm-10">
                    {{ date_added }}
                  </div>
                </div>
                <div class="form-group text-right">
                  <label class="col-sm-2 control-label" for="input-remaining"><strong>{{ text_remaining }}</strong></label>
                  <div class="col-sm-10">
                    {% if duration %}
                      {{ remaining }}
                      <button id="button-remaining" data-loading-text="{{ text_loading }}" data-toggle="tooltip" title="{{ button_remaining }}" class="btn btn-success btn-xs"><i class="fa fa-plus-circle"></i></button>
                    {% else %}
                      {{ text_cancel }}
                    {% endif %}
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-2 control-label" for="input-date-next"><strong>{{ text_date_next }}</strong></label>
                  <div class="col-sm-10">
                    {{ date_next }}
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-2 control-label" for="input-order-status"><strong>{{ text_order_status }}</strong></label>
                  <div class="col-sm-10">
                    {{ order_status }}
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-2 control-label" for="input-subscription-plan">{{ entry_subscription_plan }}</label>
                  <div class="col-sm-10">
                    <select name="subscription_plan_id" id="input-subscription-plan" class="form-control">
                      <option value="">{{ text_select }}</option>
                      {% for subscription_plan in subscription_plans %}
                        <option value="{{ subscription_plan.subscription_plan_id }}"{% if subscription_plan.subscription_plan_id == subscription_plan_id %} selected{% endif %}>{{ subscription_plan.name }}</option>
                      {% endfor %}
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-2 control-label" for="input-payment-method">{{ entry_payment_method }}</label>
                  <div class="col-sm-10">
                    <select name="customer_payment_id" id="input-payment-method" class="form-control">
                      <option value="">{{ text_select }}</option>
                      {% for payment_method in payment_methods %}
                        <option value="{{ payment_method.customer_payment_id }}"{% if payment_method.customer_payment_id == customer_payment_id %} selected{% endif %}>{{ payment_method.name }}</option>
                      {% endfor %}
                    </select>
                  </div>
                </div>
                <fieldset>
                  <legend>{{ text_product }}</legend>
                  <table class="table table-bordered">
                    <thead>
                      <tr>
                        <td>{{ column_product }}</td>
                        <td>{{ column_quantity }}</td>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td><a href="{{ product }}" target="_blank">{{ product_name }}</a>
                          <br/>
                          <small class="text-muted">{{ description }}</small>
                        </td>
                        <td>{{ quantity }}</td>
                      </tr>
                    </tbody>
                  </table>
                </fieldset>

                <input type="hidden" name="subscription_id" value="{{ subscription_id }}" id="input-subscription-id"/>
              </form>
            </div>
          </div>
          <div id="tab-history" class="tab-pane">
            <form id="form-history" class="form-horizontal">
              <fieldset>
                <legend>{{ text_history }}</legend>
                <div id="history"></div>
              </fieldset>
              <br/>
              <fieldset>
                <legend>{{ text_history_add }}</legend>
                <div class="form-group">
                  <label class="col-sm-2 control-label" for="input-comment">{{ entry_subscription_status }}</label>
                  <div class="col-sm-10">
                    <select name="subscription_status_id" id="input-subscription-status" class="form-control"/>
                      {% for subscription_status in subscription_statuses %}
                        <option value="{{ subscription_status.subscription_status_id }}"{% if subscription_status.subscription_status_id == subscription_status_id %} selected{% endif %}>{{ subscription_status.name }}</option>
                      {% endfor %}
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-2 control-label" for="input-notify">{{ entry_notify }}</label>
                  <div class="col-sm-10">
                    <div class="checkbox">
                      <input type="checkbox" name="notify" value="1" id="input-notify"/>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-2 control-label" for="input-comment">{{ entry_comment }}</label>
                  <div class="col-sm-10">
                    <textarea name="comment" rows="8" placeholder="{{ entry_comment }}" id="input-comment" class="form-control"></textarea>
                  </div>
                </div>
              </fieldset>
              <div class="text-right">
                <button id="button-history" data-loading-text="{{ text_loading }}" class="btn btn-primary"><i class="fa fa-plus-circle"></i> {{ button_history_add }}</button>
              </div>
            </form>
          </div>
          <div id="tab-transaction" class="tab-pane">
            <form id="form-transaction" class="form-horizontal">
              <fieldset>
                <legend>{{ text_transaction }}</legend>
                <div id="transaction"></div>
              </fieldset>
              <br/>
              <fieldset>
                <legend>{{ text_transaction_add }}</legend>
                <div class="form-group">
                  <label class="col-sm-2 control-label" for="input-transaction-description">{{ entry_description }}</label>
                  <div class="col-sm-10">
                    <input type="text" name="description" value="" placeholder="{{ entry_description }}" id="input-transaction-description" class="form-control"/>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-2 control-label" for="input-amount">{{ entry_amount }}</label>
                  <div class="col-sm-10">
                    <input type="text" name="amount" value="" placeholder="{{ entry_amount }}" id="input-amount" class="form-control"/>
                  </div>
                </div>
              </fieldset>
              <div class="text-right">
                <button type="button" id="button-transaction" data-loading-text="{{ text_loading }}" class="btn btn-primary"><i class="fa fa-plus-circle"></i> {{ button_transaction_add }}</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript"><!--
      $('#input-subscription-plan, #input-payment-method').on('change', function (e) {
          e.preventDefault();

          var element = this;

          $.ajax({
              url: 'index.php?route=sale/subscription/save&user_token={{ user_token }}&subscription_id=' + $('#input-subscription-id').val(),
              type: 'post',
              dataType: 'json',
              data: $('#form-subscription').serialize(),
              beforeSend: function () {
                  $(element).prop('disabled', true).addClass('loading');
              },
              complete: function () {
                  $(element).prop('disabled', false).removeClass('loading');
              },
              success: function (json) {
                  $('.alert-dismissible').remove();

                  if (json['error']) {
                      $('#tab-general').prepend('<div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
                  }

                  if (json['success']) {
                      $('#tab-general').prepend('<div class="alert alert-success alert-dismissible"><i class="fa-solid fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
                  }
              },
              error: function (xhr, ajaxOptions, thrownError) {
                  console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
              }
          });
      });

      $('#history').on('click', '.pagination a', function (e) {
          e.preventDefault();

          $('#history').load(this.href);
      });

      $('#button-history').on('click', function (e) {
          e.preventDefault();

          $.ajax({
              url: 'index.php?route=sale/subscription/addHistory&user_token={{ user_token }}&subscription_id=' + $('#input-subscription-id').val(),
              type: 'post',
              dataType: 'json',
              data: $('#form-history').serialize(),
              beforeSend: function () {
                  $('#button-history').button('loading');
              },
              complete: function () {
                  $('#button-history').button('reset');
              },
              success: function (json) {
                  $('.alert-dismissible').remove();

                  if (json['error']) {
                      $('#tab-history').prepend('<div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
                  }

                  if (json['success']) {
                      $('#tab-history').prepend('<div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');

                      $('#history').load('index.php?route=sale/subscription/history&user_token={{ user_token }}&subscription_id=' + $('#input-subscription-id').val());

                      $('#tab-history textarea[name=\'comment\']').val('');
                  }
              },
              error: function (xhr, ajaxOptions, thrownError) {
                  console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
              }
          });
      });

      $('#transaction').on('click', '.pagination a', function (e) {
          e.preventDefault();

          $('#transaction').load(this.href);
      });

      $('#button-transaction').on('click', function (e) {
          e.preventDefault();

          $.ajax({
              url: 'index.php?route=sale/subscription/addTransaction&user_token={{ user_token }}&subscription_id=' + $('#input-subscription-id').val(),
              type: 'post',
              dataType: 'json',
              data: $('#form-transaction').serialize(),
              beforeSend: function () {
                  $('#button-transaction').button('loading');
              },
              complete: function () {
                  $('#button-transaction').button('reset');
              },
              success: function (json) {
                  $('.alert-dismissible').remove();

                  if (json['error']) {
                      $('#tab-transaction').prepend('<div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
                  }

                  if (json['success']) {
                      $('#tab-transaction').prepend('<div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');

                      $('#transaction').load('index.php?route=sale/subscription/transaction&user_token={{ user_token }}&subscription_id=' + $('#input-subscription-id').val());

                      $('#tab-transaction input[name=\'amount\']').val('');
                      $('#tab-transaction input[name=\'description\']').val('');
                  }
              },
              error: function (xhr, ajaxOptions, thrownError) {
                  console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
              }
          });
      });
  //--></script>
  <script type="text/javascript"><!--
      $(document).delegate('#button-remaining', 'click', function(e) {
          e.preventDefault();

          {% if not permission %}
              $('#content > .container-fluid').prepend('<div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_permission }} <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
          {% elseif not module_subscription_status %}
              $('#content > .container-fluid').prepend('<div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_module }} <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
          {% else %}
              {# Requires an API extension to connect. #}
              $.ajax({
                  url: '{{ catalog }}index.php?route=api/login',
                  type: 'post',
                  dataType: 'json',
                  data: 'key={{ api_key }}',
                  crossDomain: true,
                  success: function () {
                      $('.alert').remove();
                  },
                  error: function (xhr, ajaxOptions, thrownError) {
                      alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                  }
              }).then(function(json) {
                  if (json['error']) {
                      if (json['error']['key']) {
                          $('#content > .container-fluid').prepend('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error']['key'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
                      }

                      if (json['error']['ip']) {
                          $('#content > .container-fluid').prepend('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error']['ip'] + ' <button type="button" id="button-ip-add" data-loading-text="{{ text_loading }}" class="btn btn-danger btn-xs pull-right"><i class="fa fa-plus"></i>{{ button_ip_add }}</button></div>');
                      }
                  } else {
                    {# Requires a service extension. #}
                      $.ajax({
                          url: '{{ catalog }}index.php?route=extension/module/subscription/dateNext&api_token={{ api_token }}&subscription_id=' + $('#input-subscription-id').val(),
                          dataType: 'json',
                          success: function (json1) {
                              if (json1['status']) {
                                  $('#content > .container-fluid').prepend('<div class="alert alert-info"><i class="fa fa-exclamation-circle"></i> ' + json1['status'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
                              }
                          },
                          error: function (xhr, ajaxOptions, thrownError) {
                              console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                          }
                      }).done(function () {

                      });
                  }
              });
          {% endif %}
      });
  //--></script>
</div>
{{ footer }}