{extends file="layout.tpl"}

{block name="init"}
    {$errorStock = "FALSE"}
{/block}

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

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


            {ifloop rel="cartloop"}
            {include file="misc/checkout-progress.tpl" step="cart"}
            <div id="errorStock" class="alert alert-warning" style="display:none;">{intl l="We apologize but some of the ordered products are not available any more."}</div>
            {hook name="cart.top"}

            <div class="table-responsive">
                <table class="table table-cart table-bordered">
                    <colgroup>
                        <col width="150">
                        <col>
                        <col width="150">
                        <col width="150">
                        <col width="150">
                    </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 incl. taxes"}</span>
                            <span class="visible-xs">{intl l="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. taxes"}</span>
                            <span class="visible-xs">{intl l="Total"}</span>
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                        {loop type="cart" name="cartloop"}
                        <tr id="cart_item_id_{$ITEM_ID}">
                            <td class="image">
                                <a href="{$PRODUCT_URL nofilter}" class="thumbnail">
                                {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}
                                            {$errorStock="TRUE"}
                                            <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" order="manual"}
                                            <dt class="attributeView">{$ATTRIBUTE_TITLE}</dt>
                                            <dd>{$ATTRIBUTE_AVAILABILITY_TITLE}</dd>
                                        {/loop}
                                    </dl>
                                </div>
                                <a href="{token_url path="/cart/delete/%item_id" item_id=$ITEM_ID success_url={url path='/cart'}}" class="btn btn-default btn-link"><i class="fa fa-trash"></i> {intl l="Remove"}</a>
                            </td>
                            <td class="unitprice">
                            {ifloop rel="dp"}
                                {loop type="digressive" name="dp" product_id=$PRODUCT_ID quantity=$QUANTITY}
                                {if $IS_PROMO == 1}
                                <div class="special-price"><span class="price">{format_money number=$TAXED_PROMO_PRICE}</span></div>
                                <small class="old-price">{intl l="instead of"} <span class="price">{format_money number=$TAXED_PRICE}</span></small>
                                {else}
                                <div class="special-price"><span class="price">{format_money number=$TAXED_PRICE}</span></div>
                                {/if}
                                {/loop}
                            {/ifloop}
                            {elseloop rel="dp"}
                                <div class="special-price"><span class="price">{format_money number=$REAL_TAXED_PRICE}</span></div>
                                {if $IS_PROMO == 1}
                                    <small class="old-price">{intl l="instead of"} <span class="price">{format_money number=$TAXED_PRICE}</span></small>
                                {/if}
                           {/elseloop}
                            </td>
                            <td class="qty">
                                <div class="form-group group-qty">
                                    <form action="{token_url path="/cart/update"}" class="form-inline" method="post">
                                        <input type="hidden" name="success_url" value="{url path='/cart'}">
                                        <input type="hidden" name="cart_item" value="{$ITEM_ID}">
                                        <div class="form-group">
                                            {if $STOCK <= 500}
                                                <select name="quantity" class="form-control" >
                                                    {for $will=1 to $STOCK}
                                                        <option {if $QUANTITY == $will}selected="selected"{/if}>{$will}</option>
                                                    {/for}
                                                </select>
                                            {else}
                                                <input name="quantity" class="form-control" type="number" min="1" max="{$STOCK}" value ="{$QUANTITY}">
                                            {/if}
                                        </div>
                                        <button type="submit" title="{intl l="Update Quantity"}" class="btn btn-primary sr-only">{intl l="+"}</button>
                                    </form>
                                    {loop type="attribute_combination" name="product_options" product_sale_elements="$PRODUCT_SALE_ELEMENTS_ID" order="manual"}
                                    <dd>{$ATTRIBUTE_AVAILABILITY_TITLE}</dd>
                                    {/loop}
                                </div>
                            </td>
                            <td class="subprice">
                                <span class="price">{format_money number=$REAL_TOTAL_TAXED_PRICE}</span>
                            </td>
                        </tr>
                        {/loop}
                        {if {cart attr="is_virtual"} != 1}
                        {postage}
                        {assign var="postageAmount" value=$postage }
