New Initial Commit
This commit is contained in:
twotalesanimation
@@ -0,0 +1,248 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Order History')
|
||||
|
||||
@section('styles')
|
||||
<style>
|
||||
h1 {
|
||||
font-family: 'Abril Fatface', cursive;
|
||||
font-size: 2.5rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
background: white;
|
||||
padding: 3rem;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
color: #666;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.orders-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.order-card {
|
||||
background: white;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.order-header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.order-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.order-number {
|
||||
font-family: 'Abril Fatface', cursive;
|
||||
font-size: 1.1rem;
|
||||
color: var(--primary-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.order-date {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 0.4rem 1rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
background-color: #fff3cd;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.status-processing {
|
||||
background-color: #cfe2ff;
|
||||
color: #084298;
|
||||
}
|
||||
|
||||
.status-completed {
|
||||
background-color: #d1e7dd;
|
||||
color: #0f5132;
|
||||
}
|
||||
|
||||
.order-total {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-family: 'Abril Fatface', cursive;
|
||||
font-size: 1.3rem;
|
||||
color: var(--primary-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.order-items {
|
||||
margin: 1rem 0;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.item-qty {
|
||||
color: #666;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.item-price {
|
||||
color: var(--primary-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.order-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.customer-info {
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.customer-info strong {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.order-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
background-color: var(--accent-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-small:hover {
|
||||
background-color: #c09191;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.order-header {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.order-total {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<main class="container">
|
||||
<h1>Order History</h1>
|
||||
|
||||
@if($orders->count() > 0)
|
||||
<div class="orders-list">
|
||||
@foreach($orders as $order)
|
||||
<div class="order-card">
|
||||
<!-- Order Header -->
|
||||
<div class="order-header">
|
||||
<div class="order-info">
|
||||
<div class="order-number">{{ $order->order_number }}</div>
|
||||
<div class="order-date">{{ $order->created_at->format('M d, Y') }}</div>
|
||||
</div>
|
||||
|
||||
<div class="order-status">
|
||||
<span class="status-badge status-{{ $order->status }}">
|
||||
{{ ucfirst($order->status) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="order-total">
|
||||
<div class="total-amount">${{ number_format($order->total, 2) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Order Items -->
|
||||
<div class="order-items">
|
||||
@foreach($order->items as $item)
|
||||
<div class="item">
|
||||
<span class="item-name">{{ $item->product->name }}</span>
|
||||
<span class="item-qty">Qty: {{ $item->quantity }}</span>
|
||||
<span class="item-price">${{ number_format($item->quantity * $item->price, 2) }}</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<!-- Order Footer -->
|
||||
<div class="order-footer">
|
||||
<div class="customer-info">
|
||||
<strong>{{ $order->customer_name }}</strong><br>
|
||||
{{ $order->customer_email }}
|
||||
</div>
|
||||
|
||||
<div class="order-actions">
|
||||
<button class="btn-small" onclick="printOrder({{ $order->id }})">Print</button>
|
||||
<a href="{{ route('product-detail', $order->items->first()->product) }}" class="btn-small">View Items</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<div class="empty-state">
|
||||
<p>No orders found. Start shopping today!</p>
|
||||
<a href="{{ route('wallpapers') }}" class="btn">Browse Products</a>
|
||||
</div>
|
||||
@endif
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function printOrder(orderId) {
|
||||
window.print();
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user