@extends("layouts.app")

@section("content")
<div class="d-flex justify-content-between align-items-center pt-3 pb-3 mb-3 border-bottom">
    <h1 class="h3 font-weight-bold text-dark m-0">
        <i class="fas fa-user-clock text-warning mr-2"></i> إدارة طلبات تفعيل المضيفين
    </h1>
</div>

@include('flash::message')

<!-- KPIs / Small Boxes -->
<div class="row">
    <div class="col-lg-3 col-6">
        <div class="small-box bg-info">
            <div class="inner">
                <h3>{{ $countNew }}</h3>
                <p>طلبات جديدة</p>
            </div>
            <div class="icon">
                <i class="fas fa-user-plus"></i>
            </div>
            <a href="{{ route('admin.hosts-verification.index', ['status' => 'new']) }}" class="small-box-footer">عرض التفاصيل <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>
    
    <div class="col-lg-3 col-6">
        <div class="small-box bg-warning">
            <div class="inner">
                <h3>{{ $countInReview }}</h3>
                <p>تم التحديث (بانتظار المراجعة)</p>
            </div>
            <div class="icon">
                <i class="fas fa-sync-alt"></i>
            </div>
            <a href="{{ route('admin.hosts-verification.index', ['status' => 'in_review']) }}" class="small-box-footer">عرض التفاصيل <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>

    <div class="col-lg-3 col-6">
        <div class="small-box bg-danger">
            <div class="inner">
                <h3>{{ $countModRequested }}</h3>
                <p>بانتظار تعديل المضيف</p>
            </div>
            <div class="icon">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
            <a href="{{ route('admin.hosts-verification.index', ['status' => 'modification_requested']) }}" class="small-box-footer">عرض التفاصيل <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>

    <div class="col-lg-3 col-6">
        <div class="small-box bg-success">
            <div class="inner">
                <h3>{{ $countApprovedThisMonth }}</h3>
                <p>تم التفعيل هذا الشهر</p>
            </div>
            <div class="icon">
                <i class="fas fa-check-double"></i>
            </div>
            <a href="#" class="small-box-footer">إحصائية شهرية <i class="fas fa-chart-line"></i></a>
        </div>
    </div>
</div>

<!-- Tabs for filtering -->
<div class="card shadow-sm border-0 rounded-lg overflow-hidden mb-4">
    <div class="card-header bg-white p-0 border-bottom-0">
        <ul class="nav nav-tabs nav-justified" id="verification-tabs">
            <li class="nav-item">
                <a class="nav-link font-weight-bold py-3 {{ $status === 'new' ? 'active text-info border-bottom-info' : 'text-muted' }}" href="{{ route('admin.hosts-verification.index', ['status' => 'new']) }}">
                    <i class="fas fa-star mr-1"></i> طلبات جديدة ({{ $countNew }})
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link font-weight-bold py-3 {{ $status === 'in_review' ? 'active text-warning border-bottom-warning' : 'text-muted' }}" href="{{ route('admin.hosts-verification.index', ['status' => 'in_review']) }}">
                    <i class="fas fa-sync mr-1"></i> تم التحديث - بانتظار المراجعة ({{ $countInReview }})
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link font-weight-bold py-3 {{ $status === 'modification_requested' ? 'active text-danger border-bottom-danger' : 'text-muted' }}" href="{{ route('admin.hosts-verification.index', ['status' => 'modification_requested']) }}">
                    <i class="fas fa-clock mr-1"></i> بانتظار المضيف ({{ $countModRequested }})
                </a>
            </li>
        </ul>
    </div>
</div>

<div class="card shadow-sm border-0 rounded-lg overflow-hidden">
    <div class="card-body p-0">
        @if($pendingHosts->count() > 0)
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0 text-center">
                <thead class="bg-light text-muted">
                    <tr>
                        <th class="border-top-0 border-bottom-0 py-3 font-weight-bold">المضيف</th>
                        <th class="border-top-0 border-bottom-0 py-3 font-weight-bold">البريد الإلكتروني</th>
                        <th class="border-top-0 border-bottom-0 py-3 font-weight-bold">رقم الهاتف</th>
                        <th class="border-top-0 border-bottom-0 py-3 font-weight-bold">تاريخ التسجيل</th>
                        <th class="border-top-0 border-bottom-0 py-3 font-weight-bold">الحالة</th>
                        <th class="border-top-0 border-bottom-0 py-3 font-weight-bold text-center">الإجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($pendingHosts as $host)
                        <tr>
                            <td class="py-3 font-weight-bold text-primary">
                                <div class="d-flex align-items-center justify-content-center">
                                    <div class="rounded-circle bg-light d-flex align-items-center justify-content-center border" style="width: 40px; height: 40px; overflow: hidden; margin-left: 10px;">
                                        @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 text-secondary"></i>
                                        @endif
                                    </div>
                                    <span>{{ $host->full_name ?? $host->first_name . ' ' . $host->last_name }}</span>
                                </div>
                            </td>
                            <td class="py-3 text-muted" dir="ltr">{{ $host->email }}</td>
                            <td class="py-3 text-muted" dir="ltr">{{ $host->whatsapp_phone ?? $host->contact_no }}</td>
                            <td class="py-3 text-muted">{{ $host->created_on->format('Y-m-d') }}</td>
                            <td class="py-3">
                                @if($host->verification_status === 'in_review')
                                    <span class="badge badge-pill badge-warning px-3 py-1">
                                        <i class="fas fa-sync-alt mr-1"></i> بانتظار المراجعة
                                    </span>
                                @elseif($host->verification_status === 'modification_requested')
                                    <span class="badge badge-pill badge-danger px-3 py-1">
                                        <i class="fas fa-exclamation-triangle mr-1"></i> بانتظار المضيف
                                    </span>
                                @else
                                    <span class="badge badge-pill badge-info px-3 py-1">
                                        <i class="fas fa-star mr-1"></i> طلب جديد
                                    </span>
                                @endif
                            </td>
                            <td class="py-3 text-center">
                                <a href="{{ route('admin.hosts-verification.show', $host->id) }}" class="btn btn-sm btn-primary rounded-pill px-3 shadow-sm">
                                    <i class="fas fa-search-plus ml-1"></i> مراجعة الملف
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
        <div class="py-5 text-center mt-3 mb-3">
            <div class="mb-3">
                <i class="fas fa-check-circle fa-4x text-success" style="opacity: 0.5;"></i>
            </div>
            <h5 class="text-muted font-weight-bold">لا توجد طلبات معلقة</h5>
            <p class="text-muted mb-0">جميع حسابات المضيفين تمت مراجعتها مسبقاً.</p>
        </div>
        @endif
    </div>
    
    @if($pendingHosts->hasPages())
        <div class="card-footer bg-white border-top-0 pb-3 pt-4 d-flex justify-content-center">
            {{ $pendingHosts->links() }}
        </div>
    @endif
</div>

<style>
    .badge-soft-warning {
        background-color: rgba(255, 193, 7, 0.1);
        color: #ffc107;
        border: 1px solid rgba(255, 193, 7, 0.2);
    }
</style>
@endsection