{{-- user/profile/index.blade.php | Obrempong | Jcode --}}
@extends('layouts.app')
@section('title','My Profile')
@section('content')
<div class="page-header"><h2>👤 My Profile</h2></div>
<div class="section">
    {{-- Profile Card --}}
    <div class="card card-body" style="text-align:center;margin-bottom:14px;padding:24px;">
        <div style="position:relative;display:inline-block;margin-bottom:12px;">
            <img src="{{ auth()->user()->avatar_url }}" style="width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--primary);" id="avatar-preview">
        </div>
        <div style="font-size:20px;font-weight:800;">{{ auth()->user()->name }}</div>
        <div style="font-size:13px;color:var(--text-muted);">{{ auth()->user()->email }}</div>
        <div style="margin-top:8px;">
            <span class="level-badge level-{{ strtolower(auth()->user()->level) }}">⭐ {{ auth()->user()->level }}</span>
            <span style="margin-left:6px;font-size:12px;color:var(--text-muted);">Rank #{{ auth()->user()->leaderboard_rank }}</span>
        </div>
    </div>

    {{-- Stats --}}
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;">
        @foreach(['Points'=>number_format(auth()->user()->points),'Total Earned'=>number_format(auth()->user()->total_earned_points),'Withdrawn'=>'GH₵'.number_format(auth()->user()->total_withdrawn,2)] as $lbl=>$val)
        <div class="card card-body text-center" style="padding:12px;">
            <div style="font-size:17px;font-weight:800;color:var(--primary);">{{ $val }}</div>
            <div style="font-size:10px;color:var(--text-muted);">{{ $lbl }}</div>
        </div>
        @endforeach
    </div>

    {{-- Referral --}}
    <div id="referral" class="card card-body" style="margin-bottom:14px;padding:16px;">
        <div style="font-weight:700;margin-bottom:10px;">🔗 Your Referral Link</div>
        <div style="background:#F8FAFC;border:1px solid var(--border);border-radius:8px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;">
            <span style="font-size:12px;font-family:monospace;word-break:break-all;" id="ref-url">{{ url('/register?ref='.auth()->user()->referral_code) }}</span>
            <button onclick="copyRef()" class="btn btn-sm btn-primary" style="flex-shrink:0;"><i class="fa fa-copy"></i></button>
        </div>
        <div style="font-size:12px;color:var(--text-muted);margin-top:8px;">
            Earn <strong>{{ \App\Models\Setting::get('referral_bonus_points',200) }} pts</strong> for each friend who joins!
            <br>Total referrals: <strong>{{ $totalReferrals }}</strong>
        </div>
    </div>

    {{-- Edit Profile Form --}}
    <div class="card card-body">
        <div style="font-weight:700;margin-bottom:14px;">Edit Profile</div>
        @if($errors->any())<div class="alert alert-danger"><i class="fa fa-circle-exclamation"></i> {{ $errors->first() }}</div>@endif
        @if(session('success'))<div class="alert alert-success"><i class="fa fa-check-circle"></i> {{ session('success') }}</div>@endif
        <form method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data">
            @csrf
            <div class="form-group">
                <label class="form-label">Profile Photo</label>
                <input type="file" name="avatar" class="form-control" accept="image/*" onchange="previewAvatar(this)">
            </div>
            <div class="form-group">
                <label class="form-label">Full Name</label>
                <input type="text" name="name" class="form-control" value="{{ old('name',auth()->user()->name) }}" required>
            </div>
            <div class="form-group">
                <label class="form-label">Phone Number</label>
                <input type="tel" name="phone" class="form-control" value="{{ old('phone',auth()->user()->phone) }}" placeholder="024xxxxxxx">
            </div>
            <div style="border-top:1px solid var(--border);padding-top:14px;margin:14px 0 10px;">
                <div style="font-weight:700;margin-bottom:10px;font-size:13px;">Change Password</div>
                <div class="form-group"><label class="form-label">Current Password</label><input type="password" name="current_password" class="form-control" placeholder="Leave blank to keep current"></div>
                <div class="form-group"><label class="form-label">New Password</label><input type="password" name="password" class="form-control" placeholder="Min 8 characters"></div>
                <div class="form-group"><label class="form-label">Confirm New Password</label><input type="password" name="password_confirmation" class="form-control"></div>
            </div>
            <button type="submit" class="btn btn-primary btn-block">Save Changes</button>
        </form>
    </div>

    {{-- Logout --}}
    <form method="POST" action="{{ route('logout') }}" style="margin-top:14px;">
        @csrf
        <button type="submit" class="btn btn-outline btn-block" style="color:var(--danger);border-color:var(--danger);">
            <i class="fa fa-right-from-bracket"></i> Sign Out
        </button>
    </form>
</div>
@endsection
@push('scripts')
<script>
function copyRef(){
    navigator.clipboard.writeText(document.getElementById('ref-url').textContent.trim()).then(()=>toast('Referral link copied!','success'));
}
function previewAvatar(input){
    if(input.files&&input.files[0]){
        const r=new FileReader();
        r.onload=e=>document.getElementById('avatar-preview').src=e.target.result;
        r.readAsDataURL(input.files[0]);
    }
}
</script>
@endpush