@props(['user'])

<button 
    onclick="openDownlineModal{{ $user->id }}()" 
    class="inline-flex items-center px-3 py-1 text-xs font-medium text-blue-600 bg-blue-100 rounded-md hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-300 dark:hover:bg-blue-800 transition-colors"
>
    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
    </svg>
    Details
</button>

<!-- Modal -->
<div 
    id="downlineModal{{ $user->id }}" 
    class="fixed inset-0 z-50 flex items-center justify-center hidden overflow-y-auto bg-black bg-opacity-50"
    onclick="closeDownlineModal{{ $user->id }}(event)"
>
    <div 
        class="relative w-full max-w-xl p-6 mx-4 bg-white rounded-lg shadow-xl dark:bg-slate-800 max-h-[90vh] overflow-y-auto"
        onclick="event.stopPropagation()"
    >
        <!-- Close Button -->
        <button 
            onclick="closeDownlineModal{{ $user->id }}()" 
            class="absolute text-slate-400 top-4 right-4 hover:text-slate-600 dark:hover:text-slate-300"
        >
            <svg class="w-6 h-6" 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"></path>
            </svg>
        </button>

        <!-- Modal Header -->
        <div class="mb-6 pr-8">
            <div class="flex items-center space-x-4">
                <div class="flex-shrink-0">
                    <div class="flex items-center justify-center w-16 h-16 bg-orange-100 rounded-full dark:bg-orange-900">
                        <svg class="w-8 h-8 text-orange-600 dark:text-orange-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                    </div>
                </div>
                <div>
                    <h3 class="text-xl font-bold text-slate-900 dark:text-white">
                        {{ $user->first_name }} {{ $user->last_name }}
                    </h3>
                    <p class="text-sm text-slate-500 dark:text-slate-400">
                        {{ $user->username }}
                    </p>
                    <p class="text-xs text-slate-400 dark:text-slate-500">
                        {{ $user->email }}
                    </p>
                </div>
            </div>
        </div>

        <!-- Account Stats -->
        <!--<div class="grid grid-cols-2 gap-4 mb-6">-->
        <!--    <div class="p-4 border rounded-lg dark:border-slate-700 bg-slate-50 dark:bg-slate-900">-->
        <!--        <p class="text-xs font-medium text-slate-500 dark:text-slate-400">Balance</p>-->
        <!--        <p class="mt-1 text-lg font-bold text-slate-900 dark:text-white">-->
        <!--            ${{ number_format($user->balance ?? 0, 2) }}-->
        <!--        </p>-->
        <!--    </div>-->
        <!--    <div class="p-4 border rounded-lg dark:border-slate-700 bg-slate-50 dark:bg-slate-900">-->
        <!--        <p class="text-xs font-medium text-slate-500 dark:text-slate-400">Rebates</p>-->
        <!--        <p class="mt-1 text-lg font-bold text-slate-900 dark:text-white">-->
        <!--            ${{ number_format($user->rebates ?? 0, 2) }}-->
        <!--        </p>-->
        <!--    </div>-->
        <!--</div>-->

        <!-- Verification Status Section -->
        <div class="mb-6">
            <h4 class="mb-3 text-sm font-semibold text-slate-900 dark:text-white uppercase tracking-wide">
                Verification Status
            </h4>
            <div class="space-y-2">
                <!-- Email Verification -->
                <div class="flex items-center justify-between p-3 border rounded-lg dark:border-slate-700">
                    <div class="flex items-center space-x-3">
                        <div class="flex-shrink-0">
                            @if($user->email_verified_at)
                                <div class="flex items-center justify-center w-8 h-8 bg-green-100 rounded-full dark:bg-green-900">
                                    <svg class="w-5 h-5 text-green-600 dark:text-green-300" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                                    </svg>
                                </div>
                            @else
                                <div class="flex items-center justify-center w-8 h-8 bg-red-100 rounded-full dark:bg-red-900">
                                    <svg class="w-5 h-5 text-red-600 dark:text-red-300" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                                    </svg>
                                </div>
                            @endif
                        </div>
                        <div>
                            <p class="text-sm font-medium text-slate-900 dark:text-white">Email Verification</p>
                            <p class="text-xs text-slate-500 dark:text-slate-400">
                                @if($user->email_verified_at)
                                    Verified on {{ $user->email_verified_at->format('M d, Y') }}
                                @else
                                    Not verified
                                @endif
                            </p>
                        </div>
                    </div>
                    @if($user->email_verified_at)
                        <span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full dark:bg-green-900 dark:text-green-300">
                            Verified
                        </span>
                    @else
                        <span class="px-2 py-1 text-xs font-medium text-red-700 bg-red-100 rounded-full dark:bg-red-900 dark:text-red-300">
                            Unverified
                        </span>
                    @endif
                </div>

                <!-- KYC Verification -->
                <div class="flex items-center justify-between p-3 border rounded-lg dark:border-slate-700">
                    <div class="flex items-center space-x-3">
                        <div class="flex-shrink-0">
                            @if($user->kyc_status == 1)
                                <div class="flex items-center justify-center w-8 h-8 bg-green-100 rounded-full dark:bg-green-900">
                                    <svg class="w-5 h-5 text-green-600 dark:text-green-300" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
                                    </svg>
                                </div>
                            @elseif($user->kyc_status == 2)
                                <div class="flex items-center justify-center w-8 h-8 bg-yellow-100 rounded-full dark:bg-yellow-900">
                                    <svg class="w-5 h-5 text-yellow-600 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path>
                                    </svg>
                                </div>
                            @else
                                <div class="flex items-center justify-center w-8 h-8 bg-slate-100 rounded-full dark:bg-slate-700">
                                    <svg class="w-5 h-5 text-slate-600 dark:text-slate-300" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
                                    </svg>
                                </div>
                            @endif
                        </div>
                        <div>
                            <p class="text-sm font-medium text-slate-900 dark:text-white">KYC Verification</p>
                            <p class="text-xs text-slate-500 dark:text-slate-400">
                                @if($user->kyc_status == 1)
                                    Identity verified
                                @elseif($user->kyc_status == 2)
                                    Under review
                                @else
                                    Not submitted
                                @endif
                            </p>
                        </div>
                    </div>
                    @if($user->kyc_status == 1)
                        <span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full dark:bg-green-900 dark:text-green-300">
                            Approved
                        </span>
                    @elseif($user->kyc_status == 2)
                        <span class="px-2 py-1 text-xs font-medium text-yellow-700 bg-yellow-100 rounded-full dark:bg-yellow-900 dark:text-yellow-300">
                            Pending
                        </span>
                    @else
                        <span class="px-2 py-1 text-xs font-medium text-slate-700 bg-slate-100 rounded-full dark:bg-slate-700 dark:text-slate-300">
                            Not Done
                        </span>
                    @endif
                </div>
            </div>
        </div>

        <!-- AI Bots Section -->
        <div class="mb-6">
            <h4 class="mb-3 text-sm font-semibold text-slate-900 dark:text-white uppercase tracking-wide">
                AI Trading Bots
            </h4>
            <div class="grid grid-cols-2 gap-4">
                <div class="p-4 border rounded-lg dark:border-slate-700">
                    <div class="flex items-center space-x-2">
                        <div class="flex-shrink-0">
                            <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                        </div>
                        <p class="text-xs font-medium text-slate-500 dark:text-slate-400">Running Bots</p>
                    </div>
                    <p class="mt-2 text-2xl font-bold text-green-600 dark:text-green-400">
                        {{ $user->running_bots ?? 0 }}
                    </p>
                    @if(($user->running_bots_total ?? 0) > 0)
                        <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
                            USDT {{ number_format($user->running_bots_total, 2) }}
                        </p>
                    @endif
                </div>
                <div class="p-4 border rounded-lg dark:border-slate-700">
                    <div class="flex items-center space-x-2">
                        <div class="flex-shrink-0">
                            <div class="w-2 h-2 bg-slate-400 rounded-full"></div>
                        </div>
                        <p class="text-xs font-medium text-slate-500 dark:text-slate-400">Expired Bots</p>
                    </div>
                    <p class="mt-2 text-2xl font-bold text-slate-600 dark:text-slate-400">
                        {{ $user->expired_bots ?? 0 }}
                    </p>
                    @if(($user->expired_bots_total ?? 0) > 0)
                        <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
                            USDT {{ number_format($user->expired_bots_total, 2) }}
                        </p>
                    @endif
                </div>
            </div>
        </div>

        <!-- Manual Trades Section -->
        <div class="mb-6">
            <h4 class="mb-3 text-sm font-semibold text-slate-900 dark:text-white uppercase tracking-wide">
                Manual Trading Activity
            </h4>
            <div class="space-y-3">
                <!-- Manual Bids -->
                <div class="p-4 border rounded-lg dark:border-slate-700 bg-orange-50 dark:bg-orange-900/20">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-slate-900 dark:text-white">Manual Bids</p>
                            <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Total bids placed</p>
                        </div>
                        <div class="text-right">
                            <p class="text-2xl font-bold text-orange-600 dark:text-orange-400">
                                {{ $user->manual_bids_count ?? 0 }}
                            </p>
                            @if(($user->manual_bids_total ?? 0) > 0)
                                <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">
                                    USDT {{ number_format($user->manual_bids_total, 2) }}
                                </p>
                            @endif
                        </div>
                    </div>
                    @if(($user->manual_bids_successful ?? 0) > 0 || ($user->manual_bids_pending ?? 0) > 0)
                        <div class="flex gap-4 mt-3 pt-3 border-t border-orange-200 dark:border-orange-800">
                            <div class="flex-1">
                                <p class="text-xs text-slate-500 dark:text-slate-400">Successful</p>
                                <p class="text-sm font-semibold text-green-600 dark:text-green-400">
                                    {{ $user->manual_bids_successful ?? 0 }}
                                </p>
                            </div>
                            <div class="flex-1">
                                <p class="text-xs text-slate-500 dark:text-slate-400">Pending</p>
                                <p class="text-sm font-semibold text-yellow-600 dark:text-yellow-400">
                                    {{ $user->manual_bids_pending ?? 0 }}
                                </p>
                            </div>
                            <div class="flex-1">
                                <p class="text-xs text-slate-500 dark:text-slate-400">Failed</p>
                                <p class="text-sm font-semibold text-red-600 dark:text-red-400">
                                    {{ $user->manual_bids_failed ?? 0 }}
                                </p>
                            </div>
                        </div>
                    @endif
                </div>

                <!-- Manual Sells -->
                <div class="p-4 border rounded-lg dark:border-slate-700 bg-blue-50 dark:bg-blue-900/20">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-slate-900 dark:text-white">Manual Sells</p>
                            <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Total sells completed</p>
                        </div>
                        <div class="text-right">
                            <p class="text-2xl font-bold text-blue-600 dark:text-blue-400">
                                {{ $user->manual_sells_count ?? 0 }}
                            </p>
                            @if(($user->manual_sells_total ?? 0) > 0)
                                <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">
                                    USDT {{ number_format($user->manual_sells_total, 2) }}
                                </p>
                            @endif
                        </div>
                    </div>
                    @if(($user->manual_sells_successful ?? 0) > 0 || ($user->manual_sells_pending ?? 0) > 0)
                        <div class="flex gap-4 mt-3 pt-3 border-t border-blue-200 dark:border-blue-800">
                            <div class="flex-1">
                                <p class="text-xs text-slate-500 dark:text-slate-400">Successful</p>
                                <p class="text-sm font-semibold text-green-600 dark:text-green-400">
                                    {{ $user->manual_sells_successful ?? 0 }}
                                </p>
                            </div>
                            <div class="flex-1">
                                <p class="text-xs text-slate-500 dark:text-slate-400">Pending</p>
                                <p class="text-sm font-semibold text-yellow-600 dark:text-yellow-400">
                                    {{ $user->manual_sells_pending ?? 0 }}
                                </p>
                            </div>
                            <div class="flex-1">
                                <p class="text-xs text-slate-500 dark:text-slate-400">Failed</p>
                                <p class="text-sm font-semibold text-red-600 dark:text-red-400">
                                    {{ $user->manual_sells_failed ?? 0 }}
                                </p>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Additional Info -->
        <div class="pt-4 border-t dark:border-slate-700">
            <div class="flex items-center justify-between text-xs text-slate-500 dark:text-slate-400">
                <span>Member since {{ $user->created_at->format('M d, Y') }}</span>
                <span>ID: #{{ $user->id }}</span>
            </div>
        </div>
    </div>
</div>

<script>
    function openDownlineModal{{ $user->id }}() {
        document.getElementById('downlineModal{{ $user->id }}').classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeDownlineModal{{ $user->id }}(event) {
        if (!event || event.target.id === 'downlineModal{{ $user->id }}') {
            document.getElementById('downlineModal{{ $user->id }}').classList.add('hidden');
            document.body.style.overflow = 'auto';
        }
    }

    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            const modal = document.getElementById('downlineModal{{ $user->id }}');
            if (modal && !modal.classList.contains('hidden')) {
                closeDownlineModal{{ $user->id }}();
            }
        }
    });
</script>