@extends('agent.layouts.app')

@section('title', 'My Profile')

@section('content')
<div class="py-6">
    <div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
        <div class="mb-6">
            <h1 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">My Profile</h1>
            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">View and manage your profile information</p>
        </div>

        <!-- Profile Card -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
            <div class="bg-gradient-to-r from-indigo-600 to-purple-600 px-6 py-8">
                <div class="flex items-center">
                    <div class="w-20 h-20 rounded-full bg-white/20 flex items-center justify-center">
                        <span class="text-3xl font-bold text-white">{{ strtoupper(substr($agent->name, 0, 2)) }}</span>
                    </div>
                    <div class="ml-6">
                        <h2 class="text-2xl font-bold text-white">{{ $agent->name }}</h2>
                        <p class="text-indigo-100">{{ $agent->email }}</p>
                        <span class="inline-flex items-center rounded-full px-3 py-1 text-sm font-medium bg-white/20 text-white mt-2">
                            {{ $agent->commissionProgram->name ?? ($agent->performanceTier->name ?? "Basic") }}
                        </span>
                    </div>
                </div>
            </div>

            <div class="p-6 space-y-6">
                <!-- Account Info -->
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Account Information</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                            <p class="text-xs text-gray-500 dark:text-gray-400 uppercase">Matrix ID</p>
                            <p class="text-lg font-mono font-bold text-indigo-600 dark:text-indigo-400">{{ $agent->coupon_code }}</p>
                        </div>
                        <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                            <p class="text-xs text-gray-500 dark:text-gray-400 uppercase">Commission Rate</p>
                            <p class="text-lg font-bold text-gray-900 dark:text-white">{{ number_format($agent->getPersonalCommissionRate(), 0) }}%</p>
                        </div>
                        <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                            <p class="text-xs text-gray-500 dark:text-gray-400 uppercase">Status</p>
                            <span class="inline-flex items-center rounded-full px-2 py-1 text-sm font-medium {{ $agent->status === 'active' ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400' }}">
                                {{ ucfirst($agent->status) }}
                            </span>
                        </div>
                        <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                            <p class="text-xs text-gray-500 dark:text-gray-400 uppercase">Member Since</p>
                            <p class="text-lg font-bold text-gray-900 dark:text-white">{{ $agent->created_at->format('d M Y') }}</p>
                        </div>
                    </div>
                </div>

                <!-- Personal Info -->
                <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Personal Information</h3>
                    <dl class="space-y-4">
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500 dark:text-gray-400">Full Name</dt>
                            <dd class="text-sm font-medium text-gray-900 dark:text-white">{{ $agent->name }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500 dark:text-gray-400">IC Number</dt>
                            <dd class="text-sm font-medium text-gray-900 dark:text-white font-mono">{{ $agent->ic_number ?: '-' }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500 dark:text-gray-400">Email</dt>
                            <dd class="text-sm font-medium text-gray-900 dark:text-white">{{ $agent->email }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500 dark:text-gray-400">Phone</dt>
                            <dd class="text-sm font-medium text-gray-900 dark:text-white">{{ $agent->phone ?: '-' }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500 dark:text-gray-400">Address</dt>
                            <dd class="text-sm font-medium text-gray-900 dark:text-white text-right max-w-xs">{{ $agent->full_address ?: '-' }}</dd>
                        </div>
                    </dl>

                    @if(!$agent->ic_number || !$agent->full_address)
                    <div class="mt-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-3">
                        <div class="flex items-start">
                            <svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2 mt-0.5 shrink-0" 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-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                            </svg>
                            <div>
                                <p class="text-sm font-medium text-amber-800 dark:text-amber-200">Complete your profile</p>
                                <p class="text-xs text-amber-700 dark:text-amber-300 mt-1">Please add your IC number and address for official payslip documents (required for loan applications, hire purchase, etc.)</p>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>

                <!-- Upline Info -->
                @if($agent->upline)
                <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Your Upline</h3>
                    <div class="flex items-center">
                        <div class="w-12 h-12 rounded-full bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center">
                            <span class="text-lg font-bold text-indigo-600 dark:text-indigo-400">{{ strtoupper(substr($agent->upline->name, 0, 2)) }}</span>
                        </div>
                        <div class="ml-4">
                            <p class="text-sm font-medium text-gray-900 dark:text-white">{{ $agent->upline->name }}</p>
                            <p class="text-sm text-gray-500 dark:text-gray-400">{{ $agent->upline->commissionProgram->name ?? ($agent->upline->performanceTier->name ?? "Basic") }}</p>
                        </div>
                    </div>
                </div>
                @endif

                <!-- Bank Info -->
                <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Bank Details</h3>
                    @if($agent->bank_name)
                        <dl class="space-y-4">
                            <div class="flex justify-between">
                                <dt class="text-sm text-gray-500 dark:text-gray-400">Bank Name</dt>
                                <dd class="text-sm font-medium text-gray-900 dark:text-white">{{ $agent->bank_name }}</dd>
                            </div>
                            <div class="flex justify-between">
                                <dt class="text-sm text-gray-500 dark:text-gray-400">Account Number</dt>
                                <dd class="text-sm font-medium text-gray-900 dark:text-white font-mono">{{ $agent->bank_account_number }}</dd>
                            </div>
                            <div class="flex justify-between">
                                <dt class="text-sm text-gray-500 dark:text-gray-400">Account Holder</dt>
                                <dd class="text-sm font-medium text-gray-900 dark:text-white">{{ $agent->bank_account_name }}</dd>
                            </div>
                        </dl>
                    @else
                        <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
                            <div class="flex">
                                <svg class="w-5 h-5 text-yellow-600 dark:text-yellow-400 mr-3" 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-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                                </svg>
                                <div>
                                    <p class="text-sm font-medium text-yellow-800 dark:text-yellow-200">No bank details provided</p>
                                    <p class="text-sm text-yellow-700 dark:text-yellow-300 mt-1">Please add your bank details to receive payouts.</p>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>

                <!-- Actions -->
                <div class="border-t border-gray-200 dark:border-gray-700 pt-6 flex flex-wrap gap-4">
                    <a href="{{ route('agent.profile.edit') }}"
                       class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                        <svg class="w-5 h-5 mr-2" 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 Profile
                    </a>
                    <a href="{{ route('agent.profile.public') }}"
                       class="inline-flex items-center px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                        </svg>
                        Public Profile
                    </a>
                    <a href="{{ route('agent.profile.change-password') }}"
                       class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
                        </svg>
                        Change Password
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection