@extends('layouts.app')
@section('title', 'Thông Tin Cá Nhân')
@section('content')
<div class="w-full space-y-6">
    <div
        class="relative overflow-hidden rounded-2xl border border-transparent bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white shadow-soft">
        <div class="absolute inset-0 opacity-50 mix-blend-screen"
            style="background: radial-gradient(circle at top right, rgba(255,255,255,0.2), transparent 45%);"></div>
        <div
            class="relative px-6 py-8 lg:px-10 lg:py-10 flex flex-col md:flex-row md:items-center md:justify-between gap-8">
            <div class="flex items-start gap-4">
                <div class="w-20 h-20 flex-shrink-0 relative flex items-center justify-center">
                    <img src="{{ asset('images/main/icon/legacy.webp') }}" alt="crown" class="crown3 absolute z-10">
                    <div class="w-20 h-20 rounded-full bg-white/10 backdrop-blur overflow-hidden relative z-0">
                        <img src="{{ asset('images/avatar.jpg') }}" alt="avatar" class="w-full h-full object-cover">
                    </div>
                </div>
                <div>
                    <div class="flex items-center gap-2">
                        <h1 class="text-2xl font-semibold">{{ getUserById()['username'] ?? 'Chưa Đăng Nhập' }}</h1>
                        <span
                            class="py-1 rounded-full text-xs font-semibold {{ str_contains(strtolower(getUserById()['role'] ?? ''), '0') ? 'bg-rose-500/15 text-rose-200' : 'bg-emerald-500/15 text-emerald-200' }}"><img
                                src="{{asset('images/main/icon/blue-tick.png')}}" alt="Admin" class="w-4 h-4"></span>
                    </div>
                    <p class="text-sm text-white/70 mt-1">UID: <span
                            class="font-semibold">{{ getUserById()['uid'] ?? '—' }}</span></p>
                    <div class="flex flex-wrap items-center gap-3 mt-4">
                        <span
                            class="inline-flex items-center gap-2 rounded-xl bg-white/5 px-3 py-1.5 text-xs text-white/80">
                            <i class="ri-calendar-line"></i>
                            Tạo ngày
                            {{ isset(getUserById()['created_at']) && getUserById()['created_at'] ? \Carbon\Carbon::parse(getUserById()['created_at'])->timezone('Asia/Ho_Chi_Minh')->format('H:i:s d/m/Y') : '—' }}
                        </span>
                        <span
                            class="inline-flex items-center gap-2 rounded-xl bg-white/5 px-3 py-1.5 text-xs text-white/80">
                            <i class="ri-time-line"></i>
                            Đăng nhập gần nhất
                            {{ getUserById()['last_login'] ?? '—' }}
                        </span>
                    </div>
                </div>
            </div>
            <div class="flex flex-col md:items-end gap-4 min-w-[200px]">
                <div class="bg-white/10 rounded-2xl px-5 py-4 backdrop-blur text-sm">
                    <p class="text-white/70 uppercase tracking-wide text-xs">Số dư hiện tại</p>
                    <p class="text-2xl font-semibold mt-1">{{ FormatNumber(getUserById()['balance'] ?? 0,',') }}₫</p>
                </div>
                <div class="flex flex-wrap items-center gap-3 text-xs">
                    <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-xl bg-white/10 text-white/80">
                        <i class="ri-send-plane-line"></i>
                        Telegram: {!! getUserById()['telegram_id'] ?? '<span class="text-red-600 font-bold">Chưa Liên
                            Kết</span>'!!}
                    </span>
                    <button type="button" data-heybank-copy="{{ getUserById()['uid'] ?? 'Chưa Đăng Nhập' }}"
                        class="inline-flex items-center gap-2 px-3 py-1.5 rounded-xl bg-white text-slate-900 text-xs font-semibold hover:bg-slate-100 transition"
                        {{ getUserById()['uid'] ? '' : 'disabled' }}>
                        <i class="ri-file-copy-line"></i>
                        Sao chép UID
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
        <div class="xl:col-span-2 space-y-6">
            <div class="rounded-2xl border border-neutral-200 bg-white shadow-soft">
                <div class="px-6 py-4 border-b border-neutral-200">
                    <div class="flex items-center gap-3">
                        <div
                            class="w-9 h-9 rounded-xl bg-gradient-to-br from-slate-700 to-slate-800 text-white flex items-center justify-center">
                            <i class="ri-user-line text-base"></i>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-neutral-800">Chi Tiết Tài Khoản</p>
                            <p class="text-xs text-neutral-500">Kiểm tra và quản lý thông tin đăng nhập của bạn</p>
                        </div>
                    </div>
                </div>
                <div class="px-6 py-5 grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="space-y-4">
                        <div class="flex items-start gap-3">
                            <div
                                class="w-10 h-10 rounded-xl bg-neutral-100 flex items-center justify-center text-neutral-500">
                                <i class="ri-user-line"></i>
                            </div>
                            <div>
                                <p class="text-xs uppercase text-neutral-500 tracking-wide">Tên đăng nhập</p>
                                <p class="text-sm font-semibold text-neutral-800">{{ getUserById()['username'] ?? '—' }}
                                </p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <div
                                class="w-10 h-10 rounded-xl bg-neutral-100 flex items-center justify-center text-neutral-500">
                                <i class="ri-mail-line"></i>
                            </div>
                            <div>
                                <p class="text-xs uppercase text-neutral-500 tracking-wide">Email</p>
                                <p class="text-sm font-semibold text-neutral-800">
                                    {!! getUserById()['email'] ?? '<span class="text-red-600 font-bold">Chưa xác
                                        minh</span>' !!}</p>
                            </div>
                        </div>
                    </div>
                    <div class="space-y-4">
                        <div class="flex items-start gap-3">
                            <div
                                class="w-10 h-10 rounded-xl bg-neutral-100 flex items-center justify-center text-neutral-500">
                                <i class="ri-wallet-line"></i>
                            </div>
                            <div>
                                <p class="text-xs uppercase text-neutral-500 tracking-wide">Số dư hiện tại</p>
                                <p class="text-sm font-semibold text-emerald-600">
                                    {{ FormatNumber(getUserById()['balance'] ?? 0,',') }}₫</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <div
                                class="w-10 h-10 rounded-xl bg-neutral-100 flex items-center justify-center text-neutral-500">
                                <i class="ri-vip-crown-line"></i>
                            </div>
                            <div>
                                <p class="text-xs uppercase text-neutral-500 tracking-wide">Cấp bậc</p>
                                <p
                                    class="text-sm font-semibold {{ str_contains(strtolower(getUserById()['role'] ?? ''), '0') ? 'text-green-500' : 'text-neutral-800' }}">
                                    {{ getUserById()['role'] == 1 ? 'Thành Viên' : 'Quản Trị Viên' }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="rounded-2xl border border-neutral-200 bg-white shadow-soft">
                <div class="px-6 py-4 border-b border-neutral-200">
                    <div class="flex items-center gap-3">
                        <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-slate-700 to-slate-800 text-white flex items-center justify-center">
                            <i class="ri-send-plane-line text-base"></i>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-neutral-800">Liên Kết Telegram</p>
                            <p class="text-xs text-neutral-500">Để bảo mật tài khoản, vui lòng xác minh tài khoản</p>
                        </div>
                    </div>
                </div>
                <div class="px-6 py-5">
                    <div class="space-y-4">
                            <p class="text-xs text-neutral-400 mt-1">* Tính năng đang được phát triển, vui lòng quay lại sau!</p>
                        <button type="button" 
                            class="w-full h-11 rounded-lg bg-neutral-300 text-neutral-500 text-sm font-semibold cursor-not-allowed transition" 
                            disabled>
                            <span class="inline-flex items-center gap-2 justify-center">
                                <i class="ri-links-line"></i>
                                Liên Kết Telegram
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="space-y-6">
            <div class="rounded-2xl border border-neutral-200 bg-white shadow-soft p-6">
                <div class="flex items-center gap-3 mb-6">
                    <div
                        class="w-10 h-10 rounded-xl bg-gradient-to-br from-slate-700 to-slate-800 text-white flex items-center justify-center">
                        <i class="ri-lock-line"></i>
                    </div>
                    <div>
                        <p class="text-sm font-semibold text-neutral-800">Cập Nhật Mật Khẩu</p>
                        <p class="text-xs text-neutral-500">Thay đổi mật khẩu tài khoản thường xuyên để tăng bảo mật</p>
                    </div>
                </div>
                <form id="profile-update-password" class="space-y-4">
                    <div>
                        <label class="text-xs font-semibold text-neutral-600 mb-1 block">Mật Khẩu Cũ</label>
                        <div class="relative group">
                            <input type="password" name="old_pw" placeholder="Nhập mật khẩu cũ" autocomplete="off"
                                class="w-full rounded-lg border border-neutral-200 bg-white px-4 py-2.5 text-sm text-neutral-800 focus:border-heybank focus:ring-0 transition">
                            <button type="button"
                                class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 group-hover:text-neutral-600"
                                data-toggle-pass><i class="ri-eye-line"></i></button>
                        </div>
                    </div>
                    <div>
                        <label class="text-xs font-semibold text-neutral-600 mb-1 block">Mật Khẩu Mới</label>
                        <div class="relative group">
                            <input type="password" name="new_pw" placeholder="Nhập mật khẩu mới" autocomplete="off"
                                class="w-full rounded-lg border border-neutral-200 bg-white px-4 py-2.5 text-sm text-neutral-800 focus:border-heybank focus:ring-0 transition">
                            <button type="button"
                                class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 group-hover:text-neutral-600"
                                data-toggle-pass><i class="ri-eye-line"></i></button>
                        </div>
                    </div>
                    <div>
                        <label class="text-xs font-semibold text-neutral-600 mb-1 block">Nhập Lại Mật Khẩu</label>
                        <div class="relative group">
                            <input type="password" name="confirm_new_pw" placeholder="Nhập lại mật khẩu mới" autocomplete="off"
                                class="w-full rounded-lg border border-neutral-200 bg-white px-4 py-2.5 text-sm text-neutral-800 focus:border-heybank focus:ring-0 transition">
                            <button type="button"
                                class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 group-hover:text-neutral-600"
                                data-toggle-pass><i class="ri-eye-line"></i></button>
                        </div>
                    </div>
                    <button type="submit"
                        class="w-full h-11 rounded-lg bg-heybank text-white text-sm font-semibold hover:opacity-90 transition active:scale-[.99]">
                        <span class="inline-flex items-center gap-2 justify-center"><i class="ri-check-line"></i> Cập
                            Nhật</span>
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection