{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right">
	    <a href="{{ invoice }}" target="_blank" data-toggle="tooltip" title="{{ button_invoice_print }}" class="btn btn-info"><i class="fa fa-print"></i></a>
		<a href="{{ shipping }}" target="_blank" data-toggle="tooltip" title="{{ button_shipping_print }}" class="btn btn-info"><i class="fa fa-truck"></i></a>
		<a href="{{ edit }}" data-toggle="tooltip" title="{{ button_edit }}" class="btn btn-primary"><i class="fa fa-pencil"></i></a>
		<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">
    <div class="maxy-backdrop"></div>
	<div class="messages-body"></div>
	<div class="row">
      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading">
		    {% if order_payment_method or order_shipping_method %}
			  <div class="pull-right">
			    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog"></i> <i class="caret"></i></a>
			    <ul class="dropdown-menu dropdown-menu-header with-arrow dropdown-menu-right dropdown-menu-right-arrow header-top alerts-dropdown animate littleFadeInUp">
				  <li class="dropdown-header-arrow"><i class="fa fa-edit fa-fw"></i> {{ button_edit }}</li>
				  <li class="dropdown-header parent-menu">
				    <ul class="child-menu">
					  {% if order_payment_method %}<li><a onclick="updateOrderMethod('{{ order_id }}', 'payment');" class="btn-order">{{ text_payment_method }}</a></li>{% endif %}
					  {% if shipping_method and order_shipping_method %}<li><a onclick="updateOrderMethod('{{ order_id }}', 'shipping');" class="btn-order">{{ text_shipping_method }}</a></li>{% endif %}
				    </ul>
				  </li>
			    </ul>
			  </div>
			{% endif %}
			<h3 class="panel-title"><i class="fa fa-shopping-cart"></i> {{ text_order_detail }}</h3>
          </div>
          <table class="table">
            <tbody>
              <tr>
                <td style="width: 1%;"><button data-toggle="tooltip" title="{{ text_store }}" class="btn btn-info btn-xs"><i class="fa fa-shopping-cart fa-fw"></i></button></td>
                <td><a href="{{ store_url }}" target="_blank">{{ store_name }}</a></td>
              </tr>
              <tr>
                <td><button data-toggle="tooltip" title="{{ text_date_added }}" class="btn btn-info btn-xs"><i class="fa fa-calendar fa-fw"></i></button></td>
                <td>{{ date_added }}</td>
              </tr>
              <tr>
                <td><button data-toggle="tooltip" title="{{ text_payment_method }}" class="btn btn-info btn-xs"><i class="fa fa-credit-card fa-fw"></i></button></td>
                <td id="payment-method">{{ payment_method }}</td>
              </tr>
              {% if shipping_method %}
                <tr>
                  <td><button data-toggle="tooltip" title="{{ text_shipping_method }}" class="btn btn-info btn-xs"><i class="fa fa-truck fa-fw"></i></button></td>
                  <td id="shipping-method">{{ shipping_method }}</td>
                </tr>
              {% endif %}
            </tbody>
          </table>
        </div>
      </div>
      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading">
			{% if order_customer_detail %}
			  <div class="pull-right">
			    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog"></i> <i class="caret"></i></a>
			    <ul class="dropdown-menu dropdown-menu-header with-arrow dropdown-menu-right dropdown-menu-right-arrow header-top alerts-dropdown animate littleFadeInUp">
				  <li class="dropdown-header-arrow"><i class="fa fa-cog fa-fw"></i> {{ text_option }}</li>
				  <li class="dropdown-header parent-menu"><span class="parent-menu-header"><i class="fa fa-edit fa-fw"></i> {{ button_edit }}</span>
				    <ul class="child-menu">
				      {% if customer %}<li><a href="{{ customer }}" target="_blank">{{ text_customer_detail }}</a></li>{% endif %}
					  {% if order_customer_detail %}<li><a onclick="updateOrderData('{{ order_id }}', 'customer');" class="btn-order">{{ text_customer_order }}</a></li>{% endif %}
				    </ul>
				  </li>
				  <li class="divider"></li>
				  <li class="dropdown-header parent-menu"><span class="parent-menu-header"><i class="fa fa-star-o fa-fw"></i> {{ text_additional }}</span>
				    <ul class="child-menu">
					  <li><a href="{{ customer_order }}" target="_blank">{{ text_customer_orders }}</a></li>
					  <li><a href="mailto:{{ email }}">{{ text_customer_mail }}</a></li>
				    </ul>
				  </li>
			    </ul>
			  </div>
			{% endif %}
			<h3 class="panel-title"><i class="fa fa-user"></i> {{ text_customer_detail }}</h3>
          </div>
          <table class="table" id="order-customer-detail">
            <tr>
              <td style="width: 1%;"><button data-toggle="tooltip" title="{{ text_customer }}" class="btn btn-info btn-xs"><i class="fa fa-user fa-fw"></i></button></td>
              <td>
			    {% if customer %}
			      {{ firstname }} {{ lastname }}
				  {% else %}
                  {{ firstname }} {{ lastname }}
                {% endif %}
			  </td>
            </tr>
            <tr>
              <td><button data-toggle="tooltip" title="{{ text_customer_group }}" class="btn btn-info btn-xs"><i class="fa fa-group fa-fw"></i></button></td>
              <td>{{ customer_group }}</td>
            </tr>
            <tr>
              <td><button data-toggle="tooltip" title="{{ text_email }}" class="btn btn-info btn-xs"><i class="fa fa-envelope-o fa-fw"></i></button></td>
              <td>{{ email }}</td>
            </tr>
            {% if telephone %}
			  <tr>
                <td><button data-toggle="tooltip" title="{{ text_telephone }}" class="btn btn-info btn-xs"><i class="fa fa-phone fa-fw"></i></button></td>
                <td>{{ telephone }}</td>
              </tr>
			{% endif %}
          </table>
        </div>
      </div>
      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading">
			{% if not invoice_no or (customer and reward) or affiliate %}
			  <div class="pull-right" id="action-order-option">
			    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog"></i> <i class="caret"></i></a>
			    <ul class="dropdown-menu dropdown-menu-header with-arrow dropdown-menu-right dropdown-menu-right-arrow header-top alerts-dropdown animate littleFadeInUp">
				  <li class="dropdown-header-arrow"><i class="fa fa-cog fa-fw"></i> {{ text_option }}</li>
				  <li class="dropdown-header parent-menu">
				    <ul class="child-menu">
				      {% if not invoice_no %}<li id="generate-invoice"><a id="button-invoice" class="btn-order">{{ text_generate_invoice_no }}</a></li>{% endif %}
					  <li>
					    {% if customer and reward %}
						  {% if not reward_total %}
							<a id="button-reward-add" class="btn-order">{{ button_reward_add }}</a>
							{% else %}
							<a id="button-reward-remove" class="btn-order">{{ button_reward_remove }}</a>
						  {% endif %}
						{% endif %}
					  </li>
					  <li>
					    {% if affiliate %}
					      {% if not commission_total %}
					        <a id="button-commission-add" class="btn-order">{{ button_commission_add }}</a>
						    {% else %}
						    <a id="button-commission-remove" class="btn-order">{{ button_commission_remove }}</a>
					      {% endif %}
					    {% endif %}
					  </li>
				    </ul>
				  </li>
			    </ul>
			  </div>
			{% endif %}
			<h3 class="panel-title"><i class="fa fa-cog"></i> {{ text_additional }}</h3>
          </div>
          <table class="table">
            <tbody>
              <tr>
                <td>{{ text_invoice }}</td>
                <td id="invoice" class="text-right">{{ invoice_no }}</td>
              </tr>
              {% if customer and reward %}
			    <tr>
                  <td>{{ text_reward }}</td>
                  <td class="text-right">
				    {% if not reward_total %}
					  <span id="reward-data" class="text-success">{{ reward }}</span>
					  {% else %}
					  <span id="reward-data" class="text-danger">{{ reward }}</span>
				    {% endif %}
				  </td>
                </tr>
			  {% endif %}
              {% if affiliate %}
			    <tr>
                  <td>{{ text_affiliate }}<?php if ($affiliate) { ?>: <a href="{{ affiliate }}">{{ affiliate_firstname }} {{ affiliate_lastname }}</a><?php } ?></td>
                  <td class="text-right">
				    {% if not commission_total %}
				      <span id="commission-data" class="text-success">{{ commission }}</span>
					  {% else %}
					  <span id="commission-data" class="text-danger">{{ commission }}</span>
				    {% endif %}
				  </td>
                </tr>
			  {% endif %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="table-responsive">
      <table class="table table-bordered table-order" id="product">
        <thead>
          <tr>
            {% if order_product %}<td class="text-center" style="width: 1%;">{{ column_action }}</td>{% endif %}
			<td class="text-center" style="width: 1%;">{{ column_image }}</td>
			<td class="text-left">{{ column_product }}</td>
            <td class="text-left">{{ column_model }}</td>
            <td class="text-center">{{ column_quantity }}</td>
            <td class="text-right">{{ column_price }}</td>
            <td class="text-right">{{ column_total }}</td>
          </tr>
        </thead>
        <tbody id="order-products"></tbody>
		{% if order_product %}
		  <tfoot id="product-row-add" class="hidden form-horizontal">
			<tr>
			  <td colspan="7"><div id="option" class="col-sm-12"></div></td>
			</tr>
			<tr>
			  <td class="text-center"><a id="product-add-cancel" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-warning"><i class="fa fa-reply"></i></a></td>
			  <td></td>
			  <td class="text-left"><input type="text" name="product" id="add_product_name" value=""  class="form-control" /><input type="hidden" id="add_product_id" name="product_id" value="" /></td>
			  <td></td>
			  <td class="text-right"><input type="text" id="quantity" name="quantity" value="1"  class="form-control" /></td>
			  <td></td>
			  <td class="text-right"><a onclick="addOrderProduct('{{ order_id }}');" id="button-add-product" data-loading-text="{{ text_loading }}" class="btn btn-success"><i class="fa fa-plus-circle"></i> {{ button_product_add }}</a></td>
			</tr>
		  </tfoot>
		  <tfoot id="button-add">
			<tr>
			  <td colspan="7" class="text-right"><a class="btn btn-primary" id="show-add-product"><i class="fa fa-plus-circle"></i> {{ button_product_add }}</a></td>
			</tr>
		  </tfoot>
		{% endif %}
      </table>
	</div>
	<div class="row">
	  <div class="col-md-{% if shipping_method %}6{% else %}12{% endif %}">
        <div class="panel panel-default panel-margin">
          <div class="panel-heading">
			{% if order_payment_detail %}
			  <div class="pull-right"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog"></i> <i class="caret"></i></a>
			    <ul class="dropdown-menu dropdown-menu-header with-arrow dropdown-menu-right dropdown-menu-right-arrow header-top alerts-dropdown animate littleFadeInUp">
				  <li class="dropdown-header-arrow"><i class="fa fa-edit fa-fw"></i> {{ button_edit }}</li>
				  <li class="dropdown-header parent-menu">
				    <ul class="child-menu">
					  <li><a onclick="updateOrderData('{{ order_id }}', 'payment_address');" class="btn-order">{{ text_payment_address }}</a></li>
				    </ul>
				  </li>
			    </ul>
			  </div>
			{% endif %}
			<h3 class="panel-title"><i class="fa fa-credit-card"></i> {{ text_payment_address }}</h3>
          </div>
          <table class="table table-bordered">
            <tr>
              <td class="text-left" id="order-payment-address">{{ payment_address }}</td>
            </tr>
          </table>
        </div>
      </div>
	  {% if shipping_method %}
	    <div class="col-md-6">
          <div class="panel panel-default panel-margin">
            <div class="panel-heading">
			  {% if order_shipping_detail %}
				<div class="pull-right"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog"></i> <i class="caret"></i></a>
				  <ul class="dropdown-menu dropdown-menu-header with-arrow dropdown-menu-right dropdown-menu-right-arrow header-top alerts-dropdown animate littleFadeInUp">
					<li class="dropdown-header-arrow"><i class="fa fa-edit fa-fw"></i> {{ button_edit }}</li>
					<li class="dropdown-header parent-menu">
					  <ul class="child-menu">
						<li><a onclick="updateOrderData('{{ order_id }}', 'shipping_address');" class="btn-order">{{ text_shipping_address }}</a></li>
					  </ul>
					</li>
				  </ul>
				</div>
			  {% endif %}
			  <h3 class="panel-title"><i class="fa fa-truck"></i> {{ text_shipping_address }}</h3>
            </div>
            <table class="table table-bordered">
              <tr>
                <td class="text-left" id="order-shipping-address">{{ shipping_address }}</td>
              </tr>
            </table>
          </div>
        </div>
	  {% endif %}
	</div>
	{% if comment %}
	  <div class="table-responsive">
        <table class="table table-bordered">
          <thead>
            <tr>
              <td>{{ text_comment }}</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{{ comment }}</td>
            </tr>
          </tbody>
        </table>
	  </div>
    {% endif %}
    <div class="panel panel-default panel-margin">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-comment-o"></i> {{ text_history }}</h3>
      </div>
      <div class="panel-body">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#tab-history" data-toggle="tab">{{ tab_history }}</a></li>
          <li><a href="#tab-additional" data-toggle="tab">{{ tab_additional }}</a></li>
          {% for tab in tabs %}
          <li><a href="#tab-{{ tab.code }}" data-toggle="tab">{{ tab.title }}</a></li>
          {% endfor %}
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="tab-history">
            <div id="history"></div>
            <br />
            <fieldset>
              <legend>{{ text_history_add }}</legend>
              <form class="form-horizontal">
                <div class="form-group">
                  <label class="col-sm-2 control-label" for="input-order-status">{{ entry_order_status }}</label>
                  <div class="col-sm-10">
                    <select name="order_status_id" id="input-order-status" class="form-control">
                      {% for order_statuses in order_statuses %}
                        {% if order_statuses.order_status_id == order_status_id %}
						  <option value="{{ order_statuses.order_status_id }}" selected="selected">{{ order_statuses.name }}</option>
						  {% else %}
						  <option value="{{ order_statuses.order_status_id }}">{{ order_statuses.name }}</option>
						{% endif %}
                      {% 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="input-checkbox">
					  <input type="checkbox" class="checkbox" name="notify" value="1" id="input-notify" />
                      <label for="input-notify"></label>
					</div>
				  </div>
                </div>
				<div class="form-group">
                  <label class="col-sm-2 control-label" for="input-override"><span data-toggle="tooltip" title="{{ help_override }}">{{ entry_override }}</span></label>
                  <div class="col-sm-10">
                    <div class="input-checkbox">
					  <input type="checkbox" class="checkbox" name="override" value="1" id="input-override" />
					  <label for="input-override"></label>
					</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" id="input-comment" class="form-control"></textarea>
                  </div>
                </div>
              </form>
            </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>
          </div>
          <div class="tab-pane" id="tab-additional">
			{% if account_custom_fields %}
            <div class="table-responsive">
              <table class="table table-bordered">
                <thead>
                  <tr>
                    <td colspan="2">{{ text_account_custom_field }}</td>
                  </tr>
                </thead>
                <tbody>
                  {% for custom_field in account_custom_fields %}
					<tr>
					  <td>{{ custom_field.name }}</td>
					  <td>{{ custom_field.value }}</td>
					</tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
            {% endif %}
			{% if payment_custom_fields %}
            <div class="table-responsive">
              <table class="table table-bordered">
                <thead>
                  <tr>
                    <td colspan="2">{{ text_payment_custom_field }}</td>
                  </tr>
                </thead>
                <tbody>
                  {% for custom_field in payment_custom_fields %}
					<tr>
					  <td>{{ custom_field.name }}</td>
					  <td>{{ custom_field.value }}</td>
					</tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
            {% endif %}
			{% if shipping_method and shipping_custom_fields %}
            <div class="table-responsive">
              <table class="table table-bordered">
                <thead>
                  <tr>
                    <td colspan="2">{{ text_shipping_custom_field }}</td>
                  </tr>
                </thead>
                <tbody>
                  {% for custom_field in shipping_custom_fields %}
					<tr>
					  <td>{{ custom_field.name }}</td>
					  <td>{{ custom_field.value }}</td>
					</tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
            {% endif %}
            <div class="table-responsive">
              <table class="table table-bordered">
                <thead>
                  <tr>
                    <td colspan="2">{{ text_browser }}</td>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>{{ text_ip }}</td>
                    <td>{{ ip }}</td>
                  </tr>
                  <?php if ($forwarded_ip) { ?>
                  <tr>
                    <td>{{ text_forwarded_ip }}</td>
                    <td>{{ forwarded_ip }}</td>
                  </tr>
                  <?php } ?>
                  <tr>
                    <td>{{ text_user_agent }}</td>
                    <td>{{ user_agent }}</td>
                  </tr>
                  <tr>
                    <td>{{ text_accept_language }}</td>
                    <td>{{ accept_language }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          {% for tab in tabs %}
          <div class="tab-pane" id="tab-{{ tab.code }}">{{ tab.content }}</div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
  <div id="modal-order" class="modal fade">
    <div class="modal-dialog modal-lg animated zoomIn">
      <div class="modal-content">
	    <div id="content-order"></div>
	  </div>
    </div>
  </div>
  <input type="hidden" name="permission" value="{{ permission }}" id="order-permission" />
  <input type="hidden" name="error_permission" value="{{ error_permission }}" id="order-error-permission" />
  <input type="hidden" name="text_confirm" value="{{ text_confirm }}" id="text-confirm" />
  <script type="text/javascript"><!--
$('#order-products').load('index.php?route=editors/catalog_edit/order_products&user_token={{ user_token }}&order_id={{ order_id }}');
//--></script>
<script type="text/javascript"><!--
$('#product-row-add input[name=\'product\']').autocomplete({
	'source': function(request, response) {
		$.ajax({
			url: 'index.php?route=editors/product/autocomplete&user_token={{ user_token }}&filter_name=' +  encodeURIComponent(request),
			dataType: 'json',
			success: function(json) {
				response($.map(json, function(item) {
					return {
						label: item['name'],
						value: item['product_id'],
						model: item['model'],
						option: item['option'],
						price: item['price']
					}
				}));
			}
		});
	},
	'select': function(item) {
		$('input[name=\'product\']').val(item['label']);
		$('input[name=\'product_id\']').val(item['value']);	

		if (item['option'] != '') {
 			html  = '<fieldset>';
            html += '  <legend>{{ entry_option }}</legend>';
			  
			for (i = 0; i < item['option'].length; i++) {
				option = item['option'][i];
				
				if (option['type'] == 'select') {
					html += '<div class="form-group' + (option['required'] ? ' required' : '') + '">';
					html += '  <label class="col-sm-2 control-label" for="input-option' + option['product_option_id'] + '">' + option['name'] + '</label>';
					html += '  <div class="col-sm-10">';
					html += '    <select name="option[' + option['product_option_id'] + ']" id="input-option' + option['product_option_id'] + '" class="form-control">';
					html += '      <option value="">{{ text_select }}</option>';

					for (j = 0; j < option['product_option_value'].length; j++) {
						option_value = option['product_option_value'][j];

						html += '<option value="' + option_value['product_option_value_id'] + '">' + option_value['name'];

						if (option_value['price']) {
							html += ' (' + option_value['price_prefix'] + option_value['price'] + ')';
						}

						html += '</option>';
					}

					html += '    </select>';
					html += '  </div>';
					html += '</div>';
				}
				
				if (option['type'] == 'radio') {
					html += '<div class="form-group' + (option['required'] ? ' required' : '') + '">';
					html += '  <label class="col-sm-2 control-label" for="input-option' + option['product_option_id'] + '">' + option['name'] + '</label>';
					html += '  <div class="col-sm-10">';
					html += '    <div id="input-option' + option['product_option_id'] + '">';
					
					for (j = 0; j < option['product_option_value'].length; j++) {
						option_value = option['product_option_value'][j];
						
						html += '<div class="radio">';
						
						html += '  <label><input type="radio" name="option[' + option['product_option_id'] + '][]" value="' + option_value['product_option_value_id'] + '" /> ' + option_value['name'];
						
						if (option_value['price']) {
							html += ' (' + option_value['price_prefix'] + option_value['price'] + ')';
						}
						
						html += '  </label>';
						html += '</div>';
					}
										
					html += '    </div>';
					html += '  </div>';
					html += '</div>';
				}
					
				if (option['type'] == 'checkbox') {
					html += '<div class="form-group' + (option['required'] ? ' required' : '') + '">';
					html += '  <label class="col-sm-2 control-label">' + option['name'] + '</label>';
					html += '  <div class="col-sm-10">';
					html += '    <div id="input-option' + option['product_option_id'] + '">';

					for (j = 0; j < option['product_option_value'].length; j++) {
						option_value = option['product_option_value'][j];

						html += '<div>';

						html += '  <label><input type="checkbox" name="option[' + option['product_option_id'] + '][]" value="' + option_value['product_option_value_id'] + '" /> ' + option_value['name'];

						if (option_value['price']) {
							html += ' (' + option_value['price_prefix'] + option_value['price'] + ')';
						}

						html += '  </label>';
						html += '</div>';
					}

					html += '    </div>';
					html += '  </div>';
					html += '</div>';
				}
			
				if (option['type'] == 'image') {
					html += '<div class="form-group' + (option['required'] ? ' required' : '') + '">';
					html += '  <label class="col-sm-2 control-label" for="input-option' + option['product_option_id'] + '">' + option['name'] + '</label>';
					html += '  <div class="col-sm-10">';
					html += '    <select name="option[' + option['product_option_id'] + ']" id="input-option' + option['product_option_id'] + '" class="form-control">';
					html += '      <option value="">{{ text_select }}</option>';

					for (j = 0; j < option['product_option_value'].length; j++) {
						option_value = option['product_option_value'][j];

						html += '<option value="' + option_value['product_option_value_id'] + '">' + option_value['name'];

						if (option_value['price']) {
							html += ' (' + option_value['price_prefix'] + option_value['price'] + ')';
						}

						html += '</option>';
					}

					html += '    </select>';
					html += '  </div>';
					html += '</div>';
				}
						
				if (option['type'] == 'text') {
					html += '<div class="form-group' + (option['required'] ? ' required' : '') + '">';
					html += '  <label class="col-sm-2 control-label" for="input-option' + option['product_option_id'] + '">' + option['name'] + '</label>';
					html += '  <div class="col-sm-10"><input type="text" name="option[' + option['product_option_id'] + ']" value="' + option['value'] + '" id="input-option' + option['product_option_id'] + '" class="form-control" /></div>';
					html += '</div>';
				}

				if (option['type'] == 'textarea') {
					html += '<div class="form-group' + (option['required'] ? ' required' : '') + '">';
					html += '  <label class="col-sm-2 control-label" for="input-option' + option['product_option_id'] + '">' + option['name'] + '</label>';
					html += '  <div class="col-sm-10"><textarea name="option[' + option['product_option_id'] + ']" rows="5" id="input-option' + option['product_option_id'] + '" class="form-control">' + option['value'] + '</textarea></div>';
					html += '</div>';
				}

				if (option['type'] == 'file') {
					html += '<div class="form-group' + (option['required'] ? ' required' : '') + '">';
					html += '  <label class="col-sm-2 control-label">' + option['name'] + '</label>';
					html += '  <div class="col-sm-10">';
					html += '    <button type="button" id="button-upload' + option['product_option_id'] + '" data-loading-text="{{ text_loading }}" class="btn btn-default"><i class="fa fa-upload"></i> {{ button_upload }}</button>';
					html += '    <input type="hidden" name="option[' + option['product_option_id'] + ']" value="' + option['value'] + '" id="input-option' + option['product_option_id'] + '" />';
					html += '  </div>';
					html += '</div>';
				}
				
				if (option['type'] == 'date') {
					html += '<div class="form-group' + (option['required'] ? ' required' : '') + '">';
					html += '  <label class="col-sm-2 control-label" for="input-option' + option['product_option_id'] + '">' + option['name'] + '</label>';
					html += '  <div class="col-sm-3"><div class="input-group date"><input type="text" name="option[' + option['product_option_id'] + ']" value="' + option['value'] + '" placeholder="' + option['name'] + '" data-date-format="YYYY-MM-DD" id="input-option' + option['product_option_id'] + '" class="form-control" /><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div></div>';
					html += '</div>';
				}

				if (option['type'] == 'datetime') {
					html += '<div class="form-group' + (option['required'] ? ' required' : '') + '">';
					html += '  <label class="col-sm-2 control-label" for="input-option' + option['product_option_id'] + '">' + option['name'] + '</label>';
					html += '  <div class="col-sm-3"><div class="input-group datetime"><input type="text" name="option[' + option['product_option_id'] + ']" value="' + option['value'] + '" placeholder="' + option['name'] + '" data-date-format="YYYY-MM-DD HH:mm" id="input-option' + option['product_option_id'] + '" class="form-control" /><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div></div>';
					html += '</div>';
				}

				if (option['type'] == 'time') {
					html += '<div class="form-group' + (option['required'] ? ' required' : '') + '">';
					html += '  <label class="col-sm-2 control-label" for="input-option' + option['product_option_id'] + '">' + option['name'] + '</label>';
					html += '  <div class="col-sm-3"><div class="input-group time"><input type="text" name="option[' + option['product_option_id'] + ']" value="' + option['value'] + '" placeholder="' + option['name'] + '" data-date-format="HH:mm" id="input-option' + option['product_option_id'] + '" class="form-control" /><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div></div>';
					html += '</div>';
				}
			}
			
			html += '</fieldset>';
			
			$('#option').html(html);
			
			$('.date').datetimepicker({
				language: '{{ datepicker }}',
				pickTime: false
			});
			
			$('.datetime').datetimepicker({
				language: '{{ datepicker }}',
				pickDate: true,
				pickTime: true
			});
			
			$('.time').datetimepicker({
				language: '{{ datepicker }}',
				pickDate: false
			});
		} else {
			$('#option').html('');
		}									
	}	
});

$(document).delegate('#button-invoice', 'click', function() {
	$.ajax({
		url: 'index.php?route=sale/order/createinvoiceno&user_token={{ user_token }}&order_id={{ order_id }}',
		dataType: 'json',
		success: function(json) {
			$('.alert').remove();

			if (json['error']) {
				$('#content > .container-fluid').prepend('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '</div>');
			}

			if (json['invoice_no']) {
				$('#invoice').html(json['invoice_no']);
				
				$('#generate-invoice').remove();
				
				{% if (not customer and not reward) or not affiliate %}
					$('#action-order-option').remove();
				{% endif %}
			}
		},
		error: function(xhr, ajaxOptions, thrownError) {
			alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
		}
	});
});

$(document).delegate('#button-reward-add', 'click', function() {
	$.ajax({
		url: 'index.php?route=sale/order/addreward&user_token={{ user_token }}&order_id={{ order_id }}',
		type: 'post',
		dataType: 'json',
		success: function(json) {
			$('.alert').remove();

			if (json['error']) {
				$('#content > .container-fluid').prepend('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '</div>');
			}

			if (json['success']) {
                $('#content > .container-fluid').prepend('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + '</div>');

				$('#button-reward-add').replaceWith('<a id="button-reward-remove" class="btn-order">{{ button_reward_remove }}</a>');
				$('#reward-data').replaceWith('<span id="reward-data" class="text-danger">{{ reward }}</span>');
			}
		},
		error: function(xhr, ajaxOptions, thrownError) {
			alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
		}
	});
});

$(document).delegate('#button-reward-remove', 'click', function() {
	$.ajax({
		url: 'index.php?route=sale/order/removereward&user_token={{ user_token }}&order_id={{ order_id }}',
		type: 'post',
		dataType: 'json',
		success: function(json) {
			$('.alert').remove();

			if (json['error']) {
				$('#content > .container-fluid').prepend('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '</div>');
			}

			if (json['success']) {
                $('#content > .container-fluid').prepend('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + '</div>');

				$('#button-reward-remove').replaceWith('<a id="button-reward-add" class="btn-order">{{ button_reward_add }}</a>');
				$('#reward-data').replaceWith('<span id="reward-data" class="text-success">{{ reward }}</span>');
			}
		},
		error: function(xhr, ajaxOptions, thrownError) {
			alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
		}
	});
});

$(document).delegate('#button-commission-add', 'click', function() {
	$.ajax({
		url: 'index.php?route=sale/order/addcommission&user_token={{ user_token }}&order_id={{ order_id }}',
		type: 'post',
		dataType: 'json',
		success: function(json) {
			$('.alert').remove();

			if (json['error']) {
				$('#content > .container-fluid').prepend('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '</div>');
			}

			if (json['success']) {
                $('#content > .container-fluid').prepend('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + '</div>');

				$('#button-commission-add').replaceWith('<a id="button-commission-remove" class="btn-order">{{ button_commission_remove }}</a>');
				$('#commission-data').replaceWith('<span id="commission-data" class="text-danger">{{ commission }}</span>');
			}
		},
		error: function(xhr, ajaxOptions, thrownError) {
			alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
		}
	});
});

$(document).delegate('#button-commission-remove', 'click', function() {
	$.ajax({
		url: 'index.php?route=sale/order/removecommission&user_token={{ user_token }}&order_id={{ order_id }}',
		type: 'post',
		dataType: 'json',
		success: function(json) {
			$('.alert').remove();

			if (json['error']) {
				$('#content > .container-fluid').prepend('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '</div>');
			}

			if (json['success']) {
                $('#content > .container-fluid').prepend('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + '</div>');

				$('#button-commission-remove').replaceWith('<a id="button-commission-add" class="btn-order">{{ button_commission_add }}</a>');
				$('#commission-data').replaceWith('<span id="commission-data" class="text-success">{{ commission }}</span>');
			}
		},
		error: function(xhr, ajaxOptions, thrownError) {
			alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
		}
	});
});

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

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

$('#history').load('index.php?route=sale/order/history&user_token={{ user_token }}&order_id={{ order_id }}');

$('#button-history').on('click', function() {
	$.ajax({
		url: '{{ catalog }}index.php?route=api/order/history&api_token={{ api_token }}&store_id={{ store_id }}&order_id={{ order_id }}',
		type: 'post',
		dataType: 'json',
		data: 'order_status_id=' + encodeURIComponent($('select[name=\'order_status_id\']').val()) + '&notify=' + ($('input[name=\'notify\']').prop('checked') ? 1 : 0) + '&override=' + ($('input[name=\'override\']').prop('checked') ? 1 : 0) + '&append=' + ($('input[name=\'append\']').prop('checked') ? 1 : 0) + '&comment=' + encodeURIComponent($('textarea[name=\'comment\']').val()),
		beforeSend: function() {
			$('#button-history').button('loading');
		},
		complete: function() {
			$('#button-history').button('reset');
		},
		success: function(json) {
			$('.alert-dismissible').remove();

			if (json['error']) {
				$('#history').before('<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']) {
				$('#history').load('index.php?route=sale/order/history&user_token={{ user_token }}&order_id={{ order_id }}');

				$('#history').before('<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>');

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

$('#content').delegate('button[id^=\'button-upload\'], button[id^=\'button-custom-field\'], button[id^=\'button-payment-custom-field\'], button[id^=\'button-shipping-custom-field\']', 'click', function() {
	var node = this;

	$('#form-upload').remove();

	$('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" /></form>');

	$('#form-upload input[name=\'file\']').trigger('click');

	if (typeof timer != 'undefined') {
    	clearInterval(timer);
	}

	timer = setInterval(function() {
		if ($('#form-upload input[name=\'file\']').val() != '') {
			clearInterval(timer);

			$.ajax({
				url: 'index.php?route=tool/upload/upload&user_token={{ user_token }}',
				type: 'post',
				dataType: 'json',
				data: new FormData($('#form-upload')[0]),
				cache: false,
				contentType: false,
				processData: false,
				beforeSend: function() {
					$(node).button('loading');
				},
				complete: function() {
					$(node).button('reset');
				},
				success: function(json) {
					$(node).parent().find('.text-danger').remove();

					if (json['error']) {
						$(node).parent().find('input[type=\'hidden\']').after('<div class="text-danger">' + json['error'] + '</div>');
					}

					if (json['success']) {
						alert(json['success']);
					}

					if (json['code']) {
						$(node).parent().find('input[type=\'hidden\']').val(json['code']);
					}
				},
				error: function(xhr, ajaxOptions, thrownError) {
					alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
				}
			});
		}
	}, 500);
});
//--></script></div>
{{ footer }} 
