@extends('layouts.shop')

@section('title', 'Order Confirmation - Area 51 Booze')

@section('content')
    <div class="container mx-auto px-4 py-8 max-w-2xl">

        <!-- Success Message -->
        <div class="text-center mb-8">
            <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-check text-green-600 text-2xl"></i>
            </div>
            <h1 class="text-3xl font-bold text-gray-800 mb-2">Order Confirmed!</h1>
            <p class="text-gray-600">Thank you for your order. We'll prepare it for delivery soon.</p>
        </div>

        <!-- Order Details -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <div class="border-b border-gray-200 pb-4 mb-4">
                <h2 class="text-xl font-semibold">Order #{{ $order->id }}</h2>
                <p class="text-sm text-gray-500">Placed on {{ $order->created_at->format('M d, Y \a\t g:i A') }}</p>
            </div>

            <!-- Customer Information -->
            <div class="mb-6">
                <h3 class="font-semibold mb-2">Customer Information</h3>
                <div class="text-sm text-gray-600 space-y-1">
                    @if ($order->user_id)
                        <p><strong>Name:</strong> {{ $order->user->name }}</p>
                        <p><strong>Email:</strong> {{ $order->user->email }}</p>
                    @else
                        <p><strong>Name:</strong> {{ $order->guest_name }}</p>
                        <p><strong>Email:</strong> {{ $order->guest_email }}</p>
                        <p><strong>Phone:</strong> {{ $order->guest_phone }}</p>
                    @endif
                </div>
            </div>

            <!-- Delivery Information -->
            <div class="mb-6">
                <h3 class="font-semibold mb-2">Delivery Information</h3>
                <div class="text-sm text-gray-600">
                    <p><strong>Address:</strong> {{ $order->delivery_address }}</p>
                    <p><strong>Payment Method:</strong> {{ ucfirst($order->payment_method) }}</p>
                    <p><strong>Status:</strong>
                        <span class="inline-block bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">
                            {{ ucfirst($order->status) }}
                        </span>
                    </p>
                </div>
            </div>

            <!-- Order Items -->
            <div class="mb-6">
                <h3 class="font-semibold mb-4">Order Items</h3>
                <div class="space-y-3">
                    @foreach ($order->items as $item)
                        <div class="flex items-center space-x-4 p-3 bg-gray-50 rounded-lg">
                            <img src="{{ $item->product->image_url ?: '/placeholder.jpg' }}"
                                alt="{{ $item->product->name }}" class="w-16 h-16 object-cover rounded">
                            <div class="flex-1">
                                <h4 class="font-medium">{{ $item->product->name }}</h4>
                                <p class="text-sm text-gray-600">
                                    {{ $item->quantity }} {{ $item->product->unit }} ×
                                    ${{ number_format($item->price, 2) }}
                                </p>
                            </div>
                            <div class="text-right">
                                <p class="font-semibold">${{ number_format($item->total, 2) }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <!-- Order Total -->
            <div class="border-t border-gray-200 pt-4">
                <div class="space-y-2">
                    <div class="flex justify-between text-sm">
                        <span>Subtotal:</span>
                        <span>${{ number_format($order->subtotal, 2) }}</span>
                    </div>

                    <div class="flex justify-between text-sm">
                        <span>Tax:</span>
                        <span>${{ number_format($order->tax_amount, 2) }}</span>
                    </div>

                    <div class="flex justify-between text-sm">
                        <span>Delivery:</span>
                        <span class="text-green-600">Free</span>
                    </div>

                    <div class="flex justify-between font-semibold text-lg border-t border-gray-200 pt-2">
                        <span>Total:</span>
                        <span class="text-blue-600">${{ number_format($order->total, 2) }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- What's Next -->
        <div class="bg-blue-50 rounded-lg p-6 mb-6">
            <h3 class="font-semibold text-blue-800 mb-2">What's Next?</h3>
            <div class="text-sm text-blue-700 space-y-2">
                @if ($order->payment_method === 'cash')
                    <div class="flex items-start space-x-2">
                        <i class="fas fa-clock mt-1"></i>
                        <p>We're preparing your order and will contact you soon with delivery details.</p>
                    </div>
                    <div class="flex items-start space-x-2">
                        <i class="fas fa-truck mt-1"></i>
                        <p>A delivery driver will bring your order and collect payment on delivery.</p>
                    </div>
                @else
                    <div class="flex items-start space-x-2">
                        <i class="fas fa-mobile-alt mt-1"></i>
                        <p>Complete your EcoCash payment to confirm your order.</p>
                    </div>
                    <div class="flex items-start space-x-2">
                        <i class="fas fa-check mt-1"></i>
                        <p>Once payment is confirmed, we'll start preparing your order.</p>
                    </div>
                @endif
                <div class="flex items-start space-x-2">
                    <i class="fas fa-envelope mt-1"></i>
                    <p>You'll receive SMS/email updates about your order status.</p>
                </div>
            </div>
        </div>

        <!-- Actions -->
        <div class="flex flex-col sm:flex-row gap-4">
            <a href="{{ route('shop.index') }}"
                class="flex-1 bg-blue-600 text-white text-center py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors">
                Continue Shopping
            </a>

            @auth
                <a href="#"
                    class="flex-1 bg-gray-200 text-gray-800 text-center py-3 rounded-lg font-medium hover:bg-gray-300 transition-colors">
                    View All Orders
                </a>
            @endauth
        </div>

        <!-- Contact Information -->
        <div class="text-center mt-8 p-4 bg-gray-50 rounded-lg">
            <p class="text-sm text-gray-600 mb-2">
                <strong>Need help with your order?</strong>
            </p>
            <p class="text-sm text-gray-600">
                Contact us at <a href="mailto:support@area51booze.com"
                    class="text-blue-600 hover:underline">support@area51booze.com</a>
                or call <a href="tel:+1234567890" class="text-blue-600 hover:underline">+1 (234) 567-890</a>
            </p>
        </div>
    </div>
@endsection