{**
* 2007-2019 PrestaShop and Contributors
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License 3.0 (AFL-3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* https://opensource.org/licenses/AFL-3.0
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to https://www.prestashop.com for more information.
*
* @author PrestaShop SA <contact@prestashop.com>
* @copyright 2007-2019 PrestaShop SA and Contributors
* @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
*}
{extends file='customer/page.tpl'}
{block name='page_title'}
{l s='Order details' d='Shop.Theme.Customeraccount'}
{/block}
{block name='page_content'}
{block name='order_infos'}
<div id="order-infos" class="space-y-6">
<div class="border rounded p-6">
<div class="flex flex-wrap items-center">
<div class="w-full {if $order.details.reorder_url}lg:w-9/12{else}lg:w-full{/if}">
<strong>
{l s='Order Reference %reference% - placed on %date%' d='Shop.Theme.Customeraccount' sprintf=['%reference%' => $order.details.reference, '%date%' => $order.details.order_date]}
</strong>
</div>
{if $order.details.reorder_url}
<div class="w-full lg:w-3/12 text-right">
<a href="{$order.details.reorder_url}" class="btn btn-primary">{l s='Reorder' d='Shop.Theme.Actions'}</a>
</div>
{/if}
</div>
</div><div class="border rounded p-6">
<div class="flex flex-wrap items-center">
<div class="w-full {if $order.details.reorder_url}lg:w-9/12{else}lg:w-full{/if}">
<strong>
{l s='Order Reference %reference% - placed on %date%' d='Shop.Theme.Customeraccount' sprintf=['%reference%' => $order.details.reference, '%date%' => $order.details.order_date]}
</strong>
</div>
{if $order.details.reorder_url}
<div class="w-full lg:w-3/12 text-right">
<a href="{$order.details.reorder_url}" class="btn btn-primary">{l s='Reorder' d='Shop.Theme.Actions'}</a>
</div>
{/if}
</div>
</div>
<div class="border rounded mt-6 mb-4 p-6">
<ul class="space-y-4">
<li><strong>{l s='Carrier' d='Shop.Theme.Checkout'}</strong> {$order.carrier.name}</li>
<li><strong>{l s='Payment method' d='Shop.Theme.Checkout'}</strong> {$order.details.payment}</li>
{if $order.details.invoice_url}
<li>
<a href="{$order.details.invoice_url}" class="text-blue-500 hover:text-blue-700">
{l s='Download your invoice as a PDF file.' d='Shop.Theme.Customeraccount'}
</a>
</li>
{/if}
{if $order.details.recyclable}
<li>
{l s='You have given permission to receive your order in recycled packaging.' d='Shop.Theme.Customeraccount'}
</li>
{/if}
{if $order.details.gift_message}
<li>{l s='You have requested gift wrapping for this order.' d='Shop.Theme.Customeraccount'}</li>
<li>{l s='Message' d='Shop.Theme.Customeraccount'} {$order.details.gift_message nofilter}</li>
{/if}
</ul>
</div>
</div>
{/block}
{block name='order_history'}
<section id="order-history" class="border mt-6 rounded p-6">
<h3 class="text-xl font-semibold">{l s='Follow your order\'s status step-by-step' d='Shop.Theme.Customeraccount'}</h3>
<table class="table-auto w-full hidden md:table">
<thead class="text-gray-700">
<tr>
<th class="px-4 py-2">{l s='Date' d='Shop.Theme.Global'}</th>
<th class="px-4 py-2">{l s='Status' d='Shop.Theme.Global'}</th>
</tr>
</thead>
<tbody>
{foreach from=$order.history item=state}
<tr>
<td class="text-center">{($state.history_date)}</td>
<td class="text-center">
<span class="inline-block px-4 py-1 rounded-full text-white" style="background-color:{$state.color}">
{$state.ostate_name}
</span>
</td>
</tr>
{/foreach}
</tbody>
</table>
<div class="block md:hidden">
{foreach from=$order.history item=state}
<div class="mb-4">
<div class="text-sm font-semibold">{($state.history_date)}</div>
<div class="mt-2">
<span class="inline-block px-4 py-1 rounded-full text-white" style="background-color:{$state.color}">
{$state.ostate_name}
</span>
</div>
</div>
{/foreach}
</div>
</section>
{/block}
{if $order.follow_up}
<div class="bg-white shadow rounded-lg p-6">
<p>{l s='Click the following link to track the delivery of your order' d='Shop.Theme.Customeraccount'}</p>
<a href="{$order.follow_up}" class="text-blue-500 hover:text-blue-700">{$order.follow_up}</a>
</div>
{/if}
{block name='addresses'}
<div class="flex flex-wrap justify-between mt-6 mb-6">
{if $order.addresses.delivery}
<div class="w-full lg:w-[49%] mb-6 ">
<article id="delivery-address" class="border rounded p-6">
<h4 class="text-lg font-semibold">{l s='Delivery address %alias%' d='Shop.Theme.Checkout' sprintf=['%alias%' => $order.addresses.delivery.alias]}</h4>
<address class="text-sm text-gray-700">{$order.addresses.delivery.formatted nofilter}</address>
</article>
</div>
{/if}
<div class="w-full lg:w-[49%] ">
<article id="invoice-address" class="border rounded p-6">
<h4 class="text-lg font-semibold">{l s='Invoice address %alias%' d='Shop.Theme.Checkout' sprintf=['%alias%' => $order.addresses.invoice.alias]}</h4>
<address class="text-sm text-gray-700">{$order.addresses.invoice.formatted nofilter}</address>
</article>
</div>
</div>
{/block}
{$HOOK_DISPLAYORDERDETAIL nofilter}
{block name='order_detail'}
{if $order.details.is_returnable}
{include file='customer/_partials/order-detail-return.tpl'}
{else}
{include file='customer/_partials/order-detail-no-return.tpl'}
{/if}
{/block}
{block name='order_carriers'}
{if $order.shipping}
<div class="md:border md:mt-6 hidden md:p-6">
<table class="table-auto w-full hidden md:table">
<thead class="text-gray-700">
<tr>
<th class="px-4 py-2">{l s='Date' d='Shop.Theme.Global'}</th>
<th class="px-4 py-2">{l s='Carrier' d='Shop.Theme.Checkout'}</th>
<th class="px-4 py-2">{l s='Weight' d='Shop.Theme.Checkout'}</th>
<th class="px-4 py-2">{l s='Shipping cost' d='Shop.Theme.Checkout'}</th>
<th class="px-4 py-2">{l s='Tracking number' d='Shop.Theme.Checkout'}</th>
</tr>
</thead>
<tbody class="text-center" >
{foreach from=$order.shipping item=line}
<tr>
<td class="px-4 py-2">{$line.shipping_date}</td>
<td class="px-4 py-2">{$line.carrier_name}</td>
<td class="px-4 py-2">{$line.shipping_weight}</td>
<td class="px-4 py-2">{$line.shipping_cost}</td>
<td class="px-4 py-2">{$line.tracking nofilter}</td>
</tr>
{/foreach}
</tbody>
</table>
</div>
{/if}
{/block}
{/block}