@extends('layouts.app')

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

@section('content')
<div class="max-w-7xl 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">{{ $agent->name }}</h1>
            <p class="text-gray-700 dark:text-gray-300">Agent Details &amp; Performance</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('agents.edit', $agent) }}"
               class="inline-flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                </svg>
                Edit
            </a>
            <a href="{{ route('agents.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 to List
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Agent Info Card -->
        <div class="lg:col-span-1">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <div class="text-center mb-6">
                    <div class="w-20 h-20 mx-auto rounded-full bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center mb-4">
                        <span class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">{{ strtoupper(substr($agent->name, 0, 2)) }}</span>
                    </div>
                    <h2 class="text-xl font-bold text-gray-900 dark:text-white">{{ $agent->name }}</h2>
                    <span class="px-3 py-1 inline-flex text-sm font-semibold rounded-full {{ $agent->status_badge_class }}">
                        {{ $agent->status_display }}
                    </span>
                </div>

                <div class="space-y-4">
                    <div>
                        <label class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">Matrix ID</label>
                        <p class="text-lg font-mono font-bold text-indigo-600 dark:text-indigo-400">{{ $agent->coupon_code }}</p>
                    </div>

                    <div>
                        <label class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">Performance Tier</label>
                        @if($agent->performanceTier)
                            <p class="text-gray-900 dark:text-white">{{ $agent->performanceTier->name }} ({{ $agent->performanceTier->commission_rate }}%)</p>
                        @else
                            <p class="text-gray-500 dark:text-gray-400 italic">Basic (default)</p>
                        @endif
                    </div>

                    <div>
                        <label class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">Email</label>
                        <p class="text-gray-900 dark:text-white">{{ $agent->email }}</p>
                    </div>

                    @if($agent->phone)
                    <div>
                        <label class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">Phone</label>
                        <p class="text-gray-900 dark:text-white">{{ $agent->phone }}</p>
                    </div>
                    @endif

                    <div>
                        <label class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">Upline</label>
                        @if($agent->upline)
                            <p>
                                <a href="{{ route('agents.show', $agent->upline) }}" class="text-indigo-600 dark:text-indigo-400 hover:underline">
                                    {{ $agent->upline->name }}
                                </a>
                            </p>
                        @else
                            <p class="text-gray-500 dark:text-gray-400 italic">None</p>
                        @endif
                    </div>

                    <div>
                        <label class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">Member Since</label>
                        <p class="text-gray-900 dark:text-white">{{ $agent->created_at->format('d M Y') }}</p>
                    </div>
                </div>

                <!-- Banking Info -->
                @if($agent->bank_name)
                <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">Banking Details</h3>
                    <div class="space-y-2 text-sm">
                        <p><span class="text-gray-500 dark:text-gray-400">Bank:</span> {{ $agent->bank_name }}</p>
                        <p><span class="text-gray-500 dark:text-gray-400">Account:</span> {{ $agent->bank_account_number }}</p>
                        <p><span class="text-gray-500 dark:text-gray-400">Holder:</span> {{ $agent->bank_account_name }}</p>
                    </div>
                </div>
                @endif
            </div>
        </div>

        <!-- Stats & Activity -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Stats Cards -->
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
                    <div class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">Total Orders</div>
                    <div class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ number_format($stats['total_orders']) }}</div>
                </div>
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
                    <div class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">Total Sales</div>
                    <div class="text-2xl font-bold text-gray-900 dark:text-white mt-1">RM {{ number_format($stats['total_sales'], 2) }}</div>
                </div>
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
                    <div class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">Team Size</div>
                    <div class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ number_format($stats['team_size']) }}</div>
                </div>
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
                    <div class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">Pending Commission</div>
                    <div class="text-2xl font-bold text-yellow-600 dark:text-yellow-400 mt-1">RM {{ number_format($stats['pending_commissions'], 2) }}</div>
                </div>
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
                    <div class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">Approved Commission</div>
                    <div class="text-2xl font-bold text-blue-600 dark:text-blue-400 mt-1">RM {{ number_format($stats['approved_commissions'], 2) }}</div>
                </div>
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
                    <div class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">Paid Commission</div>
                    <div class="text-2xl font-bold text-green-600 dark:text-green-400 mt-1">RM {{ number_format($stats['paid_commissions'], 2) }}</div>
                </div>
            </div>

            <!-- Downlines -->
            @if($downlines->total() > 0)
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Team Members ({{ $downlines->total() }})</h3>
                    <div class="flex items-center gap-2">
                        <span class="text-sm text-gray-500 dark:text-gray-400">Show:</span>
                        <select onchange="window.location.href='{{ route('agents.show', $agent) }}?per_page=' + this.value"
                                class="text-sm border-gray-300 dark:border-gray-600 dark:bg-gray-700 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                            <option value="25" {{ $perPage == 25 ? 'selected' : '' }}>25</option>
                            <option value="50" {{ $perPage == 50 ? 'selected' : '' }}>50</option>
                            <option value="100" {{ $perPage == 100 ? 'selected' : '' }}>100</option>
                        </select>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <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">Name</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Matrix ID</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-left 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($downlines as $downline)
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <a href="{{ route('agents.show', $downline) }}" class="text-indigo-600 dark:text-indigo-400 hover:underline font-medium">
                                        {{ $downline->name }}
                                    </a>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap font-mono text-sm">{{ $downline->coupon_code }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm">{{ $downline->performanceTier->name ?? 'Basic' }}</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $downline->status_badge_class }}">
                                        {{ $downline->status_display }}
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @if($downlines->hasPages())
                <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
                    {{ $downlines->links() }}
                </div>
                @endif
            </div>
            @endif

            <!-- Recent Orders -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Orders</h3>
                    <a href="{{ route('agent-orders.index', ['agent_id' => $agent->id]) }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">View All</a>
                </div>
                @if($agent->orders->count() > 0)
                <div class="overflow-x-auto">
                    <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">Date</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Customer</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Total</th>
                                <th class="px-6 py-3 text-left 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($agent->orders as $order)
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                    {{ $order->order_date->format('d M Y') }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                                    {{ $order->customer_name }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                                    RM {{ number_format($order->total_amount, 2) }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $order->status_badge_class }}">
                                        {{ $order->status_display }}
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @else
                <div class="px-6 py-8 text-center text-gray-500 dark:text-gray-400">
                    No orders yet
                </div>
                @endif
            </div>

            <!-- Recent Commissions -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Commissions</h3>
                    <a href="{{ route('commissions.index', ['agent_id' => $agent->id]) }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">View All</a>
                </div>
                @if($agent->commissions->count() > 0)
                <div class="overflow-x-auto">
                    <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">Date</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Order Amount</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Rate</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Commission</th>
                                <th class="px-6 py-3 text-left 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($agent->commissions as $commission)
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                    {{ $commission->created_at->format('d M Y') }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                                    RM {{ number_format($commission->base_amount, 2) }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                    {{ $commission->commission_rate }}%
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
                                    RM {{ number_format($commission->commission_amount, 2) }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <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>
                    </table>
                </div>
                @else
                <div class="px-6 py-8 text-center text-gray-500 dark:text-gray-400">
                    No commissions yet
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection