everything semi working before sample implementation
This commit is contained in:
twotalesanimation
@@ -5,47 +5,43 @@
|
||||
@section('styles')
|
||||
<style>
|
||||
.success-container {
|
||||
max-width: 600px;
|
||||
margin: var(--spacing-xl) auto;
|
||||
padding: var(--spacing-xl);
|
||||
background-color: var(--accent-light);
|
||||
border: 2px solid var(--accent-pink);
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
font-size: 4rem;
|
||||
color: var(--accent-pink);
|
||||
margin-bottom: var(--spacing-md);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 2rem;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-md);
|
||||
h1 {
|
||||
font-family: 'Abril Fatface', cursive;
|
||||
font-size: 2.5rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
.subtitle {
|
||||
color: #666;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.order-details {
|
||||
background-color: white;
|
||||
padding: var(--spacing-lg);
|
||||
border-radius: 8px;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
margin: 2rem 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.order-details-inner {
|
||||
padding: 2rem;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-sm) 0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.detail-row:last-child {
|
||||
@@ -53,98 +49,96 @@
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.next-steps {
|
||||
.next-steps-title {
|
||||
font-family: 'Abril Fatface', cursive;
|
||||
font-size: 1.3rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: left;
|
||||
background-color: white;
|
||||
padding: var(--spacing-lg);
|
||||
border-radius: 8px;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.next-steps h3 {
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-md);
|
||||
.next-steps-inner {
|
||||
padding: 2rem;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.next-steps ol {
|
||||
color: var(--text-secondary);
|
||||
padding-left: var(--spacing-lg);
|
||||
.next-steps ul {
|
||||
color: #666;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.next-steps li {
|
||||
margin-bottom: var(--spacing-sm);
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.action-buttons .btn {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
.actions {
|
||||
margin-top: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<div class="container">
|
||||
<main class="container">
|
||||
<div class="success-container">
|
||||
<div class="success-icon">✓</div>
|
||||
<h1 class="success-title">Payment Successful!</h1>
|
||||
<p class="success-message">
|
||||
Your deposit payment has been received and processed successfully.
|
||||
</p>
|
||||
<h1>Deposit Payment Successful!</h1>
|
||||
<p class="subtitle">Your deposit payment has been received and processed successfully.</p>
|
||||
|
||||
<div class="order-details">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Order Number:</span>
|
||||
<span class="detail-value">{{ $customOrder->order_number }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Order Type:</span>
|
||||
<span class="detail-value">{{ ucfirst($customOrder->type) }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Deposit Amount:</span>
|
||||
<span class="detail-value">R{{ number_format($customOrder->deposit_amount, 2) }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Remaining Balance:</span>
|
||||
<span class="detail-value">R{{ number_format($customOrder->balance_amount, 2) }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Payment Status:</span>
|
||||
<span class="detail-value"><span class="status-badge paid">Paid</span></span>
|
||||
<!-- Order Details -->
|
||||
<div class="order-details card">
|
||||
<div class="order-details-inner">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Order Number:</span>
|
||||
<span class="detail-value"><strong>{{ $customOrder->order_number }}</strong></span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Order Type:</span>
|
||||
<span class="detail-value">{{ ucfirst($customOrder->type) }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Deposit Amount Paid:</span>
|
||||
<span class="detail-value"><strong>R{{ number_format($customOrder->deposit_amount, 2) }}</strong></span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Remaining Balance:</span>
|
||||
<span class="detail-value">R{{ number_format($customOrder->balance_amount, 2) }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Total Project Cost:</span>
|
||||
<span class="detail-value"><strong>R{{ number_format($customOrder->total_cost, 2) }}</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="next-steps">
|
||||
<h3>What Happens Next?</h3>
|
||||
<ol>
|
||||
<li>Your design requirements have been received</li>
|
||||
<li>Our design team will review your specifications</li>
|
||||
<li>You'll receive proof designs for your approval within 3-5 business days</li>
|
||||
<li>Once you approve the proofs, we'll prepare for printing</li>
|
||||
<li>The remaining balance (80%) will be due before printing begins</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<a href="{{ route('custom-orders.show', $customOrder) }}" class="btn">View Order Details</a>
|
||||
<a href="{{ route('my-orders') }}" class="btn btn--secondary">Back to Orders</a>
|
||||
<!-- What's Next -->
|
||||
<div class="card--pink">
|
||||
<div class="next-steps-inner">
|
||||
<h2 class="next-steps-title" style="text-align: center;">What Happens Next?</h2>
|
||||
<ul class="next-steps">
|
||||
<li>Your design requirements have been received and confirmed</li>
|
||||
<li>Our design team will review your specifications and reference images</li>
|
||||
<li>You'll receive proof designs for your approval within 3-5 business days</li>
|
||||
<li>Once you approve the proofs, we'll prepare for printing</li>
|
||||
<li>The remaining balance (80%) will be due before printing begins</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="actions">
|
||||
<a href="{{ route('custom-orders.show', $customOrder) }}" class="btn">View Order Details</a>
|
||||
<a href="{{ route('custom-orders.index') }}" class="btn btn--secondary">Back to My Orders</a>
|
||||
</div>
|
||||
</main>
|
||||
@endsection
|
||||
|
||||
Reference in New Issue
Block a user