@extends('admin.layouts.app')

@section('title', $title)

@section('content')
    <div class="col-md-12">
        @include('admin.layouts.notifications')

        <!-- Page Heading & Search Area -->
        <div class="row mb-3">
            <h4 class="c-grey-900">{{ $title }}</h4>
        </div>

        <!-- Main Content -->
        <div class="row">
            <div class="bgc-white bd bdrs-3 p-20 mB-20">
                <!-- Filters Section -->
                <div class="row mb-3">
                    <form method="GET" action="{{ route('ch-admin.blog.comments.index') }}" class="d-flex align-items-center gap-3 w-100">
                        <!-- Filter by Categories -->
                        <div class="flex-shrink-0">
                            <select name="post_id" class="form-control">
                                <option value="">All Posts</option>
                                @foreach($posts as $post)
                                    <option value="{{ $post->id }}" {{ request('post_id') == $post->id ? 'selected' : '' }}>{{ $post->title }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Filter by Users -->
                        <div class="flex-shrink-0">
                            <select name="user_id" class="form-control">
                                <option value="">All Users</option>
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}" {{ request('user_id') == $user->id ? 'selected' : '' }}>{{ $user->first_name }} {{ $user->last_name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Filter by Status -->
                        <div class="flex-shrink-0">
                            <select name="status" class="form-control">
                                <option value="">All Status</option>
                                <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending Comments</option>
                                <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Approved Comments</option>
                                <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Rejected Comments</option>
                            </select>
                        </div>

                        <!-- Action Buttons -->
                        <div class="flex-shrink-0">
                            <button type="submit" class="btn btn-info">Apply Filters</button>
                            @if(request('post_id') || request('user_id') || request('status'))
                                <a href="{{ route('ch-admin.blog.comments.index') }}" class="btn btn-secondary">Reset</a>
                            @endif
                            <button class="btn btn-danger" id="delete-bulk-btn" type="button"><i class="ti-trash"></i> Delete</button>
                        </div>
                    </form>
                </div>

                <!-- Comments Table -->
                <div class="row">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th><input type="checkbox" id="select-all" class="form-check-input"></th>
                            <th>Post</th>
                            <th>Comment</th>
                            <th>Status</th>
                            <th>User</th>
                            <th>Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        @if($comments->isEmpty())
                            <tr><td colspan="6" class="text-center">No records found.</td></tr>
                        @else
                            @foreach($comments as $comment)
                                <tr>
                                    <td><input type="checkbox" class="form-check-input select-comment" value="{{ $comment->id }}"></td>
                                    <td>{{ $comment->post->title }}</td>
                                    <td>{!! nl2br($comment->content) !!}</td>
                                    <td>
                                        @if($comment->status == 'approved')
                                            <span class="badge bg-success">Approved</span>
                                        @elseif($comment->status == 'pending')
                                            <span class="badge bg-secondary">Pending</span>
                                        @else
                                            <span class="badge bg-danger">Rejected</span>
                                        @endif
                                    </td>
                                    <td>{{ $comment->user->first_name ?? '' }} {{ $comment->user->last_name ?? '' }}</td>
                                    <td>
                                        <a href="{{ route('ch-admin.blog.comments.edit', $comment->id) }}" class="btn btn-sm btn-primary"><i class="ti-pencil"></i></a>
                                        <form action="{{ route('ch-admin.blog.comments.destroy', $comment->id) }}" method="POST" style="display: inline;">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this comment?')">
                                                <i class="ti-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        @endif
                        </tbody>
                    </table>

                    @if($comments->hasPages())
                        <div class="mt-4">
                            {{ $comments->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{url('assets/custom/js/axios.min.js')}}"></script>
    <script>
        const selectAllCheckbox = document.getElementById('select-all');
        const commentCheckboxes = document.querySelectorAll('.select-comment');
        const deleteBulkBtn = document.getElementById('delete-bulk-btn');

        function toggleDeleteButton() {
            const isChecked = [...commentCheckboxes].some(checkbox => checkbox.checked);
            deleteBulkBtn.style.display = isChecked ? 'inline-block' : 'none';
        }

        function updateSelectAllCheckbox() {
            const allChecked = [...commentCheckboxes].every(checkbox => checkbox.checked);
            selectAllCheckbox.checked = allChecked;
        }

        commentCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('click', function () {
                updateSelectAllCheckbox();
                toggleDeleteButton();
            });
        });

        selectAllCheckbox.addEventListener('click', function () {
            const isChecked = this.checked;
            commentCheckboxes.forEach(checkbox => {
                checkbox.checked = isChecked;
            });
            toggleDeleteButton();
        });

        function getSelectedComments() {
            const selectedComments = [];
            document.querySelectorAll('.select-comment:checked').forEach(function (checkbox) {
                selectedComments.push(checkbox.value);
            });
            return selectedComments;
        }

        deleteBulkBtn.addEventListener('click', function () {
            const selectedComments = getSelectedComments();

            if (selectedComments.length === 0) {
                alert('Please select at least one Comment.');
                return;
            }

            if (!confirm('Are you sure you want to delete the selected comments?')) {
                return;
            }

            httpClient.delete('{{ route("ch-admin.blog.comments.bulk.destroy") }}', {
                data: {
                    comments: selectedComments,
                }
            })
                .then((response) => {
                    if (response.data.success) {
                        window.location.href = '{{ route("ch-admin.blog.comments.index") }}';
                    } else {
                        alert('Failed to delete comments.');
                    }
                })
                .catch((error) => {
                    console.error(error);
                    alert('An error occurred. Please try again.');
                });
        });

        toggleDeleteButton();
    </script>
@endpush