@extends('layouts.panel')

@section('title', 'پروفایل: ' . ($user->full_name ?? $user->name ?? $user->username))

@section('content')
<div class="fixed inset-0 -z-10 h-full w-full bg-slate-900 bg-[radial-gradient(#1e293b_1px,transparent_1px)] [background-size:16px_16px]"></div>

<div class="mx-auto w-full max-w-4xl">
    <!-- Header -->
    <header class="flex flex-col sm:flex-row justify-between items-start sm:items-center border-b pb-4 mb-6 border-slate-700">
        <h1 class="text-2xl font-bold text-slate-100">پروفایل کاربر</h1>
        @if($canEdit)
            <button id="toggleEditBtn" type="button" class="mt-4 sm:mt-0 px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors font-medium">
                <i class="fas fa-edit ml-2"></i>
                ویرایش پروفایل
            </button>
        @endif
    </header>
    
    @if(session('success'))
        <div class="mb-4 p-4 bg-green-500/20 border border-green-500/50 rounded-lg text-green-300">
            {{ session('success') }}
        </div>
    @endif
    
    @if($errors->any())
        <div class="mb-4 p-4 bg-red-500/20 border border-red-500/50 rounded-lg text-red-300">
            <ul class="list-disc list-inside">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- Profile Card -->
    <div class="bg-slate-800/50 backdrop-blur-sm rounded-xl border border-slate-700/50 p-6 shadow-xl">
        <!-- Profile Header -->
        <div class="flex flex-col sm:flex-row items-start sm:items-center gap-6 pb-6 border-b border-slate-700 mb-6">
            <div class="flex-shrink-0 relative">
                @php
                    $avatarUrl = $user->avatar_url;
                    $avatarInitial = $user->avatar_initial;
                    $avatarColors = $user->avatar_color;
                    $canEdit = Auth::id() === $user->id || Auth::user()->hasRole(['سوپر ادمین', 'مدیریت', 'ادمین']);
                    $primaryRole = $user->getPrimaryRole();
                    $prefix = match($primaryRole) {
                        'sales' => 'sales',
                        'purchase' => 'purchase',
                        default => 'admin',
                    };
                @endphp
                <div class="relative group">
                    @if($avatarUrl)
                        <img src="{{ $avatarUrl }}" alt="{{ $user->full_name ?? $user->name }}" class="w-24 h-24 rounded-full object-cover border-2 border-slate-600" id="avatarImage">
                        <div class="user-avatar-fallback bg-gradient-to-br {{ $avatarColors[0] }} {{ $avatarColors[1] }} w-24 h-24 rounded-full flex items-center justify-center text-white text-3xl font-bold border-2 border-slate-600 hidden" id="avatarFallback">
                            {{ $avatarInitial }}
                        </div>
                    @else
                        <div class="user-avatar-fallback bg-gradient-to-br {{ $avatarColors[0] }} {{ $avatarColors[1] }} w-24 h-24 rounded-full flex items-center justify-center text-white text-3xl font-bold border-2 border-slate-600" id="avatarFallback">
                            {{ $avatarInitial }}
                        </div>
                        <img src="" alt="" class="w-24 h-24 rounded-full object-cover border-2 border-slate-600 hidden" id="avatarImage">
                    @endif
                    @if($canEdit)
                        <div class="absolute inset-0 bg-black/50 rounded-full opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center cursor-pointer" id="avatarOverlay">
                            <label for="avatarInput" class="cursor-pointer p-2 bg-white/20 rounded-full hover:bg-white/30 transition-colors">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <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" />
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
                                </svg>
                            </label>
                            @if($avatarUrl)
                                <button type="button" onclick="removeAvatar()" class="absolute bottom-0 right-0 p-1.5 bg-red-500/80 rounded-full hover:bg-red-600 transition-colors" title="حذف آواتار">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                    </svg>
                                </button>
                            @endif
                        </div>
                        <input type="file" id="avatarInput" accept="image/jpeg,image/png,image/jpg,image/gif" class="hidden" onchange="uploadAvatar(this)">
                    @endif
                </div>
            </div>
            <div class="flex-1">
                <h2 class="text-2xl font-bold text-slate-100 mb-2">
                    {{ $user->full_name ?? $user->name }}
                </h2>
                @if($user->roles->count() > 0)
                    <div class="flex flex-wrap gap-2">
                        @foreach($user->roles as $role)
                            <span class="px-3 py-1 rounded-full text-xs font-medium 
                                @if($role->name === 'سوپر ادمین' || $role->name === 'مدیریت')
                                    bg-red-500/20 text-red-300 border border-red-500/30
                                @elseif($role->name === 'کارشناس فروش')
                                    bg-blue-500/20 text-blue-300 border border-blue-500/30
                                @elseif($role->name === 'کارشناس خرید')
                                    bg-green-500/20 text-green-300 border border-green-500/30
                                @else
                                    bg-slate-500/20 text-slate-300 border border-slate-500/30
                                @endif">
                                {{ $role->name }}
                            </span>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

        <!-- Profile Details -->
        <div id="profileView" class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Basic Information -->
            <div>
                <h3 class="text-lg font-semibold text-slate-200 mb-4">اطلاعات پایه</h3>
                <div class="space-y-4">
                    <div>
                        <label class="text-sm font-medium text-slate-400">نام کاربری:</label>
                        <p class="text-slate-100 mt-1">{{ $user->username ?? '-' }}</p>
                    </div>
                    <div>
                        <label class="text-sm font-medium text-slate-400">نام:</label>
                        <p class="text-slate-100 mt-1">{{ $user->first_name ?? '-' }}</p>
                    </div>
                    <div>
                        <label class="text-sm font-medium text-slate-400">نام خانوادگی:</label>
                        <p class="text-slate-100 mt-1">{{ $user->last_name ?? '-' }}</p>
                    </div>
                    <div>
                        <label class="text-sm font-medium text-slate-400">ایمیل:</label>
                        <p class="text-slate-100 mt-1">{{ $user->email ?? '-' }}</p>
                    </div>
                    <div>
                        <label class="text-sm font-medium text-slate-400">تلفن:</label>
                        <p class="text-slate-100 mt-1">{{ $user->phone ?? '-' }}</p>
                    </div>
                </div>
            </div>

            <!-- Additional Information -->
            <div>
                <h3 class="text-lg font-semibold text-slate-200 mb-4">اطلاعات تکمیلی</h3>
                <div class="space-y-4">
                    <div>
                        <label class="text-sm font-medium text-slate-400">تاریخ عضویت:</label>
                        <p class="text-slate-100 mt-1">
                            @if($user->created_at)
                                {{ \Morilog\Jalali\Jalalian::fromDateTime($user->created_at)->format('Y/m/d H:i') }}
                            @else
                                -
                            @endif
                        </p>
                    </div>
                    <div>
                        <label class="text-sm font-medium text-slate-400">آخرین ورود:</label>
                        <p class="text-slate-100 mt-1">
                            @if($user->last_login_at)
                                {{ \Morilog\Jalali\Jalalian::fromDateTime($user->last_login_at)->format('Y/m/d H:i') }}
                            @else
                                هرگز
                            @endif
                        </p>
                    </div>
                    @if($user->last_login_ip)
                        <div>
                            <label class="text-sm font-medium text-slate-400">آخرین IP:</label>
                            <p class="text-slate-100 mt-1">{{ $user->last_login_ip }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        
        <!-- Edit Form (Hidden by default) -->
        @if($canEdit)
        <div id="profileEditForm" class="hidden">
            <form action="{{ route($prefix . '.profile.update', ['username' => $user->username]) }}" method="POST" class="space-y-6">
                @csrf
                @method('PUT')
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <h3 class="text-lg font-semibold text-slate-200 mb-4">اطلاعات پایه</h3>
                        <div class="space-y-4">
                            @if(Auth::user()->hasRole(['سوپر ادمین', 'مدیریت', 'ادمین']))
                            <div>
                                <label for="username" class="block text-sm font-medium text-slate-400 mb-2">نام کاربری:</label>
                                <input type="text" id="username" name="username" value="{{ old('username', $user->username) }}" 
                                       class="w-full px-4 py-2 bg-slate-700/50 border border-slate-600 rounded-lg text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                @error('username')
                                    <p class="text-red-400 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            @endif
                            
                            <div>
                                <label for="first_name" class="block text-sm font-medium text-slate-400 mb-2">نام: <span class="text-red-400">*</span></label>
                                <input type="text" id="first_name" name="first_name" value="{{ old('first_name', $user->first_name) }}" required
                                       class="w-full px-4 py-2 bg-slate-700/50 border border-slate-600 rounded-lg text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                @error('first_name')
                                    <p class="text-red-400 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <div>
                                <label for="last_name" class="block text-sm font-medium text-slate-400 mb-2">نام خانوادگی: <span class="text-red-400">*</span></label>
                                <input type="text" id="last_name" name="last_name" value="{{ old('last_name', $user->last_name) }}" required
                                       class="w-full px-4 py-2 bg-slate-700/50 border border-slate-600 rounded-lg text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                @error('last_name')
                                    <p class="text-red-400 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <div>
                                <label for="email" class="block text-sm font-medium text-slate-400 mb-2">ایمیل: <span class="text-red-400">*</span></label>
                                <input type="email" id="email" name="email" value="{{ old('email', $user->email) }}" required
                                       class="w-full px-4 py-2 bg-slate-700/50 border border-slate-600 rounded-lg text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                @error('email')
                                    <p class="text-red-400 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <div>
                                <label for="phone" class="block text-sm font-medium text-slate-400 mb-2">تلفن:</label>
                                <input type="text" id="phone" name="phone" value="{{ old('phone', $user->phone) }}"
                                       class="w-full px-4 py-2 bg-slate-700/50 border border-slate-600 rounded-lg text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                @error('phone')
                                    <p class="text-red-400 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-semibold text-slate-200 mb-4">تغییر رمز عبور</h3>
                        <div class="space-y-4">
                            <div>
                                <label for="password" class="block text-sm font-medium text-slate-400 mb-2">رمز عبور جدید:</label>
                                <input type="password" id="password" name="password" 
                                       class="w-full px-4 py-2 bg-slate-700/50 border border-slate-600 rounded-lg text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                       placeholder="خالی بگذارید اگر نمی‌خواهید تغییر دهید">
                                @error('password')
                                    <p class="text-red-400 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <div>
                                <label for="password_confirmation" class="block text-sm font-medium text-slate-400 mb-2">تکرار رمز عبور:</label>
                                <input type="password" id="password_confirmation" name="password_confirmation" 
                                       class="w-full px-4 py-2 bg-slate-700/50 border border-slate-600 rounded-lg text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                       placeholder="تکرار رمز عبور جدید">
                            </div>
                            
                            <p class="text-sm text-slate-400 mt-4">
                                <i class="fas fa-info-circle ml-1"></i>
                                اگر نمی‌خواهید رمز عبور را تغییر دهید، فیلدهای رمز عبور را خالی بگذارید.
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="flex justify-end gap-4 pt-6 border-t border-slate-700">
                    <button type="button" id="cancelEditBtn" class="px-6 py-2 bg-slate-600 hover:bg-slate-700 text-white rounded-lg transition-colors font-medium">
                        انصراف
                    </button>
                    <button type="submit" class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors font-medium">
                        <i class="fas fa-save ml-2"></i>
                        ذخیره تغییرات
                    </button>
                </div>
            </form>
        </div>
        @endif

        <!-- Permissions -->
        @if($user->permissions->count() > 0)
            <div class="mt-6 pt-6 border-t border-slate-700">
                <h3 class="text-lg font-semibold text-slate-200 mb-4">دسترسی‌های مستقیم</h3>
                <div class="flex flex-wrap gap-2">
                    @foreach($user->permissions as $permission)
                        <span class="px-3 py-1 rounded-full text-xs font-medium bg-indigo-500/20 text-indigo-300 border border-indigo-500/30">
                            {{ $permission->name }}
                        </span>
                    @endforeach
                </div>
            </div>
        @endif
    </div>
</div>

@push('scripts')
<script>
    const avatarUploadRoute = '{{ route($prefix . ".profile.avatar.upload", ["username" => $user->username]) }}';
    const avatarRemoveRoute = '{{ route($prefix . ".profile.avatar.remove", ["username" => $user->username]) }}';
    
    // Toggle edit form
    document.addEventListener('DOMContentLoaded', function() {
        const toggleEditBtn = document.getElementById('toggleEditBtn');
        const cancelEditBtn = document.getElementById('cancelEditBtn');
        const profileView = document.getElementById('profileView');
        const profileEditForm = document.getElementById('profileEditForm');
        
        if (toggleEditBtn && profileView && profileEditForm) {
            toggleEditBtn.addEventListener('click', function() {
                profileView.classList.add('hidden');
                profileEditForm.classList.remove('hidden');
                toggleEditBtn.classList.add('hidden');
            });
        }
        
        if (cancelEditBtn && profileView && profileEditForm) {
            cancelEditBtn.addEventListener('click', function() {
                profileView.classList.remove('hidden');
                profileEditForm.classList.add('hidden');
                if (toggleEditBtn) {
                    toggleEditBtn.classList.remove('hidden');
                }
            });
        }
    });
    
    async function uploadAvatar(input) {
        if (!input.files || !input.files[0]) {
            return;
        }
        
        const file = input.files[0];
        const maxSize = 2 * 1024 * 1024; // 2MB
        
        if (file.size > maxSize) {
            alert('حجم فایل نباید بیشتر از 2 مگابایت باشد');
            input.value = '';
            return;
        }
        
        const formData = new FormData();
        formData.append('avatar', file);
        formData.append('_token', '{{ csrf_token() }}');
        
        const avatarImage = document.getElementById('avatarImage');
        const avatarFallback = document.getElementById('avatarFallback');
        const avatarOverlay = document.getElementById('avatarOverlay');
        
        // Show loading
        if (avatarOverlay) {
            avatarOverlay.innerHTML = '<div class="text-white">در حال آپلود...</div>';
            avatarOverlay.classList.remove('opacity-0');
        }
        
        try {
            const response = await fetch(avatarUploadRoute, {
                method: 'POST',
                body: formData
            });
            
            const data = await response.json();
            
            if (data.success) {
                // Update avatar image
                avatarImage.src = data.avatar_url;
                avatarImage.classList.remove('hidden');
                avatarFallback.classList.add('hidden');
                
                // Show success message
                if (typeof showSuccessModalWithAutoClose === 'function') {
                    showSuccessModalWithAutoClose('آواتار با موفقیت آپلود شد');
                } else {
                    alert('آواتار با موفقیت آپلود شد');
                }
                
                // Reload page after 1 second to update everywhere
                setTimeout(() => {
                    window.location.reload();
                }, 1000);
            } else {
                alert(data.error || 'خطا در آپلود آواتار');
            }
        } catch (error) {
            console.error('Error uploading avatar:', error);
            alert('خطا در آپلود آواتار. لطفاً دوباره تلاش کنید.');
        } finally {
            input.value = '';
            if (avatarOverlay) {
                avatarOverlay.innerHTML = `
                    <label for="avatarInput" class="cursor-pointer p-2 bg-white/20 rounded-full hover:bg-white/30 transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <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" />
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
                        </svg>
                    </label>
                    <button type="button" onclick="removeAvatar()" class="absolute bottom-0 right-0 p-1.5 bg-red-500/80 rounded-full hover:bg-red-600 transition-colors" title="حذف آواتار">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                    </button>
                `;
                avatarOverlay.classList.add('opacity-0');
            }
        }
    }
    
    async function removeAvatar() {
        if (!confirm('آیا از حذف آواتار مطمئن هستید؟')) {
            return;
        }
        
        try {
            const response = await fetch(avatarRemoveRoute, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json'
                }
            });
            
            const data = await response.json();
            
            if (data.success) {
                // Show fallback avatar
                const avatarImage = document.getElementById('avatarImage');
                const avatarFallback = document.getElementById('avatarFallback');
                
                avatarImage.classList.add('hidden');
                avatarFallback.classList.remove('hidden');
                
                // Remove delete button from overlay
                const avatarOverlay = document.getElementById('avatarOverlay');
                if (avatarOverlay) {
                    avatarOverlay.innerHTML = `
                        <label for="avatarInput" class="cursor-pointer p-2 bg-white/20 rounded-full hover:bg-white/30 transition-colors">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <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" />
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                        </label>
                    `;
                }
                
                // Show success message
                if (typeof showSuccessModalWithAutoClose === 'function') {
                    showSuccessModalWithAutoClose('آواتار با موفقیت حذف شد');
                } else {
                    alert('آواتار با موفقیت حذف شد');
                }
                
                // Reload page after 1 second
                setTimeout(() => {
                    window.location.reload();
                }, 1000);
            } else {
                alert(data.error || 'خطا در حذف آواتار');
            }
        } catch (error) {
            console.error('Error removing avatar:', error);
            alert('خطا در حذف آواتار. لطفاً دوباره تلاش کنید.');
        }
    }
    
    // Handle image load error
    document.getElementById('avatarImage').addEventListener('error', function() {
        this.classList.add('hidden');
        document.getElementById('avatarFallback').classList.remove('hidden');
    });
</script>
@endpush
@endsection