@props(['order'])
<div uname="single-order-container" class="flex justify-between  border-b border-gray-400 w-full">
    <div uname="order-info-section w-full" class="m-5">
        <div class="headline font-semibold mb-5">
            <span>Order Date : {{ $order->created_at }} </span>
            {{-- format date to be like this '13 Jun 2024'   --}}
            {{-- <span class="text-green-500">| Delivered</span> --}}
        </div>

        <div class="main-info-section">
            <div class="line1 my-3 text-sm">
                <span>Total:</span>
                <span class="currency"> ₦ </span>
                <span class="amount">{{ $order->total_amount }}</span>
            </div>
            <div class="line2 my-3 text-sm">
                <span>Order No: </span>
                <span class="order-id">{{ $order->identifier }}</span>
            </div>
            <div class="line3 my-3 text-sm">
                {{-- <span>Payment Method:</span> <span>Pay On Collection</span> --}}
                <span>Number of Items in Order:</span> <span>{{ $order->items_count }}</span>

                {{-- <div class="product-img mt-3">
                    <img src="" alt="photo">
                </div> --}}
            </div>
        </div>
    </div>

    <div uname="order-cta-section w-full mr-10" class="m-5 flex  flex-col">
        <div class="cta-btn-container self-end">
            <a href="{{ route('orders.show', $order->id) }}">
                <x-primary-button type="button">View Details</x-primary-button>
            </a>
        </div>
        <div class="delivery-address-info mt-5">
            <p class="font-semibold">Delivery Address:</p>
            <p>{{ $order->deliveryInfo?->getAddress() }}</p>
        </div>
    </div>
</div>