@extends('layouts.admin')

@section('title', __('blog.blog_comments'))

@section('content')
<div class="container-fluid" dir="{{ $text_direction }}">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">{{ __('blog.blog_comments') }}</h1>
            <p class="text-muted">{{ __('blog.manage_and_moderate_blog_comments') }}</p>
        </div>
        <div>
            <a href="{{ route('admin.blog.dashboard', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> {{ __('blog.back_to_dashboard') }}
            </a>
        </div>
    </div>

    <!-- Filters -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">{{ __('blog.filters') }}</h6>
        </div>
        <div class="card-body">
            <form id="filterForm" class="row">
                <div class="col-md-3">
                    <label for="status">{{ __('general.active') }}</label>
                    <select name="status" id="status" class="form-control">
                        <option value="">{{ __('blog.all_status') }}</option>
                        <option value="pending">{{ __('blog.pending') }}</option>
                        <option value="approved">{{ __('blog.approved') }}</option>
                        <option value="spam">{{ __('blog.spam') }}</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="blog_id">{{ __('blog.blog_post') }}</label>
                    <select name="blog_id" id="blog_id" class="form-control">
                        <option value="">{{ __('blog.all_posts') }}</option>
                        @foreach($blogs as $blog)
                            <option value="{{ $blog->id }}">{{ $blog->title }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="date_from">{{ __('blog.from_date') }}</label>
                    <input type="date" name="date_from" id="date_from" class="form-control">
                </div>
                <div class="col-md-2">
                    <label for="date_to">{{ __('blog.to_date') }}</label>
                    <input type="date" name="date_to" id="date_to" class="form-control">
                </div>
                <div class="col-md-2 mt-3">
                    <button type="button" id="applyFilters" class="btn btn-primary btn-block">
                        <i class="fas fa-filter"></i> {{ __('blog.apply_filters') }}
                    </button>
                    <button type="button" id="clearFilters" class="btn btn-secondary btn-block mt-1">
                        <i class="fas fa-times"></i> {{ __('blog.clear') }}
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Bulk Actions -->
    <div class="card shadow mb-4" id="bulkActions" style="display: none;">
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <span id="selectedCount">0</span> {{ __('blog.comments_selected') }}
                </div>
                <div class="col-md-6 text-right">
                    <button type="button" class="btn btn-success btn-sm" onclick="bulkAction('approve')">
                        <i class="fas fa-check"></i> {{ __('blog.approve') }}
                    </button>
                    <button type="button" class="btn btn-warning btn-sm" onclick="bulkAction('pending')">
                        <i class="fas fa-clock"></i> {{ __('blog.mark_pending') }}
                    </button>
                    <button type="button" class="btn btn-danger btn-sm" onclick="bulkAction('spam')">
                        <i class="fas fa-ban"></i> {{ __('blog.mark_spam') }}
                    </button>
                    <button type="button" class="btn btn-danger btn-sm" onclick="bulkAction('delete')">
                        <i class="fas fa-trash"></i> {{ __('blog.delete') }}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Comments Table -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">{{ __('Comments') }}</h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="commentsTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th width="30">
                                <input type="checkbox" id="selectAll">
                            </th>
                            <th>{{ __('blog.blog_post') }}</th>
                            <th>{{ __('blog.author') }}</th>
                            <th>{{ __('blog.content') }}</th>
                            <th>{{ __('general.active') }}</th>
                            <th>{{ __('blog.date') }}</th>
                            <th>{{ __('general.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Data will be loaded via AJAX -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Comment Modal -->
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="commentModalLabel">{{ __('blog.comment_details') }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="commentModalBody">
                <!-- Comment content will be loaded here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('blog.close') }}</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // Initialize DataTable
    const table = $('#commentsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("admin.blog.comments.index", ["locale" => app()->getLocale()]) }}',
            data: function(d) {
                d.status = $('#status').val();
                d.blog_id = $('#blog_id').val();
                d.date_from = $('#date_from').val();
                d.date_to = $('#date_to').val();
            }
        },
        columns: [
            {
                data: null,
                orderable: false,
                render: function(data, type, row) {
                    return '<input type="checkbox" class="comment-checkbox" value="' + row.id + '">';
                }
            },
            {
                data: 'blog_title',
                render: function(data, type, row) {
                    return data || '{{ __("N/A") }}';
                }
            },
            {
                data: 'author_info',
                render: function(data, type, row) {
                    return data;
                }
            },
            {
                data: 'content',
                render: function(data, type, row) {
                    return data;
                }
            },
            {
                data: 'status',
                render: function(data, type, row) {
                    return data;
                }
            },
            {
                data: 'created_at',
                render: function(data, type, row) {
                    return new Date(data).toLocaleDateString();
                }
            },
            {
                data: 'actions',
                orderable: false,
                searchable: false
            }
        ],
        order: [[5, 'desc']],
        pageLength: 25,
        language: {
            url: '//cdn.datatables.net/plug-ins/1.10.25/i18n/{{ app()->getLocale() }}.json'
        }
    });

    // Select All checkbox
    $('#selectAll').on('change', function() {
        $('.comment-checkbox').prop('checked', $(this).prop('checked'));
        updateBulkActions();
    });

    // Individual checkboxes
    $(document).on('change', '.comment-checkbox', function() {
        updateBulkActions();
    });

    // Apply filters
    $('#applyFilters').on('click', function() {
        table.ajax.reload();
    });

    // Clear filters
    $('#clearFilters').on('click', function() {
        $('#filterForm')[0].reset();
        table.ajax.reload();
        updateBulkActions();
    });

    // View comment details
    $(document).on('click', '.view-comment', function(e) {
        e.preventDefault();
        const commentId = $(this).data('id');
        viewComment(commentId);
    });

    // Approve comment
    $(document).on('click', '.approve-comment', function(e) {
        e.preventDefault();
        const commentId = $(this).data('id');
        approveComment(commentId);
    });

    // Mark as spam
    $(document).on('click', '.spam-comment', function(e) {
        e.preventDefault();
        const commentId = $(this).data('id');
        spamComment(commentId);
    });

    // Delete comment
    $(document).on('click', '.delete-comment', function(e) {
        e.preventDefault();
        const commentId = $(this).data('id');
        if (confirm('{{ __('general.delete_confirm') }}')) {
            deleteComment(commentId);
        }
    });
});

