@extends('layouts.app')

@section('title', 'Order Details')

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Order Details</h1>
            <p class="text-gray-700 dark:text-gray-300">{{ $order->source_display }} Order - {{ $order->order_date->format('d M Y') }}</p>
        </div>
        <div class="flex items-center gap-3">
            @if($order->payment_status === 'pending')
                <form action="{{ route('agent-orders.verify-payment', $order) }}" method="POST"
                      onsubmit="return confirm('Verify payment for this order? This will calculate commissions.');">
                    @csrf
                    <button type="submit" class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        Verify Payment
                    </button>
                </form>
            @endif
            @if($order->payment_status !== 'cancelled')
                <form action="{{ route('agent-orders.cancel', $order) }}" method="POST"
                      onsubmit="return confirm('Are you sure you want to cancel this order?');">
                    @csrf
                    <button type="submit" class="inline-flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                        Cancel Order
                    </button>
                </form>
            @endif
            <a href="{{ route('agent-orders.index') }}"
               class="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700">
                <svg class="w-4 h-4" 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
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Order Info -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Status Banner -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
                <div class="flex items-center justify-between">
                    <div>
                        <span class="text-sm text-gray-500 dark:text-gray-400">Payment Status</span>
                        <div class="mt-1">
                            <span class="px-3 py-1 inline-flex text-sm font-semibold rounded-full {{ $order->status_badge_class }}">
                                {{ $order->status_display }}
                            </span>
                        </div>
                    </div>
                    <div>
                        <span class="text-sm text-gray-500 dark:text-gray-400">Source</span>
                        <div class="mt-1">
                            <span class="px-3 py-1 inline-flex text-sm font-semibold rounded-full {{ $order->source === 'online' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400' : 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400' }}">
                                {{ $order->source_display }}
                            </span>
                        </div>
                    </div>
                    <div class="text-right">
                        <span class="text-sm text-gray-500 dark:text-gray-400">Order Date</span>
                        <div class="mt-1 font-medium text-gray-900 dark:text-white">{{ $order->order_date->format('d M Y, H:i') }}</div>
                    </div>
                </div>
            </div>

            <!-- Customer Info -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Customer Information</h3>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <span class="text-sm text-gray-500 dark:text-gray-400">Name</span>
                        <p class="font-medium text-gray-900 dark:text-white">{{ $order->customer_name }}</p>
                    </div>
                    <div>
                        <span class="text-sm text-gray-500 dark:text-gray-400">Phone</span>
                        <p class="font-medium text-gray-900 dark:text-white">{{ $order->customer_phone ?: '-' }}</p>
                    </div>
                    <div>
                        <span class="text-sm text-gray-500 dark:text-gray-400">Email</span>
                        <p class="font-medium text-gray-900 dark:text-white">{{ $order->customer_email ?: '-' }}</p>
                    </div>
                    <div>
                        <span class="text-sm text-gray-500 dark:text-gray-400">Address</span>
                        <p class="font-medium text-gray-900 dark:text-white">{{ $order->customer_address ?: '-' }}</p>
                    </div>
                </div>
            </div>

            <!-- Order Items -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Order Items</h3>
                </div>
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead class="bg-gray-50 dark:bg-gray-700">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Product</th>
                            <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Qty</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Unit Price</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Total</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                        @foreach($order->items as $item)
                        <tr>
                            <td class="px-6 py-4">
                                <div class="text-sm font-medium text-gray-900 dark:text-white">{{ $item->product_name }}</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400 font-mono">{{ $item->product_sku }}</div>
                            </td>
                            <td class="px-6 py-4 text-center text-sm text-gray-900 dark:text-white">{{ $item->quantity }}</td>
                            <td class="px-6 py-4 text-right text-sm text-gray-900 dark:text-white">RM {{ number_format($item->unit_price, 2) }}</td>
                            <td class="px-6 py-4 text-right text-sm font-medium text-gray-900 dark:text-white">RM {{ number_format($item->total_price, 2) }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                    <tfoot class="bg-gray-50 dark:bg-gray-700">
                        <tr>
                            <td colspan="3" class="px-6 py-3 text-right text-sm text-gray-500 dark:text-gray-400">Subtotal</td>
                            <td class="px-6 py-3 text-right text-sm font-medium text-gray-900 dark:text-white">RM {{ number_format($order->subtotal, 2) }}</td>
                        </tr>
                        @if($order->discount_amount > 0)
                        <tr>
                            <td colspan="3" class="px-6 py-3 text-right text-sm text-gray-500 dark:text-gray-400">Discount</td>
                            <td class="px-6 py-3 text-right text-sm font-medium text-red-600 dark:text-red-400">- RM {{ number_format($order->discount_amount, 2) }}</td>
                        </tr>
                        @endif
                        <tr>
                            <td colspan="3" class="px-6 py-3 text-right text-sm font-bold text-gray-900 dark:text-white">Total</td>
                            <td class="px-6 py-3 text-right text-lg font-bold text-indigo-600 dark:text-indigo-400">RM {{ number_format($order->total_amount, 2) }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <!-- Commissions -->
            @if($order->commissions->count() > 0)
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Commissions</h3>
                </div>
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead class="bg-gray-50 dark:bg-gray-700">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Agent</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Tier</th>
                            <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Rate</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Commission</th>
                            <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                        @foreach($order->commissions as $commission)
                        <tr>
                            <td class="px-6 py-4">
                                <a href="{{ route('agents.show', $commission->agent) }}" class="text-indigo-600 dark:text-indigo-400 hover:underline font-medium">
                                    {{ $commission->agent->name }}
                                </a>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">Level {{ $commission->tier_level }}</td>
                            <td class="px-6 py-4 text-center text-sm text-gray-900 dark:text-white">{{ $commission->commission_rate }}%</td>
                            <td class="px-6 py-4 text-right text-sm font-medium text-gray-900 dark:text-white">RM {{ number_format($commission->commission_amount, 2) }}</td>
                            <td class="px-6 py-4 text-center">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $commission->status_badge_class }}">
                                    {{ $commission->status_display }}
                                </span>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                    <tfoot class="bg-gray-50 dark:bg-gray-700">
                        <tr>
                            <td colspan="3" class="px-6 py-3 text-right text-sm font-bold text-gray-900 dark:text-white">Total Commission</td>
                            <td class="px-6 py-3 text-right text-sm font-bold text-green-600 dark:text-green-400">RM {{ number_format($order->getTotalCommissions(), 2) }}</td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="lg:col-span-1 space-y-6">
            <!-- Agent Info -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Agent</h3>
                <div class="text-center mb-4">
                    <div class="w-16 h-16 mx-auto rounded-full bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center mb-3">
                        <span class="text-xl font-bold text-indigo-600 dark:text-indigo-400">{{ strtoupper(substr($order->agent->name, 0, 2)) }}</span>
                    </div>
                    <a href="{{ route('agents.show', $order->agent) }}" class="text-lg font-semibold text-indigo-600 dark:text-indigo-400 hover:underline">
                        {{ $order->agent->name }}
                    </a>
                    <p class="text-sm text-gray-500 dark:text-gray-400 font-mono">{{ $order->agent->coupon_code }}</p>
                </div>
                <div class="space-y-2 text-sm">
                    <div class="flex justify-between">
                        <span class="text-gray-500 dark:text-gray-400">Performance Tier:</span>
                        <span class="font-medium text-gray-900 dark:text-white">{{ $order->agent->performanceTier->name ?? 'Basic' }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500 dark:text-gray-400">Commission Rate:</span>
                        <span class="font-medium text-gray-900 dark:text-white">{{ $order->agent->performanceTier->commission_rate ?? '15' }}%</span>
                    </div>
                </div>
            </div>

            <!-- Payment Verification -->
            @if($order->verifiedBy)
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Payment Verification</h3>
                <div class="space-y-2 text-sm">
                    <div class="flex justify-between">
                        <span class="text-gray-500 dark:text-gray-400">Verified By:</span>
                        <span class="font-medium text-gray-900 dark:text-white">{{ $order->verifiedBy->name }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500 dark:text-gray-400">Verified At:</span>
                        <span class="font-medium text-gray-900 dark:text-white">{{ $order->payment_verified_at->format('d M Y, H:i') }}</span>
                    </div>
                </div>
            </div>
            @endif

            <!-- Source Reference -->
            @if($order->source_order_id)
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Source Reference</h3>
                <p class="text-sm font-mono text-gray-900 dark:text-white">{{ $order->source_order_id }}</p>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection