@php use Illuminate\Support\Str; @endphp
@extends('admin.layouts.app')
@section('title', __('admin.content_comments'))
@section('heading', __('admin.content_comments'))
@section('content')
<x-admin.filter-scope>
<x-admin.page-header :title="__('admin.content_comments')" :show-filter="true" />

<x-admin.filter-panel>
<form method="get" class="admin-filter-form grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4" x-data="{ period: @js($period) }">
    <div class="sm:col-span-2">
        <label class="admin-label">{{ __('admin.body') }}</label>
        <input
            type="search"
            name="search"
            value="{{ $search }}"
            class="admin-input"
            placeholder="{{ __('admin.comment_search_placeholder') }}"
        />
    </div>

    <div>
        <label class="admin-label">{{ __('admin.user') }}</label>
        <input
            type="search"
            name="user"
            value="{{ $userQuery }}"
            class="admin-input"
            placeholder="{{ __('admin.comment_user_placeholder') }}"
        />
    </div>

    <div>
        <label class="admin-label">{{ __('admin.engagement_content_type') }}</label>
        <select name="type" class="admin-input">
            @foreach ($filters as $key => $label)
                <option value="{{ $key }}" @selected($type === $key)>{{ $label }}</option>
            @endforeach
        </select>
    </div>

    <div>
        <label class="admin-label">{{ __('admin.status') }}</label>
        <select name="status" class="admin-input">
            <option value="" @selected($status === '')>{{ __('admin.all') }}</option>
            <option value="pending" @selected($status === 'pending')>{{ __('admin.pending') }}</option>
            <option value="approved" @selected($status === 'approved')>{{ __('admin.approved') }}</option>
        </select>
    </div>

    <div>
        <label class="admin-label">{{ __('admin.comment_period') }}</label>
        <select name="period" class="admin-input" x-model="period">
            <option value="all">{{ __('admin.comment_period_all') }}</option>
            <option value="today">{{ __('admin.comment_period_today') }}</option>
            <option value="week">{{ __('admin.comment_period_week') }}</option>
            <option value="month">{{ __('admin.comment_period_month') }}</option>
            <option value="custom">{{ __('admin.comment_period_custom') }}</option>
        </select>
    </div>

    <div x-show="period === 'custom'" x-cloak>
        <label class="admin-label">{{ __('admin.comment_date_from') }}</label>
        <input type="date" name="date_from" value="{{ $dateFrom }}" class="admin-input" />
    </div>

    <div x-show="period === 'custom'" x-cloak>
        <label class="admin-label">{{ __('admin.comment_date_to') }}</label>
        <input type="date" name="date_to" value="{{ $dateTo }}" class="admin-input" />
    </div>

    <div>
        <label class="admin-label">{{ __('admin.comment_thread') }}</label>
        <select name="thread" class="admin-input">
            <option value="all" @selected($thread === 'all')>{{ __('admin.comment_thread_all') }}</option>
            <option value="roots" @selected($thread === 'roots')>{{ __('admin.comment_thread_roots') }}</option>
            <option value="replies" @selected($thread === 'replies')>{{ __('admin.comment_thread_replies') }}</option>
        </select>
    </div>

    <div>
        <label class="admin-label">{{ __('admin.engagement_sort_by') }}</label>
        <select name="sort" class="admin-input">
            <option value="latest" @selected($sort === 'latest')>{{ __('admin.comment_sort_latest') }}</option>
            <option value="oldest" @selected($sort === 'oldest')>{{ __('admin.comment_sort_oldest') }}</option>
        </select>
    </div>

    <div class="flex flex-wrap items-end gap-2 sm:col-span-2 lg:col-span-3 xl:col-span-4">
        <button type="submit" class="admin-btn-primary">{{ __('admin.search') }}</button>
        <a href="{{ route('admin.content-comments.index') }}" class="admin-btn-muted">{{ __('admin.cancel') }}</a>
    </div>
</form>
</x-admin.filter-panel>

<div
    class="admin-card overflow-x-auto"
    x-data="{
        selected: [],
        toggleAll(checked, ids) {
            this.selected = checked ? ids : [];
        },
        toggleOne(id, checked) {
            if (checked) {
                if (!this.selected.includes(id)) this.selected.push(id);
            } else {
                this.selected = this.selected.filter((item) => item !== id);
            }
        },
        submitBulk(event) {
            if (!this.selected.length) {
                event.preventDefault();
                alert(@js(__('admin.bulk_none_selected')));
                return;
            }
            if (!confirm(@js(__('admin.confirm_delete')))) {
                event.preventDefault();
            }
        }
    }"
>
    <form
        id="content-comments-bulk-form"
        method="post"
        action="{{ route('admin.content-comments.bulk-destroy') }}"
        @submit="submitBulk($event)"
    >
        @csrf
        @method('delete')
    </form>

    <div class="mb-4 flex flex-wrap items-center gap-2 border-b border-slate-200 pb-4">
        @can(\App\Models\Permission::COMMENTS_MODERATE)
            <button type="submit" form="content-comments-bulk-form" class="admin-btn-danger admin-btn-sm" :disabled="!selected.length">
                {{ __('admin.bulk_delete_selected') }}
            </button>
            <span class="text-sm text-slate-500" x-show="selected.length" x-cloak x-text="selected.length + ' {{ __('admin.selected') }}'"></span>
        @endcan
    </div>

    <div class="admin-table-wrap admin-table-wrap--responsive">
    <table class="admin-table w-full">
        <thead>
            <tr>
                <th class="w-10">
                    <input
                        type="checkbox"
                        class="rounded border-slate-300"
                        @change="toggleAll($event.target.checked, @js($comments->pluck('id')->all()))"
                        :checked="selected.length && selected.length === @js($comments->count())"
                    />
                </th>
                <th>{{ __('admin.user') }}</th>
                <th>{{ __('admin.comment_source') }}</th>
                <th>{{ __('admin.body') }}</th>
                <th>{{ __('admin.status') }}</th>
                <th>{{ __('admin.created_at') }}</th>
                <th>{{ __('admin.actions') }}</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($comments as $comment)
                @php
                    $sourceUrl = $comment->adminSourceUrl();
                @endphp
                <tr>
                    <td data-label="">
                        <input
                            type="checkbox"
                            name="ids[]"
                            value="{{ $comment->id }}"
                            form="content-comments-bulk-form"
                            class="rounded border-slate-300"
                            :checked="selected.includes({{ $comment->id }})"
                            @change="toggleOne({{ $comment->id }}, $event.target.checked)"
                        />
                    </td>
                    <td data-label="{{ __('admin.user') }}">
                        <div>{{ $comment->user?->name ?? $comment->user?->mobile }}</div>
                        @if ($comment->parent_id)
                            <p class="mt-1 text-xs text-slate-500">
                                {{ __('admin.comment_reply_to', ['name' => $comment->parent?->user?->name ?? '#'.$comment->parent_id]) }}
                            </p>
                        @endif
                    </td>
                    <td data-label="{{ __('admin.comment_source') }}">
                        <span class="inline-flex rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-700">{{ $comment->typeLabel() }}</span>
                        <div class="mt-1 max-w-xs truncate text-sm">
                            @if ($sourceUrl)
                                <a href="{{ $sourceUrl }}" class="text-brand-accent hover:underline" title="{{ $comment->sourceTitle() }}">{{ $comment->sourceTitle() }}</a>
                            @else
                                {{ $comment->sourceTitle() }}
                            @endif
                        </div>
                    </td>
                    <td data-label="{{ __('admin.body') }}" class="max-w-xs truncate" title="{{ $comment->body }}">{{ Str::limit($comment->body, 80) }}</td>
                    <td data-label="{{ __('admin.status') }}">{{ $comment->is_approved ? __('admin.approved') : __('admin.pending') }}</td>
                    <td data-label="{{ __('admin.created_at') }}"><x-admin.relative-date :date="$comment->created_at" /></td>
                    <td data-label="{{ __('admin.actions') }}" class="text-end whitespace-nowrap">
                        @can(\App\Models\Permission::COMMENTS_MODERATE)
                            @if (! $comment->is_approved)
                                <form method="post" action="{{ route('admin.content-comments.approve', $comment) }}" class="inline">@csrf @method('patch')<button type="submit" class="admin-btn-sm admin-btn-primary">{{ __('admin.approve') }}</button></form>
                                <form method="post" action="{{ route('admin.content-comments.reject', $comment) }}" class="inline ms-1">@csrf @method('delete')<button type="submit" class="admin-btn-sm admin-btn-danger">{{ __('admin.reject') }}</button></form>
                            @endif
                        @endcan
                    </td>
                </tr>
            @empty
                <tr><td colspan="7" class="py-8 text-center text-slate-500">{{ __('admin.no_records') }}</td></tr>
            @endforelse
        </tbody>
    </table>
    </div>
</div>

<div class="mt-4">{{ $comments->links() }}</div>
</x-admin.filter-scope>
@endsection