{{ header }}
<div class="container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
      <li><a href="{{ breadcrumb['href'] }}">{{ breadcrumb['text'] }}</a></li>
    {% endfor %}
  </ul>
  {% if attention %}
    <div class="alert alert-info"><i class="fa fa-info-circle"></i> {{ attention }}
      <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 %}
  {% 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="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 }}
      <h1>{{ heading_title }}</h1>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">{{ text_checkout_payment_address }}
            <div class="button-payment-address pull-right" role="button"><i class="fa fa-pencil"></i></div>
          </h4>
        </div>
        <div class="panel-body">
          <div class="row">
            <div class="col-sm-6">
              <fieldset id="account">
                <legend>{{ text_your_details }}</legend>
                <table class="table table-bordered">
                  {% if guest['firstname'] %}
                    <tr>
											<td><b>{{ entry_firstname }}</b></td>
											<td>{{ guest['firstname'] }}</td>
										</tr>
									{% endif %}
                  {% if guest['lastname'] %}
                    <tr>
											<td><b>{{ entry_lastname }}</b></td>
											<td>{{ guest['lastname'] }}</td>
										</tr>
									{% endif %}
                  {% if guest['email'] %}
                    <tr>
											<td><b>{{ entry_email }}</b></td>
											<td>{{ guest['email'] }}</td>
										</tr>
									{% endif %}
                  {% if guest['telephone'] %}
                    <tr>
											<td><b>{{ entry_telephone }}</b></td>
											<td>{{ guest['telephone'] }}</td>
										</tr>
									{% endif %}
                  {% for custom_field in custom_fields %}
                    {% if custom_field['location'] == 'account' %}
                      <tr>
                        <td><b>{{ custom_field['name'] }}</b></td>
                        <td>{{ custom_field['value'] }}</td>
                      </tr>
                    {% endif %}
                  {% endfor %}
                </table>
              </fieldset>
            </div>
            <div class="col-sm-6">
              <fieldset id="address">
                <legend>{{ text_your_address }}</legend>
                <table class="table table-bordered">
                  {% if payment_address['company'] %}
                    <tr>
											<td><b>{{ entry_company }}</b></td>
											<td>{{ payment_address['company'] }}</td>
										</tr>
									{% endif %}
                  {% if payment_address['address_1'] %}
                    <tr>
											<td><b>{{ entry_address_1 }}</b></td>
											<td>{{ payment_address['address_1'] }}</td>
										</tr>
									{% endif %}
                  {% if payment_address['address_2'] %}
                    <tr>
											<td><b>{{ entry_address_2 }}</b></td>
											<td>{{ payment_address['address_2'] }}</td>
										</tr>
									{% endif %}
                  {% if payment_address['city'] %}
                    <tr>
											<td><b>{{ entry_city }}</b></td>
											<td>{{ payment_address['city'] }}</td>
										</tr>
									{% endif %}
                  {% if payment_address['postcode'] %}
                    <tr>
											<td><b>{{ entry_postcode }}</b></td>
											<td>{{ payment_address['postcode'] }}</td>
										</tr>
									{% endif %}
                  {% if payment_address['country'] %}
                    <tr>
											<td><b>{{ entry_country }}</b></td>
											<td>{{ payment_address['country'] }}</td>
										</tr>
									{% endif %}
                  {% if payment_address['zone'] %}
                    <tr>
											<td><b>{{ entry_zone }}</b></td>
											<td>{{ payment_address['zone'] }}</td>
										</tr>
									{% endif %}
                  {% for custom_field in custom_fields %}
                    {% if custom_field['location'] == 'address' %}
                      <tr>
                        <td><b>{{ custom_field['name'] }}</b></td>
                        <td>{{ custom_field['value'] }}</td>
                      </tr>
                    {% endif %}
                  {% endfor %}
                </table>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
      {% if has_shipping %}
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">{{ text_checkout_shipping_address }}
              <div class="button-shipping-address pull-right" role="button"><i class="fa fa-pencil"></i></div>
            </h4>
          </div>
          <div class="panel-body">
            <table class="table table-bordered">
              {% if shipping_address['firstname'] %}
                <tr>
									<td><b>{{ entry_firstname }}</b></td>
									<td>{{ shipping_address['firstname'] }}</td>
								</tr>
							{% endif %}
              {% if shipping_address['lastname'] %}
                <tr>
									<td><b>{{ entry_lastname }}</b></td>
									<td>{{ shipping_address['lastname'] }}</td>
								</tr>
							{% endif %}
              {% if shipping_address['company'] %}
                <tr>
									<td><b>{{ entry_company }}</b></td>
									<td>{{ shipping_address['company'] }}</td>
								</tr>
							{% endif %}
              {% if shipping_address['address_1'] %}
									<tr>
										<td><b>{{ entry_address_1 }}</b></td>
										<td>{{ shipping_address['address_1'] }}</td>
									</tr>
							{% endif %}
              {% if shipping_address['address_2'] %}
                <tr>
									<td><b>{{ entry_address_2 }}</b></td>
									<td>{{ shipping_address['address_2'] }}</td>
								</tr>
							{% endif %}
              {% if shipping_address['city'] %}
                <tr>
									<td><b>{{ entry_city }}</b></td>
									<td>{{ shipping_address['city'] }}</td>
								</tr>
							{% endif %}
              {% if shipping_address['postcode'] %}
                <tr>
									<td><b>{{ entry_postcode }}</b></td>
									<td>{{ shipping_address['postcode'] }}</td>
								</tr>
							{% endif %}
              {% if shipping_address['country'] %}
                <tr>
									<td><b>{{ entry_country }}</b></td>
									<td>{{ shipping_address['country'] }}</td>
								</tr>
							{% endif %}
              {% if shipping_address['zone'] %}
                <tr>
									<td><b>{{ entry_zone }}</b></td>
									<td>{{ shipping_address['zone'] }}</td>
								</tr>
							{% endif %}
              {% for custom_field in custom_fields %}
                {% if custom_field['location'] == 'address' %}
                  <tr>
                    <td><b>{{ custom_field['name'] }}</b></td>
                    <td>{{ custom_field['value'] }}</td>
                  </tr>
                {% endif %}
              {% endfor %}
            </table>
          </div>
        </div>
      {% endif %}
      {% if has_shipping %}
        {% if not shipping_methods %}
          <div class="alert alert-warning alert-dismissible">
            <i class="fa fa-exclamation-circle"></i> {{ error_no_shipping }}
					</div>
        {% else %}
          <form action="{{ action_shipping }}" method="post" id="shipping_form">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">{{ text_checkout_shipping_method }}</h4>
              </div>
              <div class="panel-body">
                {% for shipping_method in shipping_methods %}
                  <p><strong>{{ shipping_method['title'] }}</strong></p>
                  {% if not shipping_method['error'] %}
                    {% for quote in shipping_method['quote'] %}
                      <div class="radio">
                        <label>
                          {% if quote['code'] == code or not code %}
                            {% set code = quote['code'] %}
                            <input type="radio" name="shipping_method" value="{{ quote['code'] }}" id="{{ quote['code'] }}" checked="checked"/>
                          {% else %}
                            <input type="radio" name="shipping_method" value="{{ quote['code'] }}" id="{{ quote['code'] }}"/>
                          {% endif %}
                          {{ quote['title'] }} - {{ quote['text'] }}
                        </label>
                      </div>
                    {% endfor %}
                  {% else %}
                    <div class="alert alert-danger alert-dismissible">{{ shipping_method['error'] }}</div>
                  {% endif %}
                {% endfor %}
              </div>
            </div>
          </form>
        {% endif %}
      {% endif %}
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">{{ text_checkout_payment_method }}</h4>
        </div>
        <div class="panel-body">
          {% for payment_method in payment_methods %}
            {% if payment_method['code'] == 'paypal' %}
              <div class="radio">
                <label>
                  <input type="radio" name="payment_method" value="{{ payment_method['code'] }}" checked="checked"/>
                  {{ payment_method['title'] }}
                </label>
              </div>
            {% endif %}
          {% endfor %}
        </div>
      </div>
      <div class="table-responsive">
        <table class="table table-bordered">
          <thead>
            <tr>
              <td class="text-left">{{ column_name }}</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>
            {% for product in products %}
              <tr>
                <td class="text-left">
                  <a href="{{ product['href'] }}">{{ product['name'] }}</a>
                  {% for option in product['option'] %} <br/>
                    <small> - {{ option['name'] }}: {{ option['value'] }}</small>
                  {% endfor %}
                  {% if product['subscription'] %}
                    <br/><span class="label label-info">{{ text_subscription_item }}</span>
                    <small>{{ product['subscription'] }}</small>
                  {% endif %}
                </td>
                <td class="text-left">{{ product['model'] }}</td>
                <td class="text-center">{{ product['quantity'] }}</td>
                <td class="text-right">{{ product['price'] }}</td>
                <td class="text-right">{{ product['total'] }}</td>
              </tr>
            {% endfor %}
            {% for voucher in vouchers %}
              <tr>
                <td class="text-left">{{ voucher['description'] }}</td>
                <td class="text-left"></td>
                <td class="text-center">1</td>
                <td class="text-right">{{ voucher['amount'] }}</td>
                <td class="text-right">{{ voucher['amount'] }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <br/>
      {% if coupon or voucher or reward %}
        <div class="panel-group" id="accordion">{{ coupon }}{{ voucher }}{{ reward }}</div>
        <br/>
      {% endif %}
      <div class="row">
        <div class="col-sm-4 col-sm-offset-8">
          <table class="table table-bordered">
            {% for total in totals %}
              <tr>
                <td class="text-right"><strong>{{ total['title'] }}:</strong></td>
                <td class="text-right">{{ total['text'] }}</td>
              </tr>
            {% endfor %}
          </table>
        </div>
      </div>
      <div class="buttons">
        <div class="pull-right">
          <a href="{{ action_confirm }}" class="btn btn-primary" id="paypal_confirm">{{ button_confirm }}</a></div>
      </div>
      {{ content_bottom }}
    </div>
    {{ column_right }}
  </div>
</div>
<script type="text/javascript"><!--
    $('input[name=\'shipping_method\']').change(function () {
        $('#shipping_form').submit();
    });

    $(document).on('click', '.button-payment-address', function (event) {
        $('#payment_address').remove();
        $('body').append('<div id="payment_address" class="modal fade"></div>');
        $('#payment_address').load('index.php?route=extension/module/paypal_smart_button/paymentAddress #payment_address >', onLoadPaymentAddress);
        $('#payment_address').modal('show');
    });

    $(document).on('click', '.button-shipping-address', function (event) {
        $('#shipping_address').remove();
        $('body').append('<div id="shipping_address" class="modal fade"></div>');
        $('#shipping_address').load('index.php?route=extension/module/paypal_smart_button/shippingAddress #shipping_address >', onLoadShippingAddress);
        $('#shipping_address').modal('show');
    });

    $('input[name=\'next\']').bind('change', function () {
        $('.cart-discounts > div').hide();

        $('#' + this.value).show();
    });

    $('#paypal_confirm').bind('click', function () {
        $('#paypal_confirm').prop('disabled', true).button('loading');
    });

    function onLoadPaymentAddress() {
        // Sort the custom fields
        $('#payment_address #account .form-group[data-sort]').detach().each(function () {
            if ($(this).attr('data-sort') >= 0 && $(this).attr('data-sort') <= $('#payment_address #account .form-group').length) {
                $('#payment_address #account .form-group').eq($(this).attr('data-sort')).before(this);
            }

            if ($(this).attr('data-sort') > $('#payment_address #account .form-group').length) {
                $('#payment_address #account .form-group:last').after(this);
            }

            if ($(this).attr('data-sort') == $('#payment_address #account .form-group').length) {
                $('#payment_address #account .form-group:last').after(this);
            }

            if ($(this).attr('data-sort') < -$('#payment_address #account .form-group').length) {
                $('#payment_address #account .form-group:first').before(this);
            }
        });

        $('#payment_address #address .form-group[data-sort]').detach().each(function () {
            if ($(this).attr('data-sort') >= 0 && $(this).attr('data-sort') <= $('#payment_address #address .form-group').length) {
                $('#payment_address #address .form-group').eq($(this).attr('data-sort')).before(this);
            }

            if ($(this).attr('data-sort') > $('#payment_address #address .form-group').length) {
                $('#payment_address #address .form-group:last').after(this);
            }

            if ($(this).attr('data-sort') == $('#payment_address #address .form-group').length) {
                $('#payment_address #address .form-group:last').after(this);
            }

            if ($(this).attr('data-sort') < -$('#payment_address #address .form-group').length) {
                $('#payment_address #address .form-group:first').before(this);
            }
        });

        $('#payment_address select[name=\'country_id\']').on('change', function () {
            $.ajax({
                url: 'index.php?route=checkout/checkout/country&country_id=' + this.value,
                dataType: 'json',
                beforeSend: function () {
                    $('#payment_address select[name=\'country_id\']').prop('disabled', true);
                },
                complete: function () {
                    $('#payment_address select[name=\'country_id\']').prop('disabled', false);
                },
                success: function (json) {
                    if (json['postcode_required'] == '1') {
                        $('#payment_address input[name=\'postcode\']').parent().parent().addClass('required');
                    } else {
                        $('#payment_address input[name=\'postcode\']').parent().parent().removeClass('required');
                    }

                    html = '<option value="">{{ text_select }}</option>';

                    if (json['zone'] && json['zone'] != '') {
                        for (i = 0; i < json['zone'].length; i++) {
                            html += '<option value="' + json['zone'][i]['zone_id'] + '"';

                            if (json['zone'][i]['zone_id'] == '{{ payment_address['zone_id'] }}') {
                                html += ' selected="selected"';
                            }

                            html += '>' + json['zone'][i]['name'] + '</option>';
                        }
                    } else {
                        html += '<option value="0" selected="selected">{{ text_none }}</option>';
                    }

                    $('#payment_address select[name=\'zone_id\']').html(html);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                }
            });
        });

        $('#payment_address select[name=\'country_id\']').trigger('change');

        $('.date').datetimepicker({
            language: '{{ datepicker }}',
            pickTime: false
        });

        $('.time').datetimepicker({
            language: '{{ datepicker }}',
            pickDate: false
        });

        $('.datetime').datetimepicker({
            language: '{{ datepicker }}',
            pickDate: true,
            pickTime: true
        });

        $('#payment_address button[id^=\'button_payment_custom_field\']').on('click', function () {
            var element = 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',
                        type: 'post',
                        dataType: 'json',
                        data: new FormData($('#form_upload')[0]),
                        cache: false,
                        contentType: false,
                        processData: false,
                        beforeSend: function () {
                            $(element).button('loading');
                        },
                        complete: function () {
                            $(element).button('reset');
                        },
                        success: function (json) {
                            $(element).parent().find('.text-danger').remove();

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

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

                                $(element).parent().find('input[name^=\'custom_field\']').val(json['code']);
                            }
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                        }
                    });
                }
            }, 500);
        });

        $('#payment_address .button-confirm').on('click', function (event) {
            $.ajax({
                type: 'post',
                url: 'index.php?route=extension/module/paypal_smart_button/confirmPaymentAddress',
                data: $('#payment_address [name]'),
                dataType: 'json',
                success: function (json) {
                    $('#payment_address .alert, #payment_address .text-danger').remove();
                    $('#payment_address .form-group').removeClass('has-error');

                    if (json['error']) {
                        for (i in json['error']) {
                            var element = $('#payment_address #input_payment_' + i);

                            if (element.parent().hasClass('input-group')) {
                                $(element).parent().after('<div class="text-danger">' + json['error'][i] + '</div>');
                            } else {
                                $(element).after('<div class="text-danger">' + json['error'][i] + '</div>');
                            }

                            $(element).parents('.form-group').addClass('has-error');
                        }
                    }

                    if (json['url']) {
                        location = json['url'];
                    }
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                }
            });
        });
    }

    function onLoadShippingAddress() {
        // Sort the custom fields
        $('#shipping_address .form-group[data-sort]').detach().each(function () {
            if ($(this).attr('data-sort') >= 0 && $(this).attr('data-sort') <= $('#shipping_address .form-group').length - 2) {
                $('#shipping_address .form-group').eq(parseInt($(this).attr('data-sort')) + 2).before(this);
            }

            if ($(this).attr('data-sort') > $('#shipping_address .form-group').length - 2) {
                $('#shipping_address .form-group:last').after(this);
            }

            if ($(this).attr('data-sort') == $('#collapse-shipping-address .form-group').length - 2) {
                $('#collapse-shipping-address .form-group:last').after(this);
            }

            if ($(this).attr('data-sort') < -$('#shipping_address .form-group').length - 2) {
                $('#shipping_address .form-group:first').before(this);
            }
        });

        $('#shipping_address select[name=\'country_id\']').on('change', function () {
            $.ajax({
                url: 'index.php?route=checkout/checkout/country&country_id=' + this.value,
                dataType: 'json',
                beforeSend: function () {
                    $('#shipping_address select[name=\'country_id\']').prop('disabled', true);
                },
                complete: function () {
                    $('#shipping_address select[name=\'country_id\']').prop('disabled', false);
                },
                success: function (json) {
                    if (json['postcode_required'] == '1') {
                        $('#shipping_address input[name=\'postcode\']').parent().parent().addClass('required');
                    } else {
                        $('#shipping_address input[name=\'postcode\']').parent().parent().removeClass('required');
                    }

                    html = '<option value="">{{ text_select }}</option>';

                    if (json['zone'] && json['zone'] != '') {
                        for (i = 0; i < json['zone'].length; i++) {
                            html += '<option value="' + json['zone'][i]['zone_id'] + '"';

                            if (json['zone'][i]['zone_id'] == '{{ shipping_address['zone_id'] }}') {
                                html += ' selected="selected"';
                            }

                            html += '>' + json['zone'][i]['name'] + '</option>';
                        }
                    } else {
                        html += '<option value="0" selected="selected">{{ text_none }}</option>';
                    }

                    $('#shipping_address select[name=\'zone_id\']').html(html);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                }
            });
        });

        $('#shipping_address select[name=\'country_id\']').trigger('change');

        $('.date').datetimepicker({
            language: '{{ datepicker }}',
            pickTime: false
        });

        $('.time').datetimepicker({
            language: '{{ datepicker }}',
            pickDate: false
        });

        $('.datetime').datetimepicker({
            language: '{{ datepicker }}',
            pickDate: true,
            pickTime: true
        });

        $('#shipping_address button[id^=\'button_shipping_custom_field\']').on('click', function () {
            var element = 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',
                        type: 'post',
                        dataType: 'json',
                        data: new FormData($('#form_upload')[0]),
                        cache: false,
                        contentType: false,
                        processData: false,
                        beforeSend: function () {
                            $(element).button('loading');
                        },
                        complete: function () {
                            $(element).button('reset');
                        },
                        success: function (json) {
                            $(element).parent().find('.text-danger').remove();

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

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

                                $(element).parent().find('input[name^=\'custom_field\']').attr('value', json['file']);
                            }
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                        }
                    });
                }
            }, 500);
        });

        $('#shipping_address .button-confirm').on('click', function (event) {
            $.ajax({
                type: 'post',
                url: 'index.php?route=extension/module/paypal_smart_button/confirmShippingAddress',
                data: $('#shipping_address [name]'),
                dataType: 'json',
                success: function (json) {
                    $('#shipping_address .alert, #shipping_address .text-danger').remove();
                    $('#shipping_address .form-group').removeClass('has-error');

                    if (json['error']) {
                        for (i in json['error']) {
                            var element = $('#shipping_address #input_shipping_' + i);

                            if (element.parent().hasClass('input-group')) {
                                $(element).parent().after('<div class="text-danger">' + json['error'][i] + '</div>');
                            } else {
                                $(element).after('<div class="text-danger">' + json['error'][i] + '</div>');
                            }

                            $(element).parents('.form-group').addClass('has-error');
                        }
                    }

                    if (json['url']) {
                        location = json['url'];
                    }
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                }
            });
        });
    }

//--></script>
{{ footer }}