@extends("layouts.app")

@section("content")
<div class="d-flex justify-content-between align-items-center pt-3 pb-3 mb-4 border-bottom">
    <h1 class="h3 font-weight-bold text-dark m-0">
        <i class="fas fa-user-check text-primary mr-2"></i> مراجعة بيانات المضيف
    </h1>
    <a href="{{ route('admin.hosts-verification.index') }}" class="btn btn-outline-secondary rounded-pill px-4 shadow-sm">
        <i class="fas fa-arrow-right ml-1"></i> رجوع للقائمة
    </a>
</div>

@include('flash::message')
@if ($errors->any())
    <div class="alert alert-danger shadow-sm rounded-lg border-0 mb-4">
        <ul class="mb-0 pl-3">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div class="row">
    <!-- Personal Information Card -->
    <div class="col-lg-4 col-md-6">
        <div class="card shadow-sm border-0 rounded-lg mb-4 h-100">
            <div class="card-header bg-white border-bottom-0 pt-4 pb-2">
                <h5 class="m-0 font-weight-bold text-dark">
                    <i class="fas fa-id-card text-info ml-2"></i> البيانات الشخصية
                </h5>
            </div>
            <div class="card-body">
                <div class="row align-items-center mb-3">
                    <div class="col-auto">
                        <div class="rounded-circle bg-light border d-flex align-items-center justify-content-center shadow-sm" style="width: 70px; height: 70px; overflow: hidden;">
                            @if($host->profile_file)
                                <img src="{{ $host->profile_file }}" alt="Avatar" style="width: 100%; height: 100%; object-fit: cover;">
                            @else
                                <i class="fas fa-user fa-2x text-secondary"></i>
                            @endif
                        </div>
                    </div>
                    <div class="col px-0">
                        <h5 class="font-weight-bold mb-1">{{ $host->full_name ?? $host->first_name . ' ' . $host->last_name }}</h5>
                        <span class="badge badge-pill badge-soft-warning px-2 py-1 mt-1">بانتظار المراجعة</span>
                    </div>
                </div>
                
                <div class="border-top pt-3">
                    <div class="mb-3">
                        <small class="text-muted d-block mb-1">البريد الإلكتروني</small>
                        <div class="font-weight-bold" dir="ltr">{{ $host->email ?? 'غير محدد' }}</div>
                    </div>
                    <div class="mb-2">
                        <small class="text-muted d-block mb-1">تاريخ التسجيل</small>
                        <div class="font-weight-bold">{{ $host->created_on ? $host->created_on->format('Y-m-d h:i A') : 'غير متوفر' }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Contact & Address Card -->
    <div class="col-lg-4 col-md-6">
        <div class="card shadow-sm border-0 rounded-lg mb-4 h-100">
            <div class="card-header bg-white border-bottom-0 pt-4 pb-2">
                <h5 class="m-0 font-weight-bold text-dark">
                    <i class="fas fa-map-marker-alt text-danger ml-2"></i> بيانات التواصل
                </h5>
            </div>
            <div class="card-body">
                <div class="d-flex align-items-start mb-3">
                    <div class="bg-light rounded p-2 ml-3">
                        <i class="fas fa-phone text-secondary"></i>
                    </div>
                    <div>
                        <small class="text-muted d-block mb-1">رقم الهاتف الأساسي</small>
                        <div class="font-weight-bold" dir="ltr">{{ $host->contact_no ?? 'غير متوفر' }}</div>
                    </div>
                </div>
                <div class="d-flex align-items-start mb-3">
                    <div class="bg-light rounded p-2 ml-3">
                        <i class="fab fa-whatsapp text-success"></i>
                    </div>
                    <div>
                        <small class="text-muted d-block mb-1">رقم الواتساب للتواصل</small>
                        <div class="font-weight-bold" dir="ltr">{{ $host->whatsapp_phone ?? 'غير متوفر' }}</div>
                    </div>
                </div>
                <div class="row border-top pt-3">
                    <div class="col-6 mb-2">
                        <small class="text-muted d-block mb-1">الدولة/المدينة</small>
                        <div class="font-weight-bold">{{ $host->country ?? 'غير محدد' }} - {{ $host->cityRelation->name_ar ?? $host->city ?? 'غير محدد' }}</div>
                    </div>
                    <div class="col-12 mt-2">
                        <small class="text-muted d-block mb-1">العنوان التفصيلي</small>
                        <div class="font-weight-bold text-muted small">{{ $host->address ?? 'لم يتم تقديم عنوان تفصيلي.' }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Activity Overview -->
    <div class="col-lg-4 col-md-12">
        <div class="card shadow-sm border-0 rounded-lg mb-4 h-100">
            <div class="card-header bg-white border-bottom-0 pt-4 pb-2">
                <h5 class="m-0 font-weight-bold text-dark">
                    <i class="fas fa-chart-line text-success ml-2"></i> إحصائيات النشاط
                </h5>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3 p-3 bg-light rounded" style="border-right: 4px solid #007bff;">
                    <span class="text-dark font-weight-bold"><i class="fas fa-home text-primary ml-2"></i>العقارات المضافة</span>
                    <span class="font-weight-bold badge badge-primary px-3 py-1">{{ $propertyCount ?? 0 }}</span>
                </div>
                <div class="d-flex justify-content-between align-items-center p-3 bg-light rounded" style="border-right: 4px solid #ffc107;">
                    <span class="text-dark font-weight-bold"><i class="fas fa-star text-warning ml-2"></i>حالة الاشتراك</span>
                    @if($host->subscription && $host->subscription->status == 'active')
                        <span class="font-weight-bold badge badge-success px-3 py-1">اشتراك فعال</span>
                    @else
                        <span class="font-weight-bold badge badge-secondary px-3 py-1">غير فعال / تجريبي</span>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row pb-5 mb-5 mt-4">
    <!-- Right Column: Verification Documents (Moved to right in Arabic RTL) -->
    <div class="col-lg-5 mb-4">
        <div class="card shadow-sm border-0 rounded-lg h-100">
            <div class="card-header bg-white border-bottom-0 pt-4 pb-2">
                <h5 class="m-0 font-weight-bold text-dark">
                    <i class="fas fa-passport text-warning ml-2"></i> إثبات الهوية
                </h5>
            </div>
            <div class="card-body d-flex flex-column">
                <p class="text-muted small mb-3">يرجى مراجعة إثبات الهوية أو جواز السفر والتأكد من مطابقته مع البيانات الشخصية للمضيف.</p>
                
                @if($host->id_proof)
                    <div class="document-preview rounded border overflow-hidden position-relative bg-light mb-3 flex-grow-1 d-flex align-items-center justify-content-center" style="min-height: 250px; cursor: pointer;" data-toggle="modal" data-target="#idProofModal">
                        @php
                            $extension = pathinfo($host->id_proof, PATHINFO_EXTENSION);
                            $isPdf = strtolower($extension) === 'pdf';
                        @endphp
                        
                        @if($isPdf)
                            <div class="text-center">
                                <i class="fas fa-file-pdf fa-4x text-danger mb-2"></i>
                                <span class="font-weight-bold text-dark d-block">ملف PDF</span>
                                <span class="text-primary small mt-2">انقر للعرض</span>
                            </div>
                        @else
                            <img src="{{ $host->id_proof }}" alt="ID Proof" class="img-fluid" style="max-height: 300px; object-fit: contain;">
                            <div class="preview-overlay position-absolute w-100 h-100 d-flex align-items-center justify-content-center" style="top: 0; left: 0; background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.3s;">
                                <i class="fas fa-search-plus fa-3x text-white"></i>
                            </div>
                        @endif
                    </div>
                    
                    <a href="{{ $host->id_proof }}" target="_blank" class="btn btn-block btn-outline-primary rounded-pill mt-auto">
                        <i class="fas fa-external-link-alt ml-1"></i> فتح في نافذة جديدة
                    </a>
                @else
                    <div class="bg-light rounded p-4 text-center border border-dashed flex-grow-1 d-flex flex-column justify-content-center">
                        <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
                        <h6 class="font-weight-bold">لم يتم إرفاق إثبات هوية</h6>
                        <p class="text-muted small mb-0">لم يقم هذا المضيف برفع أي مستند لإثبات هويته حتى الآن.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Left Column: Verification Timeline & Notes -->
    <div class="col-lg-7 mb-4">
        <div class="card shadow-sm border-0 rounded-lg h-100">
            <div class="card-header bg-white border-bottom-0 pt-4 pb-2 d-flex justify-content-between align-items-center">
                <h5 class="m-0 font-weight-bold text-dark">
                    <i class="fas fa-history text-primary ml-2"></i> سجل المراجعات والملاحظات
                </h5>
            </div>
            <div class="card-body bg-light">
                
                <!-- Add Note Form -->
                <form action="{{ route('admin.hosts-verification.addNote', $host->id) }}" method="POST" class="mb-4 bg-white p-3 rounded shadow-sm border">
                    @csrf
                    <div class="form-group mb-2">
                        <label class="sr-only" for="message">إضافة ملاحظة داخلية</label>
                        <textarea class="form-control border-0 bg-light" id="message" name="message" rows="2" placeholder="اكتب ملاحظة داخلية للمشرفين هنا... (لا يراها المضيف)" required></textarea>
                    </div>
                    <div class="text-left">
                        <button type="submit" class="btn btn-sm btn-primary rounded-pill px-4">
                            <i class="fas fa-paper-plane ml-1"></i> حفظ الملاحظة
                        </button>
                    </div>
                </form>

                <!-- Timeline -->
                <div class="timeline mt-4 px-3 pt-2" style="border-right: 3px solid #e9ecef; max-height: 400px; overflow-y: auto;">
                    @forelse($host->verificationLogs as $log)
                        <div class="timeline-item mb-4 position-relative pr-4">
                            <!-- Timeline Dot -->
                            <span class="position-absolute rounded-circle text-white d-flex align-items-center justify-content-center shadow-sm" 
                                style="width: 32px; height: 32px; right: -21px; top: 0;
                                @if($log->action == 'approved') background-color: #28a745; 
                                @elseif($log->action == 'rejected') background-color: #dc3545; 
                                @else background-color: #17a2b8; @endif">
                                
                                @if($log->action == 'approved') <i class="fas fa-check"></i>
                                @elseif($log->action == 'rejected') <i class="fas fa-times"></i>
                                @else <i class="fas fa-sticky-note"></i> @endif
                            </span>
                            
                            <div class="bg-white p-3 rounded shadow-sm border border-light">
                                <div class="d-flex justify-content-between align-items-center mb-2 pb-2" style="border-bottom: 1px dashed #eee;">
                                    <span class="font-weight-bold text-dark"><i class="fas fa-user-shield ml-1 text-muted"></i> {{ $log->admin->full_name ?? $log->admin->first_name ?? 'مشرف النظام' }}</span>
                                    <small class="text-muted"><i class="far fa-clock ml-1"></i> {{ $log->created_at->format('Y-m-d h:i A') }}</small>
                                </div>
                                <p class="mb-0 text-muted" style="line-height: 1.6;">
                                    @if($log->action == 'approved')
                                        <span class="text-success font-weight-bold">تم الموافقة:</span> 
                                    @elseif($log->action == 'rejected')
                                        <span class="text-danger font-weight-bold">تحديث مطلوب:</span> 
                                    @else
                                        <span class="text-info font-weight-bold">ملاحظة:</span> 
                                    @endif
                                    {{ $log->message }}
                                </p>
                            </div>
                        </div>
                    @empty
                        <div class="text-center text-muted py-4">
                            <i class="fas fa-clipboard-list fa-3x mb-3" style="color: #dee2e6;"></i>
                            <p class="mb-0">لا توجد سجلات مراجعة أو ملاحظات سابقة لهذا المضيف.</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Sticky Action Bar at Bottom -->
<div class="fixed-bottom bg-white border-top shadow-lg p-3" style="z-index: 1000;">
    <div class="container d-flex justify-content-between align-items-center">
        <div>
            <span class="font-weight-bold text-dark">الإجراء المطلوب لهذا المضيف:</span>
        </div>
        <div class="d-flex gap-2">
            <!-- Reject Button -->
            <button type="button" class="btn btn-outline-danger rounded-pill px-4 py-2 font-weight-bold mr-2 shadow-sm" data-toggle="modal" data-target="#rejectModal">
                <i class="fas fa-times ml-1"></i> رفض / طلب تعديل
            </button>
            
            <!-- Approve Button -->
            <form action="{{ route('admin.hosts-verification.approve', $host->id) }}" method="POST" class="m-0 p-0 d-inline-block">
                @csrf
                <button type="submit" class="btn btn-success rounded-pill px-5 py-2 font-weight-bold shadow-sm" onclick="return confirm('هل أنت متأكد من الموافقة على هذا المضيف؟ سيتم تفعيل حسابه وإرسال إشعار له لكي يبدأ النشر.')">
                    <i class="fas fa-check-circle ml-1"></i> موافقة وتفعيل النشر
                </button>
            </form>
        </div>
    </div>
</div>

<!-- Modal for Rejection Reason -->
<div class="modal fade" id="rejectModal" tabindex="-1" role="dialog" aria-labelledby="rejectModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content border-0 shadow-lg rounded-lg">
            <div class="modal-header bg-light border-bottom-0">
                <h5 class="modal-title font-weight-bold text-danger" id="rejectModalLabel">
                    <i class="fas fa-exclamation-circle ml-1"></i> طلب تعديل البيانات
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ route('admin.hosts-verification.reject', $host->id) }}" method="POST">
                @csrf
                <div class="modal-body p-4">
                    <p class="text-muted mb-3">سيتم إرسال هذه الملاحظة للمضيف عبر الواتساب والإشعارات ليقوم بتعديل بياناته.</p>
                    <div class="form-group">
                        <label for="reason" class="font-weight-bold">سبب الرفض / الملاحظات <span class="text-danger">*</span></label>
                        <textarea class="form-control bg-light rounded" id="reason" name="reason" rows="4" placeholder="مثال: يرجى إعادة رفع صورة إثبات الهوية بحيث تكون واضحة..." required></textarea>
                    </div>
                </div>
                <div class="modal-footer bg-light border-top-0">
                    <button type="button" class="btn btn-secondary rounded-pill px-4" data-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-danger rounded-pill px-4 shadow-sm">
                        <i class="fas fa-paper-plane ml-1"></i> إرسال الطلب
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Lightbox Modal for ID Proof -->
@if($host->id_proof)
<div class="modal fade" id="idProofModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content bg-transparent border-0">
            <div class="modal-header border-0 pb-0 justify-content-end">
                <button type="button" class="close text-white bg-dark rounded-circle p-2" data-dismiss="modal" aria-label="Close" style="opacity: 0.8;">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body text-center p-0">
                @if($isPdf)
                    <iframe src="{{ $host->id_proof }}" style="width: 100%; height: 80vh;" frameborder="0" class="rounded shadow-lg bg-white"></iframe>
                @else
                    <img src="{{ $host->id_proof }}" class="img-fluid rounded shadow-lg" style="max-height: 90vh;">
                @endif
            </div>
        </div>
    </div>
</div>
@endif

<style>
    .badge-soft-warning {
        background-color: rgba(255, 193, 7, 0.1);
        color: #ffc107;
        border: 1px solid rgba(255, 193, 7, 0.2);
    }
    .document-preview:hover .preview-overlay {
        opacity: 1 !important;
    }
    .border-dashed {
        border-style: dashed !important;
        border-width: 2px !important;
        border-color: #dee2e6 !important;
    }
</style>
@endsection