<div class="pr-cart-column-item pb-3 mb-3 border-bottom">
    <div class="pr-cart-column-item-title d-flex align-items-center justify-content-between gap-3 dark-text fsz-14 fw-500">
        {{ heading_title }}
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="7" viewBox="0 0 12 7" fill="none">
            <path d="M1 1L6 6L11 1" stroke="var(--pr-black-color)" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
    </div>
    <div id="collapse-shipping" class="form-group pr-cart-column-item-block-group">
        <p class="fsz-12 grey-text mb-2 mt-3">{{ text_shipping }}</p>
        <div class="form-horizontal">
            <div class="form-group mb-3">
                <label for="input-country" class="control-label fsz-12 grey-text mb-2"><span class="required">*</span> {{ entry_country }}</label>
                <select name="country_id" id="input-country" class="form-select 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 mb-3">
                <label for="input-zone" class="control-label fsz-12 grey-text mb-2"><span class="required">*</span> {{ entry_zone }}</label>
                <select name="zone_id" id="input-zone" class="form-select form-control"></select>
            </div>
            <div class="form-group mb-3">
                <label for="input-postcode" class="control-label fsz-12 grey-text mb-2"><span class="required">*</span> {{ entry_postcode }}</label>
                <input type="text" name="postcode" value="{{ postcode }}" placeholder="{{ entry_postcode }}" id="input-postcode" class="form-control"/>
            </div>
            <button type="button" id="button-quote" data-loading-text="{{ text_loading }}" class="button button-primary input-with-btn w-100 mt-3 fsz-12">{{ button_quote }}</button>
        </div>
        <script>
            $('#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',
                    cache: false,
                    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']) {
                                prNotify('danger', json['error']['warning']);
                            }

                            if (json['error']['country']) {
                                $('select[name=\'country_id\']');
                                prNotify('danger', json['error']['country']);
                            }

                            if (json['error']['zone']) {
                                $('select[name=\'zone_id\']');
                                prNotify('danger', json['error']['zone']);
                            }

                            if (json['error']['postcode']) {
                                $('input[name=\'postcode\']');
                                prNotify('danger', json['error']['postcode']);
                            }
                        }

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

                            html = '<div id="modal-shipping" class="modal fade">';
                            html += '  <div class="modal-dialog modal-dialog-centered">';
                            html += '    <div class="modal-content">';
                            html += '      <div class="modal-header p-4 bg-grey">';
                            html += '        <h5 class="modal-title fsz-20 fw-700 d-flex align-items-center justify-content-between dark-text">{{ button_quote }}</h5>';
                            html += '        <button type="button" class="btn-close br-8 bg-white" data-bs-dismiss="modal" aria-label="Close"></button>';
                            html += '      </div>';
                            html += '      <div class="modal-body p-4">';
                            html += '      <p class="modal-body-text fsz-14 grey-text mb-1">{{ text_shipping_method }}</p>';

                            let oct_i = 1;

                            for (i in json['shipping_method']) {
                                html += '<p class="dark-text fw-700 mt-3">' + json['shipping_method'][i]['title'] + '</p>';

                                if (!json['shipping_method'][i]['error']) {
                                    let oct_i_i = 1;

                                    for (j in json['shipping_method'][i]['quote']) {
                                        html += '<div class="form-group">';
                                        html += '<div class="form-check d-flex align-items-center gap-2">';
                                        if (json['shipping_method'][i]['quote'][j]['code'] == '{{ shipping_method }}') {
                                            html += '<input type="radio" id="shipping_method_input' + oct_i + oct_i_i + '" class="form-check-input" name="shipping_method" value="' + json['shipping_method'][i]['quote'][j]['code'] + '" checked="checked" />';
                                        } else {
                                            html += '<input type="radio" id="shipping_method_input' + oct_i + oct_i_i + '" class="form-check-input" name="shipping_method" value="' + json['shipping_method'][i]['quote'][j]['code'] + '" />';
                                        }
                                        html += '  <label class="form-check-label fsz-12 dark-text" for="shipping_method_input' + oct_i + oct_i_i + '" >';
                                        html += json['shipping_method'][i]['quote'][j]['title'] + ' - ' + json['shipping_method'][i]['quote'][j]['text'] + '</label></div></div>';
                                        oct_i_i++;
                                    }
                                } else {
                                    html += '<div class="alert alert-danger alert-dismissible">' + json['shipping_method'][i]['error'] + '</div>';
                                }

                                oct_i++;
                            }
                            html += '      <div class="btn-group d-flex flex-column justify-content-between mt-3">';
                            html += '        <button type="button" class="button button-primary order-1 w-100" data-bs-dismiss="modal">{{ button_cancel }}</button>';

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

                            html += '      </div>';

                            html += '      </p>';
                            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',
                    cache: false,
                    beforeSend: function () {
                        $('#button-shipping').button('loading');
                    },
                    complete: function () {
                        $('#button-shipping').button('reset');
                    },
                    success: function (json) {
                        $('.alert-dismissible').remove();

                        if (json['error']) {
                            prNotify('danger', json['error']);
                        }

                        if (json['redirect']) {
                            location = json['redirect'];
                        }
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                    }
                });
            });
        </script>
        <script>
            $('select[name=\'country_id\']').on('change', function () {
                $.ajax({
                    url: 'index.php?route=extension/total/shipping/country&country_id=' + this.value,
                    dataType: 'json',
                    cache: false,
                    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>
