{strip}

<ul class="s-shipping-options">
    {$external_methods = []}
    {foreach $checkout_shipping_methods as $m}
        <li class="s-shipping-item shipping-{$m.id} {if $m.id == $shipping.id}is-selected{/if}">
            <div class="s-layout fixed">
                <div class="s-column">

                    <h3 class="s-shipping-header">
                        <label class="s-shipping-label">
                            <input class="s-shipping-input" type="radio" name="shipping_id" value="{$m.id}" {if $m.external || !empty($m.error)}disabled{/if} {if $m.id == $shipping.id}checked{/if}>
                            {if !empty($m.logo)}
                                <img class="s-shipping-image method-logo" src="{$m.logo}">
                            {/if}
                            <span class="s-shipping-name">{$m.name|escape}</span>
                        </label>
                    </h3>
                    <div class="s-shipping-details">

                        <div class="s-shipping-controls">
                            {if empty($m.error) && !empty($m.rates)}
                                {if count($m.rates) > 1}
                                    <select class="s-shipping-select shipping-rates" name="rate_id[{$m.id}]">
                                        {foreach $m.rates as $rate_id => $r}
                                            <option data-rate="{shop_currency($r.rate, $r.currency)}" {if !empty($r.est_delivery)}data-delivery="{$r.est_delivery}"{/if} {if !empty($r.comment)}data-comment="{$r.comment}"{/if} value="{$rate_id}"{if $rate_id == $shipping.rate_id} selected{/if}>{$r.name} ({shop_currency($r.rate, $r.currency)})</option>
                                        {/foreach}
                                    </select>
                                {else}
                                    <input type="hidden" name="rate_id[{$m.id}]" value="{key($m.rates)}">
                                {/if}
                            {/if}
                        </div>

                        {if $m.description}<p class="s-shipping-description">{$m.description}</p>{/if}

                    </div>
                </div>
                <div class="s-column">

                    <div class="s-rate-wrapper {if !empty($m.error)}has-error{/if}">
                        {* PRICE *}
                        <div class="s-price-wrapper js-price-wrapper">
                            <span class="s-price price nowrap js-price" {if !empty($m.error)}style="display: none;"{/if}">
                            {if empty($m.error)}
                                {if $m.rate !== null}
                                    {shop_currency_html($m.rate, $m.currency)}
                                {elseif $m.external}
                                    {$external_methods[] = $m.id}
                                    [`Loading...`] <i class="icon16 loading"></i>
                                {/if}
                            {/if}
                            </span>
                        </div>

                        {* DELIVERY *}
                        <div class="s-delivery-wrapper js-delivery-wrapper" style="{if empty($m.est_delivery) || !empty($m.error)}display: none;{/if}">
                            [`Estimated delivery`]:
                            <span class="s-delivery est_delivery js-delivery-wrapper">{if !empty($m.est_delivery)}{$m.est_delivery}{/if}</span>
                        </div>

                        {* COMMENT *}
                        <p class="s-comment hint error comment js-comment" style="{if empty($m.comment)}display: none;{/if}">
                            {if !empty($m.comment)}{$m.comment}{/if}
                        </p>

                        {* SHIPPING *}
                        <p class="s-shipping-error shipping-error js-error error" {if empty($m.error)}style="display: none;"{/if}>{if !empty($m.error)}{$m.error}{/if}</p>
                    </div>

                </div>
            </div>

            {if !empty($m.form)}
                <div class="wa-form wa-address" {if $m.id != $shipping.id}style="display:none"{/if}>
                    {$m.form->html()}
                    {if !empty($checkout_steps.shipping.service_agreement_hint)}
                        <div class="wa-field">
                            <div class="wa-value">
                                <p class="hint">{$checkout_steps.shipping.service_agreement_hint}</p>
                            </div>
                        </div>
                    {/if}
                </div>
            {/if}

            {if !empty($m.custom_html)}
                <div class="wa-form" {if $m.id != $shipping.id}style="display:none"{/if}>{$m.custom_html}</div>
            {/if}
        </li>
    {foreachelse}
        <li>
            <em class="error">[`Oops! We are sorry, but <strong>we cannot ship this order to your selected destination</strong>. Checkout cannot be completed.`]</em>
        </li>
    {/foreach}
</ul>

