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

@section('content')
@php
    $userRole = auth()->user()->roles->first();
    $isAdminRole = $userRole && method_exists($userRole, 'isAdminRole') ? $userRole->isAdminRole() : ($userRole && ($userRole->is_admin_role == 1 || $userRole->is_admin_role === true));
@endphp
<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">{{__('messages.profile.profile_settings')}}</h2>
                <p class="text-gray-600">{{__('messages.profile.manage_account_info')}}</p>
            </div>
            <a href="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('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>
                {{__('messages.profile.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 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') md:space-x-reverse md:space-x-6 @else md:space-x-6 @endif" dir="ltr">
                <!-- Profile Picture -->
                <div class="relative group @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') order-2 @endif">
                    <label for="image" class="cursor-pointer block">
                        <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 id="profile-preview-img" class="w-full h-full rounded-xl object-cover" src="{{$profile->image_url}}" alt="Profile">
                            @else
                                <div id="profile-preview-placeholder" 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->full_name ?? $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 pointer-events-none">
                            <span class="material-icons text-white text-3xl">camera_alt</span>
                        </div>
                    </label>
                </div>
                
                <!-- Profile Info -->
                <div class="flex-1 text-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') md:text-right @else md:text-left @endif @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') order-1 @endif">
                    <h3 class="text-3xl font-bold mb-2">{{ $profile->full_name ?? $profile->name ?? 'User' }}</h3>
                    <p class="text-blue-100 mb-4 flex items-center justify-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') md:justify-end @else md:justify-start @endif" dir="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') rtl @else ltr @endif">
                        @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku')
                            <span class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') pr-2 @endif">{{ $profile->username ?? __('messages.profile.no_username') }}</span>
                            <span class="material-icons text-lg">person</span>
                        @else
                            <span class="material-icons mr-2 text-lg">person</span>
                            {{ $profile->username ?? __('messages.profile.no_username') }}
                        @endif
                    </p>
                    <div class="flex flex-wrap items-center justify-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') md:justify-end @else md:justify-start @endif gap-4">
                        <div class="flex items-center bg-white/20 backdrop-blur-sm rounded-lg px-4 py-2" dir="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') rtl @else ltr @endif">
                            @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku')
                                <span class="text-sm font-medium pr-2">{{__('messages.profile.verified_account')}}</span>
                                <span class="material-icons text-lg">verified</span>
                            @else
                                <span class="material-icons text-lg mr-2">verified</span>
                                <span class="text-sm font-medium">{{__('messages.profile.verified_account')}}</span>
                            @endif
                        </div>
                        <div class="flex items-center bg-white/20 backdrop-blur-sm rounded-lg px-4 py-2" dir="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') rtl @else ltr @endif">
                            @php
                                $firstRole = $profile->roles->first();
                                $roleName = $firstRole ? $firstRole->name : __('messages.profile.user');
                                // If role has is_admin_role = 1, display "Admin" instead of role name
                                if ($firstRole && ($firstRole->is_admin_role == 1 || $firstRole->is_admin_role === true || $firstRole->is_admin_role === '1')) {
                                    $roleName = __('messages.profile.admin') ?? 'Admin';
                                }
                            @endphp
                            @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku')
                                <span class="text-sm font-medium pr-2">{{ $roleName }}</span>
                                <span class="material-icons text-lg">admin_panel_settings</span>
                            @else
                                <span class="material-icons text-lg mr-2">admin_panel_settings</span>
                                <span class="text-sm font-medium">{{ $roleName }}</span>
                            @endif
                        </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 relative" x-data="{ loading: false, showSuccess: false }" x-cloak>
                <div class="flex items-center justify-between mb-6">
                    <div>
                        <h3 class="text-xl font-semibold text-gray-900 mb-1">{{__('messages.profile.personal_information')}}</h3>
                        <p class="text-sm text-gray-500">{{__('messages.profile.update_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>

                <!-- Success Message -->
                <div x-show="showSuccess" x-transition:enter="fade-in" class="mb-6 bg-green-50 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') border-r-4 @else border-l-4 @endif border-green-500 rounded-xl p-5 shadow-sm">
                    <div class="flex items-start @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                        <div class="flex-shrink-0">
                            <span class="material-icons text-green-600 text-2xl">check_circle</span>
                        </div>
                        <div class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-4 @else ml-4 @endif flex-1">
                            <p class="text-green-800 font-medium">{{__('messages.common.update_success')}}</p>
                        </div>
                        <button @click="showSuccess = false" class="flex-shrink-0 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-auto @else ml-auto @endif text-green-600 hover:text-green-800 transition-colors">
                            <span class="material-icons">close</span>
                        </button>
                    </div>
                </div>

                <!-- Loading Overlay -->
                <div x-show="loading" class="absolute inset-0 bg-white bg-opacity-90 rounded-2xl flex items-center justify-center z-50" style="display: none;">
                    <div class="text-center">
                        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
                        <p class="text-gray-700 font-medium">{{__('messages.common.saving')}}</p>
                    </div>
                </div>

                <form id="user_form" method="post" action="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('update_profile', [$profile->id]) }}" enctype="multipart/form-data" class="space-y-6" @submit="loading = true" x-show="!loading" x-transition:opacity>
                    @csrf
                    @if(\App\Helpers\ServerHelper::isApiServer() && request()->query('city'))
                        <input type="hidden" name="city" value="{{ request()->query('city') }}">
                    @endif
                    @if(request()->query('building'))
                        <input type="hidden" name="building" value="{{ request()->query('building') }}">
                    @endif
                    
                    <!-- Hidden Name Field (required by validation, uses full_name or username) -->
                    <input type="hidden" name="name" id="name" value="{{$profile->name}}">
                    
                    <!-- Full Name Field -->
                    <div>
                        <label for="full_name" class="block text-sm font-medium text-gray-700 mb-2">
                            {{__('messages.profile.full_name')}}
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') right-0 pr-4 @else left-0 pl-4 @endif flex items-center pointer-events-none">
                                <span class="material-icons text-gray-400 text-xl">badge</span>
                            </div>
                            <input 
                                type="text" 
                                id="full_name" 
                                name="full_name" 
                                value="{{$profile->full_name}}" 
                                onchange="updateNameField()"
                                class="block w-full @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') pr-12 pl-4 @else pl-12 pr-4 @endif py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors @error('full_name') border-red-500 @enderror"
                                placeholder="{{__('messages.profile.enter_your_full_name')}}"
                            >
                        </div>
                        <div class="full_name">
                            @error('full_name')
                                <p class="mt-2 text-sm text-red-600 flex items-center">
                                    <span class="material-icons text-base @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-1 @else mr-1 @endif">error_outline</span>
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>
                    </div>

                    <!-- Username Field -->
                    @if(!$isAdminRole)
                    <div>
                        <label for="username" class="block text-sm font-medium text-gray-700 mb-2">
                            {{__('messages.profile.username')}}
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') right-0 pr-4 @else left-0 pl-4 @endif flex items-center pointer-events-none">
                                <span class="material-icons text-gray-400 text-xl">person</span>
                            </div>
                            <input 
                                type="text" 
                                id="username" 
                                name="username" 
                                value="{{$profile->username}}" 
                                class="block w-full @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') pr-12 pl-4 @else pl-12 pr-4 @endif py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors @error('username') border-red-500 @enderror"
                                placeholder="{{__('messages.profile.enter_your_username')}}"
                                required
                            >
                        </div>
                        <div class="username">
                            @error('username')
                                <p class="mt-2 text-sm text-red-600 flex items-center">
                                    <span class="material-icons text-base @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-1 @else mr-1 @endif">error_outline</span>
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>
                    </div>
                    @else
                    <!-- Hidden username field for admin roles (to maintain form structure) -->
                    <input type="hidden" name="username" value="{{$profile->username}}">
                    @endif

                    <!-- 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 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') space-x-reverse space-x-4 @else space-x-4 @endif">
                            <div class="relative">
                                <input 
                                    type="file" 
                                    id="image" 
                                    name="image" 
                                    accept="image/*"
                                    class="hidden"
                                    onchange="handleImageInputChange(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>
                                    {{__('messages.profile.choose_image')}}
                                </label>
                            </div>
                            @if(isset($profile->image) && Storage::disk('public')->exists($profile->image))
                                <div class="flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') space-x-reverse space-x-2 @else space-x-2 @endif text-sm text-gray-600">
                                    <span class="material-icons text-base">check_circle</span>
                                    <span>{{__('messages.profile.image_uploaded')}}</span>
                                </div>
                            @endif
                        </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 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>
                    </div>

                    <!-- Submit Button -->
                    <div class="flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') justify-start @else justify-end @endif 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"
                            x-bind:disabled="loading"
                        >
                            <span x-show="!loading" class="material-icons @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-2 @else mr-2 @endif">save</span>
                            <span x-show="loading" class="animate-spin material-icons @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-2 @else mr-2 @endif">sync</span>
                            <span x-text="loading ? '{{__('messages.common.saving')}}' : '{{__('messages.common.update')}}'"></span>
                        </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 relative" x-data="{ loading: false, showSuccess: false }" x-cloak>
                <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">{{__('messages.profile.update_password_description')}}</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>

                <!-- Success Message -->
                <div x-show="showSuccess" x-transition:enter="fade-in" class="mb-6 bg-green-50 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') border-r-4 @else border-l-4 @endif border-green-500 rounded-xl p-5 shadow-sm">
                    <div class="flex items-start @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                        <div class="flex-shrink-0">
                            <span class="material-icons text-green-600 text-2xl">check_circle</span>
                        </div>
                        <div class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-4 @else ml-4 @endif flex-1">
                            <p class="text-green-800 font-medium">{{__('messages.common.update_success')}}</p>
                        </div>
                        <button @click="showSuccess = false" class="flex-shrink-0 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-auto @else ml-auto @endif text-green-600 hover:text-green-800 transition-colors">
                            <span class="material-icons">close</span>
                        </button>
                    </div>
                </div>

                <!-- Loading Overlay -->
                <div x-show="loading" class="absolute inset-0 bg-white bg-opacity-90 rounded-2xl flex items-center justify-center z-50" style="display: none;">
                    <div class="text-center">
                        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
                        <p class="text-gray-700 font-medium">{{__('messages.common.saving')}}</p>
                    </div>
                </div>

                <form id="password_form" method="post" action="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('change_password') }}" class="space-y-6" @submit="loading = true" x-show="!loading" x-transition:opacity>
                    @if(\App\Helpers\ServerHelper::isApiServer() && request()->query('city'))
                        <input type="hidden" name="city" value="{{ request()->query('city') }}">
                    @endif
                    @if(request()->query('building'))
                        <input type="hidden" name="building" value="{{ request()->query('building') }}">
                    @endif
                    @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 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') right-0 pr-4 @else left-0 pl-4 @endif 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 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') pr-12 pl-12 @else pl-12 pr-12 @endif 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="{{__('messages.profile.enter_new_password')}}"
                                required
                            >
                            <button 
                                type="button" 
                                onclick="togglePassword('newpassword', this)"
                                class="absolute inset-y-0 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') left-0 pl-4 @else right-0 pr-4 @endif flex items-center text-gray-400 hover:text-gray-600"
                            >
                                <span class="material-icons text-xl">visibility</span>
                            </button>
                        </div>
                        <div class="newpassword">
                            @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>
                    </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 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') right-0 pr-4 @else left-0 pl-4 @endif 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 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') pr-12 pl-12 @else pl-12 pr-12 @endif 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="{{__('messages.profile.confirm_new_password')}}"
                                required
                            >
                            <button 
                                type="button" 
                                onclick="togglePassword('confirmpassword', this)"
                                class="absolute inset-y-0 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') left-0 pl-4 @else right-0 pr-4 @endif flex items-center text-gray-400 hover:text-gray-600"
                            >
                                <span class="material-icons text-xl">visibility</span>
                            </button>
                        </div>
                        <div class="confirmpassword">
                            @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>
                    </div>

                    <!-- Password Strength Indicator (Decorative) -->
                    <div id="password-strength-container" class="bg-gray-50 rounded-xl p-4 border border-gray-200 hidden">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm font-medium text-gray-700">{{__('messages.profile.password_strength')}}</span>
                            <span class="text-xs text-gray-500 font-medium" id="strength-text"></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: 0%"></div>
                        </div>
                        <p class="text-xs text-gray-500 mt-2">{{__('messages.profile.password_requirements')}}</p>
                    </div>

                    <!-- Submit Button -->
                    <div class="flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') justify-start @else justify-end @endif 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"
                            x-bind:disabled="loading"
                        >
                            <span x-show="!loading" class="material-icons @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-2 @else mr-2 @endif">lock_reset</span>
                            <span x-show="loading" class="animate-spin material-icons @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-2 @else mr-2 @endif">sync</span>
                            <span x-text="loading ? '{{__('messages.common.saving')}}' : '{{__('messages.common.submit')}}'"></span>
                        </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">{{__('messages.profile.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 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') space-x-reverse space-x-3 @else space-x-3 @endif">
                            <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">{{__('messages.profile.last_login')}}</p>
                                <p class="text-sm font-semibold text-gray-900">
                                    @if($profile->updated_at)
                                        @php
                                            $locale = \App::currentLocale();
                                            if($locale == 'ku') {
                                                \Carbon\Carbon::setLocale('ckb'); // Sorani Kurdish
                                            } elseif($locale == 'iq') {
                                                \Carbon\Carbon::setLocale('ar');
                                            } else {
                                                \Carbon\Carbon::setLocale('en');
                                            }
                                        @endphp
                                        {{ $profile->updated_at->diffForHumans() }}
                                    @else
                                        {{__('messages.profile.not_available')}}
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-green-50 rounded-xl">
                        <div class="flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') space-x-reverse space-x-3 @else space-x-3 @endif">
                            <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">{{__('messages.profile.member_since')}}</p>
                                <p class="text-sm font-semibold text-gray-900">
                                    @if($profile->created_at)
                                        @php
                                            $locale = \App::currentLocale();
                                            if($locale == 'ku') {
                                                // Sorani Kurdish month names
                                                $months = [
                                                    1 => 'کانونی دووەم', 2 => 'شوبات', 3 => 'ئازار', 4 => 'نیسان',
                                                    5 => 'ئایار', 6 => 'حوزەیران', 7 => 'تەممووز', 8 => 'ئاب',
                                                    9 => 'ئەیلوول', 10 => 'تشرینی یەکەم', 11 => 'تشرینی دووەم', 12 => 'کانونی یەکەم'
                                                ];
                                                $month = $months[$profile->created_at->month];
                                                $year = $profile->created_at->year;
                                                echo $month . ' ' . $year;
                                            } elseif($locale == 'iq') {
                                                // Arabic month names
                                                $months = [
                                                    1 => 'يناير', 2 => 'فبراير', 3 => 'مارس', 4 => 'أبريل',
                                                    5 => 'مايو', 6 => 'يونيو', 7 => 'يوليو', 8 => 'أغسطس',
                                                    9 => 'سبتمبر', 10 => 'أكتوبر', 11 => 'نوفمبر', 12 => 'ديسمبر'
                                                ];
                                                $month = $months[$profile->created_at->month];
                                                $year = $profile->created_at->year;
                                                echo $month . ' ' . $year;
                                            } else {
                                                echo $profile->created_at->format('M Y');
                                            }
                                        @endphp
                                    @else
                                        {{__('messages.profile.not_available')}}
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-purple-50 rounded-xl">
                        <div class="flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') space-x-reverse space-x-3 @else space-x-3 @endif">
                            <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">{{__('messages.profile.role')}}</p>
                                @php
                                    $firstRole = $profile->roles->first();
                                    $roleName = $firstRole ? $firstRole->name : __('messages.profile.user');
                                    // If role has is_admin_role = 1, display "Admin" instead of role name
                                    if ($firstRole && ($firstRole->is_admin_role == 1 || $firstRole->is_admin_role === true || $firstRole->is_admin_role === '1')) {
                                        $roleName = __('messages.profile.admin') ?? 'Admin';
                                    }
                                @endphp
                                <p class="text-sm font-semibold text-gray-900">{{ $roleName }}</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">{{__('messages.profile.quick_actions')}}</h4>
                <div class="space-y-2">
                    <a href="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('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>
                        {{__('messages.profile.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>
                        {{__('messages.profile.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>
                        {{__('messages.profile.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 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') space-x-reverse space-x-3 @else space-x-3 @endif">
                    <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">{{__('messages.profile.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">{{__('messages.profile.tip_strong_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">{{__('messages.profile.tip_update_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">{{__('messages.profile.tip_never_share')}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="{{asset('app-assets/vendors/jquery-validation/jquery.validate.min.js')}}"></script>
<script>
    function profileData() {
        return {
            init() {
                // Check for success message in session and show it
                @if(session('success'))
                    const successMessage = '{{ session('success') }}';
                    // Show success message on the appropriate form
                    document.querySelectorAll('[x-data*="showSuccess"]').forEach(form => {
                        const alpine = Alpine.$data(form);
                        if (alpine && alpine.showSuccess !== undefined) {
                            alpine.showSuccess = true;
                            setTimeout(() => {
                                alpine.showSuccess = false;
                            }, 5000);
                        }
                    });
                @endif
                
                // Form validation
                $('#user_form').validate({
                    rules: {
                        username: {
                            required: true,
                        },
                    },
                    errorElement: 'div',
                    errorPlacement: function(error, element) {
                        var placement = $(element).data('error');
                        if (placement) {
                            $(placement).append(error)
                        } else {
                            error.insertAfter(element);
                        }
                    }
                });

                $('#password_form').validate({
                    rules: {
                        newpassword: {
                            required: true,
                        },
                        confirmpassword: {
                            required: true,
                            equalTo: "#newpassword"
                        },
                    },
                    errorElement: 'div',
                    errorPlacement: function(error, element) {
                        var placement = $(element).data('error');
                        if (placement) {
                            $(placement).append(error)
                        } else {
                            error.insertAfter(element);
                        }
                    }
                });
                
                // 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');
                const strengthContainer = document.getElementById('password-strength-container');
                
                if (!strengthBar || !strengthText || !strengthContainer) return;
                
                // Hide indicator if password is empty
                if (!password || password.length === 0) {
                    strengthContainer.classList.add('hidden');
                    strengthBar.style.width = '0%';
                    strengthText.textContent = '';
                    return;
                }
                
                // Show indicator when password has content
                strengthContainer.classList.remove('hidden');
                
                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;
                
                // Smooth animation
                strengthBar.style.transition = 'width 0.3s ease, background-color 0.3s ease';
                strengthBar.style.width = strength + '%';
                
                const weakText = '{{__('messages.profile.weak')}}';
                const mediumText = '{{__('messages.profile.medium')}}';
                const strongText = '{{__('messages.profile.strong')}}';
                
                if (strength < 40) {
                    strengthBar.className = 'bg-red-500 h-2 rounded-full transition-all duration-300';
                    strengthText.textContent = weakText;
                    strengthText.className = 'text-xs text-red-600 font-medium';
                } else if (strength < 70) {
                    strengthBar.className = 'bg-yellow-500 h-2 rounded-full transition-all duration-300';
                    strengthText.textContent = mediumText;
                    strengthText.className = 'text-xs text-yellow-600 font-medium';
                } else {
                    strengthBar.className = 'bg-green-500 h-2 rounded-full transition-all duration-300';
                    strengthText.textContent = strongText;
                    strengthText.className = 'text-xs text-green-600 font-medium';
                }
            },
            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 handleImageInputChange(input) {
        if (input.files && input.files[0]) {
            const file = input.files[0];
            
            // Validate file type
            if (!file.type.match('image.*')) {
                alert('{{__('messages.profile.please_select_image')}}');
                input.value = ''; // Clear the input
                return;
            }
            
            // Validate file size (max 5MB)
            if (file.size > 5 * 1024 * 1024) {
                alert('{{__('messages.profile.image_too_large')}}');
                input.value = ''; // Clear the input
                return;
            }
            
            const reader = new FileReader();
            reader.onload = function(e) {
                // Update profile preview
                const previewImg = document.getElementById('profile-preview-img');
                const placeholder = document.getElementById('profile-preview-placeholder');
                
                if (previewImg) {
                    previewImg.src = e.target.result;
                    if (placeholder) {
                        placeholder.style.display = 'none';
                    }
                } else if (placeholder) {
                    placeholder.outerHTML = '<img id="profile-preview-img" class="w-full h-full rounded-xl object-cover" src="' + e.target.result + '" alt="Profile Preview">';
                }
                
                // Update form preview if it exists
                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(file);
        }
    }
    
    // Keep previewImage for backward compatibility
    function previewImage(input) {
        handleImageInputChange(input);
    }
    
    
    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';
        }
    }
    
    function updateNameField() {
        // Update hidden name field with full_name if available, otherwise username
        const fullNameInput = document.getElementById('full_name');
        const usernameInput = document.getElementById('username');
        const nameInput = document.getElementById('name');
        
        if (nameInput && fullNameInput && usernameInput) {
            const fullName = fullNameInput.value.trim();
            const username = usernameInput.value.trim();
            // Use full_name if provided, otherwise use username, otherwise use current name
            nameInput.value = fullName || username || nameInput.value;
        }
    }
    
    // Update name field when username or full_name changes
    document.addEventListener('DOMContentLoaded', function() {
        const usernameInput = document.getElementById('username');
        const fullNameInput = document.getElementById('full_name');
        
        if (usernameInput) {
            usernameInput.addEventListener('change', updateNameField);
            usernameInput.addEventListener('input', updateNameField);
        }
        
        if (fullNameInput) {
            fullNameInput.addEventListener('change', updateNameField);
            fullNameInput.addEventListener('input', updateNameField);
        }
        
        // Initialize name field on page load
        updateNameField();
    });
</script>
@endpush
@endsection