
<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? (array) $attributes->getIterator() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag && $constructor = (new ReflectionClass(App\View\Components\AppLayout::class))->getConstructor()): ?>
<?php $attributes = $attributes->except(collect($constructor->getParameters())->map->getName()->all()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
     <?php $__env->slot('title', null, []); ?> التعليقات - عرض وإدارة التعليقات المتلقاة <?php $__env->endSlot(); ?>

<div class="p-6 space-y-6" >

<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">

<div>
    <h1 class="text-3xl font-bold text-foreground">التعليقات</h1>
    <p class="text-muted-foreground">عرض وإدارة التعليقات المتلقاة</p>
</div>

</div>

 <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">

<!-- فلاتر البحث -->
<div class="lg:col-span-3">
<!-- فلاتر البحث -->
<div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm mb-4">
    <div data-slot="card-content" class="px-6 pt-6">
        <form method="GET" action="<?php echo e(route('comments.index')); ?>" class="grid grid-cols-1 md:grid-cols-6 gap-4">

            <!-- البحث -->
            <div class="relative">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                     viewBox="0 0 24 24" fill="none" stroke="currentColor"
                     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                     class="lucide lucide-search absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4">
                    <circle cx="11" cy="11" r="8"></circle>
                    <path d="m21 21-4.3-4.3"></path>
                </svg>
                <input type="text" name="search"
                       value="<?php echo e(request('search')); ?>"
                       placeholder="ابحث في التعليقات..."
                       class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground
                              dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1
                              text-base shadow-xs transition-[color,box-shadow] outline-none pr-10
                              md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]" />
            </div>

            <!-- اختيار الصفحة -->
            <select name="page_id"
                    class="border-input data-[placeholder]:text-muted-foreground dark:bg-input/30
                           flex items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm
                           shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring
                           focus-visible:ring-ring/50 focus-visible:ring-[3px]">
                <option value="">جميع الصفحات</option>
                <?php $__currentLoopData = $pages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $page): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <option value="<?php echo e($page->page_id); ?>" <?php echo e(request('page_id') == $page->page_id ? 'selected' : ''); ?>>
                        <?php echo e($page->name); ?>

                    </option>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </select>

            <!-- اختيار الحالة -->
            <select name="status"
                    class="border-input data-[placeholder]:text-muted-foreground dark:bg-input/30
                           flex items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm
                           shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring
                           focus-visible:ring-ring/50 focus-visible:ring-[3px]">
                <option value="">جميع الحالات</option>
                <option value="replied" <?php echo e(request('status') == 'replied' ? 'selected' : ''); ?>>تم الرد</option>
                <option value="not_replied" <?php echo e(request('status') == 'not_replied' ? 'selected' : ''); ?>>لم يتم الرد</option>
            </select>

            <!-- من تاريخ -->
            <input type="date" name="date_from"
                   value="<?php echo e(request('date_from')); ?>"
                   class="border-input data-[placeholder]:text-muted-foreground dark:bg-input/30
                          flex items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm
                          shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring
                          focus-visible:ring-ring/50 focus-visible:ring-[3px]">

            <!-- إلى تاريخ -->
            <input type="date" name="date_to"
                   value="<?php echo e(request('date_to')); ?>"
                   class="border-input data-[placeholder]:text-muted-foreground dark:bg-input/30
                          flex items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm
                          shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring
                          focus-visible:ring-ring/50 focus-visible:ring-[3px]">

            <!-- الأزرار -->
            <div class="flex gap-2">
                <button type="submit"
                        class="inline-flex items-center justify-center gap-2 rounded-md border bg-background shadow-xs
                               hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input
                               dark:hover:bg-input/50 h-9 px-4 py-2 text-sm font-medium transition-all">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="11" cy="11" r="8"></circle>
                        <path d="m21 21-4.3-4.3"></path>
                    </svg>
                    بحث
                </button>
                <a href="<?php echo e(route('comments.index')); ?>"
                   class="inline-flex items-center justify-center gap-2 rounded-md border bg-background shadow-xs
                          hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input
                          dark:hover:bg-input/50 h-9 px-4 py-2 text-sm font-medium transition-all">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M18 6 6 18"></path>
                        <path d="m6 6 12 12"></path>
                    </svg>
                    إعادة تعيين
                </a>
            </div>
        </form>
    </div>
