<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile - Ryll Store</title>
    <link rel="icon" type="image/webp" href="{{ asset('images/ryll.webp') }}">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .font-orbitron { font-family: 'Orbitron', sans-serif; }
        body { 
            background: linear-gradient(135deg, #000000 0%, #0a0a1f 50%, #000000 100%);
            background-attachment: fixed;
        }
        .glass-card {
            background: rgba(17, 24, 39, 0.7);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(34, 211, 238, 0.2);
            transition: all 0.3s ease;
        }
        .glass-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 40px rgba(6, 182, 212, 0.4);
            border-color: rgba(34, 211, 238, 0.5);
        }
        [x-cloak] { display: none !important; }
    </style>
</head>
<body class="text-white min-h-screen">

    <!-- Top Navbar -->
    <nav class="fixed top-0 left-0 right-0 z-50 bg-black/90 backdrop-blur-xl border-b border-cyan-500/30">
        <div class="px-4 h-16 flex items-center justify-between max-w-7xl mx-auto">
            <a href="{{ route('account.dashboard') }}" class="flex items-center gap-2 group">
                <div class="w-10 h-10 bg-gradient-to-br from-cyan-400 to-blue-600 rounded-xl flex items-center justify-center transform group-hover:rotate-12 transition-transform shadow-lg shadow-cyan-500/50">
                    <i class="fas fa-gamepad text-white text-lg"></i>
                </div>
                <span class="text-xl font-bold text-cyan-400 font-orbitron hidden sm:block">RYLL STORE</span>
            </a>
            
            <div class="flex items-center gap-4">
                <a href="{{ route('account.dashboard') }}" class="text-gray-400 hover:text-cyan-400 transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>
                    <span class="hidden sm:inline">Kembali</span>
                </a>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <main class="pt-24 pb-12 px-4">
        <div class="max-w-4xl mx-auto">
            
            <!-- Header -->
            <div class="mb-8 text-center">
                <h1 class="text-4xl font-bold font-orbitron mb-2">
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-600">Profile Settings</span>
                </h1>
                <p class="text-gray-400">Kelola informasi akun dan password Anda</p>
            </div>

            <!-- Success Message -->
            @if(session('success'))
            <div class="glass-card border-green-500/50 p-4 rounded-xl mb-6 flex items-center gap-3">
                <i class="fas fa-check-circle text-green-400 text-xl"></i>
                <span class="text-green-400">{{ session('success') }}</span>
            </div>
            @endif

            <div class="grid md:grid-cols-2 gap-6">
                
                <!-- Profile Information Card -->
                <div class="glass-card p-6 rounded-2xl">
                    <div class="flex items-center gap-3 mb-6">
                        <div class="w-12 h-12 bg-gradient-to-br from-cyan-500 to-blue-600 rounded-xl flex items-center justify-center">
                            <i class="fas fa-user text-white text-xl"></i>
                        </div>
                        <h2 class="text-xl font-bold text-cyan-400 font-orbitron">Profile Information</h2>
                    </div>

                    <form action="{{ route('account.profile.update') }}" method="POST" class="space-y-4">
                        @csrf
                        @method('PUT')

                        <!-- Name -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-300 mb-2">
                                <i class="fas fa-user text-cyan-400 mr-2"></i>Nama
                            </label>
                            <input type="text" name="name" value="{{ old('name', $user->name) }}" required
                                   class="w-full px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-xl text-white placeholder-gray-500 focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20 transition-all">
                            @error('name')
                                <p class="text-red-400 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Email -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-300 mb-2">
                                <i class="fas fa-envelope text-cyan-400 mr-2"></i>Email
                            </label>
                            <input type="email" name="email" value="{{ old('email', $user->email) }}" required
                                   class="w-full px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-xl text-white placeholder-gray-500 focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20 transition-all">
                            @error('email')
                                <p class="text-red-400 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Submit Button -->
                        <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white font-bold rounded-xl transition-all transform hover:scale-105 shadow-lg hover:shadow-cyan-500/50">
                            <i class="fas fa-save mr-2"></i>Update Profile
                        </button>
                    </form>
                </div>

                <!-- Change Password Card -->
                <div class="glass-card p-6 rounded-2xl">
                    <div class="flex items-center gap-3 mb-6">
                        <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-600 rounded-xl flex items-center justify-center">
                            <i class="fas fa-key text-white text-xl"></i>
                        </div>
                        <h2 class="text-xl font-bold text-purple-400 font-orbitron">Change Password</h2>
                    </div>

                    <form action="{{ route('account.password.update') }}" method="POST" class="space-y-4">
                        @csrf
                        @method('PUT')

                        <!-- Current Password -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-300 mb-2">
                                <i class="fas fa-lock text-purple-400 mr-2"></i>Password Lama
                            </label>
                            <input type="password" name="current_password" required
                                   class="w-full px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-xl text-white placeholder-gray-500 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 transition-all">
                            @error('current_password')
                                <p class="text-red-400 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- New Password -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-300 mb-2">
                                <i class="fas fa-lock text-purple-400 mr-2"></i>Password Baru
                            </label>
                            <input type="password" name="password" required
                                   class="w-full px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-xl text-white placeholder-gray-500 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 transition-all">
                            <p class="text-xs text-gray-500 mt-1">Minimal 8 karakter</p>
                            @error('password')
                                <p class="text-red-400 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Confirm Password -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-300 mb-2">
                                <i class="fas fa-check-circle text-purple-400 mr-2"></i>Konfirmasi Password
                            </label>
                            <input type="password" name="password_confirmation" required
                                   class="w-full px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-xl text-white placeholder-gray-500 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 transition-all">
                        </div>

                        <!-- Submit Button -->
                        <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-600 hover:from-purple-600 hover:to-pink-700 text-white font-bold rounded-xl transition-all transform hover:scale-105 shadow-lg hover:shadow-purple-500/50">
                            <i class="fas fa-key mr-2"></i>Update Password
                        </button>
                    </form>
                </div>

            </div>

            <!-- Account Info -->
            <div class="glass-card p-6 rounded-2xl mt-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-gray-400">Member sejak</p>
                        <p class="text-cyan-400 font-semibold">{{ $user->created_at->format('d M Y') }}</p>
                    </div>
                    <div class="text-right">
                        <p class="text-sm text-gray-400">Role</p>
                        <p class="text-green-400 font-semibold capitalize">{{ $user->role ?? 'User' }}</p>
                    </div>
                </div>
            </div>

        </div>
    </main>

</body>
</html>