@extends('layouts.moderator')

@section('title', 'تفاصيل القست')

@section('content')
<div class="container mx-auto px-4 py-6 rtl">
    <div class="max-w-6xl mx-auto space-y-6">
        
        <!-- رابط العودة -->
        <div class="mb-6">
            <a href="{{ route('moderator.guests.index') }}" 
               class="inline-flex items-center text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
                <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="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                </svg>
                العودة لقائمة القستات
            </a>
        </div>

        <!-- معلومات القست الأساسية -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
            <div class="flex justify-between items-start mb-6">
                <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ $guest->title }}</h1>
                <span class="inline-flex px-3 py-1 text-sm font-semibold rounded-full 
                    @if($guest->status_color === 'green') bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200
                    @elseif($guest->status_color === 'yellow') bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-200
                    @elseif($guest->status_color === 'red') bg-red-100 dark:bg-red-900/50 text-red-800 dark:text-red-200
                    @elseif($guest->status_color === 'orange') bg-orange-100 dark:bg-orange-900/50 text-orange-800 dark:text-orange-200
                    @elseif($guest->status_color === 'purple') bg-purple-100 dark:bg-purple-900/50 text-purple-800 dark:text-purple-200
                    @else bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200
                    @endif">
                    {{ $guest->status_text }}
                </span>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">منظم القست (الهوست):</label>
                    <p class="text-gray-900 dark:text-white">
                        {{ $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 dark:text-gray-300 mb-1">اسم الضيف:</label>
                    <p class="text-gray-900 dark:text-white">{{ $guest->guest_name }}</p>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">التاريخ والوقت:</label>
                    <p class="text-gray-900 dark:text-white">
                        {{ $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 dark:text-gray-300 mb-1">المدة:</label>
                    <p class="text-gray-900 dark:text-white">{{ $guest->formatted_duration }}</p>
                </div>

                @if($guest->guest_contact)
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">معلومات التواصل:</label>
                    <p class="text-gray-900 dark:text-white">{{ $guest->guest_contact }}</p>
                </div>
                @endif
            </div>

            @if($guest->description)
            <div class="mt-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">وصف القست:</label>
                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                    <p class="text-gray-900 dark:text-white">{{ $guest->description }}</p>
                </div>
            </div>
            @endif
        </div>

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

        <!-- ملاحظات الإدارة -->
        @if($guest->admin_notes || $guest->rejection_reason)
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">ملاحظات الإدارة العليا</h2>
            
            @if($guest->rejection_reason)
            <div class="mb-4">
                <label class="block text-sm font-medium text-red-700 dark:text-red-300 mb-2">سبب الرفض:</label>
                <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
                    <p class="text-red-800 dark:text-red-200">{{ $guest->rejection_reason }}</p>
                </div>
            </div>
            @endif
            
            @if($guest->admin_notes)
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">ملاحظات إضافية:</label>
                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                    <p class="text-gray-900 dark:text-white">{{ $guest->admin_notes }}</p>
                </div>
            </div>
            @endif

            @if($guest->reviewer)
            <div class="mt-4 text-sm text-gray-600 dark:text-gray-400">
                تمت المراجعة بواسطة: {{ $guest->reviewer->name }} في {{ $guest->reviewed_at->format('Y/m/d H:i') }}
            </div>
            @endif
        </div>
        @endif

        <!-- أزرار الإجراءات -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
            <div class="flex flex-wrap gap-3">
       

                <button type="button" 
                        onclick="openNoteModal('{{ $guest->id }}')"
                        class="inline-flex items-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="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>
                    إضافة ملاحظة للإدارة
                </button>

                <button type="button" 
                        onclick="openReviewModal('{{ $guest->id }}')"
                        class="inline-flex items-center px-4 py-2 bg-orange-600 hover:bg-orange-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="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 0L3.732 16c-.77.833.192 2.5 1.732 2.5z"></path>
                    </svg>
                    طلب مراجعة من الإدارة
                </button>
            </div>
        </div>
    </div>
</div>

<!-- مودال إضافة ملاحظة -->
<div id="noteModal" 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 dark:bg-gray-800 rounded-lg p-6 max-w-md w-full">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">إضافة ملاحظة للإدارة العليا</h3>
            <form id="noteForm" method="POST">
                @csrf
                <div class="mb-4">
                    <label for="moderator_note" class="block text-sm font-medium text-gray-700 dark:text-gray-300">الملاحظة *</label>
                    <textarea name="moderator_note" id="moderator_note" rows="4" required
                              class="mt-1 block w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                              placeholder="اكتب ملاحظتك حول هذا القست..."></textarea>
                </div>
                <div class="flex justify-end space-x-3 space-x-reverse">
                    <button type="button" onclick="closeNoteModal()" 
                            class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded">
                        إلغاء
                    </button>
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">
                        إرسال الملاحظة
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- مودال طلب المراجعة -->
<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 dark:bg-gray-800 rounded-lg p-6 max-w-md w-full">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">طلب مراجعة من الإدارة العليا</h3>
            <form id="reviewForm" method="POST">
                @csrf
                <div class="mb-4">
                    <label for="review_reason" class="block text-sm font-medium text-gray-700 dark:text-gray-300">سبب طلب المراجعة *</label>
                    <textarea name="review_reason" id="review_reason" rows="4" required
                              class="mt-1 block w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                              placeholder="اشرح سبب طلب مراجعة هذا القست من الإدارة العليا..."></textarea>
                </div>
                <div class="flex justify-end space-x-3 space-x-reverse">
                    <button type="button" onclick="closeReviewModal()" 
                            class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded">
                        إلغاء
                    </button>
                    <button type="submit" class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded">
                        إرسال طلب المراجعة
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- مودال عرض الصورة -->
<div id="imageModal" class="fixed inset-0 z-50 bg-gray-600 bg-opacity-75 hidden" 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 shadow-lg">
    </div>
</div>

@push('scripts')
<script>


    const addNoteBaseUrl = "{{ url('guests') }}"; // هذا لن يتغير وسيكون ثابت
    function openNoteModal(guestId) {
        const form = document.getElementById('noteForm');
        form.action = addNoteBaseUrl + "/" + guestId + "/note";
        document.getElementById('noteModal').classList.remove('hidden');
    }



function closeNoteModal() {
    document.getElementById('noteModal').classList.add('hidden');
    document.getElementById('noteForm').reset();
}

function openReviewModal(guestId) {
    const form = document.getElementById('reviewForm');
    form.action = `/moderator/guests/${guestId}/request-review`;
    document.getElementById('reviewModal').classList.remove('hidden');
}

function closeReviewModal() {
    document.getElementById('reviewModal').classList.add('hidden');
    document.getElementById('reviewForm').reset();
}

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