@extends('layouts.app')
@section('title','Profile Settings')
@section('header-left')
<div><h3 class="text-lg font-bold">Profile Settings</h3></div>
@endsection
@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    {{-- Avatar --}}
    <div class="glass-card rounded-2xl p-8 flex flex-col items-center text-center gap-4">
        <div class="relative group">
            <div class="w-28 h-28 rounded-full overflow-hidden border-4 border-primary/30 shadow-xl">
                <img src="{{ auth()->user()->avatar_url }}" alt="Avatar" class="w-full h-full object-cover"/>
            </div>
            <label class="absolute bottom-1 right-1 w-9 h-9 rounded-full bg-primary flex items-center justify-center cursor-pointer hover:bg-primary/80 transition-colors shadow-lg">
                <span class="material-symbols-outlined text-white text-sm">photo_camera</span>
                <form method="POST" action="{{ route('profile.avatar') }}" enctype="multipart/form-data" id="avatarForm">
                    @csrf
                    <input type="file" name="avatar" accept="image/*" class="hidden" onchange="this.form.submit()"/>
                </form>
            </label>
        </div>
        <div>
            <h3 class="text-xl font-black text-white">{{ auth()->user()->name }}</h3>
            <p class="text-sm text-slate-400">{{ auth()->user()->email }}</p>
        </div>
        <div class="flex items-center gap-2 px-4 py-2 rounded-full border border-green-500/30 bg-green-500/10 text-green-500 text-xs font-bold">
            <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
            {{ strtoupper(auth()->user()->account_status) }}
        </div>
        <div class="w-full pt-4 border-t border-white/10">
            <p class="text-[10px] text-slate-600 uppercase tracking-wider mb-3">Referral Code</p>
            <div class="bg-white/5 rounded-xl px-4 py-3 font-mono text-primary font-bold tracking-widest text-sm select-all">
                {{ auth()->user()->referral_code }}
            </div>
        </div>
    </div>

    {{-- Forms --}}
    <div class="lg:col-span-2 space-y-6">
        {{-- Personal Info --}}
        <div class="glass-card rounded-2xl p-6">
            <h4 class="font-bold text-base mb-5 flex items-center gap-2"><span class="material-symbols-outlined text-primary">person</span> Personal Information</h4>
            <form method="POST" action="{{ route('profile.update') }}" class="space-y-4">
                @csrf
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Full Name</label>
                        <input type="text" name="name" value="{{ auth()->user()->name }}" required class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm text-white focus:border-primary/50 focus:ring-0 focus:outline-none"/>
                    </div>
                    <div>
                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Phone Number</label>
                        <input type="tel" name="phone" value="{{ auth()->user()->phone }}" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm text-white focus:border-primary/50 focus:ring-0 focus:outline-none"/>
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Wallet Address</label>
                    <input type="text" name="wallet_address" value="{{ auth()->user()->wallet_address }}" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm text-white focus:border-primary/50 focus:ring-0 focus:outline-none" placeholder="Optional: your crypto wallet address"/>
                </div>
                <button type="submit" class="px-6 py-3 bg-primary text-white rounded-xl text-sm font-bold hover:bg-primary/90 transition-all">Save Changes</button>
            </form>
        </div>

        {{-- Bank Details --}}
        <div class="glass-card rounded-2xl p-6">
            <h4 class="font-bold text-base mb-5 flex items-center gap-2"><span class="material-symbols-outlined text-primary">account_balance</span> Bank Account</h4>
            <form method="POST" action="{{ route('profile.update') }}" class="space-y-4">
                @csrf
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Bank Name</label>
                        <input type="text" name="bank_name" value="{{ auth()->user()->bank_name }}" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm text-white focus:border-primary/50 focus:ring-0 focus:outline-none" placeholder="e.g. GTBank"/>
                    </div>
                    <div>
                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Account Number</label>
                        <input type="text" name="account_number" value="{{ auth()->user()->account_number }}" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm text-white focus:border-primary/50 focus:ring-0 focus:outline-none" placeholder="10-digit account number"/>
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Account Name</label>
                    <input type="text" name="account_name" value="{{ auth()->user()->account_name }}" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm text-white focus:border-primary/50 focus:ring-0 focus:outline-none" placeholder="As on your bank account"/>
                </div>
                <button type="submit" class="px-6 py-3 bg-primary text-white rounded-xl text-sm font-bold hover:bg-primary/90 transition-all">Update Bank Details</button>
            </form>
        </div>

        {{-- Password --}}
        <div class="glass-card rounded-2xl p-6">
            <h4 class="font-bold text-base mb-5 flex items-center gap-2"><span class="material-symbols-outlined text-primary">lock</span> Change Password</h4>
            <form method="POST" action="{{ route('profile.password') }}" class="space-y-4">
                @csrf
                <div>
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Current Password</label>
                    <input type="password" name="current_password" required class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm text-white focus:border-primary/50 focus:ring-0 focus:outline-none"/>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">New Password</label>
                        <input type="password" name="password" required class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm text-white focus:border-primary/50 focus:ring-0 focus:outline-none"/>
                    </div>
                    <div>
                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Confirm New Password</label>
                        <input type="password" name="password_confirmation" required class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm text-white focus:border-primary/50 focus:ring-0 focus:outline-none"/>
                    </div>
                </div>
                <button type="submit" class="px-6 py-3 bg-primary text-white rounded-xl text-sm font-bold hover:bg-primary/90 transition-all">Update Password</button>
            </form>
        </div>
    </div>
</div>
@endsection