{{-- resources/views/superadmin/password-reset-requests/index.blade.php --}}
@extends('layouts.superadmin')

@section('title', 'طلبات إعادة تعيين كلمة المرور')

@section('content')
<div class="container-fluid px-4 py-6">
    
    <!-- Header -->
    <div class="mb-6">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">طلبات إعادة تعيين كلمة المرور</h1>
                <p class="text-gray-600 mt-1">إدارة ومتابعة طلبات المستخدمين لإعادة تعيين كلمات المرور</p>
            </div>
            <a href="{{ route('superadmin.settings.index') }}" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-3 rounded-lg font-semibold transition-colors flex items-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="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                </svg>
                العودة للإعدادات
            </a>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mb-8">
        <!-- Total -->
        <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl shadow-lg p-6 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-blue-100 text-sm font-medium mb-1">إجمالي الطلبات</p>
                    <h3 class="text-3xl font-bold">{{ $stats['total'] }}</h3>
                </div>
                <div class="bg-white/20 p-3 rounded-xl">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Pending -->
        <div class="bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-2xl shadow-lg p-6 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-yellow-100 text-sm font-medium mb-1">مرسل</p>
                    <h3 class="text-3xl font-bold">{{ $stats['pending'] }}</h3>
                </div>
                <div class="bg-white/20 p-3 rounded-xl">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- In Progress -->
        <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl shadow-lg p-6 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-purple-100 text-sm font-medium mb-1">جاري العمل</p>
                    <h3 class="text-3xl font-bold">{{ $stats['in_progress'] }}</h3>
                </div>
                <div class="bg-white/20 p-3 rounded-xl">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Completed -->
        <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-2xl shadow-lg p-6 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-green-100 text-sm font-medium mb-1">مكتمل</p>
                    <h3 class="text-3xl font-bold">{{ $stats['completed'] }}</h3>
                </div>
                <div class="bg-white/20 p-3 rounded-xl">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Rejected -->
        <div class="bg-gradient-to-br from-red-500 to-red-600 rounded-2xl shadow-lg p-6 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-red-100 text-sm font-medium mb-1">مرفوض</p>
                    <h3 class="text-3xl font-bold">{{ $stats['rejected'] }}</h3>
                </div>
                <div class="bg-white/20 p-3 rounded-xl">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <!-- Requests List (كل كارد في صف مستقل) -->
    @if($requests->count() > 0)
        <div class="space-y-4">
            @foreach($requests as $request)
                <div class="bg-white rounded-2xl shadow-lg overflow-hidden border-r-4 border-{{ $request->status_color }}-500 hover:shadow-xl transition-shadow duration-300" id="request-{{ $request->id }}">
                    <div class="p-6">
                        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
                            
                            <!-- معلومات المستخدم -->
                            <div class="lg:col-span-3">
                                <div class="flex items-center gap-4 mb-4">
                                    <div class="bg-gradient-to-br from-{{ $request->status_color }}-500 to-{{ $request->status_color }}-600 p-3 rounded-xl">
                                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                        </svg>
                                    </div>
                                    <div class="flex-1">
                                        <h3 class="font-bold text-lg text-gray-900">{{ $request->username }}</h3>
                                        <p class="text-sm text-gray-600">{{ $request->email }}</p>
                                    </div>
                                </div>
                                <div class="space-y-2 text-sm">
                                    <div class="flex items-center text-gray-600">
                                        <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>
                                        </svg>
                                        <span>الطلب #{{ $request->id }}</span>
                                    </div>
                                    <div class="flex items-center text-gray-600">
                                        <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                        </svg>
                                        <span>{{ $request->created_at->diffForHumans() }}</span>
                                    </div>
                                    <div class="flex items-center text-gray-600">
                                        <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                                        </svg>
                                        <span>محاولات فاشلة: {{ $request->failed_attempts }}</span>
                                    </div>
                                </div>
                            </div>

                            <!-- الملاحظات -->
                            <div class="lg:col-span-5">
                                @if($request->user_note)
                                    <div class="mb-4">
                                        <p class="text-xs font-semibold text-gray-700 mb-2">ملاحظة المستخدم:</p>
                                        <div class="bg-blue-50 rounded-lg p-3 border-r-4 border-blue-500">
                                            <p class="text-sm text-blue-800">{{ $request->user_note }}</p>
                                        </div>
                                    </div>
                                @endif

                                @if($request->admin_note)
                                    <div>
                                        <p class="text-xs font-semibold text-gray-700 mb-2">ملاحظة المسؤول:</p>
                                        <div class="bg-green-50 rounded-lg p-3 border-r-4 border-green-500">
                                            <p class="text-sm text-green-800 whitespace-pre-line">{{ $request->admin_note }}</p>
                                        </div>
                                    </div>
                                @endif

                                @if($request->handler)
                                    <div class="mt-4 flex items-center text-sm text-gray-600">
                                        <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                        </svg>
                                        <span>تمت المعالجة بواسطة: <strong>{{ $request->handler->name }}</strong></span>
                                    </div>
                                @endif
                            </div>

                            <!-- الحالة والأكشن -->
                            <div class="lg:col-span-4">
                                <div class="flex flex-col h-full justify-between">
                                    <div class="mb-4">
                                        {!! $request->status_badge !!}
                                    </div>

                                    <div class="grid grid-cols-2 gap-2">
                                        <button 
                                            onclick="updateStatus({{ $request->id }}, 'in_progress')"
                                            class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg text-sm font-semibold transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                                            @if($request->status === 'in_progress') disabled @endif
                                        >
                                            جاري العمل
                                        </button>
                                        <button 
                                            onclick="showCompleteModal({{ $request->id }})"
                                            class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm font-semibold transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                                            @if($request->status === 'completed') disabled @endif
                                        >
                                            مكتمل
                                        </button>
                                        <button 
                                            onclick="showRejectModal({{ $request->id }})"
                                            class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm font-semibold transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                                            @if($request->status === 'rejected') disabled @endif
                                        >
                                            رفض
                                        </button>
                                        <button 
                                            onclick="deleteRequest({{ $request->id }})"
                                            class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-semibold transition-colors"
                                        >
                                            حذف
                                        </button>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Pagination -->
        <div class="mt-8">
            {{ $requests->links() }}
        </div>
    @else
        <div class="bg-white rounded-2xl shadow-lg p-12 text-center">
            <svg class="w-24 h-24 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
            </svg>
            <h3 class="text-xl font-bold text-gray-900 mb-2">لا توجد طلبات حاليًا</h3>
            <p class="text-gray-600">لم يتم استلام أي طلبات لإعادة تعيين كلمة المرور بعد</p>
        </div>
    @endif

