{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right">
        <button type="submit" form="form-reverb" class="btn btn-primary">
          <i class="fa fa-floppy-o"></i> {{ button_save }}
        </button>
        <a href="{{ cancel }}" class="btn btn-default">
          <i class="fa fa-reply"></i> {{ button_cancel }}
        </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 %}
    {% 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 class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_edit }}</h3>
      </div>
      <div class="panel-body">

        <ul class="nav nav-tabs">
          <li class="active"><a href="#tab-settings" data-toggle="tab">{{ tab_settings }}</a></li>
          <li><a href="#tab-categories" data-toggle="tab">{{ tab_categories }}</a></li>
          <li><a href="#tab-log" data-toggle="tab">{{ tab_log }}</a></li>
        </ul>

        <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-reverb" class="form-horizontal">

          <!-- ================================================================ -->
          <!-- TAB: Settings -->
          <!-- ================================================================ -->
          <div class="tab-content">
          <div class="tab-pane active" id="tab-settings">

            <h4>{{ text_api_settings }}</h4>

            <div class="form-group required">
              <label class="col-sm-2 control-label">{{ entry_api_token }}</label>
              <div class="col-sm-10">
                <input type="text" name="module_reverb_api_token"
                       value="{{ module_reverb_api_token }}"
                       class="form-control" placeholder="e.g. abc123..." />
                <span class="help-block">{{ help_api_token }}</span>
              </div>
            </div>

            <div class="form-group">
              <label class="col-sm-2 control-label">{{ entry_status }}</label>
              <div class="col-sm-10">
                <select name="module_reverb_status" class="form-control">
                  <option value="1" {% if module_reverb_status %}selected{% endif %}>{{ text_enabled }}</option>
                  <option value="0" {% if not module_reverb_status %}selected{% endif %}>{{ text_disabled }}</option>
                </select>
              </div>
            </div>

            <div class="form-group">
              <label class="col-sm-2 control-label">{{ entry_sync_direction }}</label>
              <div class="col-sm-10">
                <select name="module_reverb_sync_direction" class="form-control">
                  <option value="push" {% if module_reverb_sync_direction == 'push' %}selected{% endif %}>{{ text_sync_push }}</option>
                  <option value="both" {% if module_reverb_sync_direction == 'both' %}selected{% endif %}>{{ text_sync_both }}</option>
                </select>
              </div>
            </div>

            <h4>{{ text_shipping_settings }}</h4>

            <div class="form-group">
              <label class="col-sm-2 control-label">{{ entry_shipping_domestic }}</label>
              <div class="col-sm-4">
                <div class="input-group">
                  <span class="input-group-addon">$</span>
                  <input type="text" name="module_reverb_shipping_domestic"
                         value="{{ module_reverb_shipping_domestic }}"
                         class="form-control" />
                </div>
                <span class="help-block">{{ help_shipping_domestic }}</span>
              </div>
            </div>

            <div class="form-group">
              <label class="col-sm-2 control-label">{{ entry_shipping_international }}</label>
              <div class="col-sm-4">
                <div class="input-group">
                  <span class="input-group-addon">$</span>
                  <input type="text" name="module_reverb_shipping_international"
                         value="{{ module_reverb_shipping_international }}"
                         class="form-control" />
                </div>
                <span class="help-block">{{ help_shipping_international }}</span>
              </div>
            </div>

            <h4>{{ text_sync_settings }}</h4>

            <div class="form-group">
              <label class="col-sm-2 control-label">Categories</label>
              <div class="col-sm-10">
                <select name="module_reverb_sync_categories[]" multiple class="form-control" size="10">
                  {% for category in categories %}
                  <option value="{{ category.category_id }}"
                    {% if category.category_id in module_reverb_sync_categories %}selected{% endif %}>
                    {{ category.name|raw }}
                  </option>
                  {% endfor %}
                </select>
                <span class="help-block">{{ help_sync_categories }}</span>
              </div>
            </div>

            <h4>{{ text_manual_sync }}</h4>

            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="button" id="btn-sync-now" class="btn btn-warning">
                  <i class="fa fa-refresh"></i> {{ button_sync_now }}
                </button>
                <span id="sync-result" class="help-block" style="display:none;"></span>
              </div>
            </div>

            <h4>{{ text_order_import }}</h4>

            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="button" id="btn-import-orders" class="btn btn-info">
                  <i class="fa fa-download"></i> {{ button_import_orders }}
                </button>
                <span id="import-result" class="help-block" style="display:none;"></span>
              </div>
            </div>

          </div><!-- #tab-settings -->

          <!-- ================================================================ -->
          <!-- TAB: Category Mapping -->
          <!-- ================================================================ -->
          <div class="tab-pane" id="tab-categories">
            <p class="help-block">{{ text_category_mapping_help }}</p>

            {% if module_reverb_sync_categories is empty %}
            <div class="alert alert-info">{{ text_no_categories }}</div>
            {% else %}
            <table class="table table-bordered table-hover">
              <thead>
                <tr>
                  <th>{{ column_oc_category }}</th>
                  <th>{{ column_reverb_category }}</th>
                </tr>
              </thead>
              <tbody>
                {% for category in categories %}
                  {% if category.category_id in module_reverb_sync_categories %}
                  <tr>
                    <td>{{ category.name|raw }}</td>
                    <td>
                      <select name="module_reverb_category_mappings[{{ category.category_id }}]"
                              class="form-control">
                        <option value="">-- Select Reverb Category --</option>
                        {% for group_name, group_cats in reverb_categories_grouped %}
                        <optgroup label="{{ group_name }}">
                          {% for rc in group_cats %}
                          <option value="{{ rc.uuid }}"
                            {% if module_reverb_category_mappings[category.category_id] is defined
                                 and module_reverb_category_mappings[category.category_id] == rc.uuid %}
                                 selected
                            {% endif %}>
                            {{ rc.full_name|default(rc.name) }}
                          </option>
                          {% endfor %}
                        </optgroup>
                        {% endfor %}
                      </select>
                    </td>
                  </tr>
                  {% endif %}
                {% endfor %}
              </tbody>
            </table>
            {% endif %}
          </div><!-- #tab-categories -->

          <!-- ================================================================ -->
          <!-- TAB: Sync Log -->
          <!-- ================================================================ -->
          <div class="tab-pane" id="tab-log">
            {% if sync_log is empty %}
            <p>{{ text_no_log }}</p>
            {% else %}
            <table class="table table-bordered table-hover table-striped">
              <thead>
                <tr>
                  <th>{{ column_date }}</th>
                  <th>{{ column_product }}</th>
                  <th>{{ column_direction }}</th>
                  <th>{{ column_status }}</th>
                  <th>{{ column_message }}</th>
                </tr>
              </thead>
              <tbody>
                {% for entry in sync_log %}
                <tr class="{{ entry.status == 'error' ? 'danger' : '' }}">
                  <td>{{ entry.created_at }}</td>
                  <td>{{ entry.product_name ?? entry.product_id }}</td>
                  <td>{{ entry.direction == 'push' ? text_push : text_pull }}</td>
                  <td>
                    <span class="label label-{{ entry.status == 'success' ? 'success' : 'danger' }}">
                      {{ entry.status == 'success' ? text_log_success : text_error }}
                    </span>
                  </td>
                  <td>{{ entry.message }}</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
            {% endif %}
          </div><!-- #tab-log -->

          </div><!-- .tab-content -->
        </form>

      </div><!-- .panel-body -->
    </div><!-- .panel -->
  </div><!-- .container-fluid -->