<!--                        <tr>-->
<!--                            <td class="product" colspan="2">-->
<!--                                <form action="{url path="/cart/country"}" class="form-inline" method="post">-->
<!--                                    <h3>-->
<!--                                        {intl l="Estimated shipping "}-->
<!--                                        {if $is_customizable == false}-->
<!--                                            {loop type="country" name="countryLoop" id="$country_id"}-->
<!--                                            {intl l="for"} {$TITLE}-->
<!--                                            {/loop}-->
<!--                                        {/if}-->
<!--                                    </h3>-->
<!--                                    {if $is_customizable}-->
<!--                                    <div>-->
<!--                                        <label for="cart-country">{intl l="Select your country:"}</label>-->
<!--                                        <select id="cart-country" name="country">-->
<!--                                        {loop type="country" name="countryLoop" with_area="true" order="alpha"}-->
<!--                                            <option value="{$ID}" {if $ID == $country_id }selected="selected" {/if}>{$TITLE}</option>-->
<!--                                        {/loop}-->
<!--                                        </select>-->
<!--                                        <a class="btn btn-link btn-change-country" href="#"><i class="fa fa-refresh"></i> {intl l="update"}</a>-->
<!--                                    </div>-->
<!--                                    {/if}-->
<!--                                    {if $delivery_id != 0 }-->
<!--                                    <div>-->
<!--                                        {intl l="with:"} {loop type="module" name="deliveryLoop" id=$delivery_id}{$TITLE} {/loop}-->
<!--                                    </div>-->
<!--                                    {else}-->
<!--                                    <div class="alert alert-danger">-->
<!--                                        {intl l="No deliveries available for this cart and this country"}-->
<!--                                    </div>-->
<!--                                    {/if}-->
<!--                                </form>-->
<!--                            </td>-->
<!--                            <td class="unitprice">{format_money number=$postage}</td>-->
<!--                            <td class="qty">-</td>-->
<!--                            <td class="subprice">{format_money number=$postage}</td>-->
<!--                        </tr>-->
                        {/postage}
                        {else}
                        {assign var="postageAmount" value=0 }
                        {/if}
                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="3" class="empty">&nbsp;</td>
                        <td colspan="2">
                            {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="/cart"}" />
                                {/form_field}

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

                                {form_field field='coupon-code'}
                                    <div class="{if $form_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 $form_error_message}<span class="help-block">{$form_error_message nofilter}</span>{/if}
                                    </div>
                                {/form_field}
                            </form>
                            {/form}
                        </td>
                    </tr>
                    {$discount={order attr="discount"}}
                    {if $discount > 0}
                        <tr>
                            <td colspan="3" class="empty">&nbsp;</td>
                            <th class="discount">{intl l="Discount incl. taxes"}</th>
                            <td><span class="price">-{format_money number=$discount}</span></td>
                        </tr>
                    {/if}
                    <tr>
                        <td colspan="3" class="empty">&nbsp;</td>
                        <th class="total">{intl l="Total incl. taxes without postage"}</th>
                        <td class="total">
                            <div class="total-price">
                                <span class="price">{format_money number={cart attr='total_taxed_price'}}</span>
                            </div>
                        </td>
                    </tr>
                    </tfoot>
                </table>
            </div>

            <a href="{navigate to="catalog_last"}" role="button" class="btn btn-default"><i class="fa fa-chevron-left"></i> {intl l="Continue Shopping"}</a>
            <a href="{url path="/order/delivery"}" class="btn btn-primary pull-right"><i class="fa fa-chevron-right"></i> {intl l="Proceed checkout"}</a>

            {/ifloop}
            {elseloop rel="cartloop"}
                <div class="cart-warning alert alert-warning">
                    <strong>{intl l="Warning"}!</strong> {intl l="You have no items in your shopping cart."}
                </div>
            {/elseloop}

            {hook name="cart.bottom"}

        </article>

        {ifloop rel="product_upsell"}
            <aside id="products-upsell" class="grid" role="complementary" aria-labelledby="products-upsell-label">
                <div class="products-heading">
                    <h3 id="products-upsell-label">{intl l="Upsell Products"}</h3>
                </div>

                <div class="products-content">
                    <ul class="products-grid list-unstyled row">
                        {loop name="product_upsell" type="product" promo="yes" limit="5"}
                            {include file="includes/single-product.html" colClass="col-md-2" product_id=$ID hasBtn=false hasDescription=true width="218" height="146"}
                        {/loop}
                    </ul>
                </div>
            </aside><!-- #products-upsell -->
        {/ifloop}

    </div>
{/block}

{block name="after-javascript-include"}
<script>
    $(document).ready(function(){
        $("select[name=quantity]").change(function(){
            $(this).parents('form').submit();
        });
        $("input[name=quantity]").change(function(){
            $(this).parents('form').submit();
        });
        $(".btn-change-country").click(function(e){
            e.preventDefault();
            var $form = $(this).parents('form');
            $form.submit();
        })
        {if $errorStock=="TRUE"}
          $("#errorStock").show();
        {/if}
    });
</script>
{hook name="cart.after-javascript-include"}
{/block}

{block name="stylesheet"}
{hook name="cart.stylesheet"}
{/block}

{block name="javascript-initialization"}
{hook name="cart.javascript-initialization"}
{/block}