@extends(theme()->layout())

@section('title', __('comments.title'))

@section('content')
    @if(isset($element))
        <x:content::top-light.edit :element="$element" />
    @endif
    <div class="comments-admin">
        {{-- Stats Cards --}}
        <div class="comments-stats">
            <div class="stat-card">
                <div class="stat-icon icon-primary">
                    <i class="fas fa-comments"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value">{{ $stats['total'] }}</div>
                    <div class="stat-label">{{ __('comments.total') }}</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon icon-warning">
                    <i class="fas fa-clock"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value">{{ $stats['pending'] }}</div>
                    <div class="stat-label">{{ __('comments.pending') }}</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon icon-success">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value">{{ $stats['approved'] }}</div>
                    <div class="stat-label">{{ __('comments.approved') }}</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon icon-danger">
                    <i class="fas fa-question-circle"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value">{{ $stats['unanswered'] }}</div>
                    <div class="stat-label">{{ __('comments.unanswered') }}</div>
                </div>
            </div>
            @if($stats['average_rating'])
                <div class="stat-card">
                    <div class="stat-icon icon-info">
                        <i class="fas fa-star"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-value">{{ number_format($stats['average_rating'], 1) }}</div>
                        <div class="stat-label">{{ __('comments.avg_rating') }}</div>
                    </div>
                </div>
            @endif
        </div>

        {{-- Toolbar --}}
        <div class="comments-toolbar">
            <div class="toolbar-left">
                <div class="bulk-actions" id="bulkActions" style="display: none;">
                    <span class="selected-count"><span id="selectedCount">0</span> {{ __('comments.selected') }}</span>
                    <button type="button" class="btn btn-sm btn-success" onclick="bulkAction('approve')">
                        <i class="fas fa-check"></i> {{ __('comments.approve') }}
                    </button>
                    <button type="button" class="btn btn-sm btn-warning" onclick="bulkAction('reject')">
                        <i class="fas fa-times"></i> {{ __('comments.reject') }}
                    </button>
                    <button type="button" class="btn btn-sm btn-danger" onclick="bulkAction('delete')">
                        <i class="fas fa-trash"></i> {{ __('comments.delete') }}
                    </button>
                </div>
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" id="searchInput" placeholder="{{ __('comments.search_placeholder') }}"
                           value="{{ request('search') }}">
                </div>
                <button type="button" class="btn btn-primary" onclick="openReplyModal()">
                    <i class="fas fa-plus"></i>
                    {{ __('comments.add_comment') }}
                </button>
            </div>
            <div class="toolbar-right">
                <div class="filters">
                    <select id="filterStatus" class="form-select">
                        <option value="">{{ __('comments.all_statuses') }}</option>
                        <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>{{ __('comments.pending') }}</option>
                        <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>{{ __('comments.approved') }}</option>
                        <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>{{ __('comments.rejected') }}</option>
                        <option value="spam" {{ request('status') == 'spam' ? 'selected' : '' }}>{{ __('comments.spam') }}</option>
                    </select>
                    <select id="filterAnswered" class="form-select">
                        <option value="">{{ __('comments.all_comments') }}</option>
                        <option value="no" {{ request('answered') == 'no' ? 'selected' : '' }}>{{ __('comments.unanswered') }}</option>
                        <option value="yes" {{ request('answered') == 'yes' ? 'selected' : '' }}>{{ __('comments.answered') }}</option>
                    </select>
                    <select id="filterRating" class="form-select">
                        <option value="">{{ __('comments.all_ratings') }}</option>
                        @for($i = 5; $i >= 1; $i--)
                            <option value="{{ $i }}" {{ request('rating') == $i ? 'selected' : '' }}>{{ $i }} {{ __('comments.stars') }}</option>
                        @endfor
                    </select>
                </div>
            </div>
        </div>

        {{-- Comments List --}}
        <div class="comments-container">
            @forelse($comments as $comment)
                <x-comments::item :comment="$comment" :level="0" />
            @empty
                <div class="comments-empty">
                    <div class="empty-icon">
                        <i class="fas fa-comments"></i>
                    </div>
                    <h3>{{ __('comments.no_comments') }}</h3>
                    <p>{{ __('comments.no_comments_desc') }}</p>
                </div>
            @endforelse
        </div>

        {{-- Pagination --}}
        @if($comments->hasPages())
            <div class="comments-pagination">
                {{ $comments->withQueryString()->links() }}
            </div>
        @endif
    </div>

    {{-- Reply Modal --}}
    <div class="modal fade" id="replyModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('comments.reply') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="replyParentId" value="">
                    <div class="reply-to-info" id="replyToInfo" style="display: none;">
                        <small class="text-muted">{{ __('comments.replying_to') }}:</small>
                        <div class="reply-to-content" id="replyToContent"></div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">{{ __('comments.your_reply') }}</label>
                        <textarea id="replyContent" class="form-control" rows="5" placeholder="{{ __('comments.reply_placeholder') }}"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('comments.cancel') }}</button>
                    <button type="button" class="btn btn-primary" onclick="submitReply()">
                        <i class="fas fa-paper-plane"></i> {{ __('comments.send_reply') }}
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Delete Modal --}}
    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('comments.confirm_delete') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>{{ __('comments.delete_warning') }}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('comments.cancel') }}</button>
                    <button type="button" class="btn btn-danger" id="btnConfirmDelete">{{ __('comments.delete') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        const COMMENTS_CONFIG = {
            modelType: '{{ $modelType }}',
            modelId: {{ $modelId }},
            routes: {
                index: '{{ route("accounting.comments.index", [$modelType, $modelId]) }}',
                store: '{{ route("accounting.comments.store", [$modelType, $modelId]) }}',
                show: '{{ route("accounting.comments.show", [$modelType, $modelId, ":id"]) }}',
                update: '{{ route("accounting.comments.update", [$modelType, $modelId, ":id"]) }}',
                approve: '{{ route("accounting.comments.approve", [$modelType, $modelId, ":id"]) }}',
                reject: '{{ route("accounting.comments.reject", [$modelType, $modelId, ":id"]) }}',
                spam: '{{ route("accounting.comments.spam", [$modelType, $modelId, ":id"]) }}',
                destroy: '{{ route("accounting.comments.destroy", [$modelType, $modelId, ":id"]) }}',
                bulk: '{{ route("accounting.comments.bulk", [$modelType, $modelId]) }}',
            },
            translations: {
                approve_success: '{{ __("comments.approve_success") }}',
                reject_success: '{{ __("comments.reject_success") }}',
                delete_success: '{{ __("comments.delete_success") }}',
                reply_success: '{{ __("comments.reply_success") }}',
                error: '{{ __("comments.error") }}',
            }
        };
    </script>
@endpush