</div>

{{-- Modal لإدخال الباسورد الجديد (Completed) --}}
<div id="completeModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden items-center justify-center z-50 p-4">
    <div class="bg-white rounded-3xl shadow-2xl max-w-md w-full">
        <div class="p-6">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-2xl font-bold text-gray-900">إكمال الطلب</h3>
                <button onclick="closeCompleteModal()" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>

            <!-- تنبيه للمسؤول -->
            <div class="bg-yellow-50 border-r-4 border-yellow-500 p-4 rounded-lg mb-5">
                <div class="flex">
                    <div class="ml-3">
                        <svg class="h-5 w-5 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <div class="text-sm text-yellow-700">
                        <p>كلمة المرور المكتوبة هنا ستظهر في الملاحظات فقط. <strong>يجب تغيير كلمة المرور يدويًا من صفحة إدارة المستخدمين</strong>.</p>
                    </div>
                </div>
            </div>

            <form id="completeForm" onsubmit="submitComplete(event)">
                <input type="hidden" id="complete_request_id">
                
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            كلمة المرور المقترحة *
                        </label>
                        <input 
                            type="text" 
                            id="new_password" 
                            required
                            minlength="6"
                            class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-green-500"
                            placeholder="أدخل كلمة المرور المقترحة (6 أحرف على الأقل)"
                        >
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            ملاحظات (اختياري)
                        </label>
                        <textarea 
                            id="complete_note" 
                            rows="3"
                            class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-green-500 resize-none"
                            placeholder="أضف أي ملاحظات للمستخدم"
                        ></textarea>
                    </div>
                </div>

                <div class="mt-6 flex gap-3">
                    <button 
                        type="submit"
                        class="flex-1 bg-green-600 hover:bg-green-700 text-white py-3 px-4 rounded-xl font-semibold transition-colors"
                    >
                        إكمال الطلب
                    </button>
                    <button 
                        type="button"
                        onclick="closeCompleteModal()"
                        class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-700 py-3 px-4 rounded-xl font-semibold transition-colors"
                    >
                        إلغاء
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal لسبب الرفض (Rejected) --}}
<div id="rejectModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden items-center justify-center z-50 p-4">
    <div class="bg-white rounded-3xl shadow-2xl max-w-md w-full">
        <div class="p-6">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-2xl font-bold text-gray-900">رفض الطلب</h3>
                <button onclick="closeRejectModal()" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>

            <form id="rejectForm" onsubmit="submitReject(event)">
                <input type="hidden" id="reject_request_id">
                
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        سبب الرفض *
                    </label>
                    <textarea 
                        id="reject_note" 
                        rows="4"
                        required
                        class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 resize-none"
                        placeholder="اكتب سبب رفض الطلب (سيظهر للمستخدم)"
                    ></textarea>
                </div>

                <div class="mt-6 flex gap-3">
                    <button 
                        type="submit"
                        class="flex-1 bg-red-600 hover:bg-red-700 text-white py-3 px-4 rounded-xl font-semibold transition-colors"
                    >
                        رفض الطلب
                    </button>
                    <button 
                        type="button"
                        onclick="closeRejectModal()"
                        class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-700 py-3 px-4 rounded-xl font-semibold transition-colors"
                    >
                        إلغاء
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Update Status to "In Progress"
    function updateStatus(requestId, status) {
        if (!confirm('هل أنت متأكد من تحديث حالة الطلب إلى "جاري العمل عليها"؟')) {
            return;
        }

        fetch(`/superadmin/password-reset-requests/${requestId}/status`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ status: status })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('حدث خطأ أثناء تحديث الحالة');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('حدث خطأ أثناء تحديث الحالة');
        });
    }

    // Show Complete Modal
    function showCompleteModal(requestId) {
        document.getElementById('complete_request_id').value = requestId;
        document.getElementById('completeModal').classList.remove('hidden');
        document.getElementById('completeModal').classList.add('flex');
        document.body.style.overflow = 'hidden';
    }

    // Close Complete Modal
    function closeCompleteModal() {
        document.getElementById('completeModal').classList.add('hidden');
        document.getElementById('completeModal').classList.remove('flex');
        document.getElementById('completeForm').reset();
        document.body.style.overflow = 'auto';
    }

    // Submit Complete
    function submitComplete(event) {
        event.preventDefault();
        
        const requestId = document.getElementById('complete_request_id').value;
        const newPassword = document.getElementById('new_password').value;
        const adminNote = document.getElementById('complete_note').value;

        fetch(`/superadmin/password-reset-requests/${requestId}/status`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({
                status: 'completed',
                new_password: newPassword,
                admin_note: adminNote
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                closeCompleteModal();
                location.reload();
            } else {
                alert('حدث خطأ: ' + (data.message || 'خطأ غير معروف'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('حدث خطأ أثناء إكمال الطلب');
        });
    }

    // Show Reject Modal
    function showRejectModal(requestId) {
        document.getElementById('reject_request_id').value = requestId;
        document.getElementById('rejectModal').classList.remove('hidden');
        document.getElementById('rejectModal').classList.add('flex');
        document.body.style.overflow = 'hidden';
    }

    // Close Reject Modal
    function closeRejectModal() {
        document.getElementById('rejectModal').classList.add('hidden');
        document.getElementById('rejectModal').classList.remove('flex');
        document.getElementById('rejectForm').reset();
        document.body.style.overflow = 'auto';
    }

    // Submit Reject
    function submitReject(event) {
        event.preventDefault();
        
        const requestId = document.getElementById('reject_request_id').value;
        const rejectNote = document.getElementById('reject_note').value;

        fetch(`/superadmin/password-reset-requests/${requestId}/status`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({
                status: 'rejected',
                admin_note: rejectNote
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                closeRejectModal();
                location.reload();
            } else {
                alert('حدث خطأ: ' + (data.message || 'خطأ غير معروف'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('حدث خطأ أثناء رفض الطلب');
        });
    }

    // Delete Request
    function deleteRequest(requestId) {
        if (!confirm('هل أنت متأكد من حذف هذا الطلب؟ هذا الإجراء لا يمكن التراجع عنه.')) {
            return;
        }

        fetch(`/superadmin/password-reset-requests/${requestId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('حدث خطأ أثناء حذف الطلب');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('حدث خطأ أثناء حذف الطلب');
        });
    }
</script>
@endpush
@endsection