<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title"><a href="#collapse-shipping" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion">{{ heading_title }} <i class="fa fa-caret-down"></i></a></h4>
    </div>
    <div id="collapse-shipping" class="panel-collapse collapse">
        <div class="panel-body">
            <p>{{ text_shipping }}</p>
            <div class="form-group required">
                <label for="input-country">{{ entry_country }}</label>
                <select name="country_id" id="input-country" class="form-control">
                    <option value="">{{ text_select }}</option>
                    {% for country in countries %}
                        {% if country.country_id == country_id %}
                            <option value="{{ country.country_id }}" selected="selected">{{ country.name }}</option>
                        {% else %}
                            <option value="{{ country.country_id }}">{{ country.name }}</option>
                        {% endif %}
                    {% endfor %}
                </select>
            </div>
            <div class="form-group required">
                <label for="input-zone">{{ entry_zone }}</label>
                <select name="zone_id" id="input-zone" class="form-control"></select>
            </div>
            <div class="form-group required">
                <label for="input-postcode">{{ entry_postcode }}</label>
                <input type="text" name="postcode" value="{{ postcode }}"    id="input-postcode" class="form-control"/>
            </div>
            <div class="form-group">
                <button type="button" id="button-quote" data-loading-text="{{ text_loading }}" class="btn btn-primary">{{ button_quote }}</button>
            </div>
            <script type="text/javascript"><!--
                $('#button-quote').on('click', function () {
                    $.ajax({
                        url: 'index.php?route=extension/total/shipping/quote',
                        type: 'post',
                        data: 'country_id=' + $('select[name=\'country_id\']').val() + '&zone_id=' + $('select[name=\'zone_id\']').val() + '&postcode=' + encodeURIComponent($('input[name=\'postcode\']').val()),
                        dataType: 'json',
                        beforeSend: function () {
                            $('#button-quote').button('loading');
                        },
                        complete: function () {
                            $('#button-quote').button('reset');
                        },
                        success: function (json) {
                            $('.alert-dismissible, .text-danger').remove();

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

                                    $('html, body').animate({scrollTop: 0}, 'slow');
                                }

                                if (json['error']['country']) {
                                    $('select[name=\'country_id\']').after('<div class="text-danger">' + json['error']['country'] + '</div>');
                                }

                                if (json['error']['zone']) {
                                    $('select[name=\'zone_id\']').after('<div class="text-danger">' + json['error']['zone'] + '</div>');
                                }

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

                            if (json['shipping_method']) {
                                $('#modal-shipping').remove();

                                html = '<div id="modal-shipping" class="modal">';
                                html += '  <div class="modal-dialog">';
                                html += '    <div class="modal-content">';
                                html += '      <div class="modal-header">';
                                html += '        <h4 class="modal-title">{{ text_shipping_method }}</h4>';
                                html += '      </div>';
                                html += '      <div class="modal-body">';

                                for (i in json['shipping_method']) {
                                    html += '<p><strong>' + json['shipping_method'][i]['title'] + '</strong></p>';

                                    if (!json['shipping_method'][i]['error']) {
                                        for (j in json['shipping_method'][i]['quote']) {
                                            html += '<div class="radio">';
                                            html += '  <label>';

                                            if (json['shipping_method'][i]['quote'][j]['code'] == '{{ shipping_method }}') {
                                                html += '<input type="radio" name="shipping_method" value="' + json['shipping_method'][i]['quote'][j]['code'] + '" checked="checked" />';
                                            } else {
                                                html += '<input type="radio" name="shipping_method" value="' + json['shipping_method'][i]['quote'][j]['code'] + '" />';
                                            }

                                            html += json['shipping_method'][i]['quote'][j]['title'] + ' - ' + json['shipping_method'][i]['quote'][j]['text'] + '</label></div>';
                                        }
                                    } else {
                                        html += '<div class="alert alert-danger alert-dismissible">' + json['shipping_method'][i]['error'] + '</div>';
                                    }
                                }

                                html += '      </div>';
                                html += '      <div class="modal-footer">';
                                html += '        <button type="button" class="btn btn-default" id="button-cancel" data-dismiss="modal">{{ button_cancel }}</button>';

                                {% if shipping_method %}
                                html += '        <input type="button" value="{{ button_shipping }}" id="button-shipping" data-loading-text="{{ text_loading }}" class="btn btn-primary" />';
                                {% else %}
                                html += '        <input type="button" value="{{ button_shipping }}" id="button-shipping" data-loading-text="{{ text_loading }}" class="btn btn-primary" disabled="disabled" />';
                                {% endif %}

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

                                $('body').append(html);

                                $('#modal-shipping').modal('show');

                                $('input[name=\'shipping_method\']').on('change', function () {
                                    $('#button-shipping').prop('disabled', false);
                                });
                            }
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                        }
                    });
                });

                $(document).delegate('#button-shipping', 'click', function () {
                    $.ajax({
                        url: 'index.php?route=extension/total/shipping/shipping',
                        type: 'post',
                        data: 'shipping_method=' + encodeURIComponent($('input[name=\'shipping_method\']:checked').val()),
                        dataType: 'json',
                        beforeSend: function () {
                            $('#button-shipping').button('loading');
                        },
                        complete: function () {
                            $('#button-shipping').button('reset');
                        },
                        success: function (json) {
                            $('.alert-dismissible').remove();

                            if (json['error']) {
                                $('.breadcrumb').after('<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>');

                                $('html, body').animate({scrollTop: 0}, 'slow');
                            }

                            if (json['redirect']) {
                                location = json['redirect'];
                            }
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                        }
                    });
                });
                //--></script>
            <script type="text/javascript"><!--
                $('select[name=\'country_id\']').on('change', function () {
                    $.ajax({
                        url: 'index.php?route=extension/total/shipping/country&country_id=' + this.value,
                        dataType: 'json',
                        beforeSend: function () {
                            $('select[name=\'country_id\']').prop('disabled', true);
                        },
                        complete: function () {
                            $('select[name=\'country_id\']').prop('disabled', false);
                        },
                        success: function (json) {
                            if (json['postcode_required'] == '1') {
                                $('input[name=\'postcode\']').parent().parent().addClass('required');
                            } else {
                                $('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'] == '{{ zone_id }}') {
                                        html += ' selected="selected"';
                                    }

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

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

                $('select[name=\'country_id\']').trigger('change');
                //--></script>
        </div>
    </div>
</div>
