{extends file="layout.tpl"}

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

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

{* Breadcrumb *}
{block name='no-return-functions' append}
    {$breadcrumbs = [
        ['title' => {intl l="Cart"}, 'url'=>{url path="/cart"}],
        ['title' => {intl l="My order"}, 'url'=>{url path="/order/invoice"}]
    ]}
{/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">{intl l="Check my order"}</h1>

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

            {hook name="order-invoice.top"}

            {form name="thelia.order.coupon"}

            <form id="form-coupon" action="{url path="/order/coupon"}" method="post" {form_enctype}>

                {form_hidden_fields}

                {form_field field='success_url'}
                    <input type="hidden" name="{$name}" value="{url path="/order/invoice"}" />
                {/form_field}

                {form_field field='error_url'}
                    <input type="hidden" name="{$name}" value="{url path="/order/invoice"}" />
                {/form_field}

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

                <table class="table table-cart table-bordered">
                    <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">{intl l="Product Name"}</span>
                            <span class="visible-xs">{intl l="Name"}</span>
                        </th>
                        <th class="unitprice">
                            <span class="hidden-xs">{intl l="Unit Price"}</span>
                            <span class="visible-xs">{intl l="Price"}</span>
                        </th>
                        <th class="unitprice">
                            <span class="hidden-xs">{intl l="Unit Taxed Price"}</span>
                            <span class="visible-xs">{intl l="Taxed Price"}</span>
                        </th>
                        <th class="qty">
                            <span class="hidden-xs">{intl l="Quantity"}</span>
                            <span class="visible-xs">{intl l="Qty"}</span>
                        </th>
                        <th class="subprice">
                            <span class="hidden-xs">{intl l="Total incl. tax"}</span>
                            <span class="visible-xs">{intl l="Total incl.tax"}</span>
                        </th>
                    </tr>
                    </thead>
                    <tbody>

                    {loop type="cart" name="cartloop"}
                    <tr>
                        <td class="image">
                            <a href="{$PRODUCT_URL nofilter}">
                            {assign var="product_image_url" value=null}
                            {ifloop rel="pse-first-image"}
                                {loop type="product-sale-elements-image" name="pse-first-image" product_sale_elements_id=$PRODUCT_SALE_ELEMENTS_ID limit="1"}
                                    {loop type="image" name="product-image" id=$PRODUCT_IMAGE_ID product=$PRODUCT_ID limit="1" width="118" height="85" force_return="true"}
                                        {assign var="product_image_url" value=$IMAGE_URL}
                                    {/loop}
                                {/loop}
                            {/ifloop}
                            {elseloop rel="pse-first-image"}
                                {loop type="image" name="product-image" product=$PRODUCT_ID limit="1" width="118" height="85" force_return="true"}
                                    {assign var="product_image_url" value=$IMAGE_URL}
                                {/loop}
                            {/elseloop}
                            {if $product_image_url}
                                <img itemprop="image" src="{$product_image_url nofilter}" alt="Product #{$LOOP_COUNT}">
                            {else}
                                <img itemprop="image" src="{image file='assets/dist/img/product/1/118x85.png'}" alt="Product #{$LOOP_COUNT}">
                            {/if}
                            </a>
                        </td>
                        <td class="product" >
                            <h3 class="name">
                                <a href="{$PRODUCT_URL nofilter}">{$TITLE}</a>
                            </h3>
                            <div class="product-options">
                                <dl class="dl-horizontal">
                                    <dt class="stockView">{intl l="Available"} :</dt>
                                    {if $STOCK > 0}
                                        <dd>{intl l="In Stock"}</dd>
                                    {else}
                                        <dd>{intl l="Out of Stock"}</dd>
                                    {/if}
                                    {loop type="product_sale_elements" name="ref" id=$PRODUCT_SALE_ELEMENTS_ID}
                                        <dt class="refView">{intl l="No."}</dt>
                                        <dd>{$REF}</dd>
                                    {/loop}

                                    {loop type="attribute_combination" name="product_options" product_sale_elements="$PRODUCT_SALE_ELEMENTS_ID"}
                                        <dt class="attributeView">{$ATTRIBUTE_TITLE}</dt>
                                        <dd>{$ATTRIBUTE_AVAILABILITY_TITLE}</dd>
                                    {/loop}
                                </dl>
                            </div>
                        </td>
                        <td class="unitprice">
                            <div class="secondary-price">
                                <span class="price">{format_money number=$REAL_PRICE}</span>
                            </div>
                        </td>
                        <td class="unitprice">
                            <div class="secondary-price">
                                <div class="special-price"><span class="price">{format_money number=$REAL_TAXED_PRICE}</span>
                                {if $IS_PROMO == 1}
                                    <small class="old-price">{intl l="instead of"} <span class="price">{format_money number=$TAXED_PRICE}</span></small>
                                {/if}
                            </div>
                        </td>
                        <td class="qty">
                            <span class="price">{$QUANTITY}</span>
                        </td>
                        <td class="subprice">
                            <span class="price">
                                {format_money number=$REAL_TOTAL_TAXED_PRICE}
                            </span>
                        </td>
                    </tr>
                    {/loop}

                    </tbody>
                </table>

                <div class="row">
                    <div class="col-md-6 col-md-offset-6 col-sm-9 col-sm-offset-3 col-xs-12">
                        <table class="table table-cart table-bordered table-cart-total">
                            <tfoot>
                            {$discount={order attr="discount"}}
                            <tr>
                                <th class="coupon"><label for="coupon">{intl l="You may have a coupon ?"}</label></th>
                                <td class="coupon">
                                    {form_field field='success_url'}
                                    <input type="hidden" name="{$name}" value="{url path="/order/invoice"}" />
                                    {/form_field}
                                    {form_field field='coupon-code'}
                                    <div class="{if $error}has-error{/if}">
                                        <div class="input-group">
                                            <label class="control-label sr-only" for="code">{intl l='Code :'}</label>
                                            <input id="coupon" class="form-control" type="text" name="{$name}" value="{$value}" placeholder="{intl l='Coupon code'}" required>
                                            <span class="input-group-btn">
                                                <button type="submit" class="btn btn-default">{intl l="Ok"}</button>
                                            </span>
                                        </div>
                                        {if $error}<span class="help-block">{$message}</span>{/if}
                                    </div>
                                    {/form_field}
                                    <!-- /input-group -->
                                </td>
                            </tr>
                            <tr>
                                <th>{intl l="Cart total excl. taxes"}</th>
                                <td>
                                    <div>
                                        <span class="price">{format_money number={cart attr="total_price_without_discount"}}</span>
                                    </div>
                                </td>
                            </tr>

                            <tr>
                                <th>{intl l="Taxes total"}</th>
                                <td>
                                    <div>
                                        <span class="price">{format_money number={cart attr="total_tax_amount_without_discount"}}</span>
                                    </div>
                                </td>
                            </tr>

                            <tr>
                                <th>{intl l="Cart total incl. taxes"}</th>
                                <td>
                                    <div>
                                        <span class="price">{format_money number={cart attr="total_taxed_price_without_discount"}}</span>
                                    </div>
                                </td>
                            </tr>

                            {if $discount > 0}
                                <tr>
                                    <th class="discount">
                                        {intl l="Discount incl. taxes"}
                                        <br>{intl l="Tax: %tax" tax={format_money number={cart attr="discount_tax_amount"} currency_id=$CURRENCY}}
                                    </th>
                                    <td class="shipping">
                                        <div class="total-price">
                                            <span class="price">-{format_money number=$discount}</span>
                                        </div>
                                    </td>
                                </tr>
                            {/if}

                            {if {cart attr="is_virtual"} != 1}
                                <tr>
                                    <th class="shipping">
                                        {intl l="Shipping"}
                                        {$postageTax = {order attr="postage_tax"}}
                                        {if $postageTax > 0}
                                            <br>
                                            {intl l="Including %tax tax" tax={format_money number=$postageTax}}
                                        {/if}
                                    </th>
                                    <td class="shipping">
                                        <div class="shipping-price">
                                            <span class="price">{format_money number={order attr="postage"}}</span>
                                        </div>
                                    </td>
                                </tr>
                            {/if}

                            <tr>
                                <th class="total">{intl l="Total incl. taxes"}</th>
                                <td class="total">
                                    <div class="total-price">
                                        <span class="price">{format_money number={{cart attr="total_taxed_price"} + {order attr="postage"}}}</span>
                                    </div>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
                {hook name="order-invoice.coupon-form"}
                </form>
            {/form}

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

                {form_hidden_fields}

                {form_field field="error_url"}
                    <input type="hidden" name="{$name}" value="{url path="/order/invoice"}">
                {/form_field}

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

                <div id="cart-address" class="row">
                    {ifhook rel="order-invoice.delivery-address"}
                        {* delivery module can customize the delivery address *}
                        {hook name="order-invoice.delivery-address" module={order attr="delivery_module"}}
                    {/ifhook}
                    {elsehook rel="order-invoice.delivery-address"}
                    <div class="panel panel-default col-sm-6">
                        {loop type="address" name="delivery-address" id={order attr="delivery_address"}}
                        <div class="panel-heading">{intl l="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>
                                {if $STATE}, <span class="state-name">{loop type="state" name="customer.state.info" id=$STATE}{$TITLE}{/loop}</span></span>{/if}
                            </address>
                        </div>
                        {/loop}
                    </div>
                    {/elsehook}

                    {form_field field='invoice-address'}
                    <div class="panel panel-default col-sm-6">
                        <div class="panel-heading">{intl l="Billing address"}</div>

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

                        <div class="panel-body">
                            {loop type="address" name="invoice-address"}
                                {assign var="isInvoiceAddressChecked" value="0"}
                                {if $isPost}
                                    {if $value == $ID && $value != ""}
                                        {assign var="isInvoiceAddressChecked" value="1"}
                                    {elseif $DEFAULT}
                                        {assign var="isInvoiceAddressChecked" value="1"}
                                    {/if}
                                {elseif $DEFAULT}
                                    {assign var="isInvoiceAddressChecked" value="1"}
                                {/if}

                                <div class="radio">
                                    <label for="invoice-address_{$ID}">
                                        <input type="radio" name="{$name}" id="invoice-address_{$ID}" value="{$ID}"{if $isInvoiceAddressChecked} checked="checked"{/if}>
                                        <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>
                                            {if $STATE}, <span class="state-name">{loop type="state" name="customer.state.info" id=$STATE}{$TITLE}{/loop}</span></span>{/if}
                                        </address>
                                    </label>
                                </div>
                            {/loop}
                            <a href="#" class="btn btn-change-address btn-link hidden"><i class="fa fa-pencil"></i> {intl l="Change address"}</a>
                        </div>

                    </div>
                </div>

                {/form_field}

                {form_field field='payment-module'}

                <div id="payment-method" class="panel panel-default">
                    <div class="panel-heading">{intl l="Choose your payment method"}</div>

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

                    <div class="panel-body">
                        <ul class="list-group">
                            {loop type="payment" name="payments" force_return="true"}
                                {assign "paymentModuleId" $ID}
                                <li class="list-group-item text-left">
                                    <label for="payment_{$paymentModuleId}">
                                        <input type="radio" name="{$name}" id="payment_{$paymentModuleId}" value="{$paymentModuleId}" {if ($LOOP_TOTAL ==1 && $LOOP_COUNT == 1) || ($value == $paymentModuleId)}checked{/if}>
                                        {loop type="image" name="paymentspicture" source="module" source_id=$ID force_return="true" width="100" height="72"}
                                            <img src="{$IMAGE_URL nofilter}" alt="{intl l="Pay with %module_title" module_title={$TITLE}}">
                                        {/loop}
                                        {$TITLE}
                                    </label>
                                    {hook name="order-invoice.payment-extra" module={$paymentModuleId}}
                                </li>
                            {/loop}
                        </ul>
                    </div>
                </div>
                {/form_field}

                {form_field field="agreed"}
                <div class="well">
                    <div class="form-group group-agreed{if $error} has-error{/if}">
                        <div class="control-input">
                            <div class="checkbox">
                                <label class="control-label" for="{$label_attr.for}">
                                    <input type="checkbox" name="{$name}" id="{$label_attr.for}" value="{$value}"{if $checked} checked{/if}  {if $required} aria-required="true" required{/if}>
                                    {$termsAndConditionsId={config key="terms_conditions_content_id"}}
                                    {if $termsAndConditionsId}
                                        {loop name="content-terms" type="content" id=$termsAndConditionsId}
                                            {$termsAndConditionsUrl=$URL}
                                        {/loop}
                                    {/if}
                                    {intl l="I've read and agreed on <a href='%link' class='terms-quickview'>Terms &amp; Conditions</a>" link={$termsAndConditionsUrl nofilter}}.
                                </label>
                                {if $error }
                                    <span class="help-block">{$message}</span>
                                {/if}
                            </div>
                        </div>
                    </div><!--/.form-group-->
                </div>
                {/form_field}

                {hook name="order-invoice.payment-form"}

                <a href="{url path="/order/delivery"}" role="button" class="btn btn-default"><i class="fa fa-chevron-left"></i> {intl l="Back"}</a>
                <button type="submit" class="btn btn-primary pull-right"><i class="fa fa-chevron-right"></i> {intl l="Next Step"}</button>
            </form>
            {/form}
            {hook name="order-invoice.bottom"}
        </article>
    </div>
{/block}

{block name="javascript-initialization"}
<script type="text/javascript">
jQuery(function($) {
    $('#cart-address').each(function(){
        var $radio = $('.radio', this),
            $btn = $('.btn-change-address');

        // Hide other invoice address
        $radio.filter( function(){ return !$(this).find(':radio').is(':checked'); }).hide();
        $btn
            .removeClass('hidden')
            .bind('click.btn-change-address', function(){
                $radio.show();
                $(this).hide();

                return false;
            });
    });

    $(".terms-quickview").on('click', function (ev) {
        ev.preventDefault();

        $.get(this.href, function (data) {
            // Hide all currently active bootbox dialogs
            bootbox.hideAll();
            // Show dialog
            bootbox.dialog({
                message : '<div class="clearfix">'+$("#content-main",data).html()+'</div>',
                onEscape: function() {
                    bootbox.hideAll();
                }
            });
        });

        return false;
    });

});
</script>
{hook name="order-invoice.javascript-initialization"}
{/block}

{block name="stylesheet"}
{hook name="order-invoice.stylesheet"}
{/block}

{block name="after-javascript-include"}
{hook name="order-invoice.after-javascript-include"}
{/block}

