{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <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"><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"><i class="fa fa-check-circle"></i> {{ success }}
        <button type="button" class="close" data-dismiss="alert">&times;</button>
      </div>
    {% endif %}
    <div class="panel-group" id="collapse">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title"><a href="#collapse-version" data-toggle="collapse" data-parent="#collapse"><i class="fa fa-refresh"></i> {{ text_version }}</a></h3>
        </div>
        <div id="collapse-version" class="panel-collapse collapse in">
          <div class="panel-body">
            <fieldset>
              {% if error_warning %}
              <legend class="text-danger" id="btn-version">{{ text_update }}</legend>
              {% else %}
              <legend id="btn-version">{{ text_update }}</legend>
              {% endif %}
            </fieldset>
            <div class="alert alert-info">
              <p><strong><i class="fa fa-exclamation-circle "></i> Tips: Before upgrading it's very important to</strong></p>
              <ol>
                <li>Make a complete backup of your web site! <br/>
                  Backup <a href="{{ backup }}">here</a>; <br/>
                  If you are using the cloud version, you can backup with your opencart account <a href="{{ opencart_account }}" target="_blank">here</a>.</li>
                <li>Check the extensions installed are compatible with the latest version</li>
                <li>It's better if you could copy your site to a test server and practise upgrading before starting with the live web site.</li>
              </ol>
            </div>
            <fieldset>
              <legend id="version">{{ text_change }}</legend>
              <textarea wrap="off" rows="10" readonly class="form-control">{{ log }}</textarea>
            </fieldset>
            <br/>
            <div class="text-right"><a href="#collapse-compatible" data-toggle="collapse" data-parent="#collapse" class="btn btn-primary"><i class="fa fa-arrow-right"></i> {{ button_continue }}</a></div>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title"><a href="#collapse-compatible" data-toggle="collapse" data-parent="#collapse"><i class="fa fa-random"></i> {{ text_compatibility }}</a></h3>
        </div>
        <div id="collapse-compatible" class="panel-collapse collapse">
          <div class="panel-body">
           <div class="alert alert-warning">
              Before upgrading, it's very important to check the extensions installed are compatible with the latest version!
              <button type="button" class="close" data-dismiss="alert">&times;</button>
            </div>
            <table class="table table-bordered table-hover">
              <thead>
              <tr>
                <td class="text-left">{{ column_name }}</td>
                <td class="text-center">{{ column_compatible }}</td>
                <td class="text-center">{{ column_available }}</td>
              </tr>
              </thead>
              <tbody>
              {% if extensions %}
                {% for extension in extensions %}
                  <tr>

                    <td class="text-left"><a href="{{ extension.link }}">{{ extension.name }}</a></td>
                    <td class="text-center">{% if extension.compatible %}<i class="fa fa-check text-success"></i>{% else %}<i class="fa fa-times text-danger"></i>{% endif %}</td>
                    <td class="text-center">{% if extension.available %}<i class="fa fa-check text-success"></i>{% else %}<i class="fa fa-times text-danger"></i>{% endif %}</td>
                  </tr>
                {% endfor %}
              {% else %}
                <tr>
                  <td class="text-center" colspan="3">{{ text_no_results }}</td>
                </tr>
              {% endif %}
              </tbody>
            </table>
            <br/>
            <div class="text-right"><a href="#collapse-upgrade" data-toggle="collapse" data-parent="#collapse" class="btn btn-primary"><i class="fa fa-arrow-right"></i> {{ button_continue }}</a></div>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title"><a href="#collapse-upgrade" data-toggle="collapse" data-parent="#collapse"><i class="fa fa-check"></i> {{ text_upgrade }}</a></h3>
        </div>
        <div id="collapse-upgrade" class="panel-collapse collapse">
          <div class="panel-body">
            <fieldset>
              <legend>{{ text_progress }}</legend>
              <div class="form-group">
                <label class="col-sm-2 control-label">Progress</label>
                <div class="col-sm-10">
                  <div id="progress-download" class="progress">
                    <div id="progress-bar" class="progress-bar"></div>
                  </div>
                  <div id="progress-text"></div>
                </div>
              </div>
              <div class="col-sm-10 col-sm-offset-2">
                <div class="form-group">
                  {% if upgrade %}
                    <button type="button" id="button-upgrade" data-loading-text="{{ text_loading }}" class="btn btn-success"><i class="fa fa-play"></i> {{ button_start }}</button>
                  {% else %}
                    <button type="button" id="button-upgrade" data-loading-text="{{ text_loading }}" class="btn btn-success" disabled="disabled"><i class="fa fa-play"></i> {{ button_start }}</button>
                  {% endif %}
                </div>
              </div>
            </fieldset>
            <fieldset>
              <legend>Upgrade Log</legend>
              <textarea id="log" wrap="off" rows="10" readonly class="form-control"></textarea>
            </fieldset>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript"><!--
$('#button-upgrade').on('click', function() {
	$('#progress-bar').css('width', '0%');
	$('#progress-bar').removeClass('progress-bar-danger progress-bar-success');
	$('#progress-text').html('{{ text_download }}');
	$('#log').append('{{ text_download }}' + "\n");

	$.ajax({
		url: 'index.php?route=tool/upgrade/download&user_token={{ user_token }}&version={{ version }}',
		dataType: 'json',
		beforeSend: function() {
			$('#button-upgrade').button('loading');
		},
		success: function(json) {
			if (json['error']) {
				$('#progress-bar').addClass('progress-bar-danger');
				$('#progress-text').html('<div class="text-danger">' + json['error'] + '</div>');
				$('#log').append(json['error'] + "\n");
			}

			if (json['text']) {
				$('#progress-bar').css('width', '20%');
				$('#progress-text').html(json['text']);
				$('#log').append(json['text'] + "\n");
			}

			if (json['next']) {
				next(json['next'], 1);
			}
		},
		error: function(xhr, ajaxOptions, thrownError) {
			$('#log').append(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
		}
	});
});

function next(url, i) {
	i = i + 1;

	$.ajax({
		url: url,
		dataType: 'json',
		success: function(json) {
			$('#progress-bar').css('width', (i * 20) + '%');

			if (json['error']) {
				$('#progress-bar').addClass('progress-bar-danger');
				$('#progress-text').html('<div class="text-danger">' + json['error'] + '</div>');
				$('#log').append(json['error'] + "\n");

				$('#button-upgrade').button('reset');
			}

			if (json['success']) {
				$('#progress-bar').addClass('progress-bar-success');
				$('#progress-text').html('<span class="text-success">' + json['success'] + '</span>');
				$('#log').append(json['success'] + "\n");

				$('#button-upgrade').button('reset');
			}

			if (json['text']) {
                $('#progress-text').html(json['text']);
				$('#log').append(json['text'] + "\n");
			}

			if (json['next']) {
				next(json['next'], i);
			}
		},
		error: function(xhr, ajaxOptions, thrownError) {
			$('#log').append(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
		}
	});
}
//--></script>
{{ footer }}