{{-- resources/views/comments/index.blade.php --}}
<x-app-layout>
    <x-slot name="title">التعليقات - عرض وإدارة التعليقات المتلقاة</x-slot>

<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="{{ 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="{{ 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>
                @foreach($pages as $page)
                    <option value="{{ $page->page_id }}" {{ request('page_id') == $page->page_id ? 'selected' : '' }}>
                        {{ $page->name }}
                    </option>
                @endforeach
            </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" {{ request('status') == 'replied' ? 'selected' : '' }}>تم الرد</option>
                <option value="not_replied" {{ request('status') == 'not_replied' ? 'selected' : '' }}>لم يتم الرد</option>
            </select>

            <!-- من تاريخ -->
            <input type="date" name="date_from"
                   value="{{ 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="{{ 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="{{ 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">{{ 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">{{ 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">{{ 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">{{ $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">
            @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">
                        @foreach($comments as $comment)
                            <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">{{ $comment->from_name }}</strong>
                                        <br><small class="text-muted-foreground">{{ $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">{{ Str::limit($comment->message, 100) }}</p>
                                        @if($comment->parent_id)
                                            <small class="inline-flex px-2 py-0.5 rounded-md text-xs bg-blue-100 text-blue-800">رد على تعليق آخر</small>
                                        @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">
                                        {{ $comment->page->name ?? 'غير محدد' }}
                                    </span>
                                </td>

                                <!-- الحالة -->
                                <td data-slot="table-cell" class="p-2 align-middle">
                                    @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>
                                        @if($comment->replied_at)
                                            <br><small class="text-muted-foreground">{{ $comment->replied_at->diffForHumans() }}</small>
                                        @endif
                                    @else
                                        <span class="inline-flex px-2 py-0.5 rounded-md text-xs font-medium bg-yellow-100 text-yellow-800">بانتظار الرد</span>
                                    @endif
                                </td>

                                <!-- الرد التلقائي -->
                                <td data-slot="table-cell" class="p-2 align-middle">
                                    @if($comment->autoReply)
                                        <span class="inline-flex px-2 py-0.5 rounded-md text-xs font-medium bg-purple-100 text-purple-800">
                                            {{ $comment->autoReply->name }}
                                        </span>
                                    @else
                                        <small class="text-muted-foreground">لا يوجد</small>
                                    @endif
                                </td>

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

                                <!-- الإجراءات -->
                                <td data-slot="table-cell" class="p-2 align-middle">
                                    <div class="flex gap-2">
                                        <a href="{{ 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>
                        @endforeach
                    </tbody>
                </table>

                <!-- Pagination -->
                <div class="mt-4 flex justify-center">
                    {{ $comments->appends(request()->query())->links() }}
                </div>
            @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">
                        @if(request()->hasAny(['search', 'page_id', 'status', 'date_from', 'date_to']))
                            لا توجد نتائج تطابق البحث الحالي
                            <br>
                            <a href="{{ route('comments.index') }}" class="inline-block mt-2 text-primary hover:underline">
                                مسح الفلاتر
                            </a>
                        @else
                            لم يتم تلقي أي تعليقات بعد
                        @endif
                    </p>
                </div>
            @endif
        </div>
    </div>
</div>

</div>

</x-app-layout>