292 lines
15 KiB
PHP
292 lines
15 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Thanh toán thành công</title>
|
|
<style>
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #f4f4f4;
|
|
}
|
|
.container {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
.header {
|
|
text-align: center;
|
|
border-bottom: 2px solid #28a745;
|
|
padding-bottom: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.logo {
|
|
max-width: 150px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.title {
|
|
color: #28a745;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
margin: 0;
|
|
}
|
|
.success-box {
|
|
background-color: #d4edda;
|
|
border: 1px solid #c3e6cb;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
.success-icon {
|
|
color: #28a745;
|
|
font-size: 24px;
|
|
margin-right: 10px;
|
|
}
|
|
.order-info {
|
|
background-color: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
.info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
.info-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.label {
|
|
font-weight: bold;
|
|
color: #495057;
|
|
}
|
|
.value {
|
|
color: #6c757d;
|
|
}
|
|
.vm-status {
|
|
background-color: #e8f5e8;
|
|
border: 1px solid #c3e6c3;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin: 15px 0;
|
|
}
|
|
.vm-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #d4edda;
|
|
}
|
|
.vm-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.vm-name {
|
|
font-weight: 500;
|
|
}
|
|
.vm-status-badge {
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
}
|
|
.status-success {
|
|
background-color: #28a745;
|
|
color: white;
|
|
}
|
|
.support-section {
|
|
background-color: #e8f5e8;
|
|
border: 1px solid #c3e6c3;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
text-align: center;
|
|
}
|
|
.support-title {
|
|
color: #28a745;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
margin-bottom: 15px;
|
|
}
|
|
.contact-info {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
}
|
|
.contact-item {
|
|
text-align: center;
|
|
}
|
|
.contact-icon {
|
|
font-size: 24px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.footer {
|
|
text-align: center;
|
|
margin-top: 30px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid #e9ecef;
|
|
color: #6c757d;
|
|
font-size: 14px;
|
|
}
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 12px 24px;
|
|
background-color: #007bff;
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 5px;
|
|
margin: 10px 5px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
.btn:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
.btn-success {
|
|
background-color: #28a745;
|
|
}
|
|
.btn-success:hover {
|
|
background-color: #1e7e34;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<table style="width: 100%; font-family: Montserrat,-apple-system;" role="presentation" cellspacing="0" cellpadding="0">
|
|
<tbody>
|
|
<tr>
|
|
<td style="background-color: #eceff1; font-family: Montserrat,-apple-system,sans-serif;" align="center">
|
|
<table style="width: 600px;" role="presentation" cellspacing="0" cellpadding="0">
|
|
<tbody>
|
|
<tr>
|
|
<td align="center">
|
|
<table style="width: 100%;" role="presentation" cellspacing="0" cellpadding="0">
|
|
<tbody>
|
|
<tr>
|
|
<td style="padding: 48px; text-align: center;"> </td>
|
|
</tr>
|
|
<tr style="background-color: #fff;">
|
|
<td style="text-align: center; padding: 20px; border-bottom: .5px solid #ececec;">
|
|
<img style="max-height: 100px;" src="{{ asset('images/logo.png') }}" alt="Logo">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="border-radius: 4px; background-color: #fff; padding: 48px; text-align: left; font-family: Montserrat,-apple-system,sans-serif; font-size: 16px; line-height: 24px; color: #626262;">
|
|
<div class="header">
|
|
<h1 class="title">✅ Thanh toán thành công!</h1>
|
|
</div>
|
|
|
|
<p>Xin chào <strong>{{ $customerName }}</strong>,</p>
|
|
|
|
<div class="success-box">
|
|
<div style="display: flex; align-items: center;">
|
|
<span class="success-icon">🎉</span>
|
|
<div>
|
|
<h3 style="margin: 0; color: #28a745;">Chúc mừng! Đơn hàng của bạn đã được xử lý thành công.</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p>Cảm ơn bạn đã tin tưởng sử dụng dịch vụ của chúng tôi. Đơn hàng của bạn đã được thanh toán và máy chủ ảo đã được khởi tạo thành công.</p>
|
|
|
|
<div class="order-info">
|
|
<h3 style="margin-top: 0; color: #495057;">📋 Thông tin đơn hàng</h3>
|
|
<div class="info-row">
|
|
<span class="label">Mã đơn hàng:</span>
|
|
<span class="value">#{{ $orderNum }}</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="label">Số tiền thanh toán:</span>
|
|
<span class="value">{{ number_format($amount, 0, ',', '.') }} VNĐ</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="label">Thời gian hoàn thành:</span>
|
|
<span class="value">{{ now()->format('d/m/Y H:i:s') }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
@if(count($vmResults) > 0)
|
|
<div class="vm-status">
|
|
<h3 style="margin-top: 0; color: #28a745;">🖥️ Trạng thái máy chủ ảo</h3>
|
|
@foreach($vmResults as $vm)
|
|
<div class="vm-item">
|
|
<span class="vm-name">{{ $vm['product_name'] ?? 'Unknown Product' }}</span>
|
|
<span class="vm-status-badge status-success">
|
|
{{ $vm['success'] ? '✅ Thành công' : '❌ Thất bại' }}
|
|
</span>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@else
|
|
<div style="background-color: #e8f5e8; border: 1px solid #c3e6c3; border-radius: 8px; padding: 15px; margin: 15px 0;">
|
|
<h3 style="margin-top: 0; color: #28a745;">📦 Thông tin đơn hàng</h3>
|
|
<p style="margin: 0; color: #28a745;">Đơn hàng này không chứa sản phẩm máy chủ ảo (VPS). Các sản phẩm khác đã được xử lý thành công.</p>
|
|
</div>
|
|
@endif
|
|
|
|
<div style="background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 8px; padding: 15px; margin: 20px 0;">
|
|
<h4 style="margin: 0; color: #856404;">💡 Thông tin quan trọng:</h4>
|
|
<ul style="margin: 10px 0; padding-left: 20px;">
|
|
<li>Máy chủ ảo của bạn đã được khởi tạo và sẵn sàng sử dụng</li>
|
|
<li>Thông tin đăng nhập sẽ được gửi trong email riêng biệt</li>
|
|
<li>Bạn có thể quản lý máy chủ ảo từ trang quản lý tài khoản</li>
|
|
<li>Nếu có vấn đề gì, vui lòng liên hệ với chúng tôi để được hỗ trợ</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="support-section">
|
|
<h3 class="support-title">🆘 Cần hỗ trợ?</h3>
|
|
<p>Nếu bạn cần hỗ trợ hoặc có câu hỏi, vui lòng liên hệ với chúng tôi:</p>
|
|
|
|
<div class="contact-info">
|
|
<div class="contact-item">
|
|
<div class="contact-icon">📧</div>
|
|
<div><strong>Email:</strong></div>
|
|
<div>{{ $supportEmail }}</div>
|
|
</div>
|
|
<div class="contact-item">
|
|
<div class="contact-icon">📞</div>
|
|
<div><strong>Điện thoại:</strong></div>
|
|
<div>{{ $supportPhone }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 20px;">
|
|
<a href="{{ route('invoice.show', ['invoice_id' => $orderId, 'order_num' => $orderNum]) }}" class="btn btn-success">
|
|
📋 Xem chi tiết đơn hàng
|
|
</a>
|
|
<a href="{{ route('home') }}" class="btn">
|
|
🏠 Vào trang quản lý
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<p>Cảm ơn bạn đã tin tưởng sử dụng dịch vụ của chúng tôi!</p>
|
|
|
|
<p>Trân trọng,<br>
|
|
<strong>Đội ngũ hỗ trợ khách hàng</strong></p>
|
|
|
|
<div class="footer">
|
|
<p>Email này được gửi tự động, vui lòng không trả lời email này.</p>
|
|
<p>Nếu bạn có câu hỏi, vui lòng liên hệ với chúng tôi qua email hoặc điện thoại.</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 48px; text-align: center;"> </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</body>
|
|
</html>
|