{extends file="layout.tpl"}

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

{block name="body-class"}page-order-invoice{/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">My order</span></li>
        </ul>
    </nav><!-- /.nav-breadcrumb -->
{/block}

{block name="main-content"}
    <div class="main">
        <article 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"> <span>Your Cart</span></a>
                <a href="{url path="/order/delivery"}" role="button" class="btn btn-step"><span class="step-nb">2</span> <span class="step-label">Billing and delivery</span></a>
                <a href="#" role="button" class="btn btn-step active"><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.payment"}

            <form id="form-cart-payment" action="{url path="/order/invoice"}" 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}

                <table class="table table-cart">
                    <colgroup>
                        <col width="150">
                        <col>
                        <col width="200">
                        <col width="250">
                    </colgroup>
                    <thead>
                    <tr>
                        <th class="image">&nbsp;</th>
                        <th class="product">
                            <span class="hidden-xs">Product Name</span>
                            <span class="visible-xs">Name</span>
                        </th>
                        <th class="unitprice">
                            <span class="hidden-xs">Unit Price</span>
                            <span class="visible-xs">Price</span>
                        </th>
                        <th class="qty">
                            <span class="hidden-xs">Quantity</span>
                            <span class="visible-xs">Quantity</span>
                        </th>
                        <th class="subprice">
                            <span class="hidden-xs">Total <abbr title="Tax Inclusive">TTC</abbr></span>
                            <span class="visible-xs">Total</span>
                        </th>
                    </tr>
                    </thead>
                    <tbody>

                    {loop type="cart" name="cartloop"}

                    <tr>
                        <td class="image">
                            <a href="{$PRODUCT_URL}" class="thumbnail">

                            {assign "cart_count" $LOOP_COUNT}
                            {ifloop rel='product-image'}
                                {loop type="image" name="product-image" product=$PRODUCT_ID limit="1" width="118" height="85" force_return="true"}
                                    <img src="{$IMAGE_URL}" alt="Product #{$cart_count}"></a>
                                {/loop}
                            {/ifloop}
                            {elseloop rel="product-image"}
                                {images file='assets/img/product/1/118x85.png'}<img itemprop="image" src="{$asset_url}" alt="Product #{$cart_count}">{/images}
                            {/elseloop}
                        </td>
                        <td class="product" >
                            <h3 class="name">
                                Product #{$cart_count}
                            </h3>
                            <div class="product-options">
                                <dl class="dl-horizontal">
                                    <dt>Available :</dt>
                                    <dd>In Stock</dd>
                                    <dt>No.</dt>
                                    <dd>{$REF}</dd>
                                    {*<dt>Select Size</dt>
                                    <dd>Large</dd>
                                    <dt>Select Delivery Date</dt>
                                    <dd>Jan 2, 2013</dd>
                                    <dt>Additional Option</dt>
                                    <dd>Option 1</dd>*}
                                </dl>
                            </div>
                        </td>
                        <td class="unitprice">
                            {if $IS_PROMO == 1}
                                {assign "real_price" $PROMO_TAXED_PRICE}
                                <div class="special-price"><span class="price">{currency attr="symbol"} {$PROMO_TAXED_PRICE}</span></div>
                                <small class="old-price">instead of <span class="price">{currency attr="symbol"} {$TAXED_PRICE}</span></small>
                            {else}
                                {assign "real_price" $TAXED_PRICE}
                                <div class="special-price"><span class="price">{currency attr="symbol"} {$TAXED_PRICE}</span></div>
                            {/if}
                        </td>
                        <td class="qty">
                            <span class="price">{$QUANTITY}</span>
                        </td>
                        <td class="subprice">
                            <span class="price">{currency attr="symbol"} {$real_price * $QUANTITY}</span>
                        </td>
                    </tr>

                    {/loop}

                    </tbody>
                    <tfoot>
                    <tr >
                        <td rowspan="3" colspan="3" class="empty">&nbsp;</td>
                        <th class="shipping">Shipping Tax</th>
                        <td class="shipping">
                            <div class="shipping-price">
                                <span class="price">{currency attr="symbol"} {order attr="postage"}</span>
                            </div>
                        </td>
                    </tr>
                    <tr >
                        <th class="coupon"><label for="coupon">Enter your coupon code if you have one</label></th>
                        <td class="coupon">
                            <div class="input-group">
                                <input type="text" name="coupon" id="coupon" class="form-control">
												<span class="input-group-btn">
													<button type="button" class="btn btn-coupon">Ok</button>
												</span>
                            </div><!-- /input-group -->
                        </td>
                    </tr>
                    <tr >
                        <th class="total">Total <abbr title="Tax Inclusive">TTC</abbr></th>
                        <td class="total">
                            <div class="total-price">
                                <span class="price">{currency attr="symbol"} {{cart attr="total_taxed_price"} + {order attr="postage"}}</span>
                            </div>
                        </td>
                    </tr>
                    </tfoot>
                </table>

                <div id="cart-address">
                    <div class="panel">
                        {loop type="address" name="delivery-address" id="{order attr="delivery_address"}"}
                        <div class="panel-heading">Delivery address</div>
                        <div class="panel-body">
                            <span class="fn">{loop type="title" name="customer.title.info" id=$TITLE}{$SHORT}{/loop} {$LASTNAME|upper} {$FIRSTNAME|ucwords}</span>
                            <span class="org">{$COMPANY}</span>
                            <address class="adr">
                                <span class="street-address">{$ADDRESS1}</span><br>
                                {if $ADDRESS2 != ""}
                                    <span class="street-address">{$ADDRESS2}</span><br>
                                {/if}
                                {if $ADDRESS3 != ""}
                                    <span class="street-address">{$ADDRESS3}</span><br>
                                {/if}
                                <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>
                        </div>
                        {/loop}
                    </div>

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

                    <div class="panel">
                        <div class="panel-heading">Billing address</div>

                        {if $error}
                            <span class="help-block"><span class="icon-remove"></span> {$message}</span>
                        {/if}

                        <div class="panel-body">

                            <table class="col-md-12">

                        {loop type="address" name="invoice-address" default="{if !$error && $value}*{else}true{/if}" id="{if !$error && $value}{$value}{else}*{/if}"}

                            <tr>
                                <td>
                                    <span class="fn">{loop type="title" name="customer.title.info" id=$TITLE}{$SHORT}{/loop} {$LASTNAME|upper} {$FIRSTNAME|ucwords}</span>
                                    <span class="org">{$COMPANY}</span>
                                    <address class="adr">
                                        <span class="street-address">{$ADDRESS1}</span><br>
                                        {if $ADDRESS2 != ""}
                                            <span class="street-address">{$ADDRESS2}</span><br>
                                        {/if}
                                        {if $ADDRESS3 != ""}
                                            <span class="street-address">{$ADDRESS3}</span><br>
                                        {/if}
                                        <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>
                                </td>
                                <td>
                                    <input class="js-invoice-address-selector {if !$error}hidden{/if}" type="radio" name="{$name}" value="{$ID}" {if $value == $ID OR !$error}checked="checked"{/if}>
                                </td>
                            </tr>

                            {if !$error}
                            <tr class="js-change-invoice-address">
                                <td colspan="2">
                                    <a href="#" class="btn btn-change-address">Change address</a>
                                </td>
                            </tr>
                            {/if}

                        {/loop}

                        {loop type="address" name="invoice-address" default="{if !$error && $value}*{else}false{/if}" exclude="{if !$error && $value}{$value}{else}none{/if}"}

                            <tr class="js-other-invoice-address {if !$error}hidden{/if}">
                                <td>
                                    <span class="fn">{loop type="title" name="customer.title.info" id=$TITLE}{$SHORT}{/loop} {$LASTNAME|upper} {$FIRSTNAME|ucwords}</span>
                                    <span class="org">{$COMPANY}</span>
                                    <address class="adr">
                                        <span class="street-address">{$ADDRESS1}</span><br>
                                        {if $ADDRESS2 != ""}
                                            <span class="street-address">{$ADDRESS2}</span><br>
                                        {/if}
                                        {if $ADDRESS3 != ""}
                                            <span class="street-address">{$ADDRESS3}</span><br>
                                        {/if}
                                        <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>
                                </td>
                                <td>
                                    <input class="js-invoice-address-selector {if !$error}hidden{/if}" type="radio" name="{$name}" value="{$ID}" {if $value == $ID}checked="checked"{/if}>
                                </td>
                            </tr>

                        {/loop}

                            </table>

                        </div>

                    </div>
                </div>

                {/form_field}

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

                <div id="payment-method" class="panel">
                    <div class="panel-heading">Choose your payment method</div>

                    {if $error}
                        <span class="help-block"><span class="icon-remove"></span> {$message}</span>
                    {/if}

                    <div class="panel-body">
                        <ul class="list-payment">

                            {loop type="payment" name="payments" force_return="true"}

                                {assign "paymentModuleId" $ID}

                                {loop type="image" name="paymentspicture" source="module" source_id=$ID force_return="true" width="100" height="72"}

                                    <li>
                                        <div class="radio">
                                            <label for="payment_{$paymentModuleId}_{$ID}">
                                                <input type="radio" name="{$name}" id="payment_{$paymentModuleId}_{$ID}" value="{$paymentModuleId}">
                                                <img src="{$IMAGE_URL}">
                                            </label>
                                        </div>
                                    </li>

                                {/loop}

                            {/loop}

                    </div>
                </div>

                {/form_field}

                <a href="{url path="/order/delivery"}" 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>
{/block}

{block name="javascript-initialization"}
<script type="text/javascript">
jQuery(function($order) {
    $order('.js-change-invoice-address').on('click', 'a', function(e) {
        e.preventDefault();

        $order('.js-other-invoice-address').removeClass('hidden');
        $order('.js-invoice-address-selector').removeClass('hidden');

        $order('#js-invoice-address-default-selector').unbind().remove();
        $order('.js-change-invoice-address').unbind().remove();
    });
});
</script>
{/block}