@extends('admin.layouts.admin')

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

@section('content')
<div class="max-w-xl mx-auto bg-white rounded-lg shadow-md p-8">
    <h2 class="text-2xl font-bold mb-6 border-b pb-4">تغيير كلمة المرور</h2>
    
    <form action="{{ route('admin.password.update') }}" method="POST">
        @csrf
        <div class="mb-6">
            <label class="block text-gray-700 font-bold mb-2">كلمة المرور الجديدة</label>
            <div class="relative">
                <input type="password" id="new_password" name="password" 
                       class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 outline-none text-right" 
                       required minlength="3">
                <button type="button" onclick="togglePassword('new_password')" 
                        class="absolute inset-y-0 left-0 pl-3 flex items-center text-sm text-blue-600 font-bold">
                    عرض
                </button>
            </div>
            @error('password') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
        </div>

        <div class="mb-6">
            <label class="block text-gray-700 font-bold mb-2">تأكيد كلمة المرور</label>
            <div class="relative">
                <input type="password" id="password_confirmation" name="password_confirmation" 
                       class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 outline-none text-right" 
                       required>
                <button type="button" onclick="togglePassword('password_confirmation')" 
                        class="absolute inset-y-0 left-0 pl-3 flex items-center text-sm text-blue-600 font-bold">
                    عرض
                </button>
            </div>
        </div>

        <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition">
            تحديث كلمة المرور
        </button>
    </form>
</div>

<script>
    function togglePassword(inputId) {
        const input = document.getElementById(inputId);
        const btn = event.currentTarget;
        if (input.type === 'password') {
            input.type = 'text';
            btn.textContent = 'إخفاء';
        } else {
            input.type = 'password';
            btn.textContent = 'عرض';
        }
    }
</script>
@endsection