Additional/resources/views/order-success.blade.php

@extends('layouts.app')

@section('title', 'Order Confirmed')

@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;
    }

    .order-details-inner {
        padding: 2rem;
        border-radius: 20px;
    }

    .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;
    }

    margin: 2rem 0;
    text-align: left;
    }

    .order-items-inner {
        padding: 2rem;
        border-radius: 20pxpx;
        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;
    }

    .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);
    }

    .actions {
        margin-top: 2rem;
        text-align: center;
    }

    .note {
        background: #d4e8d4;
        color: var(--primary-color);
        padding: 1rem;
        border-radius: 4px;
        margin: 2rem 0;
        border-left: 4px solid var(--primary-color);
    }
    .next-steps-title {
        font-family: 'Abril Fatface', cursive;
        font-size: 1.3rem;
        color: var(--primary-color);
        margin-bottom: 1.5rem;
        text-align: left;
    }
</style>
@endsection

@section('content')
<main class="container">
    <div class="success-container">
        <div class="success-icon">✓</div>
        <h1>Order Confirmed!</h1>
        <p class="subtitle">Thank you for your purchase. Your order has been successfully received.</p>

        <!-- Order Details -->
        <div class="order-details card">
            <div class="order-details-inner">
                <span class="detail-label">Order Number:</span>
                <span class="detail-value"><strong>{{ $order->order_number }}</strong></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">Shipping Address:</span>
                <span class="detail-value">{{ $order->shipping_address }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Order Status:</span>
                <span class="detail-value">
                    <strong style="color: var(--accent-primary); text-transform: capitalize;">{{ $order->status }}</strong>
                </span>
            </div>
        </div>
    </div>

    <!-- Order Items -->
    <div class="order-items card">
        <div class="order-items-inner">
            <h2>Order Items</h2>
            @foreach($order->items as $item)
            <div class="item-row">
                <div class="item-info">
                    <div class="item-name">{{ $item->product->name }}</div>
                    <div class="item-qty">
                        @php
                        $stock = $item->printStock;
                        $stockText = $stock ? "{$stock->name}" : "Standard";
                        $stockCost = 0;

                        if ($stock) {
                        $stockCost = $item->type === 'wallpaper' ? $stock->cost_per_meter : $stock->cost_per_m2;
                        }
                        @endphp

                        @if($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->quantity * (
                            $item->type === 'wallpaper' 
                                ? $stockCost * $item->length 
                                : ($item->type === 'mural' 
                                    ? $stockCost * $item->width * $item->height 
                                    : $stockCost
                                )
                        ), 
                        2
                    ) }}
                </div>
            </div>
            @endforeach
        </div>
        <div class="total-row">
            <span>Order Total:</span>
            <span>R{{ number_format($order->total, 2) }}</span>
        </div>
    </div>
    <div class="card--pink">
        <h2 class="next-steps-title" style="text-align: center;">What Happens Next?</h2>
        A confirmation email has been sent to <strong>{{ $order->customer_email }}</strong>. You'll receive updates about your order status and shipping information shortly.
    </div>
    </div>



    <!-- Actions -->
    <div class="actions">
        <a href="{{ route('wallpapers') }}" class="btn">Continue Shopping</a>
        <a href="{{ route('home') }}" class="btn btn--secondary">Back to Home</a>
    </div>
    </div>
</main>
@endsection