@extends('layouts.app')
@section('title', 'Profile')
@section('show-header', true)
@section('page-title', 'My Profile')

@section('content')
<div class="px-4 pt-4 pb-6 space-y-4">
    {{-- Avatar & Stats --}}
    <div class="bg-gradient-to-b from-indigo-600/20 to-transparent border border-white/10 rounded-2xl p-4 text-center">
        <div class="relative inline-block mb-3">
            <img src="{{ $user->avatar_url }}" id="avatarPreview" class="w-20 h-20 rounded-full border-3 border-indigo-500 object-cover mx-auto" alt="">
            <label for="avatarInput" class="absolute bottom-0 right-0 w-7 h-7 bg-indigo-500 rounded-full flex items-center justify-center cursor-pointer hover:bg-indigo-600 transition shadow-lg">
                <svg class="w-3.5 h-3.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
            </label>
        </div>
        <h2 class="text-white font-bold text-lg">{{ $user->name }}</h2>
        <p class="text-gray-400 text-sm">{{ $user->phone }}</p>

        {{-- Stats --}}
        <div class="grid grid-cols-4 gap-2 mt-4">
            <div class="bg-white/5 rounded-xl p-2">
                <p class="text-white font-bold">{{ $user->total_matches }}</p>
                <p class="text-gray-500 text-xs">Matches</p>
            </div>
            <div class="bg-white/5 rounded-xl p-2">
                <p class="text-white font-bold">{{ $user->total_kills }}</p>
                <p class="text-gray-500 text-xs">Kills</p>
            </div>
            <div class="bg-white/5 rounded-xl p-2">
                <p class="text-white font-bold">{{ $user->total_wins }}</p>
                <p class="text-gray-500 text-xs">Wins</p>
            </div>
            <div class="bg-white/5 rounded-xl p-2">
                <p class="text-yellow-400 font-bold text-xs">৳{{ number_format($user->winning) }}</p>
                <p class="text-gray-500 text-xs">Earned</p>
            </div>
        </div>
    </div>

    {{-- Edit Profile --}}
    <div class="bg-white/5 border border-white/10 rounded-2xl p-4">
        <h3 class="text-white font-bold mb-4">Edit Profile</h3>
        <form method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data" class="space-y-3">
            @csrf
            <input type="file" id="avatarInput" name="avatar" accept="image/*" class="hidden" data-preview="avatarPreview">
            <div>
                <label class="text-xs text-gray-400 mb-1 block">Full Name</label>
                <input type="text" name="name" value="{{ old('name', $user->name) }}"
                    class="w-full bg-black/30 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:outline-none focus:border-indigo-500" required>
                @error('name')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="text-xs text-gray-400 mb-1 block">Email (optional)</label>
                <input type="email" name="email" value="{{ old('email', $user->email) }}" placeholder="your@email.com"
                    class="w-full bg-black/30 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:outline-none focus:border-indigo-500">
                @error('email')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
            </div>
            <button type="submit" class="w-full py-3 bg-indigo-500 hover:bg-indigo-600 text-white font-bold rounded-xl transition">
                Save Changes
            </button>
        </form>
    </div>

    {{-- Change Password --}}
    <div class="bg-white/5 border border-white/10 rounded-2xl p-4">
        <h3 class="text-white font-bold mb-4">Change Password</h3>
        <form method="POST" action="{{ route('profile.password') }}" class="space-y-3">
            @csrf
            <div>
                <label class="text-xs text-gray-400 mb-1 block">Current Password</label>
                <input type="password" name="current_password"
                    class="w-full bg-black/30 border @error('current_password') border-red-500 @else border-white/10 @enderror rounded-xl px-4 py-3 text-white text-sm focus:outline-none focus:border-indigo-500" required>
                @error('current_password')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="text-xs text-gray-400 mb-1 block">New Password</label>
                <input type="password" name="password"
                    class="w-full bg-black/30 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:outline-none focus:border-indigo-500" required>
            </div>
            <div>
                <label class="text-xs text-gray-400 mb-1 block">Confirm New Password</label>
                <input type="password" name="password_confirmation"
                    class="w-full bg-black/30 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:outline-none focus:border-indigo-500" required>
            </div>
            <button type="submit" class="w-full py-3 bg-orange-500 hover:bg-orange-600 text-white font-bold rounded-xl transition">
                Update Password
            </button>
        </form>
    </div>

    {{-- Referral Section --}}
    <div class="bg-gradient-to-r from-green-600/20 to-emerald-600/20 border border-green-500/30 rounded-2xl p-4">
        <h3 class="text-white font-bold mb-1">🎁 Referral Program</h3>
        <p class="text-gray-400 text-xs mb-4">Invite friends and earn bonus on each signup!</p>
        <div class="bg-black/30 rounded-xl p-3 mb-3">
            <p class="text-gray-400 text-xs mb-1">Your Referral Code</p>
            <div class="flex items-center justify-between">
                <p class="text-white font-mono font-black text-xl tracking-wider">{{ $user->referral_code }}</p>
                <button onclick="copyReferral()" class="bg-indigo-500 text-white text-xs px-3 py-1.5 rounded-lg hover:bg-indigo-600 transition">Copy</button>
            </div>
        </div>
        <div class="grid grid-cols-2 gap-2 text-center mb-3">
            <div class="bg-white/5 rounded-xl p-3">
                <p class="text-white font-bold text-lg">{{ $user->referrals->count() }}</p>
                <p class="text-gray-400 text-xs">People Referred</p>
            </div>
            <div class="bg-white/5 rounded-xl p-3">
                <p class="text-green-400 font-bold text-lg">৳{{ number_format($referralEarnings) }}</p>
                <p class="text-gray-400 text-xs">Bonus Earned</p>
            </div>
        </div>
        <button onclick="shareReferral()" class="w-full py-3 bg-green-500/20 hover:bg-green-500/30 text-green-300 border border-green-500/30 font-bold rounded-xl transition text-sm">
            📤 Share Referral Link
        </button>
    </div>

    {{-- Logout --}}
    <form method="POST" action="{{ route('logout') }}">
        @csrf
        <button type="submit" class="w-full py-3 bg-red-500/10 border border-red-500/20 hover:bg-red-500/20 text-red-400 font-bold rounded-xl transition flex items-center justify-center gap-2">
            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
            Logout
        </button>
    </form>
</div>
@endsection

@push('scripts')
<script>
    function copyReferral() {
        navigator.clipboard.writeText('{{ $user->referral_code }}').then(() => {
            alert('Referral code copied!');
        });
    }
    function shareReferral() {
        const url = '{{ route("register") }}?ref={{ $user->referral_code }}';
        if (navigator.share) {
            navigator.share({ title: 'Join Arena X!', text: 'Use my referral code {{ $user->referral_code }} and get bonus!', url });
        } else {
            navigator.clipboard.writeText(url);
            alert('Link copied!');
        }
    }
    // Avatar preview
    document.getElementById('avatarInput').addEventListener('change', function() {
        const reader = new FileReader();
        reader.onload = e => document.getElementById('avatarPreview').src = e.target.result;
        reader.readAsDataURL(this.files[0]);
    });
</script>
@endpush