538 lines
16 KiB
PHP
538 lines
16 KiB
PHP
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>{{ get_phrase('Course Purchase Confirmation') }} | {{ config('app.name') }}</title>
|
|
<style>
|
|
/* Reset & Base */
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
background: #f9fafb;
|
|
margin: 0;
|
|
padding: 20px;
|
|
line-height: 1.5;
|
|
color: #374151;
|
|
}
|
|
|
|
.email-container {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
background: #ffffff;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
|
|
border: 1px solid #e5e7eb;
|
|
}
|
|
|
|
/* Header */
|
|
.email-header {
|
|
background: linear-gradient(135deg, #212e91 0%, #4f46e5 100%);
|
|
color: white;
|
|
padding: 40px 30px;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.header-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 16px;
|
|
display: block;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
margin: 0 0 8px 0;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
.header-subtitle {
|
|
font-size: 16px;
|
|
opacity: 0.9;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Content */
|
|
.email-body {
|
|
padding: 40px 30px;
|
|
}
|
|
|
|
.greeting {
|
|
font-size: 18px;
|
|
color: #111827;
|
|
margin-bottom: 24px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.greeting strong {
|
|
color: #4f46e5;
|
|
}
|
|
|
|
.intro-text {
|
|
font-size: 16px;
|
|
color: #4b5563;
|
|
margin-bottom: 32px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Info Box */
|
|
.info-box {
|
|
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
|
border-radius: 12px;
|
|
padding: 28px;
|
|
margin: 32px 0;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.info-box-title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
margin-bottom: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 14px 0;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.info-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.info-label {
|
|
font-weight: 500;
|
|
color: #64748b;
|
|
font-size: 15px;
|
|
min-width: 120px;
|
|
}
|
|
|
|
.info-value {
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
font-size: 16px;
|
|
text-align: right;
|
|
}
|
|
|
|
.va-number {
|
|
background: white;
|
|
padding: 12px 16px;
|
|
border-radius: 8px;
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
|
|
font-size: 18px;
|
|
letter-spacing: 1.5px;
|
|
color: #1e293b;
|
|
border: 2px solid #cbd5e1;
|
|
display: inline-block;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.amount {
|
|
color: #059669;
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 16px;
|
|
border-radius: 20px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.status-pending {
|
|
background: #fef3c7;
|
|
color: #92400e;
|
|
}
|
|
|
|
.status-success {
|
|
background: #d1fae5;
|
|
color: #065f46;
|
|
}
|
|
|
|
.status-expired {
|
|
background: #fee2e2;
|
|
color: #991b1b;
|
|
}
|
|
|
|
/* Courses Section */
|
|
.courses-section {
|
|
margin: 32px 0;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 2px solid #e2e8f0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.course-item {
|
|
background: white;
|
|
border-radius: 10px;
|
|
padding: 18px;
|
|
margin-bottom: 12px;
|
|
border: 1px solid #e2e8f0;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.course-item:hover {
|
|
border-color: #4f46e5;
|
|
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1);
|
|
}
|
|
|
|
.course-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #374151;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Instructions */
|
|
.instructions {
|
|
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
|
|
border-radius: 12px;
|
|
padding: 28px;
|
|
margin: 32px 0;
|
|
border: 1px solid #bbf7d0;
|
|
}
|
|
|
|
.instructions-title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #166534;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.instructions-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.instructions-list li {
|
|
padding: 10px 0 10px 32px;
|
|
position: relative;
|
|
font-size: 15px;
|
|
color: #374151;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.instructions-list li:before {
|
|
content: '✓';
|
|
position: absolute;
|
|
left: 0;
|
|
color: #059669;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* CTA Buttons */
|
|
.cta-buttons {
|
|
text-align: center;
|
|
margin: 40px 0 32px;
|
|
}
|
|
.ii a[href] {
|
|
color: white !important;
|
|
}
|
|
|
|
.cta-button {
|
|
display: inline-block;
|
|
background: linear-gradient(135deg, #212e91 0%, #4f46e5 100%);
|
|
color: white !important;
|
|
text-decoration: none;
|
|
padding: 16px 32px;
|
|
border-radius: 12px;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
margin: 0 8px;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 16px rgba(79, 70, 229, 0.25);
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cta-button:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35);
|
|
}
|
|
|
|
.cta-button-secondary {
|
|
display: inline-block;
|
|
background: white;
|
|
color: #4f46e5;
|
|
text-decoration: none;
|
|
padding: 14px 28px;
|
|
border-radius: 12px;
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
margin: 0 8px;
|
|
border: 2px solid #4f46e5;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.cta-button-secondary:hover {
|
|
background: #f8fafc;
|
|
}
|
|
|
|
/* Final Message */
|
|
.final-message {
|
|
text-align: center;
|
|
margin: 32px 0;
|
|
padding: 24px;
|
|
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
|
border-radius: 12px;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.final-text {
|
|
font-size: 15px;
|
|
color: #4b5563;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.final-subtext {
|
|
font-size: 18px;
|
|
color: #1e293b;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Footer */
|
|
.email-footer {
|
|
background: #1e293b;
|
|
color: #cbd5e1;
|
|
padding: 32px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.footer-brand {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: white;
|
|
margin-bottom: 16px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.footer-disclaimer {
|
|
font-size: 13px;
|
|
color: #94a3b8;
|
|
margin-top: 20px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 640px) {
|
|
body {
|
|
padding: 16px;
|
|
}
|
|
|
|
.email-body {
|
|
padding: 30px 24px;
|
|
}
|
|
|
|
.email-header {
|
|
padding: 32px 24px;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.info-row {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 6px;
|
|
padding: 16px 0;
|
|
}
|
|
|
|
.info-label {
|
|
min-width: auto;
|
|
}
|
|
|
|
.info-value {
|
|
text-align: left;
|
|
width: 100%;
|
|
}
|
|
|
|
.va-number {
|
|
font-size: 16px;
|
|
padding: 10px 14px;
|
|
letter-spacing: 1px;
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
|
|
.cta-button,
|
|
.cta-button-secondary {
|
|
display: block;
|
|
width: 100%;
|
|
margin: 8px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.cta-buttons {
|
|
margin: 32px 0 24px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.email-body {
|
|
padding: 24px 20px;
|
|
}
|
|
|
|
.email-header {
|
|
padding: 28px 20px;
|
|
}
|
|
|
|
.info-box,
|
|
.instructions {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="email-container">
|
|
|
|
<div class="email-header">
|
|
<div class="header-icon">🎓</div>
|
|
<h1 class="header-title">{{ get_phrase('Course Purchase Confirmation') }}</h1>
|
|
<p class="header-subtitle">{{ get_phrase('Your learning journey begins here!') }}</p>
|
|
</div>
|
|
|
|
<div class="email-body">
|
|
<div class="greeting">
|
|
{{ get_phrase('Hello') }}, <strong>{{ $user->name }}</strong>! 👋
|
|
</div>
|
|
|
|
<p class="intro-text">
|
|
{{ get_phrase('Thank you for choosing to learn with us! Your course purchase has been successfully created. Please complete your payment using the Virtual Account details below before it expires to secure your access.') }}
|
|
</p>
|
|
|
|
<!-- Payment Details Box -->
|
|
<div class="info-box">
|
|
<div class="info-box-title">
|
|
<span>💳</span>
|
|
{{ get_phrase('Payment Details') }}
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="info-label">{{ get_phrase('Virtual Account') }}</span>
|
|
<div class="info-value">
|
|
<div class="va-number">{{ $payment->va_number }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="info-label">{{ get_phrase('Total Amount') }}</span>
|
|
<span class="info-value amount">Rp {{ number_format($payment->total_amount, 0, ',', '.') }}</span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="info-label">{{ get_phrase('Payment Status') }}</span>
|
|
<span class="info-value">
|
|
@if($payment->status == 0)
|
|
<span class="status-badge status-pending">⏳ {{ get_phrase('Waiting for Payment') }}</span>
|
|
@elseif($payment->status == 1)
|
|
<span class="status-badge status-success">✅ {{ get_phrase('Payment Successful') }}</span>
|
|
@else
|
|
<span class="status-badge status-expired">❌ {{ get_phrase('Payment Expired') }}</span>
|
|
@endif
|
|
</span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="info-label">{{ get_phrase('Valid Until') }}</span>
|
|
<span class="info-value">
|
|
🗓️ {{ \Carbon\Carbon::parse($payment->expired_at)->locale('id')->translatedFormat('l, d F Y \p\u\k\u\l H:i') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Courses Section -->
|
|
@if($courses->count() > 0)
|
|
<div class="courses-section">
|
|
<div class="section-title">📚 {{ get_phrase('Your Selected Courses') }}</div>
|
|
|
|
@foreach($courses as $course)
|
|
<div class="course-item">
|
|
<div class="course-title">{{ $course->title }}</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Instructions -->
|
|
<div class="instructions">
|
|
<div class="instructions-title">📋 {{ get_phrase('Payment Instructions') }}</div>
|
|
<ul class="instructions-list">
|
|
<li>{{ get_phrase('Go to ATM or Mobile Banking BTN') }}</li>
|
|
<li>{{ get_phrase('Select menu "Transfer" or "Payment"') }}</li>
|
|
<li>{{ get_phrase('Choose "Virtual Account" or "VA" option') }}</li>
|
|
<li>{{ get_phrase('Enter your Virtual Account number exactly as shown above') }}</li>
|
|
<li>{{ get_phrase('Confirm the amount matches exactly') }}</li>
|
|
<li>{{ get_phrase('Complete the payment before expiry time') }}</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- CTA Buttons -->
|
|
<div class="cta-buttons">
|
|
<a href="{{ url('/payment/va/' . $payment->id) }}" class="cta-button">
|
|
{{ get_phrase('View Payment Details') }}
|
|
</a>
|
|
<a href="{{ url('/') }}" class="cta-button-secondary">
|
|
{{ get_phrase('Back to Home') }}
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Final Message -->
|
|
<div class="final-message">
|
|
<p class="final-text">
|
|
{{ get_phrase('Once your payment is completed, you will receive another email with access details.') }}
|
|
</p>
|
|
<p class="final-subtext">
|
|
{{ get_phrase('Happy Learning!') }} 📚✨
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="email-footer">
|
|
<div class="footer-brand">{{ config('app.name') }}</div>
|
|
|
|
<div class="footer-disclaimer">
|
|
{{ get_phrase('This is an automated email. Please do not reply to this message.') }}<br>
|
|
{{ get_phrase('If you have any questions about your purchase, please contact our support team.') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |