{{-- resources/views/general/change-password.blade.php --}}
@extends('layouts.app')

@section('title', 'تغيير كلمة المرور')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 py-12 px-4 sm:px-6 lg:px-8" dir="rtl">
    <div class="max-w-md mx-auto">
        <!-- Header Card -->
        <div class="text-center mb-8">
            <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full shadow-lg mb-4">
                <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
                </svg>
            </div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
                تغيير كلمة المرور
            </h1>
            <p class="text-gray-600 dark:text-gray-400">
                قم بتحديث كلمة المرور الخاصة بك
            </p>
        </div>

        @if(!$canChange)
            <!-- Cannot Change Alert -->
            <div class="bg-red-50 dark:bg-red-900/20 border-r-4 border-red-500 p-6 rounded-xl shadow-lg mb-6">
                <div class="flex items-start">
                    <svg class="w-6 h-6 text-red-500 ml-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                    </svg>
                    <div class="flex-1">
                        <h3 class="text-red-800 dark:text-red-300 font-bold mb-2">
                            لقد استنفذت محاولات التغيير
                        </h3>
                        <p class="text-red-700 dark:text-red-400 text-sm" id="limit-message">
                            جاري تحميل المعلومات...
                        </p>
                    </div>
                </div>
            </div>
        @endif

        <!-- Main Card -->
        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700">
            @if($canChange)
                <!-- Status Info -->
                <div class="bg-gradient-to-r from-blue-500 to-purple-600 px-6 py-4">
                    <div class="flex items-center justify-between text-white">
                        <div>
                            <p class="text-sm opacity-90">المحاولات المتبقية</p>
                            <p class="text-2xl font-bold" id="remaining-changes">...</p>
                        </div>
                        <div class="text-left">
                            <p class="text-sm opacity-90">الفترة</p>
                            <p class="text-lg font-semibold" id="period-text">...</p>
                        </div>
                    </div>
                </div>

                <!-- Form -->
                <form id="password-change-form" class="p-6 space-y-6">
                    @csrf

                    <!-- New Password -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                            كلمة المرور الجديدة
                        </label>
                        <div class="relative">
                            <input type="password" 
                                   id="password" 
                                   name="password" 
                                   required
                                   class="w-full px-4 py-3 pr-12 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white transition-all"
                                   placeholder="أدخل كلمة المرور الجديدة">
                            <button type="button" 
                                    onclick="togglePassword('password')"
                                    class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                </svg>
                            </button>
                        </div>
                        <div class="mt-2 space-y-1">
                            <div class="flex items-center text-xs" id="length-check">
                                <svg class="w-4 h-4 ml-1 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                </svg>
                                <span class="text-gray-600 dark:text-gray-400">8 أحرف على الأقل</span>
                            </div>
                            <div class="flex items-center text-xs" id="uppercase-check">
                                <svg class="w-4 h-4 ml-1 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                </svg>
                                <span class="text-gray-600 dark:text-gray-400">حرف كبير وصغير</span>
                            </div>
                            <div class="flex items-center text-xs" id="number-check">
                                <svg class="w-4 h-4 ml-1 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                </svg>
                                <span class="text-gray-600 dark:text-gray-400">رقم واحد على الأقل</span>
                            </div>
                            <div class="flex items-center text-xs" id="symbol-check">
                                <svg class="w-4 h-4 ml-1 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                </svg>
                                <span class="text-gray-600 dark:text-gray-400">رمز خاص (!@#$%...)</span>
                            </div>
                        </div>
                    </div>

                    <!-- Confirm Password -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                            تأكيد كلمة المرور
                        </label>
                        <div class="relative">
                            <input type="password" 
                                   id="password_confirmation" 
                                   name="password_confirmation" 
                                   required
                                   class="w-full px-4 py-3 pr-12 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white transition-all"
                                   placeholder="أعد إدخال كلمة المرور">
                            <button type="button" 
                                    onclick="togglePassword('password_confirmation')"
                                    class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                </svg>
                            </button>
                        </div>
                        <p class="mt-2 text-xs text-gray-500 dark:text-gray-400" id="match-message"></p>
                    </div>

                    <!-- Submit Button -->
                    <button type="submit" 
                            class="w-full px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 flex items-center justify-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        تغيير كلمة المرور
                    </button>
                </form>
            @else
                <div class="p-6 text-center">
                    <a href="{{ url()->previous() }}" 
                       class="inline-flex items-center px-6 py-3 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 rounded-xl transition-all">
                        العودة للخلف
                    </a>
                </div>
            @endif
        </div>

        <!-- Help Text -->
        <div class="mt-6 text-center">
            <p class="text-sm text-gray-600 dark:text-gray-400">
                هل تواجه مشكلة؟ 
                <a href="#" class="text-blue-600 hover:text-blue-700 dark:text-blue-400 font-semibold">
                    تواصل مع الدعم
                </a>
            </p>
        </div>
    </div>
</div>

<script>
// Load status
fetch('{{ route("password.change.status") }}')
    .then(response => response.json())
    .then(data => {
        if (data.enabled) {
            if (data.can_change) {
                document.getElementById('remaining-changes').textContent = data.remaining;
                document.getElementById('period-text').textContent = data.period;
            } else {
                const limitMsg = document.getElementById('limit-message');
                if (limitMsg) {
                    limitMsg.textContent = `لقد استنفذت جميع محاولات تغيير كلمة المرور المتاحة (${data.limit} ${data.limit === 1 ? 'مرة' : 'مرات'} كل ${data.period}). يرجى المحاولة لاحقاً.`;
                }
            }
        }
    })
    .catch(error => {
        console.error('Error loading status:', error);
    });

// Password validation
const password = document.getElementById('password');
const passwordConfirm = document.getElementById('password_confirmation');

password?.addEventListener('input', function() {
    const value = this.value;
    
    // Length check
    updateCheck('length-check', value.length >= 8);
    
    // Uppercase and lowercase
    updateCheck('uppercase-check', /[a-z]/.test(value) && /[A-Z]/.test(value));
    
    // Number check
    updateCheck('number-check', /\d/.test(value));
    
    // Symbol check
    updateCheck('symbol-check', /[!@#$%^&*(),.?":{}|<>]/.test(value));
    
    checkMatch();
});

passwordConfirm?.addEventListener('input', checkMatch);

function updateCheck(id, isValid) {
    const element = document.getElementById(id);
    if (!element) return;
    
    const svg = element.querySelector('svg');
    const span = element.querySelector('span');
    
    if (isValid) {
        svg.classList.remove('text-gray-400');
        svg.classList.add('text-green-500');
        span.classList.remove('text-gray-600', 'dark:text-gray-400');
        span.classList.add('text-green-600', 'dark:text-green-400');
    } else {
        svg.classList.remove('text-green-500');
        svg.classList.add('text-gray-400');
        span.classList.remove('text-green-600', 'dark:text-green-400');
        span.classList.add('text-gray-600', 'dark:text-gray-400');
    }
}

function checkMatch() {
    const matchMsg = document.getElementById('match-message');
    if (!matchMsg || !password || !passwordConfirm) return;
    
    if (passwordConfirm.value.length === 0) {
        matchMsg.textContent = '';
        return;
    }
    
    if (password.value === passwordConfirm.value) {
        matchMsg.textContent = '✓ كلمات المرور متطابقة';
        matchMsg.className = 'mt-2 text-xs text-green-600 dark:text-green-400';
    } else {
        matchMsg.textContent = '✗ كلمات المرور غير متطابقة';
        matchMsg.className = 'mt-2 text-xs text-red-600 dark:text-red-400';
    }
}

function togglePassword(id) {
    const input = document.getElementById(id);
    if (!input) return;
    
    input.type = input.type === 'password' ? 'text' : 'password';
}

// Form submission
document.getElementById('password-change-form')?.addEventListener('submit', function(e) {
    e.preventDefault();
    
    const submitBtn = this.querySelector('button[type="submit"]');
    const originalContent = submitBtn.innerHTML;
    
    submitBtn.disabled = true;
    submitBtn.innerHTML = `
        <svg class="animate-spin w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
        جاري التغيير...
    `;
    
    fetch('{{ route("password.change.update") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            password: password.value,
            password_confirmation: passwordConfirm.value
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('نجح', data.message, 'success');
            setTimeout(() => window.location.href = '{{ route("login") }}', 2000);
        } else {
            showAlert('خطأ', data.message, 'error');
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalContent;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('خطأ', 'حدث خطأ أثناء تغيير كلمة المرور', 'error');
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalContent;
    });
});

function showAlert(title, message, type) {
    const alertDiv = document.createElement('div');
    const bgColor = type === 'success' ? 'bg-green-50 border-green-500 text-green-800 dark:bg-green-900/20 dark:text-green-200' : 
                    'bg-red-50 border-red-500 text-red-800 dark:bg-red-900/20 dark:text-red-200';
    
    alertDiv.className = `fixed top-6 left-1/2 transform -translate-x-1/2 z-50 ${bgColor} border-r-4 p-4 rounded-lg shadow-2xl min-w-[300px] max-w-md animate-fade-in`;
    alertDiv.innerHTML = `
        <div class="flex items-center">
            <svg class="w-6 h-6 ml-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                ${type === 'success' ? 
                    '<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>' :
                    '<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>'
                }
            </svg>
            <div class="flex-1">
                <p class="font-bold">${title}</p>
                <p class="text-sm mt-1">${message}</p>
            </div>
        </div>
    `;
    
    document.body.appendChild(alertDiv);
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.remove();
        }
    }, 5000);
}
</script>

<style>
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translate(-50%, -20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.animate-fade-in {
    animation: fade-in 0.3s ease-out;
}
</style>
@endsection