@extends('examples.modern-layout-v2')
@section('title', 'Profile')
@section('profile', 'bg-blue-50 text-blue-700')

@section('content')
<div x-data="profileData()" x-init="init()">
    <!-- Page Header -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-3xl font-bold text-gray-900 mb-2">Profile Settings</h2>
                <p class="text-gray-600">Manage your account information and preferences</p>
            </div>
                    <a href="{{route('dashboard')}}" class="hidden md:flex items-center px-5 py-2.5 text-sm font-semibold text-gray-700 bg-white border-2 border-gray-200 rounded-xl hover:bg-blue-50 hover:border-blue-300 hover:text-blue-700 transition-all duration-200 shadow-sm hover:shadow-md">
                <span class="material-icons @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-2 @else mr-2 @endif text-base">arrow_back</span>
                Back to Dashboard
            </a>
        </div>
    </div>

    <!-- Profile Overview Card -->
    <div class="bg-gradient-to-br from-blue-500 via-blue-400 to-blue-300 rounded-2xl shadow-lg p-8 mb-8 text-white relative overflow-hidden">
        <div class="absolute top-0 right-0 w-64 h-64 bg-white opacity-10 rounded-full -mr-32 -mt-32"></div>
        <div class="absolute bottom-0 left-0 w-48 h-48 bg-white opacity-10 rounded-full -ml-24 -mb-24"></div>
        <div class="relative z-10">
            <div class="flex flex-col md:flex-row items-center md:items-start space-y-4 md:space-y-0 md:space-x-6">
                <!-- Profile Picture -->
                <div class="relative group">
                    <div class="w-32 h-32 rounded-2xl bg-white p-1 shadow-2xl ring-4 ring-white/50">
                        @if(isset($profile->image) && Storage::disk('public')->exists($profile->image))
                            <img class="w-full h-full rounded-xl object-cover" src="{{$profile->image_url}}" alt="Profile">
                        @else
                            <div class="w-full h-full rounded-xl bg-gradient-to-br from-blue-400 to-blue-500 flex items-center justify-center">
                                <span class="text-4xl font-bold text-white">{{ substr($profile->name ?? 'U', 0, 1) }}</span>
                            </div>
                        @endif
                    </div>
                    <div class="absolute inset-0 rounded-2xl bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center cursor-pointer">
                        <span class="material-icons text-white text-3xl">camera_alt</span>
                    </div>
                </div>
                
                <!-- Profile Info -->
                <div class="flex-1 text-center md:text-left">
                    <h3 class="text-3xl font-bold mb-2">{{ $profile->name ?? 'User' }}</h3>
                    <p class="text-blue-100 mb-4 flex items-center justify-center md:justify-start">
                        <span class="material-icons @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-2 @else mr-2 @endif text-lg">email</span>
                        {{ $profile->email ?? 'No email' }}
                    </p>
                    <div class="flex flex-wrap items-center justify-center md:justify-start gap-4">
                        <div class="flex items-center space-x-2 bg-white/20 backdrop-blur-sm rounded-lg px-4 py-2">
                            <span class="material-icons text-lg">verified</span>
                            <span class="text-sm font-medium">Verified Account</span>
                        </div>
                        <div class="flex items-center space-x-2 bg-white/20 backdrop-blur-sm rounded-lg px-4 py-2">
                            <span class="material-icons text-lg">admin_panel_settings</span>
                            <span class="text-sm font-medium">{{ $profile->roles->first()->name ?? 'User' }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Left Column - Profile Form -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Personal Information Card -->
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-200">
                <div class="flex items-center justify-between mb-6">
                    <div>
                        <h3 class="text-xl font-semibold text-gray-900 mb-1">Personal Information</h3>
                        <p class="text-sm text-gray-500">Update your personal details</p>
                    </div>
                    <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
                        <span class="material-icons text-blue-600">person</span>
                    </div>
                </div>

                <form id="user_form" method="post" action="{{route('update_profile',[$profile->id])}}" enctype="multipart/form-data" class="space-y-6">
                    @csrf
                    
                    <!-- Name Field -->
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
                            {{__('messages.user_page.name')}}
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <span class="material-icons text-gray-400 text-xl">badge</span>
                            </div>
                            <input 
                                type="text" 
                                id="name" 
                                name="name" 
                                value="{{$profile->name}}" 
                                class="block w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors @error('name') border-red-500 @enderror"
                                placeholder="Enter your name"
                            >
                        </div>
                        @error('name')
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <span class="material-icons text-base mr-1">error_outline</span>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <!-- Email Field -->
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                            {{__('messages.user_page.email')}}
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <span class="material-icons text-gray-400 text-xl">email</span>
                            </div>
                            <input 
                                type="email" 
                                id="email" 
                                name="email" 
                                value="{{$profile->email}}" 
                                class="block w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors @error('email') border-red-500 @enderror"
                                placeholder="Enter your email"
                            >
                        </div>
                        @error('email')
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <span class="material-icons text-base mr-1">error_outline</span>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <!-- Image Upload -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            {{__('messages.user_page.image')}}
                        </label>
                        <div class="flex items-center space-x-4">
                            <div class="relative">
                                <input 
                                    type="file" 
                                    id="image" 
                                    name="image" 
                                    accept="image/*"
                                    class="hidden"
                                    onchange="previewImage(this)"
                                >
                                <label 
                                    for="image" 
                                    class="cursor-pointer inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-500 text-white font-semibold rounded-xl hover:from-blue-700 hover:to-blue-600 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105 active:scale-95"
                                >
                                    <span class="material-icons @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-2 @else mr-2 @endif">upload</span>
                                    Choose Image
                                </label>
                            </div>
                            @if(isset($profile->image) && Storage::disk('public')->exists($profile->image))
                                <div class="flex items-center space-x-2 text-sm text-gray-600">
                                    <span class="material-icons text-base">check_circle</span>
                                    <span>Image uploaded</span>
                                </div>
                            @endif
                        </div>
                        <div id="image-preview" class="mt-4 hidden">
                            <img id="preview-img" src="" alt="Preview" class="w-32 h-32 rounded-xl object-cover border-2 border-gray-200">
                        </div>
                        @error('image')
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <span class="material-icons text-base mr-1">error_outline</span>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <!-- Submit Button -->
                    <div class="flex items-center justify-end pt-4 border-t border-gray-100">
                        <button 
                            type="submit" 
                            class="inline-flex items-center px-8 py-3.5 bg-gradient-to-r from-blue-600 to-blue-500 text-white font-semibold rounded-xl hover:from-blue-700 hover:to-blue-600 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105 active:scale-95 border border-blue-400/20"
                        >
                            <span class="material-icons @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-2 @else mr-2 @endif">save</span>
                            {{__('messages.common.update')}}
                        </button>
                    </div>
                </form>
            </div>

            <!-- Change Password Card -->
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-200">
                <div class="flex items-center justify-between mb-6">
                    <div>
                        <h3 class="text-xl font-semibold text-gray-900 mb-1">{{__('messages.profile.change password')}}</h3>
                        <p class="text-sm text-gray-500">Update your password to keep your account secure</p>
                    </div>
                    <div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center">
                        <span class="material-icons text-red-600">lock</span>
                    </div>
                </div>

                <form id="password_form" method="post" action="{{route('change_password')}}" class="space-y-6">
                    @csrf
                    
                    <!-- New Password -->
                    <div>
                        <label for="newpassword" class="block text-sm font-medium text-gray-700 mb-2">
                            {{__('messages.profile.new password')}}
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <span class="material-icons text-gray-400 text-xl">lock</span>
                            </div>
                            <input 
                                type="password" 
                                id="newpassword" 
                                name="newpassword" 
                                class="block w-full pl-12 pr-12 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors @error('newpassword') border-red-500 @enderror"
                                placeholder="Enter new password"
                            >
                            <button 
                                type="button" 
                                onclick="togglePassword('newpassword', this)"
                                class="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-400 hover:text-gray-600"
                            >
                                <span class="material-icons text-xl">visibility</span>
                            </button>
                        </div>
                        @error('newpassword')
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <span class="material-icons text-base mr-1">error_outline</span>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <!-- Confirm Password -->
                    <div>
                        <label for="confirmpassword" class="block text-sm font-medium text-gray-700 mb-2">
                            {{__('messages.profile.confirm password')}}
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <span class="material-icons text-gray-400 text-xl">lock_outline</span>
                            </div>
                            <input 
                                type="password" 
                                id="confirmpassword" 
                                name="confirmpassword" 
                                class="block w-full pl-12 pr-12 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors @error('confirmpassword') border-red-500 @enderror"
                                placeholder="Confirm new password"
                            >
                            <button 
                                type="button" 
                                onclick="togglePassword('confirmpassword', this)"
                                class="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-400 hover:text-gray-600"
                            >
                                <span class="material-icons text-xl">visibility</span>
                            </button>
                        </div>
                        @error('confirmpassword')
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <span class="material-icons text-base mr-1">error_outline</span>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <!-- Password Strength Indicator (Decorative) -->
                    <div class="bg-gray-50 rounded-xl p-4 border border-gray-200">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm font-medium text-gray-700">Password Strength</span>
                            <span class="text-xs text-gray-500" id="strength-text">Weak</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div id="strength-bar" class="bg-red-500 h-2 rounded-full transition-all duration-300" style="width: 30%"></div>
                        </div>
                        <p class="text-xs text-gray-500 mt-2">Use at least 8 characters with a mix of letters and numbers</p>
                    </div>

                    <!-- Submit Button -->
                    <div class="flex items-center justify-end pt-4 border-t border-gray-100">
                        <button 
                            type="submit" 
                            class="inline-flex items-center px-8 py-3.5 bg-gradient-to-r from-red-600 to-red-500 text-white font-semibold rounded-xl hover:from-red-700 hover:to-red-600 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105 active:scale-95 border border-red-400/20"
                        >
                            <span class="material-icons @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-2 @else mr-2 @endif">lock_reset</span>
                            {{__('messages.common.submit')}}
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Right Column - Stats & Info -->
        <div class="space-y-6">
            <!-- Account Stats Card -->
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
                <h4 class="text-lg font-semibold text-gray-900 mb-4">Account Statistics</h4>
                <div class="space-y-4">
                    <div class="flex items-center justify-between p-4 bg-blue-50 rounded-xl">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
                                <span class="material-icons text-white text-xl">login</span>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600">Last Login</p>
                                <p class="text-sm font-semibold text-gray-900">{{ $profile->updated_at ? $profile->updated_at->diffForHumans() : 'N/A' }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-green-50 rounded-xl">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-green-500 rounded-lg flex items-center justify-center">
                                <span class="material-icons text-white text-xl">calendar_today</span>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600">Member Since</p>
                                <p class="text-sm font-semibold text-gray-900">{{ $profile->created_at ? $profile->created_at->format('M Y') : 'N/A' }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-purple-50 rounded-xl">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-purple-500 rounded-lg flex items-center justify-center">
                                <span class="material-icons text-white text-xl">admin_panel_settings</span>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600">Role</p>
                                <p class="text-sm font-semibold text-gray-900">{{ $profile->roles->first()->name ?? 'User' }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Actions Card -->
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
                <h4 class="text-lg font-semibold text-gray-900 mb-4">Quick Actions</h4>
                <div class="space-y-2">
                    <a href="{{route('dashboard')}}" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors">
                        <span class="material-icons @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-3 @else mr-3 @endif text-xl">dashboard</span>
                        Go to Dashboard
                    </a>
                    <button class="w-full flex items-center px-4 py-3 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 hover:border-blue-300 hover:text-blue-700 transition-all duration-200 shadow-sm hover:shadow-md">
                        <span class="material-icons @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-3 @else mr-3 @endif text-xl">notifications</span>
                        Notification Settings
                    </button>
                    <button class="w-full flex items-center px-4 py-3 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 hover:border-blue-300 hover:text-blue-700 transition-all duration-200 shadow-sm hover:shadow-md">
                        <span class="material-icons @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-3 @else mr-3 @endif text-xl">security</span>
                        Security Settings
                    </button>
                </div>
            </div>

            <!-- Security Tips Card -->
            <div class="bg-gradient-to-br from-amber-50 to-orange-50 rounded-2xl border border-amber-200 p-6">
                <div class="flex items-start space-x-3">
                    <div class="w-10 h-10 bg-amber-500 rounded-lg flex items-center justify-center flex-shrink-0">
                        <span class="material-icons text-white text-xl">lightbulb</span>
                    </div>
                    <div class="flex-1">
                        <h4 class="text-lg font-semibold text-gray-900 mb-3">Security Tips</h4>
                        <ul class="space-y-2.5 text-sm text-gray-700">
                            <li class="flex items-center">
                                <span class="material-icons text-amber-600 text-lg @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-2 @else mr-2 @endif flex-shrink-0">check_circle</span>
                                <span class="leading-relaxed">Use a strong, unique password</span>
                            </li>
                            <li class="flex items-center">
                                <span class="material-icons text-amber-600 text-lg @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-2 @else mr-2 @endif flex-shrink-0">check_circle</span>
                                <span class="leading-relaxed">Update your password regularly</span>
                            </li>
                            <li class="flex items-center">
                                <span class="material-icons text-amber-600 text-lg @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-2 @else mr-2 @endif flex-shrink-0">check_circle</span>
                                <span class="leading-relaxed">Never share your credentials</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    function profileData() {
        return {
            init() {
                // Password strength checker (decorative)
                const newPasswordInput = document.getElementById('newpassword');
                const confirmPasswordInput = document.getElementById('confirmpassword');
                
                if (newPasswordInput) {
                    newPasswordInput.addEventListener('input', (e) => {
                        this.checkPasswordStrength(e.target.value);
                    });
                }
                
                if (confirmPasswordInput && newPasswordInput) {
                    confirmPasswordInput.addEventListener('input', (e) => {
                        this.validatePasswordMatch(newPasswordInput.value, e.target.value);
                    });
                }
            },
            checkPasswordStrength(password) {
                const strengthBar = document.getElementById('strength-bar');
                const strengthText = document.getElementById('strength-text');
                
                if (!strengthBar || !strengthText) return;
                
                let strength = 0;
                if (password.length >= 8) strength += 25;
                if (password.length >= 12) strength += 25;
                if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength += 25;
                if (/\d/.test(password)) strength += 15;
                if (/[^a-zA-Z\d]/.test(password)) strength += 10;
                
                strengthBar.style.width = strength + '%';
                
                if (strength < 40) {
                    strengthBar.className = 'bg-red-500 h-2 rounded-full transition-all duration-300';
                    strengthText.textContent = 'Weak';
                } else if (strength < 70) {
                    strengthBar.className = 'bg-yellow-500 h-2 rounded-full transition-all duration-300';
                    strengthText.textContent = 'Medium';
                } else {
                    strengthBar.className = 'bg-green-500 h-2 rounded-full transition-all duration-300';
                    strengthText.textContent = 'Strong';
                }
            },
            validatePasswordMatch(password, confirmPassword) {
                const confirmInput = document.getElementById('confirmpassword');
                if (confirmInput && password && confirmPassword) {
                    if (password !== confirmPassword) {
                        confirmInput.classList.add('border-red-500');
                    } else {
                        confirmInput.classList.remove('border-red-500');
                    }
                }
            }
        }
    }
    
    function previewImage(input) {
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const preview = document.getElementById('image-preview');
                const img = document.getElementById('preview-img');
                if (preview && img) {
                    img.src = e.target.result;
                    preview.classList.remove('hidden');
                }
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
    
    function togglePassword(inputId, button) {
        const input = document.getElementById(inputId);
        const icon = button.querySelector('.material-icons');
        if (input.type === 'password') {
            input.type = 'text';
            icon.textContent = 'visibility_off';
        } else {
            input.type = 'password';
            icon.textContent = 'visibility';
        }
    }
</script>
@endpush
@endsection