@extends('layouts.superadmin')

@section('title', 'تفاصيل القست')
@section('page-title', 'تفاصيل القست: ' . $guest->title)

@section('content')
<div class="max-w-6xl mx-auto space-y-6 rtl text-right">
    
    <!-- معلومات القست الأساسية -->
    <div class="bg-white shadow rounded-lg p-6">
        <h2 class="text-xl font-bold mb-4">معلومات القست</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-700">عنوان القست:</label>
                <p class="mt-1 text-sm text-gray-900">{{ $guest->title }}</p>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700">الحالة:</label>
                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full mt-1
                    @if($guest->status_color === 'green') bg-green-100 text-green-800
                    @elseif($guest->status_color === 'yellow') bg-yellow-100 text-yellow-800
                    @elseif($guest->status_color === 'red') bg-red-100 text-red-800
                    @elseif($guest->status_color === 'orange') bg-orange-100 text-orange-800
                    @elseif($guest->status_color === 'purple') bg-purple-100 text-purple-800
                    @else bg-blue-100 text-blue-800
                    @endif">
                    {{ $guest->status_text }}
                </span>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700">منظم القست (الهوست):</label>
                <p class="mt-1 text-sm text-gray-900">
                    {{ $guest->host->name }} ({{ $guest->host->username }})
                    @if($guest->host->membership_status === 'beta')
                        <span class="text-blue-600 text-xs">(بيتا)</span>
                    @endif
                </p>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700">اسم الضيف:</label>
                <p class="mt-1 text-sm text-gray-900">{{ $guest->guest_name }}</p>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700">تاريخ ووقت القست:</label>
                <p class="mt-1 text-sm text-gray-900">
                    {{ $guest->scheduled_date->format('Y/m/d') }} - {{ $guest->scheduled_time->format('H:i') }}
                </p>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700">المدة:</label>
                <p class="mt-1 text-sm text-gray-900">{{ $guest->formatted_duration }}</p>
            </div>
            
            @if($guest->guest_contact)
            <div>
                <label class="block text-sm font-medium text-gray-700">معلومات التواصل:</label>
                <p class="mt-1 text-sm text-gray-900">{{ $guest->guest_contact }}</p>
            </div>
            @endif
            
            <div>
                <label class="block text-sm font-medium text-gray-700">النقاط المكتسبة:</label>
                <p class="mt-1 text-sm">
                    @if($guest->host_points != 0)
                        <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full 
                            {{ $guest->host_points > 0 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                            {{ $guest->host_points > 0 ? '+' : '' }}{{ $guest->host_points }}
                        </span>
                    @else
                        <span class="text-gray-500">لم يتم تحديد النقاط بعد</span>
                    @endif
                </p>
            </div>
        </div>
        
        @if($guest->description)
        <div class="mt-6">
            <label class="block text-sm font-medium text-gray-700">وصف القست:</label>
            <p class="mt-1 text-sm text-gray-900 bg-gray-50 p-3 rounded">{{ $guest->description }}</p>
        </div>
        @endif
    </div>

    <!-- ملاحظات وتوصيات المشرفين -->
    @if(isset($guest->additional_data['moderator_notes']) || isset($guest->additional_data['review_requests']))
    <div class="bg-blue-50 border border-blue-200 rounded-lg p-6">
        <h3 class="text-lg font-semibold text-blue-900 mb-4 flex items-center">
            <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
            </svg>
            ملاحظات وتوصيات المشرفين
        </h3>
        
        @if(isset($guest->additional_data['moderator_notes']))
        <div class="mb-6">
            <h4 class="font-medium text-blue-800 mb-3">ملاحظات المشرفين:</h4>
            @foreach($guest->additional_data['moderator_notes'] as $note)
            <div class="bg-white border-r-4 border-blue-400 p-4 mb-3 rounded shadow-sm">
                <div class="flex justify-between items-start mb-2">
                    <span class="font-medium text-blue-800">{{ $note['moderator_name'] }}</span>
                    <span class="text-sm text-gray-500">{{ \Carbon\Carbon::parse($note['created_at'])->format('Y/m/d H:i') }}</span>
                </div>
                <p class="text-gray-700">{{ $note['note'] }}</p>
            </div>
            @endforeach
        </div>
        @endif
        
        @if(isset($guest->additional_data['review_requests']))
        <div>
            <h4 class="font-medium text-orange-800 mb-3">طلبات المراجعة:</h4>
            @foreach($guest->additional_data['review_requests'] as $request)
            <div class="bg-orange-50 border-r-4 border-orange-400 p-4 mb-3 rounded shadow-sm">
                <div class="flex justify-between items-start mb-2">
                    <span class="font-medium text-orange-800">{{ $request['moderator_name'] }}</span>
                    <span class="text-sm text-gray-500">{{ \Carbon\Carbon::parse($request['requested_at'])->format('Y/m/d H:i') }}</span>
                </div>
                <p class="text-gray-700"><strong>السبب:</strong> {{ $request['reason'] }}</p>
            </div>
            @endforeach
        </div>
        @endif
    </div>
    @endif

    <!-- إثبات التنفيذ -->
    @if($guest->hasProof())
    <div class="bg-white shadow rounded-lg p-6">
        <h3 class="text-lg font-semibold mb-4">إثبات التنفيذ</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-700">تاريخ رفع الإثبات:</label>
                <p class="mt-1 text-sm text-gray-900">{{ $guest->proof_uploaded_at->format('Y/m/d H:i') }}</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">صورة الإثبات:</label>
                <div class="mt-2">
                    <img src="{{ asset('storage/guests/' . $guest->proof_image) }}" 
                         alt="إثبات القست" 
                         class="h-32 w-auto rounded border cursor-pointer"
                         onclick="openImageModal('{{ asset('storage/guests/' . $guest->proof_image) }}')">
                </div>
            </div>
        </div>
        
        @if($guest->execution_notes)
        <div class="mt-4">
            <label class="block text-sm font-medium text-gray-700">ملاحظات التنفيذ:</label>
            <p class="mt-1 text-sm text-gray-900 bg-gray-50 p-3 rounded">{{ $guest->execution_notes }}</p>
        </div>
        @endif
    </div>
    @endif

    <!-- ملاحظات الإدارة -->
    @if($guest->admin_notes || $guest->rejection_reason)
    <div class="bg-white shadow rounded-lg p-6">
        <h3 class="text-lg font-semibold mb-4">ملاحظات الإدارة</h3>
        
        @if($guest->rejection_reason)
        <div class="mb-4">
            <label class="block text-sm font-medium text-red-700">سبب الرفض:</label>
            <p class="mt-1 text-sm text-red-800 bg-red-50 p-3 rounded border border-red-200">{{ $guest->rejection_reason }}</p>
        </div>
        @endif
        
        @if($guest->admin_notes)
        <div>
            <label class="block text-sm font-medium text-gray-700">ملاحظات إضافية:</label>
            <p class="mt-1 text-sm text-gray-900 bg-gray-50 p-3 rounded">{{ $guest->admin_notes }}</p>
        </div>
        @endif
        
        @if($guest->reviewer)
        <div class="mt-4 text-sm text-gray-600">
            تمت المراجعة بواسطة: {{ $guest->reviewer->name }} في {{ $guest->reviewed_at->format('Y/m/d H:i') }}
        </div>
        @endif
    </div>
    @endif

    <!-- أزرار الإجراءات -->
    <div class="bg-white shadow rounded-lg p-6">
        <h3 class="text-lg font-semibold mb-4">الإجراءات</h3>
        <div class="flex flex-wrap gap-3">
            
            <a href="{{ route('superadmin.guests.edit', $guest) }}" 
               class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">
                تعديل القست
            </a>
            
            @if($guest->canBeReviewed())
            <!-- الموافقة -->
            <form method="POST" action="{{ route('superadmin.guests.approve', $guest) }}" class="inline">
                @csrf
                <button type="submit" 
                        class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded"
                        onclick="return confirm('هل تريد الموافقة على هذا القست؟')">
                    الموافقة
                </button>
            </form>
            
            <!-- الرفض -->
            <button type="button" 
                    onclick="openRejectModal()" 
                    class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded">
                رفض القست
            </button>
            @endif
            
            @if($guest->isApproved())
            <!-- إكمال القست -->
            <form method="POST" action="{{ route('superadmin.guests.complete', $guest) }}" class="inline">
                @csrf
                <button type="submit" 
                        class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded"
                        onclick="return confirm('هل تريد تحديد هذا القست كمكتمل؟')">
                    تحديد كمكتمل
                </button>
            </form>
            @endif
            
            @if($guest->status !== 'completed')
            <form method="POST" action="{{ route('superadmin.guests.destroy', $guest) }}" class="inline">
                @csrf
                @method('DELETE')
                <button type="submit" 
                        class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded"
                        onclick="return confirm('هل تريد حذف هذا القست؟ هذا الإجراء لا يمكن التراجع عنه.')">
                    حذف القست
                </button>
            </form>
            @endif
        </div>
    </div>
</div>

<!-- مودال رفض القست -->
<div id="rejectModal" 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 p-6 max-w-md w-full">
            <h3 class="text-lg font-medium mb-4">رفض القست</h3>
            <form method="POST" action="{{ route('superadmin.guests.reject', $guest) }}">
                @csrf
                <div class="mb-4">
                    <label for="rejection_reason" class="block text-sm font-medium text-gray-700">سبب الرفض *</label>
                    <textarea name="rejection_reason" id="rejection_reason" rows="3" required
                              class="mt-1 block w-full border-gray-300 rounded-md shadow-sm"
                              placeholder="اكتب سبب رفض القست..."></textarea>
                </div>
                <div class="mb-4">
                    <label for="admin_notes_reject" class="block text-sm font-medium text-gray-700">ملاحظات إضافية</label>
                    <textarea name="admin_notes" id="admin_notes_reject" rows="2"
                              class="mt-1 block w-full border-gray-300 rounded-md shadow-sm"
                              placeholder="ملاحظات إضافية (اختيارية)..."></textarea>
                </div>
                <div class="flex justify-end space-x-3 space-x-reverse">
                    <button type="button" onclick="closeRejectModal()" 
                            class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded">
                        إلغاء
                    </button>
                    <button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded">
                        رفض القست
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- مودال عرض الصورة -->
<div id="imageModal" class="fixed inset-0 bg-gray-600 bg-opacity-75 hidden z-50" onclick="closeImageModal()">
    <div class="flex items-center justify-center min-h-screen p-4">
        <img id="modalImage" src="" alt="إثبات القست" class="max-w-full max-h-full rounded">
    </div>
</div>

@push('scripts')
<script>
function openRejectModal() {
    document.getElementById('rejectModal').classList.remove('hidden');
}

function closeRejectModal() {
    document.getElementById('rejectModal').classList.add('hidden');
}

function openImageModal(imageSrc) {
    document.getElementById('modalImage').src = imageSrc;
    document.getElementById('imageModal').classList.remove('hidden');
}

function closeImageModal() {
    document.getElementById('imageModal').classList.add('hidden');
}
</script>
@endpush
@endsection