twotalesanimation
296 lines
9.4 KiB
PHP
296 lines
9.4 KiB
PHP
@extends('layouts.app')
|
||
|
||
@section('title', 'Order Details - ' . $order->order_number)
|
||
|
||
@section('styles')
|
||
<style>
|
||
.success-container {
|
||
text-align: center;
|
||
margin: 3rem 0;
|
||
}
|
||
|
||
.success-icon {
|
||
font-size: 4rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
h1 {
|
||
font-family: 'Abril Fatface', cursive;
|
||
font-size: 2.5rem;
|
||
color: var(--primary-color);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.subtitle {
|
||
color: #666;
|
||
font-size: 1.1rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.order-details {
|
||
margin: 2rem 0;
|
||
text-align: left;
|
||
}
|
||
|
||
.detail-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 1rem 0;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.detail-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.detail-label {
|
||
font-weight: 600;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.detail-value {
|
||
color: #666;
|
||
}
|
||
|
||
.order-items {
|
||
margin: 2rem 0;
|
||
text-align: left;
|
||
}
|
||
|
||
.order-items-inner {
|
||
padding: 2rem;
|
||
border-radius: 20px;
|
||
margin: 2rem 0;
|
||
text-align: left;
|
||
}
|
||
|
||
.order-items h2 {
|
||
font-family: 'Abril Fatface', cursive;
|
||
font-size: 1.3rem;
|
||
color: var(--primary-color);
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.item-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 1rem 0;
|
||
border-bottom: 1px solid #e0e0e0;
|
||
}
|
||
|
||
.item-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.item-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.item-name {
|
||
font-weight: 600;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.item-qty {
|
||
font-size: 0.9rem;
|
||
color: #666;
|
||
margin-top: 0.25rem;
|
||
}
|
||
|
||
.item-price {
|
||
font-weight: 600;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.total-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-top: 1.5rem;
|
||
margin-top: 1rem;
|
||
border-top: 2px solid var(--primary-color);
|
||
font-weight: 600;
|
||
font-size: 1.2rem;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.summary-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 1rem 0;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.summary-row.total {
|
||
border-bottom: none;
|
||
font-weight: 600;
|
||
font-size: 1.1rem;
|
||
padding-top: 1.5rem;
|
||
margin-top: 1rem;
|
||
border-top: 2px solid var(--primary-color);
|
||
}
|
||
|
||
.actions {
|
||
margin-top: 2rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.next-steps-title {
|
||
font-family: 'Abril Fatface', cursive;
|
||
font-size: 1.3rem;
|
||
color: var(--primary-color);
|
||
margin-bottom: 1.5rem;
|
||
text-align: left;
|
||
}
|
||
|
||
.back-link {
|
||
display: block;
|
||
text-align: center;
|
||
margin-top: 1.5rem;
|
||
color: var(--primary-color);
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.back-link:hover {
|
||
text-decoration: underline;
|
||
}
|
||
</style>
|
||
@endsection
|
||
|
||
@section('content')
|
||
<main class="container">
|
||
<div class="success-container">
|
||
<div class="success-icon">📦</div>
|
||
<h1>Order Details</h1>
|
||
<p class="subtitle">Order #{{ $order->order_number }}</p>
|
||
|
||
<!-- Order Details -->
|
||
<div class="order-details card">
|
||
<div>
|
||
<div class="detail-row">
|
||
<span class="detail-label">Order Date:</span>
|
||
<span class="detail-value">{{ $order->created_at->format('M d, Y') }}</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span class="detail-label">Status:</span>
|
||
<span class="detail-value" style="text-transform: capitalize;">{{ $order->status }}</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span class="detail-label">Customer Name:</span>
|
||
<span class="detail-value">{{ $order->customer_name }}</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span class="detail-label">Email:</span>
|
||
<span class="detail-value">{{ $order->customer_email }}</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span class="detail-label">Phone:</span>
|
||
<span class="detail-value">{{ $order->customer_phone }}</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span class="detail-label">Shipping Address:</span>
|
||
<span class="detail-value">{{ $order->shipping_address }}</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span class="detail-label">Payment Status:</span>
|
||
<span class="detail-value" style="text-transform: capitalize;">{{ $order->payment_status }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Order Items -->
|
||
<div class="order-items card">
|
||
<div >
|
||
<h2>Order Items</h2>
|
||
@foreach($order->items as $item)
|
||
<div class="item-row">
|
||
<div class="item-info">
|
||
<div class="item-name">{{ $item->product->name }}{{ $item->is_sample ? ' - Sample' : '' }}</div>
|
||
<div class="item-qty">
|
||
@php
|
||
$stock = $item->printStock;
|
||
$stockText = $stock ? "{$stock->name}" : "Standard";
|
||
$stockCost = 0;
|
||
|
||
if (!$item->is_sample && $stock) {
|
||
$stockCost = $item->type === 'wallpaper' ? $stock->cost_per_meter : $stock->cost_per_m2;
|
||
}
|
||
@endphp
|
||
|
||
@if($item->is_sample)
|
||
Sample - Fixed Price: R{{ number_format(\App\Services\ShippingService::getSampleCost(), 2) }}
|
||
@elseif($item->type === 'wallpaper')
|
||
Length: {{ $item->length }}m | Finish: {{ $stockText }}<br>
|
||
<small>Stock Cost: R{{ number_format($stockCost, 2) }}/m</small>
|
||
@elseif($item->type === 'mural')
|
||
Dimensions: {{ $item->width }}m × {{ $item->height }}m ({{ number_format($item->width * $item->height, 2) }}m²) | Finish: {{ $stockText }}<br>
|
||
<small>Stock Cost: R{{ number_format($stockCost, 2) }}/m²</small>
|
||
@else
|
||
<small>Price: R{{ number_format($stockCost, 2) }} per unit</small>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
<div class="item-price">
|
||
R{{ number_format(
|
||
$item->is_sample
|
||
? \App\Services\ShippingService::getSampleCost() * $item->quantity
|
||
: $item->quantity * (
|
||
$item->type === 'wallpaper'
|
||
? $stockCost * $item->length
|
||
: ($item->type === 'mural'
|
||
? $stockCost * $item->width * $item->height
|
||
: $stockCost
|
||
)
|
||
),
|
||
2
|
||
) }}
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
<div class="summary-row">
|
||
<span>Subtotal:</span>
|
||
<span>R{{ number_format($order->total, 2) }}</span>
|
||
</div>
|
||
@if($order->shipping_fee)
|
||
<div class="summary-row">
|
||
<span>Shipping:</span>
|
||
<span>R{{ number_format($order->shipping_fee, 2) }}</span>
|
||
</div>
|
||
@endif
|
||
<div class="summary-row total">
|
||
<span>Order Total:</span>
|
||
<span>R{{ number_format($order->total + ($order->shipping_fee ?? 0), 2) }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Additional Info -->
|
||
@if($order->notes)
|
||
<div class="card">
|
||
<h3 style="color: var(--primary-color); margin-bottom: 1rem;">Order Notes</h3>
|
||
<p>{{ $order->notes }}</p>
|
||
</div>
|
||
@endif
|
||
|
||
<div class="card card--pink">
|
||
<h2 class="next-steps-title" style="text-align: center;">Order Status</h2>
|
||
<p style="margin: 0; text-align: center;">
|
||
@if($order->payment_status === 'pending')
|
||
Your payment is pending. Please complete the payment to process your order.
|
||
@elseif($order->status === 'pending')
|
||
Your order has been received and is being prepared. You'll receive an email update shortly with shipping information.
|
||
@else
|
||
Your order is {{ strtolower($order->status) }}. Thank you for your purchase!
|
||
@endif
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Actions -->
|
||
<div class="actions">
|
||
<a href="{{ route('track-order-form') }}" class="btn btn--secondary">Track Another Order</a>
|
||
<a href="{{ route('home') }}" class="btn">Back to Home</a>
|
||
</div>
|
||
</main>
|
||
@endsection
|