PK
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Order Confirmation | {{ config('app.name') }}</title>
<style type="text/css">
/* Client-specific styles */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
/* Reset styles */
body { margin: 0 !important; padding: 0 !important; width: 100% !important; }
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* Main styles */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f7fb;
color: #333333;
line-height: 1.4;
}
.container {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.card {
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
margin-bottom: 24px;
overflow: hidden;
}
.card-header {
background-color: white;
border-bottom: 1px solid #eaeaea;
padding: 20px 25px;
font-weight: 600;
font-size: 18px;
}
.card-body {
padding: 25px;
}
.order-status-bar {
height: 6px;
background: #e9ecef;
border-radius: 3px;
margin: 30px 0 40px;
position: relative;
}
.progress-fill {
position: absolute;
height: 100%;
background: #4361ee;
width: 25%;
border-radius: 3px;
}
.status-steps {
display: table;
width: 100%;
table-layout: fixed;
margin-top: 20px;
}
.status-step {
display: table-cell;
text-align: center;
position: relative;
}
.step-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: white;
border: 2px solid #dee2e6;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 auto 10px;
color: #adb5bd;
font-size: 16px;
}
.step-icon.active {
background: #4361ee;
border-color: #4361ee;
color: white;
}
.step-icon.completed {
background: #28a745;
border-color: #28a745;
color: white;
}
.step-label {
font-size: 13px;
color: #6c757d;
font-weight: 500;
}
.step-label.active {
color: #4361ee;
font-weight: 600;
}
.product-img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 8px;
}
.status-badge {
padding: 6px 12px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
display: inline-block;
}
.badge-new {
background: rgba(67, 97, 238, 0.15);
color: #4361ee;
}
.badge-process {
background: rgba(255, 193, 7, 0.15);
color: #ffc107;
}
.badge-delivered {
background: rgba(40, 167, 69, 0.15);
color: #28a745;
}
.badge-cancel {
background: rgba(220, 53, 69, 0.15);
color: #dc3545;
}
.table {
width: 100%;
border-collapse: collapse;
}
.table th, .table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #eaeaea;
}
.table th {
font-weight: 600;
}
.fw-medium {
font-weight: 500;
}
.fw-bold {
font-weight: 600;
}
.text-muted {
color: #6c757d !important;
}
.small {
font-size: 12px;
}
.order-summary {
margin-top: 20px;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
}
.order-summary-row {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.order-summary-label {
font-weight: 500;
}
.order-summary-value {
font-weight: 600;
}
.order-summary-total {
font-size: 18px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #dee2e6;
}
</style>
</head>
<body style="margin: 0; padding: 0;">
<div class="container">
<div style="margin-bottom: 24px;">
<h1 style="font-weight: 600; margin: 0 0 8px 0; font-size: 24px;">Order Confirmation</h1>
<p style="color: #6c757d; margin: 0;">Thank you for your order! Here are your order details.</p>
</div>
<!-- Order Summary Card -->
<div class="card">
<div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
<div>
Order #{{ $order['order_number'] }}
<span class="status-badge badge-{{ strtolower($order['status']) }}" style="margin-left: 8px;">
{{ ucfirst($order['status']) }}
</span>
</div>
<div style="color: #6c757d;">Placed on {{ \Carbon\Carbon::parse($order['created_at'])->format('F j, Y') }}</div>
</div>
<div class="card-body">
<!-- Progress Bar -->
<div class="order-status-bar">
<div class="progress-fill"></div>
</div>
<!-- Status Steps -->
<div class="status-steps">
<div class="status-step">
<div class="step-icon active">
✓
</div>
<div class="step-label active">Order Placed</div>
</div>
<div class="status-step">
<div class="step-icon {{ $order['status'] == 'process' || $order['status'] == 'delivered' ? 'active' : '' }}">
⚙
</div>
<div class="step-label {{ $order['status'] == 'process' || $order['status'] == 'delivered' ? 'active' : '' }}">Processing</div>
</div>
<div class="status-step">
<div class="step-icon {{ $order['status'] == 'delivered' ? 'active' : '' }}">
🚚
</div>
<div class="step-label {{ $order['status'] == 'delivered' ? 'active' : '' }}">Shipped</div>
</div>
<div class="status-step">
<div class="step-icon {{ $order['status'] == 'delivered' ? 'completed' : '' }}">
✓
</div>
<div class="step-label {{ $order['status'] == 'delivered' ? 'active' : '' }}">Delivered</div>
</div>
</div>
<!-- Customer Information -->
<h5 style="margin: 30px 0 15px 0; font-size: 16px; font-weight: 600;">Customer Information</h5>
<div style="margin-bottom: 20px;">
<p style="margin: 5px 0;"><strong>Name:</strong> {{ $order['first_name'] }}</p>
<p style="margin: 5px 0;"><strong>Email:</strong> {{ $order['email'] }}</p>
<p style="margin: 5px 0;"><strong>Phone:</strong> {{ $order['phone'] }}</p>
<p style="margin: 5px 0;"><strong>Address:</strong> {{ $order['address1'] }}, {{ $order['address2'] ?? '' }}, {{ $order['country'] }}, {{ $order['post_code'] ?? '' }}</p>
</div>
<!-- Order Items -->
<h5 style="margin: 30px 0 15px 0; font-size: 16px; font-weight: 600;">Order Items</h5>
<table class="table" style="width: 100%; border-collapse: collapse;">
<thead>
<tr>
<th style="padding: 12px; text-align: left; border-bottom: 1px solid #eaeaea; font-weight: 600;">Product</th>
<th style="padding: 12px; text-align: left; border-bottom: 1px solid #eaeaea; font-weight: 600;">Price</th>
<th style="padding: 12px; text-align: left; border-bottom: 1px solid #eaeaea; font-weight: 600;">Quantity</th>
<th style="padding: 12px; text-align: left; border-bottom: 1px solid #eaeaea; font-weight: 600;">Total</th>
</tr>
</thead>
<tbody>
@foreach($order['cart_info'] as $item)
@php
$productPhoto = explode(',', $item->product->photo);
@endphp
<tr>
<td style="padding: 12px; text-align: left; border-bottom: 1px solid #eaeaea;">
<div style="display: flex; align-items: center;">
<img src="{{ asset($productPhoto[0]) }}" class="product-img" style="margin-right: 12px;" alt="{{ $item->product->title }}">
<div>
<div style="font-weight: 500;">{{ $item->product->title }}</div>
@if($item->product->color)
<div style="color: #6c757d; font-size: 12px;">Color: {{ $item->product->color }}</div>
@endif
@if($item->product->size)
<div style="color: #6c757d; font-size: 12px;">Size: {{ $item->product->size }}</div>
@endif
</div>
</div>
</td>
<td style="padding: 12px; text-align: left; border-bottom: 1px solid #eaeaea;">{{ ($item->price) }}</td>
<td style="padding: 12px; text-align: left; border-bottom: 1px solid #eaeaea;">{{ $item->quantity }}</td>
<td style="padding: 12px; text-align: left; border-bottom: 1px solid #eaeaea; font-weight: 500;">{{ ($item->amount) }}</td>
</tr>
@endforeach
</tbody>
</table>
<!-- Order Summary -->
<div class="order-summary">
<div class="order-summary-row">
<span class="order-summary-label">Subtotal:</span>
<span class="order-summary-value">{{ ($order['sub_total']) }}</span>
</div>
@if($order['coupon'] > 0)
<div class="order-summary-row">
<span class="order-summary-label">Discount (Coupon):</span>
<span class="order-summary-value">-{{ ($order['coupon']) }}</span>
</div>
@endif
<div class="order-summary-row">
<span class="order-summary-label">Shipping:</span>
<span class="order-summary-value">{{ ($order['shipping_charge']) }}</span>
</div>
<div class="order-summary-row order-summary-total">
<span class="order-summary-label">Total:</span>
<span class="order-summary-value">{{ ($order['total_amount']) }}</span>
</div>
</div>
<!-- Payment Information -->
<h5 style="margin: 25px 0 15px 0; font-size: 16px; font-weight: 600;">Payment Information</h5>
<div style="margin-bottom: 10px;">
<p style="margin: 5px 0;"><strong>Payment Method:</strong> {{ ucfirst($order['payment_method']) }}</p>
<p style="margin: 5px 0;"><strong>Payment Status:</strong> {{ ucfirst($order['payment_status']) }}</p>
</div>
<!-- Footer Message -->
<div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #eaeaea; text-align: center;">
<p style="margin: 0; color: #6c757d; font-size: 14px;">Thank you for shopping with us! If you have any questions, please contact our support team.</p>
</div>
</div>
</div>
</div>
</body>
</html>
PK 99