</div><!-- #content -->

<script>
$(function() {
    $('#btn-sync-now').on('click', function() {
        var $btn = $(this);
        var $result = $('#sync-result');

        $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Syncing...');
        $result.hide();

        var _p = new URLSearchParams(window.location.search);
        var _syncUrl = 'index.php?route=extension/module/reverb/sync&user_token=' + encodeURIComponent(_p.get('user_token') || '');

        $.ajax({
            url: _syncUrl,
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                if (data.success) {
                    $result.removeClass('text-danger').addClass('text-success').text(data.message).show();
                } else {
                    $result.removeClass('text-success').addClass('text-danger').text(data.error).show();
                }
            },
            error: function() {
                $result.removeClass('text-success').addClass('text-danger').text('Sync request failed.').show();
            },
            complete: function() {
                $btn.prop('disabled', false).html('<i class="fa fa-refresh"></i> {{ button_sync_now }}');
            }
        });
    });

    $('#btn-import-orders').on('click', function() {
        var $btn    = $(this);
        var $result = $('#import-result');

        $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Importing...');
        $result.hide();

        var _p = new URLSearchParams(window.location.search);
        var _importUrl = 'index.php?route=extension/module/reverb/importOrders&user_token=' + encodeURIComponent(_p.get('user_token') || '');

        $.ajax({
            url: _importUrl,
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                if (data.success) {
                    $result.removeClass('text-danger').addClass('text-success').text(data.message).show();
                } else {
                    $result.removeClass('text-success').addClass('text-danger').text(data.error).show();
                }
            },
            error: function() {
                $result.removeClass('text-success').addClass('text-danger').text('Import request failed.').show();
            },
            complete: function() {
                $btn.prop('disabled', false).html('<i class="fa fa-download"></i> {{ button_import_orders }}');
            }
        });
    });
});
</script>

{{ footer }}