</div>
  </div>
   <div class="grid grid-cols-2 gap-3">
    <div data-slot="card" class="bg-gradient-to-r from-blue-500 to-blue-600 text-white flex flex-col gap-6 rounded-xl border py-4 shadow-sm">
        <div data-slot="card-content" class="px-4 text-center">
            <div class="text-xl font-bold"><?php echo e(number_format($stats['total'])); ?></div>
            <div class="text-xs text-blue-100">إجمالي التعليقات</div>
        </div>
    </div>
    <div data-slot="card" class="bg-gradient-to-r from-green-500 to-green-600 text-white flex flex-col gap-6 rounded-xl border py-4 shadow-sm">
        <div data-slot="card-content" class="px-4 text-center">
            <div class="text-xl font-bold"><?php echo e(number_format($stats['replied'])); ?></div>
            <div class="text-xs text-green-100">تم الرد عليها</div>
        </div>
    </div>
    <div data-slot="card" class="bg-gradient-to-r from-yellow-500 to-yellow-600 text-white flex flex-col gap-6 rounded-xl border py-4 shadow-sm">
        <div data-slot="card-content" class="px-4 text-center">
            <div class="text-xl font-bold"><?php echo e(number_format($stats['not_replied'])); ?></div>
            <div class="text-xs text-yellow-100">بانتظار الرد</div>
        </div>
    </div>
    <div data-slot="card" class="bg-gradient-to-r from-gray-500 to-gray-600 text-white flex flex-col gap-6 rounded-xl border py-4 shadow-sm">
        <div data-slot="card-content" class="px-4 text-center">
            <div class="text-xl font-bold"><?php echo e($stats['reply_rate']); ?>%</div>
            <div class="text-xs text-gray-100">معدل الرد</div>
        </div>
    </div>
</div>
   
   </div>

