{extends file="layout.tpl"}

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

{* Breadcrumb *}
{block name='no-return-functions' append}
    {$breadcrumbs = [
        ['title' => {intl l="Account"}, 'url'=>{url path="/account"}]
    ]}
{/block}

{block name="body-class"}page-account{/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="My Account"}</h1>

            {hook name="account.top"}
            <div id="account" class="panel-group">
                <div class="panel panel-default account-info">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#account" href="#account-info">
                                {intl l="Personal Information"}
                            </a>
                        </h4>
                    </div>
                    <div id="account-info" class="panel-collapse collapse in">
                        {loop type="customer" name="customer.info"}
                        <div class="panel-body">
                            <p class="fn">{loop type="title" name="customer.title.info" id=$TITLE}{$SHORT}{/loop} {$FIRSTNAME|ucwords} {$LASTNAME|upper}</p>
                            {loop type="address" name="address.default" default="true"}
                            <ul class="list-info list-unstyled row">
                                <li class="col-sm-4">
                                    {format_address address=$ID html_tag='address' html_class='adr'}
                                </li>
                                <li class="col-sm-4">
                                    {if $PHONE != ""}
                                        <span class="tel">{$PHONE}</span>
                                    {/if}
                                    {if $CELLPHONE != ""}
                                        <span class="mobile">{$CELLPHONE}</span>
                                    {/if}
                                    <span class="email">{mailto address=$EMAIL encode="hex"}</span>
                                </li>
                                <li class="group-btn col-sm-4">
                                    <a href="{url path="/account/update"}" class="btn btn-link"><i class="fa fa-pencil"></i> {intl l="Change my account information"}</a>
                                    <a href="{url path="/account/password"}" class="btn btn-link"><i class="fa fa-lock"></i> {intl l="Change my password"}</a>
                                </li>
                            </ul>
                            {/loop}
                        </div>
                        {/loop}
                    </div>
                </div>
                <div class="panel panel-default account-address">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#account" href="#account-address">
                                {intl l="My Address book"}
                            </a>
                        </h4>
                    </div>
                    <div id="account-address" class="panel-collapse collapse">
                        <div class="panel-body">
                            <a href="{url path="/address/create"}" class="btn btn-link pull-right"><i class="fa fa-plus"></i> {intl l="Add a new address"}</a>
                            <table class="table table-address" role="presentation" summary="{intl l="My Address Books"}">
                                <tbody>
                                {loop type="address" name="customer.addresses" customer="current"}
                                <tr class="{if $DEFAULT == 1}address-primary{else}address-additional{/if}" id="customer-address-{$ID}">
                                    <th>
                                        {if $DEFAULT === 1}
                                            {$LABEL|default:$default}
                                            <span class="label label-info   ">{intl l="Main Address"}</span>
                                        {else}
                                            {$LABEL|default:$default}
                                        {/if}
                                    </th>
                                    <td>
                                        <ul class="list-address list-unstyled row">
                                            <li class="col-sm-4">
                                                <span class="fn">{loop type="title" name="customer.title.info" id=$TITLE}{$SHORT}{/loop} {$FIRSTNAME|ucwords} {$LASTNAME|upper}</span>
                                                {if $COMPANY}
                                                    <span class="org">{$COMPANY}</span>
                                                {/if}
                                            </li>
                                            <li class="col-sm-4">
                                                <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>
                                            </li>
                                            <li class="col-sm-4">
                                                {if $CELLPHONE != ""}
                                                    <span class="tel">{$CELLPHONE}</span><br>
                                                {/if}
                                                {if $PHONE != ""}
                                                    <span class="tel">{$PHONE}</span><br>
                                                {/if}
                                            </li>
                                        </ul>
                                    </td>
                                    <td>
                                        <div class="group-btn">
                                            <a href="{url path="/address/update/%id" id=$ID}" class="btn btn-primary" data-toggle="tooltip" title="{intl l="Edit this address"}"><i class="fa fa-pencil"></i> {intl l="Edit"}</a>
                                            {if $DEFAULT != 1}
                                                <a href="{url path="/address/delete/%id" id=$ID}" class="btn btn-primary" 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="fa fa-remove"></i> {intl l="Cancel"}</a>
                                            {/if}
                                        </div>
                                    </td>
                                </tr>
                                {/loop}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default account-orders">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#account" href="#account-orders">
                                {intl l="My Orders"}
                            </a>
                        </h4>
                    </div>
                    <div id="account-orders" class="panel-collapse collapse">
                        <div class="panel-body table-responsive">
                            {ifloop rel="customer.orders"}
                            <table class="table table-orders table-bordered table-hover" summary="{intl l="List of orders"}">
                                <thead>
                                <tr>
                                    <th>{intl l="Order number"}</th>
                                    <th>{intl l="Date"}</th>
                                    <th>{intl l="Amount"}</th>
                                    <th>{intl l="Status"}</th>
                                    <th>{intl l="View"}</th>
                                </tr>
                                </thead>
                                <tbody>
                                {loop type="order" name="customer.orders"}
                                <tr>
                                    <td>{$REF}</td>
                                    <td>{format_date date=$CREATE_DATE}</td>
                                    <td>{format_money number=$TOTAL_TAXED_AMOUNT currency_id=$CURRENCY}</td>
                                    <td>
                                        {loop type="order-status" name="order.status" id={$STATUS}}
                                            {assign "orderStatusCode" "order_$CODE"}
                                            {if #$orderStatusCode# == ''}
                                                {assign "defaultLabel" "label-default"}
                                                {assign "orderStatusLabel" $CODE}
                                            {else}
                                                {assign "defaultLabel" ''}
                                                {assign "orderStatusLabel" #$orderStatusCode#}
                                            {/if}
                                            <span class="label {$defaultLabel} label-{$orderStatusLabel}">{$TITLE}</span>
                                        {/loop}
                                    </td>
                                    <td>
                                        <a href="{url path="/account/order/%id" id=$ID}" class="btn btn-link" data-toggle="tooltip" title="{intl l="View order %ref details" ref={$REF}}">{intl l="Order details"}</a>
                                    </td>
                                </tr>
                                {/loop}
                                </tbody>
                            </table>
                            {/ifloop}
                            {elseloop rel="customer.orders"}
                            <div class="alert alert-warning">
                                <strong>{intl l="Warning"}!</strong> {intl l="You don't have orders yet."}
                            </div>
                            {/elseloop}
                        </div>
                    </div>
                </div>
                {hookblock name="account.additional" fields="id,title,content"}
                    {forhook rel="account.additional"}
                        <div class="panel panel-default account-{$id}">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#account" href="#account-{$id}">
                                        {$title}
                                    </a>
                                </h4>
                            </div>
                            <div id="account-{$id}" class="panel-collapse collapse">
                                {$content nofilter}
                            </div>
                        </div>
                    {/forhook}
                {/hookblock}
            </div>
            {hook name="account.bottom"}
        </article>

    </div><!-- /.layout -->
{/block}

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

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

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