{{-- resources/views/general/chat/blocked.blade.php --}}
@extends($layout)

@section('title', 'نظام الدردشة غير متاح')

@section('content')
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
    <div class="max-w-md w-full mx-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-8">
            <div class="text-center">
                {{-- Icon --}}
                <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-red-100 dark:bg-red-900/20 mb-6">
                    @if($chatPermission->is_blocked)
                        <svg class="h-8 w-8 text-red-600 dark:text-red-400" 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-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                        </svg>
                    @endif
                </div>

                {{-- Title --}}
                <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                    @if($chatPermission->is_blocked)
                        تم حظرك من نظام الدردشة
                    @else
                        نظام الدردشة غير متاح
                    @endif
                </h3>

                {{-- Message --}}
                <div class="text-gray-600 dark:text-gray-400 mb-6">
                    @if($chatPermission->is_blocked)
                        <p class="mb-4">
                            عذراً، تم حظرك من استخدام نظام الدردشة في الموقع.
                        </p>
                        
                        @if($chatPermission->blocked_reason)
                            <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-600 rounded-lg p-4 mb-4">
                                <h4 class="font-medium text-red-800 dark:text-red-200 mb-2">سبب الحظر:</h4>
                                <p class="text-red-700 dark:text-red-300 text-sm">{{ $chatPermission->blocked_reason }}</p>
                            </div>
                        @endif

                        @if($chatPermission->blocked_at)
                            <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
                                تاريخ الحظر: {{ $chatPermission->blocked_at->format('Y/m/d H:i') }}
                            </p>
                        @endif

                        @if($chatPermission->blockedBy)
                            <p class="text-sm text-gray-500 dark:text-gray-400">
                                تم الحظر بواسطة: {{ $chatPermission->blockedBy->name }}
                            </p>
                        @endif
                    @else
                        <p>
                            عذراً، نظام الدردشة غير متاح لك حالياً. 
                            يرجى التواصل مع الإدارة لمزيد من المعلومات.
                        </p>
                    @endif
                </div>

                {{-- Contact Information --}}
                <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-600 rounded-lg p-4 mb-6">
                    <h4 class="font-medium text-blue-800 dark:text-blue-200 mb-2">تحتاج مساعدة؟</h4>
                    <p class="text-blue-700 dark:text-blue-300 text-sm">
                        يمكنك التواصل مع الإدارة من خلال نظام الطلبات أو الإشعارات للاستفسار عن حالة حسابك.
                    </p>
                </div>

                {{-- Action Buttons --}}
                <div class="flex flex-col sm:flex-row gap-3">
                    <a href="{{ route('dashboard') }}" 
                       class="flex-1 inline-flex items-center justify-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-200">
                        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                        </svg>
                        العودة للرئيسية
                    </a>

                    @if(auth()->user()->hasRole(['official-member', 'member']))
                        @if(auth()->user()->hasRole('member'))
                            {{-- عضو بيتا - التواصل مع المشرف --}}
                            @php
                                $moderatorRoutes = [
                                    'male' => 'member.moderator-requests.index',
                                    'female' => 'member.moderator-requests.index'
                                ];
                                $moderatorRoute = $moderatorRoutes[auth()->user()->gender] ?? null;
                            @endphp
                            
                            @if($moderatorRoute && Route::has($moderatorRoute))
                                <a href="{{ route($moderatorRoute) }}" 
                                   class="flex-1 inline-flex items-center justify-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition duration-200">
                                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                                    </svg>
                                    التواصل مع المشرف
                                </a>
                            @endif
                        @else
                            {{-- عضو رسمي - طلب للقيادة العليا --}}
                            @if(Route::has('member.high-level-requests.index'))
                                <a href="{{ route('member.high-level-requests.index') }}" 
                                   class="flex-1 inline-flex items-center justify-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition duration-200">
                                    <svg class="w-5 h-5 ml-2" 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"></path>
                                    </svg>
                                    إرسال طلب للإدارة
                                </a>
                            @endif
                        @endif
                    @endif
                </div>

                {{-- Help Text --}}
                <div class="mt-6 text-xs text-gray-500 dark:text-gray-400">
                    <p>في حالة وجود أي استفسارات أو اعتراضات، يمكنك التواصل مع الإدارة المختصة.</p>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Custom Styles --}}
<style>
    .animate-pulse-slow {
        animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    @keyframes pulse-slow {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: .7;
        }
    }

    .chat-blocked-card {
        animation: slideInUp 0.5s ease-out;
    }

    @keyframes slideInUp {
        from {
            transform: translateY(30px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // إضافة تأثير للبطاقة
    const card = document.querySelector('.bg-white');
    if (card) {
        card.classList.add('chat-blocked-card');
    }
    
    // تأثير على الأزرار
    const buttons = document.querySelectorAll('a[class*="bg-"]');
    buttons.forEach(button => {
        button.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-1px)';
            this.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
        });
        
        button.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
            this.style.boxShadow = '';
        });
    });
    
    // تأثير النقر
    buttons.forEach(button => {
        button.addEventListener('mousedown', function() {
            this.style.transform = 'translateY(1px)';
        });
        
        button.addEventListener('mouseup', function() {
            this.style.transform = 'translateY(-1px)';
        });
    });
});
</script>
@endsection