@extends('layouts.admin')

@section('title', __('Comment Details'))

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">{{ __('Comment Details') }}</h1>
            <p class="text-muted">{{ __('View and manage comment details') }}</p>
        </div>
        <div>
            <a href="{{ route('admin.blog.comments.index', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> {{ __('Back to Comments') }}
            </a>
        </div>
    </div>

    <!-- Comment Details -->
    <div class="row">
        <div class="col-lg-8">
            <!-- Comment Card -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Comment Information') }}</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h5>{{ __('Author Information') }}</h5>
                            <p><strong>{{ __('Name') }}:</strong> {{ $comment->author_display_name }}</p>
                            <p><strong>{{ __('Email') }}:</strong> {{ $comment->author_email }}</p>
                            @if($comment->author_website)
                                <p><strong>{{ __('Website') }}:</strong> <a href="{{ $comment->author_website }}" target="_blank">{{ $comment->author_website }}</a></p>
                            @endif
                            @if($comment->user)
                                <p><strong>{{ __('Registered User') }}:</strong> {{ __('Yes') }}</p>
                            @endif
                        </div>
                        <div class="col-md-6">
                            <h5>{{ __('Comment Details') }}</h5>
                            <p><strong>{{ __('Status') }}:</strong>
                                <span class="badge badge-{{ $comment->status === 'approved' ? 'success' : ($comment->status === 'pending' ? 'warning' : 'danger') }}">
                                    {{ ucfirst($comment->status) }}
                                </span>
                            </p>
                            <p><strong>{{ __('Date') }}:</strong> {{ $comment->created_at->format('Y-m-d H:i:s') }}</p>
                            <p><strong>{{ __('IP Address') }}:</strong> {{ $comment->ip_address }}</p>
                            <p><strong>{{ __('User Agent') }}:</strong> {{ Str::limit($comment->user_agent, 50) }}</p>
                        </div>
                    </div>

                    <hr>

                    <div class="row">
                        <div class="col-12">
                            <h5>{{ __('Comment Content') }}</h5>
                            <div class="border p-3 rounded bg-light">
                                {!! nl2br(e($comment->content)) !!}
                            </div>
                        </div>
                    </div>

                    @if($comment->blog)
                    <hr>
                    <div class="row">
                        <div class="col-12">
                            <h5>{{ __('Related Blog Post') }}</h5>
                            <p><strong>{{ __('Title') }}:</strong> <a href="{{ route('frontend.blog.detail', ['locale' => app()->getLocale(), 'slug' => $comment->blog->slug_en]) }}" target="_blank">{{ $comment->blog->title }}</a></p>
                            <p><strong>{{ __('Author') }}:</strong> {{ $comment->blog->author->name ?? __('Unknown') }}</p>
                            <p><strong>{{ __('Published') }}:</strong> {{ $comment->blog->published_at ? $comment->blog->published_at->format('Y-m-d H:i') : __('Not published') }}</p>
                        </div>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Edit Comment Form -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Edit Comment') }}</h6>
                </div>
                <div class="card-body">
                    <form id="editCommentForm">
                        @csrf
                        @method('PUT')

                        <div class="form-group">
                            <label for="content">{{ __('Content') }}</label>
                            <textarea class="form-control" id="content" name="content" rows="5" required>{{ $comment->content }}</textarea>
                        </div>

                        <div class="form-group">
                            <label for="status">{{ __('Status') }}</label>
                            <select class="form-control" id="status" name="status" required>
                                <option value="pending" {{ $comment->status === 'pending' ? 'selected' : '' }}>{{ __('Pending') }}</option>
                                <option value="approved" {{ $comment->status === 'approved' ? 'selected' : '' }}>{{ __('Approved') }}</option>
                                <option value="spam" {{ $comment->status === 'spam' ? 'selected' : '' }}>{{ __('Spam') }}</option>
                            </select>
                        </div>

                        <button type="submit" class="btn btn-primary">{{ __('Update Comment') }}</button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <!-- Quick Actions -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Quick Actions') }}</h6>
                </div>
                <div class="card-body">
                    @if($comment->status !== 'approved')
                        <button class="btn btn-success btn-block mb-2" onclick="approveComment()">
                            <i class="fas fa-check"></i> {{ __('Approve Comment') }}
                        </button>
                    @endif

                    @if($comment->status !== 'spam')
                        <button class="btn btn-warning btn-block mb-2" onclick="spamComment()">
                            <i class="fas fa-ban"></i> {{ __('Mark as Spam') }}
                        </button>
                    @endif

                    <button class="btn btn-danger btn-block" onclick="deleteComment()">
                        <i class="fas fa-trash"></i> {{ __('Delete Comment') }}
                    </button>
                </div>
            </div>

            <!-- Comment Stats -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Comment Statistics') }}</h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $comment->likes_count }}</div>
                            <div class="text-xs font-weight-bold text-uppercase text-muted">{{ __('Likes') }}</div>
                        </div>
                        <div class="col-6">
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $comment->replies->count() }}</div>
                            <div class="text-xs font-weight-bold text-uppercase text-muted">{{ __('Replies') }}</div>
                        </div>
                    </div>
                </div>
            </div>

            @if($comment->replies->count() > 0)
            <!-- Replies -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Replies') }} ({{ $comment->replies->count() }})</h6>
                </div>
                <div class="card-body">
                    @foreach($comment->replies as $reply)
                        <div class="border-left-primary border-left-4 pl-3 mb-3">
                            <div class="small text-muted">{{ $reply->created_at->format('Y-m-d H:i') }}</div>
                            <div class="font-weight-bold">{{ $reply->author_display_name }}</div>
                            <div class="text-truncate">{{ Str::limit(strip_tags($reply->content), 100) }}</div>
                            <span class="badge badge-{{ $reply->status === 'approved' ? 'success' : ($reply->status === 'pending' ? 'warning' : 'danger') }}">
                                {{ ucfirst($reply->status) }}
                            </span>
                        </div>
                    @endforeach
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // Edit comment form submission
    $('#editCommentForm').on('submit', function(e) {
        e.preventDefault();

        const formData = new FormData(this);

        $.ajax({
            url: '{{ route("admin.blog.comments.update", ["locale" => app()->getLocale(), "comment" => $comment->id]) }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success) {
                    toastr.success(response.message);
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                const errors = xhr.responseJSON.errors;
                if (errors) {
                    Object.keys(errors).forEach(function(key) {
                        toastr.error(errors[key][0]);
                    });
                } else {
                    toastr.error('{{ __("An error occurred while updating the comment.") }}');
                }
            }
        });
    });
});

function approveComment() {
    if (!confirm('{{ __("Are you sure you want to approve this comment?") }}')) return;

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

function spamComment() {
    if (!confirm('{{ __("Are you sure you want to mark this comment as spam?") }}')) return;

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

function deleteComment() {
    if (!confirm('{{ __("Are you sure you want to delete this comment? This action cannot be undone.") }}')) return;

    $.ajax({
        url: '{{ route("admin.blog.comments.destroy", ["locale" => app()->getLocale(), "comment" => $comment->id]) }}',
        method: 'DELETE',
        data: { _token: '{{ csrf_token() }}' },
        success: function(response) {
            if (response.success) {
                toastr.success(response.message);
                setTimeout(function() {
                    window.location.href = '{{ route("admin.blog.comments.index", ["locale" => app()->getLocale()]) }}';
                }, 1000);
            } else {
                toastr.error(response.message);
            }
        },
        error: function() {
            toastr.error('{{ __("An error occurred while deleting the comment.") }}');
        }
    });
}
</script>
@endsection