<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Detalhes do Pedido</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; color: #333; background:#fff; }
.container { max-width: 900px; margin: auto; border: 1px solid #ddd; padding: 20px; border-radius: 8px; }
h1, h2 { color: #0056b3; }
.header { border-bottom: 2px solid #0056b3; padding-bottom: 10px; display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.header .brand { display:flex; align-items:center; gap:12px; }
.header img.logo { max-height: 48px; }
.header .code { margin-left:auto; }
.order-info, .client-info { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 10px; }
.order-info p, .client-info p { margin: 0; flex: 1 1 45%; }
.status { font-weight: bold; color: red; }
.page-break { page-break-after: always; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; vertical-align: middle; }
th { background-color: #f2f2f2; color: #0056b3; }
tr:nth-child(even) { background-color: #f9f9f9; }
img.payment-method { max-height: 28px; vertical-align: middle; margin-right: 10px; }
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="brand">
<img class="logo" src="https://d11eda5q0aef1m.cloudfront.net/custom/content/themes/Base/Imagens/logo1.png?nocache" alt="Linx Commerce" />
<h1>Resumo do Pedido</h1>
</div>
<div class="code">
<p><strong>Código do pedido:</strong> {{Order.OrderNumber}}</p>
</div>
</div>
<div class="order-info">
<p><strong>Data do pedido:</strong> {{Order.CreatedDate}}</p>
<p><strong>Situação do pedido:</strong> <span class="status">{{Order.Status}}</span></p>
<p><strong>Canal:</strong> {{Order.WebSiteName}}</p>
<p><strong>Valor Total:</strong> R$ {{Order.Total}}</p>
</div>
<hr />
<h2>Cliente</h2>
<div class="client-info">
<p><strong>Nome:</strong> {{Customer.Name}}</p>
<p><strong>E-mail:</strong> {{Customer.Email}}</p>
<p><strong>Telefone:</strong> {{Customer.Contact.Phone}}</p>
<p><strong>Celular:</strong> {{Customer.Contact.CellPhone}}</p>
<p><strong>CPF:</strong> {{Customer.Cpf}}</p>
</div>
<hr />
<h2>Produtos</h2>
{%- include Emails/inc/order -%}
{%- include Emails/inc/total -%}
<hr />
<h2>Resumo do Pagamento</h2>
<table>
<tbody>
{{#if Order.PaymentMethods.[0]}}
<tr>
<th>Meio de pagamento</th>
<td>
{{#if Order.PaymentMethods.[0].ImagePath}}
<img src="{{Order.PaymentMethods.[0].ImagePath}}" alt="" class="payment-method" />
{{/if}}
{{Order.PaymentMethods.[0].Description}} ({{Order.PaymentMethods.[0].Alias}})
</td>
</tr>
{{/if}}
</tbody>
</table>
<hr />
{%- include Emails/inc/delivery -%}
</div>
<div class="page-break"></div>
</body>
</html>
| 