<!-- جدول التعليقات -->
<div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm">
    <div data-slot="card-content" class="p-0">
        <div data-slot="table-container" class="relative w-full overflow-x-auto">
            <?php if($comments->count() > 0): ?>
                <table data-slot="table" class="w-full caption-bottom text-sm">
                    <thead data-slot="table-header" class="[&_*]:border-b">
                        <tr data-slot="table-row" class="hover:bg-muted/50 border-b transition-colors">
                            <th data-slot="table-head" class="px-2 py-3 text-right font-medium">المعلق</th>
                            <th data-slot="table-head" class="px-2 py-3 text-right font-medium">التعليق</th>
                            <th data-slot="table-head" class="px-2 py-3 text-right font-medium">الصفحة</th>
                            <th data-slot="table-head" class="px-2 py-3 text-right font-medium">الحالة</th>
                            <th data-slot="table-head" class="px-2 py-3 text-right font-medium">الرد التلقائي</th>
                            <th data-slot="table-head" class="px-2 py-3 text-right font-medium">التاريخ</th>
                            <th data-slot="table-head" class="px-2 py-3 text-right font-medium">الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody data-slot="table-body" class="[&>tr:last-child]:border-0">
                        <?php $__currentLoopData = $comments; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $comment): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <tr data-slot="table-row" class="hover:bg-muted/50 border-b transition-colors">
                                <!-- المعلق -->
                                <td data-slot="table-cell" class="p-2 align-middle">
                                    <div>
                                        <strong class="font-medium"><?php echo e($comment->from_name); ?></strong>
                                        <br><small class="text-muted-foreground"><?php echo e($comment->from_id); ?></small>
                                    </div>
                                </td>

                                <!-- التعليق -->
                                <td data-slot="table-cell" class="p-2 align-middle">
                                    <div class="max-w-xs">
                                        <p class="text-sm"><?php echo e(Str::limit($comment->message, 100)); ?></p>
                                        <?php if($comment->parent_id): ?>
                                            <small class="inline-flex px-2 py-0.5 rounded-md text-xs bg-blue-100 text-blue-800">رد على تعليق آخر</small>
                                        <?php endif; ?>
                                    </div>
                                </td>

                                <!-- الصفحة -->
                                <td data-slot="table-cell" class="p-2 align-middle">
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-blue-100 text-blue-800">
                                        <?php echo e($comment->page->name ?? 'غير محدد'); ?>

                                    </span>
                                </td>

                                <!-- الحالة -->
                                <td data-slot="table-cell" class="p-2 align-middle">
                                    <?php if($comment->auto_reply_sent): ?>
                                        <span class="inline-flex px-2 py-0.5 rounded-md text-xs font-medium bg-green-100 text-green-800">تم الرد</span>
                                        <?php if($comment->replied_at): ?>
                                            <br><small class="text-muted-foreground"><?php echo e($comment->replied_at->diffForHumans()); ?></small>
                                        <?php endif; ?>
                                    <?php else: ?>
                                        <span class="inline-flex px-2 py-0.5 rounded-md text-xs font-medium bg-yellow-100 text-yellow-800">بانتظار الرد</span>
                                    <?php endif; ?>
                                </td>

                                <!-- الرد التلقائي -->
                                <td data-slot="table-cell" class="p-2 align-middle">
                                    <?php if($comment->autoReply): ?>
                                        <span class="inline-flex px-2 py-0.5 rounded-md text-xs font-medium bg-purple-100 text-purple-800">
                                            <?php echo e($comment->autoReply->name); ?>

                                        </span>
                                    <?php else: ?>
                                        <small class="text-muted-foreground">لا يوجد</small>
                                    <?php endif; ?>
                                </td>

                                <!-- التاريخ -->
                                <td data-slot="table-cell" class="p-2 align-middle">
                                    <div class="text-sm">
                                        <div><?php echo e($comment->created_at->format('Y-m-d H:i')); ?></div>
                                        <small class="text-muted-foreground"><?php echo e($comment->created_at->diffForHumans()); ?></small>
                                    </div>
                                </td>

                                <!-- الإجراءات -->
                                <td data-slot="table-cell" class="p-2 align-middle">
                                    <div class="flex gap-2">
                                        <a href="<?php echo e(route('comments.show', $comment)); ?>" 
                                           class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5" 
                                           title="عرض">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye h-4 w-4">
                                                <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path>
                                                <circle cx="12" cy="12" r="3"></circle>
                                            </svg>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </tbody>
                </table>

                <!-- Pagination -->
                <div class="mt-4 flex justify-center">
                    <?php echo e($comments->appends(request()->query())->links()); ?>

                </div>
            <?php else: ?>
                <div class="text-center py-8">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle text-muted-foreground mx-auto mb-4">
                        <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>
                    </svg>
                    <h5 class="text-lg font-medium mb-2">لا توجد تعليقات</h5>
                    <p class="text-muted-foreground">
                        <?php if(request()->hasAny(['search', 'page_id', 'status', 'date_from', 'date_to'])): ?>
                            لا توجد نتائج تطابق البحث الحالي
                            <br>
                            <a href="<?php echo e(route('comments.index')); ?>" class="inline-block mt-2 text-primary hover:underline">
                                مسح الفلاتر
                            </a>
                        <?php else: ?>
                            لم يتم تلقي أي تعليقات بعد
                        <?php endif; ?>
                    </p>
                </div>
            <?php endif; ?>
        </div>
    </div>
</div>

</div>

 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php /**PATH /www/wwwroot/fast.rompure.com/fast.rompure.com/resources/views/comments/index.blade.php ENDPATH**/ ?>