<script>
    ( function($) {

        var $wrapper = $(".s-shipping-options");

        {* CHANGE RATES *}
        $wrapper.on("change", "select.shipping-rates", function (e, not_check) {
            var $select = $(this),
                $selected = $select.find("option:selected"),
                rate = $selected.data("rate"),
                delivery = $selected.data("est_delivery"),
                comment = $selected.data("comment"),
                $item = $select.closest(".s-shipping-item");

            $item.find(".s-price").html( rate );

            if (!not_check) {
                $item.find("input:radio").attr("checked", "checked").trigger("change");
            }

            if (delivery) {
                $item.find(".s-delivery").html( delivery );
                $item.find(".s-delivery-wrapper").show();
            } else {
                $item.find(".s-delivery-wrapper").hide();
            }

            if (comment) {
                $item.find(".s-comment").html( comment ).show();
            } else {
                $item.find(".s-comment").hide();
            }
        });

        {* CHANGE ITEMS *}
        $wrapper.find("input:radio").on("change", function () {
            var $input = $(this),
                is_checked = ( $(this).is(':checked') && !$(this).data('ignore') ),
                $item = $input.closest(".s-shipping-item"),
                selected_class = "is-selected";

            if (is_checked) {

                $wrapper.find(".s-shipping-item." + selected_class).removeClass(selected_class);
                $item.addClass(selected_class);

                $wrapper.find(".wa-form").hide();
                $item.find('.wa-form').show();

                if ( $input.data("changed") ) {
                    $item.find(".wa-form input, .wa-form select").data("ignore", 1)
                        .change()
                        .removeData('ignore');

                    $input.removeData('changed');
                }
            }
        });

        {* CHANGE ADDRESS *}
        $(".wa-address").find('input,select').change(function () {
            if ($(this).data('ignore')) {
                return true;
            }
            var shipping_id = $("input[name=shipping_id]:checked").val();
            var loaded_flag = false;
            setTimeout(function () {
                if (!loaded_flag && !$(".shipping-" + shipping_id + " .s-price .loading").length) {
                    $(".shipping-" + shipping_id + " .s-price").append(' <i class="icon16 loading"></i>');
                }
            }, 300);
            var v = $(this).val();
            var name = $(this).attr('name').replace(/customer_\d+/, '');

            $(".s-shipping-options input:radio").each(function () {
                if ($(this).val() != shipping_id) {
                    var el = $(this).closest('li').find('[name="customer_' + $(this).val() + name + '"]');
                    if (el.attr('type') != 'hidden') {
                        el.val(v);
                        $(this).data('changed', 1);
                    }
                }
            });

            $.post("{$wa->getUrl('/frontend/shipping')}", $("form").serialize(), function (response) {
                loaded_flag = true;
                responseCallback(shipping_id, response.data);
            }, "json");
        });

        {* MAGIC METHODS *}
        {if $external_methods}
        $.get("{$wa->getUrl('/frontend/shipping')}", { shipping_id: [{implode(',', $external_methods)}]}, function (response) {
            for (var shipping_id in response.data) {
                responseCallback(shipping_id, response.data[shipping_id]);
            }
        }, "json");
        {/if}

        function responseCallback(shipping_id, data) {
            var $wrapper = $(".shipping-" + shipping_id),
                $block = $wrapper.find(".s-rate-wrapper"),
                $priceW = $wrapper.find(".js-price-wrapper"),
                $price = $wrapper.find(".js-price"),
                $deliveryW = $wrapper.find(".js-delivery-wrapper"),
                $delivery = $wrapper.find(".js-delivery"),
                $comment = $wrapper.find(".js-comment"),
                $error = $wrapper.find(".js-error"),
                error_class = "is-error",
                name = 'rate_id[' + shipping_id + ']';

            if (typeof(data) === 'string') {
                $wrapper.find('input[name="' + name + '"]').remove();
                $wrapper.find('select[name="' + name + '"]').remove();

                $block.addClass(error_class);
                $priceW.hide();
                $comment.hide();
                $error.html(data).show();

            } else {
                $wrapper.find("input:radio").removeAttr("disabled");
                if ( data.length > 1 ) {
                    var $select = $wrapper.find('select[name="' + name + '"]');
                    $wrapper.find('input[name="' + name + '"]').remove();

                    var html = '<select class="s-shipping-select shipping-rates" name="' + name + '">';
                    for ( var i = 0; i < data.length; i++ ) {
                        var r = data[i];
                        html += '<option data-rate="' + r.rate + '" data-comment="' + (r.comment || '') + '" data-est_delivery="' + (r.est_delivery || '') + '" value="' + r.id + '">' + r.name + ' (' + r.rate + ')</option>';
                    }
                    html += '</select>';

                    var selected = false;
                    if ( $select.length ) {
                        selected = $select.val();
                        $select.remove();
                    }

                    $select = $(html);
                    $wrapper.find(".s-shipping-details").prepend($select);

                    if ( selected ) {
                        $select.val(selected);
                    }

                    $select.trigger("change", 1);

                } else {
                    $wrapper.find('select[name="' + name + '"]').remove();
                    var $input = $wrapper.find('input[name="' + name + '"]');
                    if ( $input.length ) {
                        $input.val(data[0].id);
                    } else {
                        $wrapper.append('<input type="hidden" name="' + name + '" value="' + data[0].id + '">');
                    }

                    $price.html(data[0].rate);

                    if ( data[0].est_delivery ) {
                        $delivery.html(data[0].est_delivery);
                        $deliveryW.show();
                    } else {
                        $deliveryW.hide();
                    }

                    if ( data[0].comment ) {
                        $comment.html(data[0].comment).show();
                    } else {
                        $comment.hide();
                    }
                }

                $block.removeClass(error_class);
                $priceW.show();
                $error.hide();
            }
        }

    })(jQuery);
</script>

{* @event frontend_checkout.%plugin_id% *}
{foreach $frontend_checkout as $_}{$_}{/foreach}

{if !empty($error)}
    <div class="s-checkout-result">
        <span class="wa-error-msg c-error">{$error}</span>
    </div>
{/if}

{/strip}