@extends('layouts.app')
@section('title', 'Hồ sơ cá nhân')

@section('content')
    @include('partials.header')

    <div class="lg:ml-64">
        @include('partials.topbar')

        <div class="max-w-5xl mx-auto py-8 px-4 sm:px-6">

            {{-- Page Title --}}
            <div class="mb-6">
                <h1 class="text-2xl font-bold text-text">👤 Hồ sơ cá nhân</h1>
                <p class="text-sm text-text-muted mt-1">Quản lý thông tin tài khoản của bạn</p>
            </div>

            {{-- Avatar Card --}}
            <div class="rounded-2xl shadow-sm border border-accent/15 overflow-hidden mb-6 bg-secondary">
                <div class="p-8 flex flex-col items-center">
                    <form method="POST" action="{{ route('profile.avatar') }}" enctype="multipart/form-data" class="flex flex-col items-center">
                        @csrf
                        <div class="relative mb-4 group cursor-pointer" onclick="document.getElementById('avatarInput').click()">
                            {{-- Avatar with frame --}}
                            <div class="relative w-28 h-28 flex items-center justify-center">
                                <img src="{{ Auth::user()->avatar ?? '/img/users/avatar-default.jpg' }}" alt="Avatar" id="avatarPreview"
                                     class="w-22 h-22 rounded-full object-cover border-3 border-accent/20 shadow-lg" style="width:88px;height:88px;">
                                @if(Auth::user()->current_plan)
                                <img src="/img/icon/khung/premium.webp" alt="Frame" class="absolute inset-0 w-full h-full object-contain pointer-events-none">
                                @endif
                            </div>
                            {{-- Hover overlay --}}
                            <div class="absolute inset-0 flex items-center justify-center">
                                <div class="w-22 h-22 rounded-full bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center" style="width:88px;height:88px;">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" 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"/><circle cx="12" cy="13" r="3"/></svg>
                                </div>
                            </div>
                            <input type="file" name="avatar" id="avatarInput" accept="image/*" class="hidden" onchange="previewAvatar(this); this.form.submit();">
                        </div>
                    </form>
                    <h2 class="text-xl font-bold text-text">{{ Auth::user()->name ?? Auth::user()->username }}</h2>
                    <p class="text-sm text-text-muted mt-1">{{ '@' . Auth::user()->username }}</p>
                    @if(Auth::user()->current_plan)
                        <span class="mt-2 inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-accent/15 text-accent border border-accent/20">
                            👑 {{ ucfirst(Auth::user()->current_plan) }}
                        </span>
                    @else
                        <span class="mt-2 inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-primary/40 text-text-muted border border-accent/10">Chưa kích hoạt</span>
                    @endif
                </div>
            </div>

            {{-- Two Column Layout --}}
            <div class="grid lg:grid-cols-2 gap-6">

                {{-- Left: Profile Info --}}
                <div class="rounded-2xl shadow-sm border border-accent/15 overflow-hidden bg-secondary">
                    <div class="px-6 py-5 border-b border-accent/10">
                        <h2 class="text-base font-bold text-text">📝 Thông tin cá nhân</h2>
                    </div>
                    <form method="POST" action="{{ route('profile.update') }}" class="p-6 space-y-5">
                        @csrf
                        @method('PUT')

                        <div>
                            <label class="block text-sm font-semibold text-text mb-1.5">Tên hiển thị</label>
                            <input type="text" name="name" value="{{ old('name', Auth::user()->name) }}"
                                   class="w-full bg-primary border border-accent/15 rounded-xl px-4 py-3 text-sm text-text outline-none focus:border-accent focus:ring-2 focus:ring-accent/20 transition-all">
                            @error('name') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
                        </div>

                        <div>
                            <label class="block text-sm font-semibold text-text mb-1.5">Username</label>
                            <input type="text" value="{{ Auth::user()->username }}" disabled
                                   class="w-full bg-primary/40 border border-accent/10 rounded-xl px-4 py-3 text-sm text-text-muted cursor-not-allowed">
                            <p class="text-xs text-text-muted mt-1.5">Username không thể thay đổi</p>
                        </div>

                        <div>
                            <label class="block text-sm font-semibold text-text mb-1.5">Email</label>
                            <input type="email" name="email" value="{{ old('email', Auth::user()->email) }}"
                                   class="w-full bg-primary border border-accent/15 rounded-xl px-4 py-3 text-sm text-text outline-none focus:border-accent focus:ring-2 focus:ring-accent/20 transition-all">
                            @error('email') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
                        </div>

                        {{-- Account Info --}}
                        <div class="pt-3 border-t border-accent/10 space-y-3">
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-text-muted">Ngày tạo</span>
                                <span class="text-xs font-semibold text-text">{{ Auth::user()->created_at ? \Carbon\Carbon::parse(Auth::user()->created_at)->format('d/m/Y H:i') : '—' }}</span>
                            </div>
                            @if(Auth::user()->plan_expires_at)
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-text-muted">Hạn sử dụng</span>
                                <span class="text-xs font-bold text-red-400">⏰ {{ \Carbon\Carbon::parse(Auth::user()->plan_expires_at)->format('d/m/Y H:i') }}</span>
                            </div>
                            @endif
                        </div>

                        <button type="submit"
                                class="w-full py-3 bg-accent hover:bg-accent-dark text-white font-bold text-sm rounded-xl transition-all shadow-md shadow-accent/20 hover:-translate-y-0.5 cursor-pointer border-0">
                            💾 Lưu thay đổi
                        </button>
                    </form>
                </div>

                {{-- Right: Change Password --}}
                <div class="rounded-2xl shadow-sm border border-accent/15 overflow-hidden bg-secondary h-fit">
                    <div class="px-6 py-5 border-b border-accent/10">
                        <h2 class="text-base font-bold text-text">🔒 Đổi mật khẩu</h2>
                    </div>
                    <form method="POST" action="{{ route('profile.password') }}" class="p-6 space-y-5">
                        @csrf
                        @method('PUT')

                        <div>
                            <label class="block text-sm font-semibold text-text mb-1.5">Mật khẩu hiện tại</label>
                            <input type="password" name="current_password"
                                   class="w-full bg-primary border border-accent/15 rounded-xl px-4 py-3 text-sm text-text outline-none focus:border-accent focus:ring-2 focus:ring-accent/20 transition-all">
                            @error('current_password') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
                        </div>

                        <div>
                            <label class="block text-sm font-semibold text-text mb-1.5">Mật khẩu mới</label>
                            <input type="password" name="password"
                                   class="w-full bg-primary border border-accent/15 rounded-xl px-4 py-3 text-sm text-text outline-none focus:border-accent focus:ring-2 focus:ring-accent/20 transition-all">
                            @error('password') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
                        </div>

                        <div>
                            <label class="block text-sm font-semibold text-text mb-1.5">Xác nhận mật khẩu mới</label>
                            <input type="password" name="password_confirmation"
                                   class="w-full bg-primary border border-accent/15 rounded-xl px-4 py-3 text-sm text-text outline-none focus:border-accent focus:ring-2 focus:ring-accent/20 transition-all">
                        </div>

                        <button type="submit"
                                class="w-full py-3 bg-accent hover:bg-accent-dark text-white font-bold text-sm rounded-xl transition-all shadow-md shadow-accent/20 hover:-translate-y-0.5 cursor-pointer border-0">
                            🔐 Cập nhật mật khẩu
                        </button>
                    </form>
                </div>

            </div>
        </div>

        @include('partials.footer')
    </div>

    <script>
        function previewAvatar(input) {
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('avatarPreview').src = e.target.result;
                };
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
@endsection