{extends file="layout.tpl"}

{* Security *}
{block name="no-return-functions" prepend}
    {check_auth role="CUSTOMER" login_tpl="login"}
    {check_cart_not_empty}
{/block}

{* Body Class *}
{block name="body-class"}page-order-delivery{/block}

{* Breadcrumb *}
{block name='no-return-functions' append}
    {$breadcrumbs = [
        ['title' => {intl l="Cart"}, 'url'=>{url path="/cart"}],
        ['title' => {intl l="Billing and delivery"}, 'url'=>{url path="/order/delivery"}]
    ]}
{/block}


{block name="main-content"}

    <div class="main">
        <article id="cart" class="col-main" role="main" aria-labelledby="main-label">

            <h1 id="main-label" class="page-header">{intl l="Billing and delivery"}</h1>

            {include file="misc/checkout-progress.tpl" step="delivery"}

            {form name="thelia.order.delivery"}
            {assign var="isPost" value="{$smarty.post|count}"}
            <form id="form-cart-delivery" action="{url path="/order/delivery"}" method="post" {form_enctype form=$form}>

                {form_hidden_fields form=$form}

                {if $form_error}<div class="alert alert-danger">{$form_error_message}</div>{/if}

                {form_field form=$form field='delivery-address'}

                <div id="delivery-address" class="panel">
                    <div class="panel-heading clearfix">
                        <a href="{url path="/address/create"}" class="btn btn-add-address">{intl l="Add a new address"}</a>
                        {intl l="Choose your delivery address"}
                        {if $error}
                            <span class="help-block"><span class="icon-remove"></span> {$message}</span>
                        {/if}
                    </div>
                    <div class="panel-body">
                        <table class="table table-address" role="presentation" summary="Address Books">
                            <tbody>
                            {loop type="address" name="customer.addresses" customer="current"}
                            {assign var="isDeliveryAddressChecked" value="0"}
                            {if $isPost}
                                {if $value == $ID}
                                    {assign var="isDeliveryAddressChecked" value="1"}
                                {/if}
                            {elseif $DEFAULT}
                                {assign var="isDeliveryAddressChecked" value="1"}
                            {/if}
                            <tr>
                                <th>
                                    <div class="radio">
                                        <label for="delivery-address_{$ID}">
                                            <input type="radio" class="js-change-delivery-address" data-country="{$COUNTRY}" name="{$name}" value="{$ID}"{if $isDeliveryAddressChecked} checked="checked"{/if} id="delivery-address_{$ID}">
                                            {$LABEL|default:"{intl l='Address %nb' nb={$LOOP_COUNT}}"}
                                        </label>
                                    </div>
                                </th>
                                <td>
                                    <ul class="list-address">
                                        <li>
                                            <span class="fn">{loop type="title" name="customer.title.info" id=$TITLE}{$SHORT}{/loop} {$LASTNAME|upper} {$FIRSTNAME|ucwords}</span>
                                            <span class="org">{$COMPANY}</span>
                                        </li>
                                        <li>
                                            <address class="adr">
                                                <span class="street-address">{$ADDRESS1}</span>
                                                {if $ADDRESS2 != ""}
                                                    <br><span class="street-address">{$ADDRESS2}</span>
                                                {/if}
                                                {if $ADDRESS3 != ""}
                                                    <br><span class="street-address">{$ADDRESS3}</span>
                                                {/if}
                                                <br><span class="postal-code">{$ZIPCODE}</span>
                                                <span class="locality">{$CITY}, <span class="country-name">{loop type="country" name="customer.country.info" id=$COUNTRY}{$TITLE}{/loop}</span></span>
                                            </address>
                                        </li>
                                        <li>
                                            {if $CELLPHONE != ""}
                                                <span class="tel">{$CELLPHONE}</span>
                                            {/if}
                                            {if $PHONE != ""}
                                                <br><span class="tel">{$PHONE}</span>
                                            {/if}
                                        </li>
                                    </ul>
                                </td>
                                <td>
                                    <div class="group-btn">
                                        <a href="{url path="/address/update/{$ID}"}" class="btn btn-edit-address" data-toggle="tooltip" title="{intl l="Edit this address"}"><i class="icon-pencil"></i> <span>{intl l="Edit"}</span></a>
                                        {if $DEFAULT != 1}
                                            <a href="{url path="/address/delete/{$ID}"}" class="btn btn-remove-address" data-confirm="{intl l="Do you really want to delete this address ?"}" data-confirm-callback="address.delete" title="{intl l="Remove this address"}" data-toggle="tooltip"><i class="icon-remove"></i> <span>{intl l="Cancel"}</span></a>
                                        {/if}
                                    </div>
                                </td>
                            </tr>
                            {/loop}
                            </tbody>
                        </table>
                    </div>
                </div>

                {/form_field}

                {form_field form=$form field='delivery-module'}

                <div id="delivery-method" class="panel">
                    <div class="panel-heading">
                        {intl l="Choose your delivery method"}
                        {if $error}
                            <span class="help-block"><span class="icon-remove"></span> {$message}</span>
                        {/if}
                    </div>
                    <div class="panel-body" id="delivery-module-list-block"></div>
                </div>

                {/form_field}

                <a href="{url path="/cart"}" role="button" class="btn btn-back"><span>{intl l="Back"}</span></a>
                <button type="submit" class="btn btn-checkout-next"><span>{intl l="Next Step"}</span></button>

            </form>
            {/form}

        </article>
    </div>


{/block}

{block name="javascript-initialization"}

    <script type="text/javascript">
        jQuery(function($) {
            $('#delivery-module-list-block').load('{url path="/order/deliveryModuleList"}');

            $('.js-change-delivery-address').change(function(e) {
                $('#delivery-module-list-block').load(
                    '{url path="/order/deliveryModuleList"}',
{literal}
                    {country_id: $(this).data('country')}
{/literal}
                );
            });
        });
    </script>

{/block}