@extends('layouts.admin')

@section('title', 'Open Comments')
@section('header', 'Open Comments')
@section('subheader', 'Anonymous feedback from employees')

@section('content')
@include('company.partials.survey-selector')

<div class="space-y-6">
    <!-- Stats -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="stat-card">
            <div class="stat-value">{{ count($comments) }}</div>
            <div class="stat-label">Total Comments</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ $questions->count() }}</div>
            <div class="stat-label">Open Questions</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ $survey->responses()->where('is_complete', true)->count() }}</div>
            <div class="stat-label">Total Responses</div>
        </div>
    </div>

    <!-- Filter -->
    @if($questions->count() > 1)
    <div class="card">
        <div class="card-body">
            <label class="form-label">Filter by Question</label>
            <select id="questionFilter" class="form-select" onchange="filterComments()">
                <option value="">All Questions</option>
                @foreach($questions as $q)
                    <option value="{{ Str::slug($q->question_text) }}">{{ Str::limit($q->question_text, 60) }}</option>
                @endforeach
            </select>
        </div>
    </div>
    @endif

    <!-- Comments List -->
    <div class="card">
        <div class="card-header">
            <h3 class="font-semibold text-secondary-900">All Comments</h3>
        </div>

        @if(count($comments) > 0)
            <div class="divide-y divide-gray-100" id="commentsList">
                @foreach($comments as $index => $comment)
                    <div class="p-6 comment-item" data-question="{{ Str::slug($comment->question_text) }}">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <span class="text-lg">💬</span>
                            </div>
                            <div class="flex-1">
                                <p class="text-gray-900 mb-2">{{ $comment->answer_text }}</p>
                                <div class="flex items-center text-sm text-gray-500 space-x-4">
                                    <span title="Question">
                                        <i class="fas fa-question-circle mr-1"></i>
                                        {{ Str::limit($comment->question_text, 40) }}
                                    </span>
@if(isset($comment->department) && $comment->department)                                        <span title="Department">
                                            <i class="fas fa-building mr-1"></i>
                                            {{ $comment->department }}
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="card-body text-center py-12">
                <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-comments text-gray-400 text-2xl"></i>
                </div>
                <h3 class="text-gray-700 font-medium mb-2">No Comments Yet</h3>
                <p class="text-gray-500">Open-ended responses will appear here once submitted.</p>
            </div>
        @endif
    </div>
</div>

@push('scripts')
<script>
function filterComments() {
    const filter = document.getElementById('questionFilter').value;
    const items = document.querySelectorAll('.comment-item');
    
    items.forEach(item => {
        if (!filter || item.dataset.question === filter) {
            item.style.display = '';
        } else {
            item.style.display = 'none';
        }
    });
}
</script>
@endpush
@endsection