@extends('layouts.app')

@section('title', 'Order Confirmation - Memorycloset Media')

@section('content')
<div class="container mx-auto px-4 py-8 md:py-12">
    <div class="max-w-3xl mx-auto">
        @if(session('success'))
            <div class="bg-green-50 border-2 border-green-200 text-green-700 px-4 py-3 rounded-xl mb-6">
                <div class="flex items-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    {{ session('success') }}
                </div>
            </div>
        @endif

        <div class="bg-white rounded-2xl shadow-md border border-[#e8ddd0] p-6 md:p-8 text-center mb-8">
            <div class="inline-block mb-6">
                <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto">
                    <svg class="w-12 h-12 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                </div>
            </div>
            <h1 class="text-3xl md:text-4xl font-serif font-bold text-[#524438] mb-4">Order Confirmed!</h1>
            <p class="text-lg text-[#645443] mb-2">Thank you for your order, <strong>{{ $order->customer_name }}</strong>!</p>
            <p class="text-[#645443]">Your order number is:</p>
            <p class="text-2xl font-bold text-[#7d6a52] mt-2">{{ $order->order_number }}</p>
        </div>

        <div class="bg-white rounded-2xl shadow-md border border-[#e8ddd0] p-6 md:p-8 mb-6">
            <h2 class="text-2xl font-serif font-bold text-[#524438] mb-6">Order Details</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <h3 class="text-sm font-semibold text-[#645443] mb-2">Customer Information</h3>
                    <div class="text-[#524438] space-y-1">
                        <p><strong>Name:</strong> {{ $order->customer_name }}</p>
                        <p><strong>Email:</strong> {{ $order->customer_email }}</p>
                        <p><strong>Phone:</strong> {{ $order->customer_phone }}</p>
                        @if($order->customer_address)
                            <p><strong>Address:</strong> {{ $order->customer_address }}</p>
                        @endif
                    </div>
                </div>
                <div>
                    <h3 class="text-sm font-semibold text-[#645443] mb-2">Order Information</h3>
                    <div class="text-[#524438] space-y-1">
                        <p><strong>Order Number:</strong> {{ $order->order_number }}</p>
                        <p><strong>Date:</strong> {{ $order->created_at->format('F d, Y') }}</p>
                        <p><strong>Status:</strong> 
                            <span class="px-2 py-1 rounded-full text-xs font-semibold bg-[#fef3c7] text-[#92400e]">
                                {{ ucfirst($order->status) }}
                            </span>
                        </p>
                    </div>
                </div>
            </div>

            @if($order->notes)
                <div class="mb-6">
                    <h3 class="text-sm font-semibold text-[#645443] mb-2">Special Instructions</h3>
                    <p class="text-[#524438]">{{ $order->notes }}</p>
                </div>
            @endif

            <div class="border-t border-[#e8ddd0] pt-6">
                <h3 class="text-lg font-semibold text-[#524438] mb-4">Order Items</h3>
                <div class="space-y-4">
                    @foreach($order->items as $item)
                        <div class="flex justify-between items-start pb-4 border-b border-[#e8ddd0] last:border-0">
                            <div class="flex-1">
                                <p class="font-semibold text-[#524438]">{{ $item->product_name }}</p>
                                <p class="text-sm text-[#645443]">Quantity: {{ $item->quantity }} × R{{ number_format($item->price, 2) }}</p>
                            </div>
                            <p class="font-bold text-[#7d6a52]">R{{ number_format($item->subtotal, 2) }}</p>
                        </div>
                    @endforeach
                </div>
                
                <div class="mt-6 pt-6 border-t-2 border-[#e8ddd0]">
                    <div class="flex justify-between items-center py-2 mb-2">
                        <span class="text-[#645443] font-medium">Subtotal</span>
                        <span class="font-semibold text-[#524438] text-lg">R{{ number_format($order->subtotal, 2) }}</span>
                    </div>
                    <div class="flex justify-between items-center bg-gradient-to-r from-[#f5f0e8] to-[#e8ddd0] p-4 rounded-xl">
                        <span class="text-xl font-bold text-[#524438]">Total</span>
                        <span class="text-2xl font-bold text-[#7d6a52]">R{{ number_format($order->total, 2) }}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-[#f0f9ff] border-2 border-[#bae6fd] rounded-xl p-6 mb-6">
            <div class="flex items-start gap-3">
                <svg class="w-6 h-6 text-[#0369a1] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <div class="text-sm text-[#0369a1]">
                    <p class="font-semibold mb-2">What's Next?</p>
                    <p class="mb-2">We've received your order and will contact you shortly via phone or email to:</p>
                    <ul class="list-disc list-inside space-y-1 ml-2">
                        <li>Confirm your order details</li>
                        <li>Arrange payment (if applicable)</li>
                        <li>Schedule delivery or pickup</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="{{ route('products.index') }}" class="bg-[#7d6a52] text-white px-6 py-3 rounded-full font-semibold hover:bg-[#9d8566] transition-all shadow-lg hover:shadow-xl text-center">
                Continue Shopping
            </a>
            <a href="{{ route('home') }}" class="bg-white text-[#7d6a52] border-2 border-[#7d6a52] px-6 py-3 rounded-full font-semibold hover:bg-[#f5f0e8] transition-all text-center">
                Back to Home
            </a>
        </div>
    </div>
</div>
@endsection

