@extends('layouts.app')

@section('title', 'Order ' . $order->order_number)

@section('content')
<div class="max-w-4xl mx-auto">
    <!-- Header -->
    <div class="mb-6 flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Order #{{ $order->order_number }}</h1>
            <p class="mt-1 text-sm text-gray-600">Placed on {{ $order->order_date->format('M j, Y g:i A') }}</p>
        </div>
        <div class="flex space-x-3">
            <a href="{{ route('orders.index') }}" 
               class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                </svg>
                Back to Orders
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Order Details -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Status Cards -->
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="bg-white p-4 rounded-lg shadow text-center">
                    <div class="text-2xl font-bold text-gray-900">{{ $order->items->sum('quantity') }}</div>
                    <div class="text-sm text-gray-600">Items</div>
                </div>
                <div class="bg-white p-4 rounded-lg shadow text-center">
                    <div class="text-2xl font-bold text-green-600">${{ number_format($order->total_amount, 2) }}</div>
                    <div class="text-sm text-gray-600">Total Amount</div>
                </div>
                <div class="bg-white p-4 rounded-lg shadow text-center">
                    <div class="text-sm font-medium {{ $order->getStatusBadgeClass() }} px-2 py-1 rounded-full">
                        {{ ucfirst($order->status) }}
                    </div>
                    <div class="text-sm text-gray-600 mt-1">Order Status</div>
                </div>
                <div class="bg-white p-4 rounded-lg shadow text-center">
                    <div class="text-sm font-medium {{ $order->getPaymentStatusBadgeClass() }} px-2 py-1 rounded-full">
                        {{ ucfirst($order->payment_status) }}
                    </div>
                    <div class="text-sm text-gray-600 mt-1">Payment</div>
                </div>
            </div>

            <!-- Order Items -->
            <div class="bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">Order Items</h3>
                </div>
                <div class="p-6">
                    @foreach($order->items as $item)
                        <div class="flex items-center space-x-4 py-4 {{ !$loop->last ? 'border-b border-gray-200' : '' }}">
                            <img src="{{ $item->product->getFirstImageUrl() }}" 
                                 alt="{{ $item->product->name }}"
                                 class="w-16 h-16 object-cover rounded">
                            <div class="flex-1">
                                <h4 class="font-medium text-gray-900">{{ $item->product->name }}</h4>
                                <p class="text-sm text-gray-600">Seller: {{ $item->product->user->company_name ?? $item->product->user->name }}</p>
                            </div>
                            <div class="text-right">
                                <p class="font-medium text-gray-900">${{ number_format($item->unit_price, 2) }}</p>
                                <p class="text-sm text-gray-600">Qty: {{ $item->quantity }}</p>
                                <p class="font-medium text-green-600">${{ number_format($item->total_price, 2) }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <!-- Shipping Information -->
            <div class="bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">Shipping Information</h3>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <h4 class="font-medium text-gray-900 mb-2">Shipping Address</h4>
                            <p class="text-gray-600 whitespace-pre-line">{{ $order->shipping_address }}</p>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-900 mb-2">Order Notes</h4>
                            <p class="text-gray-600">{{ $order->notes ?: 'No special instructions' }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Add this section after the shipping information -->
        @if($order->payment_method)
        <div class="bg-white shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">Payment Information</h3>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <h4 class="font-medium text-gray-900 mb-2">Payment Method</h4>
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium 
                            @if($order->payment_method === 'bank_transfer') bg-blue-100 text-blue-800
                            @elseif($order->payment_method === 'mpesa') bg-green-100 text-green-800
                            @elseif($order->payment_method === 'wire_transfer') bg-purple-100 text-purple-800
                            @else bg-gray-100 text-gray-800 @endif">
                            {{ str_replace('_', ' ', ucfirst($order->payment_method)) }}
                        </span>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-900 mb-2">Payment Status</h4>
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium {{ $order->getPaymentStatusBadgeClass() }}">
                            {{ ucfirst($order->payment_status) }}
                        </span>
                    </div>
                </div>
                
                @if($order->payment_status === 'pending')
                <div class="mt-4 bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                    <div class="flex">
                        <svg class="h-5 w-5 text-yellow-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/>
                        </svg>
                        <div class="text-sm text-yellow-700">
                            <p class="font-medium">Awaiting Payment</p>
                            <p class="mt-1">Please complete your payment using the selected payment method. The seller will process your order once payment is confirmed.</p>
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
        @endif

        <!-- Sidebar -->
        <div class="lg:col-span-1 space-y-6">
            <!-- Order Actions -->
            <div class="bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">Order Actions</h3>
                </div>
                <div class="p-6 space-y-4">
                    @if(auth()->user()->isSeller() && $order->seller_id === auth()->id())
                        <!-- Seller Actions -->
                        <form action="{{ route('orders.update-status', $order) }}" method="POST" class="space-y-3">
                            @csrf
                            <div>
                                <label for="status" class="block text-sm font-medium text-gray-700 mb-2">
                                    Update Order Status
                                </label>
                                <select name="status" id="status" 
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
                                    <option value="pending" {{ $order->status === 'pending' ? 'selected' : '' }}>Pending</option>
                                    <option value="confirmed" {{ $order->status === 'confirmed' ? 'selected' : '' }}>Confirmed</option>
                                    <option value="shipped" {{ $order->status === 'shipped' ? 'selected' : '' }}>Shipped</option>
                                    <option value="delivered" {{ $order->status === 'delivered' ? 'selected' : '' }}>Delivered</option>
                                    <option value="cancelled" {{ $order->status === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                                </select>
                            </div>
                            <button type="submit" 
                                    class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-md text-sm font-medium transition-colors">
                                Update Status
                            </button>
                        </form>
                    @endif

                    <!-- Chat with Seller/Buyer -->
                    @php
                        $chat = \App\Models\Chat::where('product_id', $order->items->first()->product_id)
                            ->where('buyer_id', $order->buyer_id)
                            ->where('seller_id', $order->seller_id)
                            ->first();
                    @endphp

                    @if($chat)
                        <a href="{{ route('chats.show', $chat) }}" 
                        class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md text-sm font-medium flex items-center justify-center transition-colors">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                            </svg>
                            Chat about this order
                        </a>
                    @endif
                </div>
            </div>

            <!-- Contact Information -->
            <div class="bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">Contact Information</h3>
                </div>
                <div class="p-6">
                    @if(auth()->user()->isBuyer())
                        <!-- Buyer sees seller info -->
                        <div class="flex items-center space-x-3 mb-4">
                            <div class="flex-shrink-0">
                                <div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
                                    <span class="text-green-600 font-medium text-sm">
                                        {{ strtoupper(substr($order->seller->name, 0, 1)) }}
                                    </span>
                                </div>
                            </div>
                            <div>
                                <p class="font-medium text-gray-900">{{ $order->seller->company_name ?? $order->seller->name }}</p>
                                <p class="text-sm text-gray-600">Seller</p>
                            </div>
                        </div>
                    @else
                        <!-- Seller sees buyer info -->
                        <div class="flex items-center space-x-3 mb-4">
                            <div class="flex-shrink-0">
                                <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
                                    <span class="text-blue-600 font-medium text-sm">
                                        {{ strtoupper(substr($order->buyer->name, 0, 1)) }}
                                    </span>
                                </div>
                            </div>
                            <div>
                                <p class="font-medium text-gray-900">{{ $order->buyer->name }}</p>
                                <p class="text-sm text-gray-600">Buyer</p>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection