Skip to content

Instantly share code, notes, and snippets.

@chege-kimaru

chege-kimaru/order.blade.php

Created July 2, 2023 18:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chege-kimaru/584487f47a6ad446f5b48ab2f4ff8016 to your computer and use it in GitHub Desktop.
Save chege-kimaru/584487f47a6ad446f5b48ab2f4ff8016 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
order.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Order #{{ $order->id }} Receipt</title>
</head>
<body style="font-family: 'Trebuchet MS', sans-serif; padding: 5px 0px;">
<center>
<table border="0" cellpadding="0" cellspacing="0" class="section" style="margin: 20px 0px;" width="600">
<tbody>
<tr>
<td style="padding: 0px;">
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td style="padding: 0px;"><img src="{{ getenv('APP_URL') . '/imgs/header.png' }}" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="section" style="border-color: rgb(245,245,245); border-radius: 3px; border-style: solid; border-width: 1px; font-family: 'Trebuchet MS', sans-serif; margin: 20px 0px;" width="600">
<tbody>
<tr>
<td style="padding: 0px;">
<table border="0" cellpadding="0" cellspacing="0" style="font-family: 'Trebuchet MS', sans-serif;" width="600">
<tbody>
<tr>
<td class="message" style="font-family:'Trebuchet MS';font-size: 1rem; line-height: 25px; padding: 10px;">Hi {{ $order->contact->name }},<br/>This is the receipt for Order #{{ $order->id }}. Please review it. If you need any clarifications, please reply directly to this email or call {{ getenv('CONTACT_NUMBER') }}.<br/>Thank you!</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="section" style="background: white; background-color: white; border-color: rgb(245,245,245); border-radius: 3px; border-style: solid; border-width: 1px; font-family: 'Trebuchet MS', sans-serif; margin: 20px 0px;" width="600">
<tbody>
<tr>
<td style="padding: 0px;">
<table border="0" cellpadding="0" cellspacing="0" style="font-family: 'Trebuchet MS', sans-serif;" width="600">
<tbody>
<tr class="title">
<td style="width: 580px; color: #68A622; font-family:'Trebuchet MS';font-size: 1rem; border-bottom-color: rgb(245,245,245); border-bottom-width: 1px; border-bottom-style: solid; padding: 10px 8px;">Contact Details</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding: 0px;">
<table border="0" cellpadding="0" cellspacing="0" style="font-family: 'Trebuchet MS', sans-serif;"
width="600">
<tbody>
<tr class="info" style="height: 40px;">
<td class="icon" style="border-bottom-width: 1px; border-bottom-color: rgb(245,245,245); border-bottom-style: solid; width: 40px; padding: 0px;">
<img alt="icon" src="{{ getenv('APP_URL') . '/imgs/person_icon.png' }}" style="width: 20px; height: 20px; display: block; margin: 10px;">
</td>
<td class="body" style="border-bottom-width: 1px; border-bottom-color: rgb(245,245,245); border-bottom-style: solid; width: 560px; min-height: 40px; line-height: 30px; padding: 0px;">
<p style="font-family:'Trebuchet MS';font-size: 1rem; margin: 0px;">{{ $order->contact->name }}</p>
</td>
</tr>
<tr class="info" style="height: 40px;">
<td class="icon" style="width: 40px; padding: 0px;"><img alt="icon"
src="{{ getenv('APP_URL') . '/imgs/mobile_icon.png' }}"
style="width: 20px; height: 20px; display: block; margin: 10px;">
</td>
<td class="body" style="width: 560px; min-height: 40px; line-height: 30px; padding: 0px;">
<p style="font-family:'Trebuchet MS';font-size: 1rem; margin: 0px;">{{ $order->contact->number }}</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="section" style="background: white; background-color: white; border-color: rgb(245,245,245); border-radius: 3px; border-style: solid; border-width: 1px; font-family: 'Trebuchet MS', sans-serif; margin: 20px 0px;"
width="600">
<tbody>
<tr>
<td style="padding: 0px;">
<table border="0" cellpadding="0" cellspacing="0" style="font-family: 'Trebuchet MS', sans-serif;"
width="600">
<tbody>
<tr class="title">
<td style="width: 580px; color: #68A622; font-family:'Trebuchet MS';font-size: 1rem; border-bottom-color: rgb(245,245,245); border-bottom-width: 1px; border-bottom-style: solid; padding: 10px 8px;">Delivery Location</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding: 0px;">
<table border="0" cellpadding="0" cellspacing="0" style="font-family: 'Trebuchet MS', sans-serif;"
width="600">
<tbody>
<tr class="info" style="height: 40px;">
<td class="icon" style="width: 40px; padding: 0px;">
<img alt="icon" src="{{ getenv('APP_URL') . '/imgs/location_icon.png' }}"
style="width: 20px; height: 20px; display: block; margin: 10px;">
</td>
<td class="body" style="width: 560px; min-height: 40px; line-height: 30px; padding: 0px;">
<p style="font-family:'Trebuchet MS';font-size: 1rem; margin: 0px;">{{ $order->location->description }}</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="section" style="background: white; background-color: white; border-color: rgb(245,245,245); border-radius: 3px; border-style: solid; border-width: 1px; font-family: 'Trebuchet MS', sans-serif; margin: 20px 0px"
width="600">
<tbody>
<tr>
<td style="padding: 0px;">
<table border="0" cellpadding="0" cellspacing="0" style="font-family: 'Trebuchet MS', sans-serif;"
width="600">
<tbody>
<tr class="title">
<td style="width: 580px; color: #68A622; font-family:Verdana;font-size: 1rem; border-bottom-color: rgb(245,245,245); border-bottom-width: 1px; border-bottom-style: solid; padding: 10px 8px;">Products</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding: 0px;">
<table border="0" cellpadding="0" cellspacing="0" style="font-family: 'Trebuchet MS', sans-serif;"
width="600">
<tbody>
<?php $productsAmount = 0 ?>
@for ($i = 0; $i < count($order->products); $i++)
<tr class="product" style="height: 100px;">
<td class="image" style="width: 120px; padding: 10px 0px; @if ($i < (count($order->products)-1)) border-bottom: 1px solid rgb(245,245,245);@endif"><img alt="{{ $order->products[$i]->name }}" src="{{ $order->products[$i]->image }}"
style="display: block; width: 76px; margin: 0px 22px;">
</td>
<td class="details" style="width: 410px; padding: 10px 0px; @if ($i < (count($order->products)-1)) border-bottom: 1px solid rgb(245,245,245); @endif">
<p class="name" style="font-family:'Trebuchet MS';font-size: 1rem; width: 400px; margin: 0px; padding: 0px 5px;">{{ $order->products[$i]->name }}</p>
<p class="capacity mini light" style="font-family:'Trebuchet MS';font-size: 0.85rem; color: rgb(180,180,180); width: 400px; margin: 20px 0px; padding: 0px 5px;">{{ $order->products[$i]->size . $order->products[$i]->unit }} @if($order->products[$i]->pack > 1){{ $order->products[$i]->pack . " pack" }}@endif</p>
<p style="width: 400px; margin: 0px; padding: 0px 5px;">
<span class="mini light" style="font-family:'Trebuchet MS';font-size: 0.85rem; color: #68A622;">{{ $order->products[$i]->pivot->saleCurrency }}</span> <span class="amount" style="font-family:'Trebuchet MS';font-size: 1rem;">{{ number_format((float) $order->products[$i]->pivot->saleAmount, 2, '.', ',') }}</span></p>
</td>
<td align="center" class="quantity" style="text-align: center; width: 70px; padding: 10px 0px; @if ($i < (count($order->products)-1)) border-bottom: 1px solid rgb(245,245,245); @endif">
<p style="width: 70px; margin: 0px;">
<span class="mini light" style="font-family:'Trebuchet MS';font-size: 0.85rem; color: rgb(180,180,180);">x</span> <span class="amount" style="font-family:'Trebuchet MS';font-size: 1rem;">{{ $order->products[$i]->pivot->quantity }}</span></p>
</td>
<?php $productsAmount += $order->products[$i]->pivot->quantity * $order->products[$i]->pivot->saleAmount ?>
</tr>
@endfor
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="section" style="background: white; background-color: white; border-color: rgb(245,245,245); border-radius: 3px; border-style: solid; border-width: 1px; font-family: 'Trebuchet MS', sans-serif; margin: 20px 0px;" width="600">
<tbody>
<tr>
<td style="padding: 0px;">
<table border="0" cellpadding="0" cellspacing="0" style="font-family: 'Trebuchet MS', sans-serif;" width="600">
<tbody>
<tr class="title">
<td style="width: 580px; color: #68A622; font-family:Verdana;font-size: 1rem; border-bottom-color: rgb(245,245,245); border-bottom-width: 1px; border-bottom-style: solid; padding: 10px 8px;">Payment</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding: 0px;">
<table border="0" cellpadding="0" cellspacing="0" style="font-family: 'Trebuchet MS', sans-serif;" width="600">
<tbody>
<tr class="info" style="height: 40px;">
<td class="icon" style="border-bottom-width: 1px; border-bottom-color: rgb(245,245,245); border-bottom-style: solid; width: 40px; padding: 0px;">
<img alt="icon" src="{{ getenv('APP_URL') . '/imgs/basket_icon.png' }}"
style="width: 20px; height: 20px; display: block; margin: 10px;">
</td>
<td class="body payment" style="border-bottom-width: 1px; border-bottom-color: rgb(245,245,245); border-bottom-style: solid; width: 560px; min-height: 40px; padding: 0px;">
<p class="label" style="font-family:'Trebuchet MS';font-size: 1rem; float: left; margin: 0px;">Total</p>
<p class="value" style="float: right; padding-right: 7px; margin: 0px;">
<span class="mini light" style="font-family:'Trebuchet MS';font-size: 0.85rem; color: #68A622;">{{ $order->currency }}</span> <span class="amount" style="font-family:'Trebuchet MS';font-size: 1rem;">{{ number_format((float) $productsAmount, 2, '.', ',') }}</span></p>
</td>
</tr>
@if ($order->giftDetails != null)
<tr class="info" style="height: 40px;">
<td class="icon" style="border-bottom-width: 1px; border-bottom-color: rgb(245,245,245); border-bottom-style: solid; width: 40px; padding: 0px;">
<img alt="icon" src="{{ getenv('APP_URL') . '/imgs/engraving_icon.png' }}"
style="width: 20px; height: 20px; display: block; margin: 10px;">
</td>
<td class="body payment" style="border-bottom-width: 1px; border-bottom-color: rgb(245,245,245); border-bottom-style: solid; width: 560px; min-height: 40px; padding: 0px;">
<p class="label" style="font-family:'Trebuchet MS';font-size: 1rem; float: left; margin: 0px;">Engraving</p>
<p class="value" style="float: right; padding-right: 7px; margin: 0px;">
<span class="mini light" style="font-family:'Trebuchet MS';font-size: 0.85rem; color: #68A622;">{{ $order->giftDetails->currency }}</span> <span class="amount" style="font-family:'Trebuchet MS';font-size: 1rem;">{{ number_format((float) $order->giftDetails->amount, 2, '.', ',') }}</span></p>
</td>
</tr>
@endif
<tr class="info" style="height: 40px;">
<td class="icon" style="border-bottom-width: 1px; border-bottom-color: rgb(245,245,245); border-bottom-style: solid; width: 40px; padding: 0px;">
<img alt="icon" src="{{ getenv('APP_URL') . '/imgs/delivery_icon.png' }}"
style="width: 20px; height: 20px; display: block; margin: 10px;">
</td>
<td class="body payment" style="border-bottom-width: 1px; border-bottom-color: rgb(245,245,245); border-bottom-style: solid; width: 560px; min-height: 40px; padding: 0px;">
<p class="label" style="font-family:'Trebuchet MS';font-size: 1rem; float: left; margin: 0px;">Delivery</p>
<p class="value" style="float: right; padding-right: 7px; margin: 0px;">
<span class="mini light" style="font-family:'Trebuchet MS';font-size: 0.85rem; color: #68A622;">{{ $order->currency }}</span> <span class="amount" style="font-family:'Trebuchet MS';font-size: 1rem;">{{ number_format((float) $order->delivery_amount, 2, '.', ',') }}</span></p>
</td>
</tr>
<tr class="info" style="height: 40px;">
<td class="icon" style="border-bottom-width: 1px; border-bottom-color: rgb(245,245,245); border-bottom-style: solid; width: 40px; padding: 0px;">
<img alt="icon" src="{{ getenv('APP_URL') . '/imgs/giftcard_icon.png' }}"
style="width: 20px; height: 20px; display: block; margin: 10px;">
</td>
<td class="body payment" style="border-bottom-width: 1px; border-bottom-color: rgb(245,245,245); border-bottom-style: solid; width: 560px; min-height: 40px; padding: 0px;">
<p class="label" style="font-family:'Trebuchet MS';font-size: 1rem; float: left; margin: 0px;">Discount</p>
<p class="value" style="float: right; padding-right: 7px; margin: 0px;">
<span class="mini light" style="font-family:'Trebuchet MS';font-size: 0.85rem; color: #68A622;">{{ $order->currency }}</span> <span class="amount" style="font-family:'Trebuchet MS';font-size: 1rem;">{{ number_format((float) $order->discount_amount, 2, '.', ',') }}</span></p>
</td>
</tr>
<tr class="info" style="height: 40px;">
<td class="icon" style="width: 40px; padding: 0px;"><img alt="icon"
src="{{ getenv('APP_URL') . '/imgs/payment_icon.png' }}"
style="width: 20px; height: 20px; display: block; margin: 10px;">
</td>
<td class="body payment" style="width: 560px; min-height: 40px; padding: 0px;">
<p class="label" style="font-family:'Trebuchet MS';font-size: 1rem; float: left; margin: 0px;">Payment</p>
<p class="value" style="float: right; padding-right: 7px; margin: 0px;">
<span class="mini light" style="font-family:'Trebuchet MS';font-size: 0.85rem; color: #68A622;">{{ $order->currency }}</span> <span class="amount" style="font-family:'Trebuchet MS';font-size: 1rem;">{{ number_format((float) ceil($productsAmount + $order->delivery_amount + ($order->giftDetails ? $order->giftDetails->amount : 0) - $order->discount_amount), 2, '.', ',') }}</span></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="section" style="margin: 20px 0px;" width="600">
<tbody>
<tr>
<td style="padding: 0px;">
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td style="padding: 0px;"><img alt="Thank you!"
src="{{ getenv('APP_URL') . '/imgs/footer.png' }}">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment