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

@section('title', 'بلاغات المنشورات')

@section('content')
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        
        {{-- Page Header --}}
        <div class="mb-6">
            <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>

        {{-- Filters --}}
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg mb-6">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">فلترة البلاغات</h3>
            </div>
            <div class="p-6">
                <form method="GET" class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">الحالة</label>
                        <select name="status" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">جميع الحالات</option>
                            <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>في الانتظار</option>
                            <option value="reviewed" {{ request('status') === 'reviewed' ? 'selected' : '' }}>تمت المراجعة</option>
                            <option value="dismissed" {{ request('status') === 'dismissed' ? 'selected' : '' }}>مرفوض</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">نوع المحتوى</label>
                        <select name="type" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">جميع الأنواع</option>
                            <option value="post" {{ request('type') === 'post' ? 'selected' : '' }}>منشور</option>
                            <option value="comment" {{ request('type') === 'comment' ? 'selected' : '' }}>تعليق</option>
                            <option value="reply" {{ request('type') === 'reply' ? 'selected' : '' }}>رد</option>
                        </select>
                    </div>
                    
                    <div class="flex items-end">
                        <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md">
                            تطبيق الفلتر
                        </button>
                    </div>
                </form>
            </div>
        </div>

        {{-- Reports Table --}}
        <div class="bg-white dark:bg-gray-800 shadow overflow-hidden rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">قائمة البلاغات</h3>
            </div>
            
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead class="bg-gray-50 dark:bg-gray-700">
                        <tr>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">البلاغ</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">المبلغ</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">النوع</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">السبب</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">الحالة</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">التاريخ</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                        @forelse($reports as $report)
                        <tr>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-900 dark:text-white">
                                    البلاغ #{{ $report->id }}
                                </div>
                                @if($report->details)
                                <div class="text-sm text-gray-500 mt-1">
                                    {{ Str::limit($report->details, 100) }}
                                </div>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <img src="{{ $report->reportedBy->avatar_url }}" alt="{{ $report->reportedBy->name }}" class="h-8 w-8 rounded-full">
                                    <div class="mr-3">
                                        <div class="text-sm font-medium text-gray-900 dark:text-white">{{ $report->reportedBy->name }}</div>
                                        <div class="text-sm text-gray-500">{{ $report->reportedBy->email }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                                    @if($report->reportable_type === 'post') bg-blue-100 text-blue-800
                                    @elseif($report->reportable_type === 'comment') bg-green-100 text-green-800
                                    @else bg-purple-100 text-purple-800
                                    @endif">
                                    @if($report->reportable_type === 'post') منشور
                                    @elseif($report->reportable_type === 'comment') تعليق
                                    @else رد
                                    @endif
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="text-sm text-gray-900 dark:text-white">{{ $report->reason_text }}</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @if($report->status === 'pending')
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                    في الانتظار
                                </span>
                                @elseif($report->status === 'reviewed')
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                    تمت المراجعة
                                </span>
                                @else
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                    مرفوض
                                </span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ $report->created_at->format('Y/m/d H:i') }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                @if($report->status === 'pending')
                                <div class="flex space-x-2">
                                    <button onclick="reviewReport('{{ $report->id }}', 'approve')" class="text-green-600 hover:text-green-900">
                                        قبول
                                    </button>
                                    <button onclick="reviewReport('{{ $report->id }}', 'dismiss')" class="text-red-600 hover:text-red-900">
                                        رفض
                                    </button>
                                </div>
                                @else
                                <div class="text-gray-500">
                                    @if($report->reviewedBy)
                                    راجعه: {{ $report->reviewedBy->name }}
                                    @endif
                                </div>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="px-6 py-4 text-center text-gray-500">
                                لا توجد بلاغات
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            
            {{-- Pagination --}}
            @if($reports->hasPages())
            <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
                {{ $reports->appends(request()->query())->links() }}
            </div>
            @endif
        </div>
    </div>
</div>

{{-- Review Modal --}}
<div id="reviewModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-lg shadow-lg max-w-md w-full">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900" id="reviewModalTitle">مراجعة البلاغ</h3>
            </div>
            <div class="px-6 py-4">
                <form id="reviewForm">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">الرد الإداري (اختياري)</label>
                        <textarea id="adminResponse" name="response" rows="4" 
                                  class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                  placeholder="اكتب ردك على البلاغ..."></textarea>
                    </div>
                </form>
            </div>
            <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
                <button onclick="closeReviewModal()" class="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700">
                    إلغاء
                </button>
                <button id="confirmReviewBtn" onclick="confirmReview()" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
                    تأكيد
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Scripts --}}
<script>
let currentReportId = null;
let currentAction = null;

function reviewReport(reportId, action) {
    currentReportId = reportId;
    currentAction = action;
    
    const title = action === 'approve' ? 'قبول البلاغ' : 'رفض البلاغ';
    document.getElementById('reviewModalTitle').textContent = title;
    
    const confirmBtn = document.getElementById('confirmReviewBtn');
    confirmBtn.textContent = action === 'approve' ? 'قبول البلاغ' : 'رفض البلاغ';
    confirmBtn.className = action === 'approve' 
        ? 'px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700'
        : 'px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700';
    
    document.getElementById('reviewModal').classList.remove('hidden');
}

function confirmReview() {
    const response = document.getElementById('adminResponse').value;
    
    fetch(`/posts-management/reports/${currentReportId}/review`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({ 
            action: currentAction,
            response: response 
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert(data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('حدث خطأ في العملية');
    });
}

function closeReviewModal() {
    document.getElementById('reviewModal').classList.add('hidden');
    document.getElementById('adminResponse').value = '';
    currentReportId = null;
    currentAction = null;
}

// Close modal when clicking outside
document.getElementById('reviewModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeReviewModal();
    }
});
</script>
@endsection