{extends file="layout.tpl"}

{block name="no-return-functions"}
    {check_auth context="front" roles="CUSTOMER" login_tpl="login"}
    {check_cart_not_empty}
{/block}

{block name="breadcrumb"}
    <nav class="nav-breadcrumb" role="navigation" aria-labelledby="breadcrumb-label">
        <strong id="breadcrumb-label">You are here: </strong>
        <ul class="breadcrumb" itemprop="breadcrumb">
            <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{navigate to="index"}" itemprop="url"><span itemprop="title">Home</span></a></li>
            <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{url path="/cart"}" itemprop="url"><span itemprop="title">Cart</span></a></li>
            <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="active"><span itemprop="title">Billing and delivery</span></li>
        </ul>
    </nav><!-- /.nav-breadcrumb -->
{/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">Your Cart</h1>

            <div class="btn-group checkout-progress">
                <a href="{url path="/cart"}" role="button" class="btn btn-step"><span class="step-nb">1</span> <span class="step-label">Your Cart</span></a>
                <a href="#" role="button" class="btn btn-step active"><span class="step-nb">2</span> <span class="step-label">Billing and delivery</span></a>
                <a href="#" role="button" class="btn btn-step disabled"><span class="step-nb">3</span> <span class="step-label">Check my order</span></a>
                <a href="#" role="button" class="btn btn-step disabled"><span class="step-nb">4</span> <span class="step-label">Secure payment</span></a>
            </div>

            {form name="thelia.order.delivery"}
            <form id="form-cart-delivery" action="{url path="/order/delivery"}" method="post" role="form" {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">Add a new address</a>
                        Chose 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"}


                            <tr>
                                <th>
                                    <div class="radio">
                                        <label for="delivery-address_{$ID}">

                                                <input type="radio" name="{$name}" value="{$ID}" {if $value == $ID}checked="checked"{/if} id="delivery-address_{$ID}">

                                            {$LABEL}
                                        </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="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 js-remove-address" 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">
                        Choose your delivery method
                        {if $error}
                            <span class="help-block"><span class="icon-remove"></span> {$message}</span>
                        {/if}
                    </div>
                    <div class="panel-body">
                        {loop type="delivery" name="deliveries" force_return="true"}
                        <div class="radio">
                            <label for="delivery-method_1">
                                {form_field form=$form field='delivery-module'}
                                    <input type="radio" name="{$name}" {if $value == $ID}checked="checked"{/if} value="{$ID}">
                                {/form_field}
                                <strong>{$TITLE}</strong> / {currency attr="symbol"} {$POSTAGE}
                            </label>
                        </div>
                        {/loop}
                    </div>
                </div>

                {/form_field}

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

            </form>
            {/form}

        </article>
    </div>

    <div class="modal fade" id="address-delete-modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h3>{intl l="Delete address"}</h3>
                </div>
                <div class="modal-body">
                    {intl l="Do you really want to delete this address ?"}
                </div>
                <div class="modal-footer">
                    <a href="#" type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove"></span> {intl l="No"}</a>
                    <a href="#" id="address-delete-link" type="submit" class="btn btn-default btn-primary"><span class="glyphicon glyphicon-check"></span> {intl l="Yes"}</a>
                </div>
            </div>
        </div>
    </div>

{/block}

{block name="javascript-initialization"}
<script type="text/javascript">
jQuery(function($cart) {

    $cart(".js-remove-address").click(function(e){
        e.preventDefault();
        $cart("#address-delete-link").attr("href", $cart(this).attr("href"));
        $cart('#address-delete-modal').modal('show');
    })

});
</script>
{/block}