{**
 * MÉRIDIAN — Confirmation de commande (order-confirmation)
 * Hero (badge + remerciement), suivi visuel, récap commande + totaux,
 * livraison / paiement / aide. Conserve les hooks paiement PrestaShop
 * (instructions virement, etc.) et le formulaire de transformation invité.
 * Source maquette : components/pages.jsx (OrderConfirmation), CSS .ocf-*.
 *}
{extends file='page.tpl'}

{block name="breadcrumb"}{/block}

{block name='page_content_container'}
  <div id="content" class="page-content page-order-confirmation container ocf-page">

    {* ----- Hero ----- *}
    <div class="center ocf-hero">
      <div class="ocf-badge" aria-hidden="true">
        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
      </div>
      <div class="eyebrow" style="margin-bottom:12px">{l s='Commande confirmée' d='Shop.Theme.Checkout'}</div>
      <h1 class="display ocf-h1">{l s='Merci' d='Shop.Theme.Checkout'}{if $order_customer.firstname}, {$order_customer.firstname}{/if}.</h1>
      <p class="muted ocf-hero-lead">
        {l s='Votre commande a bien été reçue et est désormais préparée avec soin. Une confirmation a été envoyée à' d='Shop.Theme.Checkout'}
        <strong style="color:var(--ink)">{$order_customer.email}</strong>.
      </p>
      {if $order.details.invoice_url}
        <p style="margin-top:12px">
          <a class="ulink" style="color:var(--ink)" href="{$order.details.invoice_url}">{l s='Télécharger votre facture' d='Shop.Theme.Checkout'}</a>
        </p>
      {/if}
    </div>

    {* ----- Suivi visuel (commandes physiques) ----- *}
    {if !$order.details.is_virtual}
      <div class="ocf-track">
        <div class="ocf-track-step" data-state="active">
          <div class="ocf-track-rail">
            <span class="ocf-track-node"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span>
            <span class="ocf-track-line" data-on="true"></span>
          </div>
          <span class="ocf-track-label">{l s='Confirmée' d='Shop.Theme.Checkout'}</span>
        </div>
        <div class="ocf-track-step" data-state="todo">
          <div class="ocf-track-rail">
            <span class="ocf-track-node"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg></span>
            <span class="ocf-track-line" data-on="false"></span>
          </div>
          <span class="ocf-track-label">{l s='Préparation' d='Shop.Theme.Checkout'}</span>
        </div>
        <div class="ocf-track-step" data-state="todo">
          <div class="ocf-track-rail">
            <span class="ocf-track-node"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M1 3h15v13H1z"/><path d="M16 8h4l3 3v5h-7z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg></span>
            <span class="ocf-track-line" data-on="false"></span>
          </div>
          <span class="ocf-track-label">{l s='Expédiée' d='Shop.Theme.Checkout'}</span>
        </div>
        <div class="ocf-track-step" data-state="todo">
          <div class="ocf-track-rail">
            <span class="ocf-track-node"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V21h14V9.5"/></svg></span>
          </div>
          <span class="ocf-track-label">{l s='Livrée' d='Shop.Theme.Checkout'}</span>
        </div>
      </div>
    {/if}

    {* ----- Messages des modules de paiement (virement, etc.) — à conserver ----- *}
    {if ! empty($HOOK_PAYMENT_RETURN) || ! empty($HOOK_ORDER_CONFIRMATION)}
      <div class="ocf-card ocf-hook">
        {$HOOK_PAYMENT_RETURN nofilter}
        {$HOOK_ORDER_CONFIRMATION nofilter}
      </div>
    {/if}

    <div class="ocf-grid">

      {* ----- Colonne gauche : articles + totaux ----- *}
      <div>
        <div class="ocf-card">
          <div class="ocf-card-head">
            <h2 class="display ocf-card-title">{l s='Votre commande' d='Shop.Theme.Checkout'}</h2>
            <span class="badge badge-soft">{$order.details.reference}</span>
          </div>

          <div class="ocf-items">
            {foreach from=$order.products item=product}
              <div class="ocf-item">
                <span class="ocf-item-thumb">
                  {if !empty($product.default_image.medium.url)}
                    <img src="{$product.default_image.medium.url}" alt="{$product.name|escape:'html'}" loading="lazy">
                  {elseif !empty($urls.no_picture_image.bySize.medium_default.url)}
                    <img src="{$urls.no_picture_image.bySize.medium_default.url}" alt="" loading="lazy">
                  {/if}
                </span>
                <div class="ocf-item-info">
                  <div class="ocf-item-top">
                    <h4 class="ocf-item-name">{$product.name}</h4>
                    <span class="ocf-item-price">{$product.total}</span>
                  </div>
                  <div class="eyebrow ocf-item-meta">{l s='Quantité' d='Shop.Theme.Checkout'} {$product.quantity}</div>
                </div>
              </div>
            {/foreach}
          </div>

          {* ----- Totaux ----- *}
          <div class="ocf-totals">
            {foreach $order.subtotals as $subtotal}
              {if $subtotal !== null && $subtotal.type !== 'tax' && $subtotal.label !== null}
                <div class="ocf-row{if 'discount' == $subtotal.type} ocf-row-accent{/if}">
                  <span class="muted">{$subtotal.label}</span>
                  <span>{if 'discount' == $subtotal.type}−&nbsp;{/if}{$subtotal.value}</span>
                </div>
              {/if}
            {/foreach}

            {if !$configuration.display_prices_tax_incl && $configuration.taxes_enabled}
              <div class="ocf-row">
                <span class="muted">{$order.totals.total.label}&nbsp;{$order.labels.tax_short}</span>
                <span>{$order.totals.total.value}</span>
              </div>
              <hr class="hairline" style="margin:4px 0">
              <div class="ocf-row ocf-row-bold">
                <span>{$order.totals.total_including_tax.label}</span>
                <span>{$order.totals.total_including_tax.value}</span>
              </div>
            {else}
              <hr class="hairline" style="margin:4px 0">
              <div class="ocf-row ocf-row-bold">
                <span>{$order.totals.total.label}{if $configuration.taxes_enabled && $configuration.display_taxes_label}&nbsp;{$order.labels.tax_short}{/if}</span>
                <span>{$order.totals.total.value}</span>
              </div>
            {/if}

            {if $order.subtotals.tax !== null && $order.subtotals.tax.label !== null}
              <span class="faint" style="font-size:11.5px">{l s='%label% incluse' d='Shop.Theme.Checkout' sprintf=['%label%' => $order.subtotals.tax.label]} — {$order.subtotals.tax.value}</span>
            {/if}
          </div>
        </div>

        <div class="ocf-actions">
          {if $customer.is_logged && !$customer.is_guest}
            <a class="mrd-btn mrd-btn-solid" href="{$urls.pages.history}">{l s='Suivre ma commande' d='Shop.Theme.Checkout'}</a>
          {/if}
          <a class="mrd-btn mrd-btn-outline" href="{$urls.pages.index}">{l s='Continuer mes achats' d='Shop.Theme.Actions'}</a>
        </div>
      </div>

      {* ----- Colonne droite : livraison / paiement / aide ----- *}
      <aside class="ocf-aside">
        {if !$order.details.is_virtual}
          <div class="ocf-card">
            <div class="eyebrow" style="margin-bottom:14px">{l s='Livraison' d='Shop.Theme.Checkout'}</div>
            <div class="ocf-line">
              <svg class="ocf-line-ico" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M1 3h15v13H1z"/><path d="M16 8h4l3 3v5h-7z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
              <div class="ocf-line-txt">
                <div class="ocf-line-strong">{$order.carrier.name}</div>
                {if $order.carrier.delay}<div class="muted">{$order.carrier.delay}</div>{/if}
              </div>
            </div>
            {if !empty($order.addresses.delivery.formatted)}
              <div class="ocf-addr">{$order.addresses.delivery.formatted nofilter}</div>
            {/if}
          </div>
        {/if}

        <div class="ocf-card">
          <div class="eyebrow" style="margin-bottom:14px">{l s='Paiement' d='Shop.Theme.Checkout'}</div>
          <div class="ocf-line">
            <span class="ocf-line-circle">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
            </span>
            <div class="ocf-line-txt">
              <div class="ocf-line-strong">{$order.details.payment}</div>
              <div class="muted">{$order.totals.total.value}</div>
            </div>
          </div>
        </div>

        <div class="ocf-help">
          <svg class="ocf-line-ico" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 18v-6a9 9 0 0 1 18 0v6"/><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"/></svg>
          <div class="ocf-help-txt">
            <span class="ocf-line-strong">{l s='Besoin d\'aide ?' d='Shop.Theme.Checkout'}</span>
            <span class="muted">{l s='Notre service client est à votre écoute. Répondez à votre e-mail de confirmation ou' d='Shop.Theme.Checkout'} <a class="ulink" style="color:var(--ink)" href="{$urls.pages.contact}">{l s='contactez-nous' d='Shop.Theme.Checkout'}</a>.</span>
          </div>
        </div>
      </aside>
    </div>

    {* ----- Transformation du compte invité ----- *}
    {if !$registered_customer_exists}
      <div class="ocf-card ocf-account">
        {include file='customer/_partials/account-transformation-form.tpl'}
      </div>
    {/if}

    {block name='hook_order_confirmation_1'}
      {hook h='displayOrderConfirmation1'}
    {/block}
    {block name='hook_order_confirmation_2'}
      <section id="content-hook-order-confirmation-footer">
        {hook h='displayOrderConfirmation2'}
      </section>
    {/block}

  </div>
{/block}
