@extends('layouts.app')

@section('title', 'Order Placed Successfully - ECA Networks')

@section('content')
<div class="max-w-2xl mx-auto px-4 py-16 text-center">
    <!-- Success Icon -->
    <div class="w-24 h-24 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
        <i class="fas fa-check-circle text-green-500 text-5xl"></i>
    </div>

    <h1 class="text-3xl font-bold text-navy mb-3">Order Placed Successfully!</h1>
    <p class="text-gray-500 mb-2">Thank you for shopping with ECA Networks.</p>
    <p class="text-gray-500 mb-8">We've received your order and will process it shortly.</p>

    <!-- Order Number Badge -->
    <div class="inline-block bg-electric-blue/10 border-2 border-electric-blue/20 rounded-2xl px-8 py-4 mb-8">
        <p class="text-sm text-gray-500 mb-1">Your Order Number</p>
        <p class="text-2xl font-bold text-electric-blue tracking-wider">{{ $order->order_number }}</p>
    </div>

    <!-- Order Details Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-8 text-left">
        <h2 class="text-lg font-bold text-navy mb-4">Order Details</h2>

        <!-- Order Items -->
        <div class="space-y-3 mb-5">
            @foreach($order->orderItems as $item)
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 bg-gray-50 rounded-lg overflow-hidden border border-gray-100 shrink-0">
                    @if($item->product_image)
                    <img src="{{ Storage::url($item->product_image) }}" alt="{{ $item->product_name }}" class="w-full h-full object-contain p-1">
                    @else
                    <div class="w-full h-full flex items-center justify-center"><i class="fas fa-image text-gray-300 text-sm"></i></div>
                    @endif
                </div>
                <div class="flex-1">
                    <p class="text-sm font-medium text-navy">{{ $item->product_name }}</p>
                    <p class="text-xs text-gray-500">Qty: {{ $item->quantity }}</p>
                </div>
                <p class="text-sm font-bold text-navy">KES {{ number_format($item->subtotal) }}</p>
            </div>
            @endforeach
        </div>

        <!-- Totals -->
        <div class="border-t border-gray-100 pt-4 space-y-2 text-sm">
            <div class="flex justify-between">
                <span class="text-gray-600">Subtotal</span>
                <span>KES {{ number_format($order->subtotal) }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-600">Shipping</span>
                @if($order->shipping_fee == 0)
                <span class="text-green-600">Free</span>
                @else
                <span>KES {{ number_format($order->shipping_fee) }}</span>
                @endif
            </div>
            <div class="flex justify-between font-bold text-base border-t border-gray-100 pt-2">
                <span>Total</span>
                <span class="text-electric-blue">KES {{ number_format($order->total) }}</span>
            </div>
        </div>

        <!-- Shipping Info -->
        <div class="mt-5 pt-5 border-t border-gray-100">
            <h3 class="font-semibold text-navy mb-3 text-sm">Delivery Information</h3>
            <div class="grid grid-cols-2 gap-2 text-sm text-gray-600">
                <div>
                    <p class="font-medium text-gray-700">Name</p>
                    <p>{{ $order->shipping_name }}</p>
                </div>
                <div>
                    <p class="font-medium text-gray-700">Phone</p>
                    <p>{{ $order->shipping_phone }}</p>
                </div>
                <div class="col-span-2">
                    <p class="font-medium text-gray-700">Address</p>
                    <p>{{ $order->shipping_address }}, {{ $order->shipping_city }}, {{ $order->shipping_country }}</p>
                </div>
                <div>
                    <p class="font-medium text-gray-700">Payment Method</p>
                    <p class="capitalize">{{ str_replace('_', ' ', $order->payment_method) }}</p>
                </div>
                <div>
                    <p class="font-medium text-gray-700">Payment Status</p>
                    <span class="inline-block px-2 py-0.5 rounded-full text-xs font-semibold {{ $order->payment_status === 'paid' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700' }}">
                        {{ ucfirst($order->payment_status) }}
                    </span>
                </div>
            </div>
        </div>
    </div>

    @if($order->payment_method === 'mpesa' && $order->payment_status !== 'paid')
    <div class="bg-green-50 border border-green-200 rounded-2xl p-5 mb-8 text-left">
        <h3 class="font-semibold text-green-800 mb-2 flex items-center gap-2">
            <i class="fas fa-mobile-alt"></i> M-Pesa Payment Instructions
        </h3>
        <ol class="text-sm text-green-700 space-y-1 list-decimal pl-4">
            <li>Go to M-Pesa on your phone</li>
            <li>Select "Lipa na M-Pesa" then "Pay Bill"</li>
            <li>Enter Business Number: <strong>522533</strong></li>
            <li>Enter Account Number: <strong>{{ $order->order_number }}</strong></li>
            <li>Enter Amount: <strong>KES {{ number_format($order->total) }}</strong></li>
            <li>Enter your M-Pesa PIN and confirm</li>
        </ol>
    </div>
    @endif

    <!-- Actions -->
    <div class="flex gap-4 justify-center">
        <a href="{{ route('account.orders') }}" class="flex items-center gap-2 border-2 border-navy text-navy px-6 py-3 rounded-xl font-semibold hover:bg-navy hover:text-white transition-colors">
            <i class="fas fa-list"></i> View Orders
        </a>
        <a href="{{ route('products.index') }}" class="flex items-center gap-2 bg-electric-blue text-white px-6 py-3 rounded-xl font-semibold hover:bg-blue-dark transition-colors">
            <i class="fas fa-shopping-bag"></i> Continue Shopping
        </a>
    </div>
</div>
@endsection