@extends('layout.admin')

@section('content')
@php
    $adminUser = auth('admin')->user();
    $canActivateUsers = $adminUser?->hasAnyProjectPermission(['users', 'users_activate']) ?? true;
    $canLoginAsUser = $adminUser?->hasAnyProjectPermission(['users', 'users_login']) ?? true;
@endphp

<div class="p-2 bg-gray-100 min-h-screen">
    <h2 class="text-2xl font-bold mb-3 text-gray-800">আনভেরিফাইড ইউজারগণ</h2>

    <form method="GET" action="{{ route('admin.users.inactive') }}" class="mb-4 flex items-center gap-2">
        <input type="text" name="search" value="{{ request('search') }}"
            placeholder="নাম, মোবাইল, অথবা এফিলিয়েট আইডি দিয়ে খুঁজুন"
            class="px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 w-full max-w-md">
        <button type="submit"
            class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm shadow">
            খুঁজুন
        </button>
    </form>

    @if(session('success'))
        <div class="mb-3 p-3 bg-green-50 border border-green-400 text-green-800 rounded shadow-sm">
            {{ session('success') }}
        </div>
    @endif

    @if($inactiveUsers->count())
        <div class="space-y-6">
            @foreach($inactiveUsers as $user)
                @php
                    $upline = \App\Models\User::where('referral_code', $user->referred_by)->first();
                @endphp

                <div class="bg-white rounded-2xl shadow border border-gray-200 overflow-hidden">

                    <!-- Cover & Profile Pic -->
            <div class="relative">
                <div class="h-28 bg-gradient-to-r from-red-600 to-orange-600"></div>
                <div class="absolute -bottom-10 left-1/2 transform -translate-x-1/2">
                    <img src="{{ asset('images/profile/' . $user->profile_photo) }}"
                         alt="Profile"
                         class="w-20 h-20 rounded-full border-4 border-white object-cover shadow">
                </div>
            </div>
            
                    <!-- Content -->
                    <div class="pt-12 px-4 pb-4">

                        <!-- Name + Status -->
                        <div class="flex justify-center items-center gap-2 mb-1">
                            <h3 class="text-lg font-bold text-gray-800">{{ $user->name }}</h3>
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </div>

                        <!-- Mobile -->
                        <div class="text-center text-base font-semibold text-gray-700 mb-2">
                            {{ $user->mobile }}
                        </div>

                        <!-- Balance & Voucher -->
                        <div class="flex justify-between gap-2 mb-2">
                            <div class="flex-1 bg-gray-50 border border-gray-200 rounded-xl p-2 text-center shadow-sm">
                                <div class="text-xs text-gray-500">ব্যালেন্স</div>
                                <div class="text-sm font-bold text-gray-800">{{ number_format($user->balance, 2) }} ৳</div>
                            </div>
                            <div class="flex-1 bg-gray-50 border border-gray-200 rounded-xl p-2 text-center shadow-sm">
                                <div class="text-xs text-gray-500">ভাউচার</div>
                                <div class="text-sm font-bold text-gray-800">{{ number_format($user->voucher_balance ?? 0, 2) }} ৳</div>
                            </div>
                        </div>

                        <!-- Affiliate & Upline -->
                        <div class="flex justify-between gap-2 mb-2">
                            <div class="flex-1 bg-gray-50 border border-gray-200 rounded-xl p-2 text-center shadow-sm">
                                <div class="text-xs text-gray-500 mb-0.5">এফিলিয়েট</div>
                                <div class="text-xs font-bold text-gray-800 flex items-center justify-center gap-1">
                                    <span id="referral-{{ $user->id }}">{{ $user->referral_code ?? 'N/A' }}</span>
                                    @if($user->referral_code)
                                    <button onclick="copyToClipboard('referral-{{ $user->id }}')" title="কপি করুন">
                                        <svg class="w-4 h-4 text-gray-500 hover:text-gray-700" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8l6 6v4"></path>
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M8 16h8a2 2 0 002-2V8m-6 4h6"></path>
                                        </svg>
                                    </button>
                                    @endif
                                </div>
                            </div>
                            <div class="flex-1 bg-gray-50 border border-gray-200 rounded-xl p-2 text-center shadow-sm">
                                <div class="text-xs text-gray-500 mb-0.5">আপলাইন</div>
                                <div class="text-xs font-bold text-gray-800 flex items-center justify-center gap-1">
                                    <span id="upline-{{ $user->id }}">{{ $upline ? $upline->mobile : 'N/A' }}</span>
                                    @if($upline)
                                    <button onclick="copyToClipboard('upline-{{ $user->id }}')" title="কপি করুন">
                                        <svg class="w-4 h-4 text-gray-500 hover:text-gray-700" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8l6 6v4"></path>
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M8 16h8a2 2 0 002-2V8m-6 4h6"></path>
                                        </svg>
                                    </button>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- Dates -->
                        <div class="flex justify-between text-xs text-gray-800 mb-2 font-bold">
                            <span>রেজিঃ {{ $user->created_at->format('d-m-Y') }}</span>
                            <span>ভেরিঃ {{ $user->activated_at ? $user->activated_at->format('d-m-Y') : 'N/A' }}</span>
                        </div>

                        <!-- Action Buttons -->
                        @if($canActivateUsers || $canLoginAsUser)
                            <div class="flex flex-col gap-2">
                                @if($canActivateUsers)
                                    <form method="POST" action="{{ route('admin.users.activate', $user->id) }}"
                                          onsubmit="return confirm('আপনি কি Activate করতে চান?');">
                                        @csrf
                                        <button type="submit"
                                            class="w-full px-3 py-1.5 text-xs font-semibold text-green-600 border border-green-600 rounded-full hover:bg-green-600 hover:text-white transition">
                                            ✅ ভেরিফাই করুন
                                        </button>
                                    </form>
                                @endif

                                @if($canLoginAsUser)
                                    <form method="POST" action="{{ route('admin.users.login', $user->id) }}">
                                        @csrf
                                        <input type="hidden" name="admin_password" id="admin_password_{{ $user->id }}">
                                        <button type="button"
                                           class="block w-full text-center px-3 py-1.5 text-xs font-semibold text-purple-600 border border-purple-600 rounded-full hover:bg-purple-600 hover:text-white transition"
                                           onclick="askAdminPassword({{ $user->id }})">
                                           Login To User
                                        </button>
                                    </form>
                                @endif
                            </div>
                        @endif

                    </div>
                </div>
            @endforeach
        </div>

        {{-- Pagination --}}
        <div class="mt-4">
            {{ $inactiveUsers->links() }}
        </div>
    @else
        <p class="text-gray-500 italic">কোনো আনভেরিফাইড ইউজার নেই।</p>
    @endif

</div>

<script>
    function askAdminPassword(id) {
        const password = prompt('Enter security password');
        if (!password) return;
        const input = document.getElementById('admin_password_' + id);
        if (!input) return;
        input.value = password;
        input.form.submit();
    }

    function copyToClipboard(elementId) {
        const text = document.getElementById(elementId).textContent;
        navigator.clipboard.writeText(text).then(function() {
            alert('কপি হয়েছে: ' + text);
        });
    }
</script>

@endsection