function updateBulkActions() {
    const checkedBoxes = $('.comment-checkbox:checked');
    const count = checkedBoxes.length;

    if (count > 0) {
        $('#bulkActions').show();
        $('#selectedCount').text(count);
    } else {
        $('#bulkActions').hide();
    }
}

function bulkAction(action) {
    const selectedIds = $('.comment-checkbox:checked').map(function() {
        return $(this).val();
    }).get();

    if (selectedIds.length === 0) {
        alert('{{ __("Please select comments first.") }}');
        return;
    }

    if (action === 'delete' && !confirm('{{ __('general.delete_confirm') }}')) {
        return;
    }

    $.ajax({
        url: '{{ route("admin.blog.comments.bulk-action", ["locale" => app()->getLocale()]) }}',
        method: 'POST',
        data: {
            action: action,
            ids: selectedIds,
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            if (response.success) {
                $('#commentsTable').DataTable().ajax.reload();
                updateBulkActions();
                toastr.success(response.message);
            } else {
                toastr.error(response.message);
            }
        },
        error: function() {
            toastr.error('{{ __("An error occurred while processing the request.") }}');
        }
    });
}

function viewComment(commentId) {
    $.ajax({
        url: '{{ route("admin.blog.comments.show", ["locale" => app()->getLocale(), "comment" => ":id"]) }}'.replace(':id', commentId),
        method: 'GET',
        success: function(response) {
            $('#commentModalBody').html(response);
            $('#commentModal').modal('show');
        },
        error: function() {
            toastr.error('{{ __("Failed to load comment details.") }}');
        }
    });
}

function approveComment(commentId) {
    $.ajax({
        url: '{{ route("admin.blog.comments.approve", ["locale" => app()->getLocale(), "comment" => ":id"]) }}'.replace(':id', commentId),
        method: 'POST',
        data: { _token: '{{ csrf_token() }}' },
        success: function(response) {
            if (response.success) {
                $('#commentsTable').DataTable().ajax.reload();
                toastr.success(response.message);
            } else {
                toastr.error(response.message);
            }
        },
        error: function() {
            toastr.error('{{ __("An error occurred while approving the comment.") }}');
        }
    });
}

function spamComment(commentId) {
    $.ajax({
        url: '{{ route("admin.blog.comments.spam", ["locale" => app()->getLocale(), "comment" => ":id"]) }}'.replace(':id', commentId),
        method: 'POST',
        data: { _token: '{{ csrf_token() }}' },
        success: function(response) {
            if (response.success) {
                $('#commentsTable').DataTable().ajax.reload();
                toastr.success(response.message);
            } else {
                toastr.error(response.message);
            }
        },
        error: function() {
            toastr.error('{{ __("An error occurred while marking comment as spam.") }}');
        }
    });
}

function deleteComment(commentId) {
    $.ajax({
        url: '{{ route("admin.blog.comments.destroy", ["locale" => app()->getLocale(), "comment" => ":id"]) }}'.replace(':id', commentId),
        method: 'DELETE',
        data: { _token: '{{ csrf_token() }}' },
        success: function(response) {
            if (response.success) {
                $('#commentsTable').DataTable().ajax.reload();
                updateBulkActions();
                toastr.success(response.message);
            } else {
                toastr.error(response.message);
            }
        },
        error: function() {
            toastr.error('{{ __("An error occurred while deleting the comment.") }}');
        }
    });
}
</script>
@endsection