@if ($task->evidencias->count() > 0)
    <div class="space-y-2">
        @foreach ($task->evidencias as $evidencia)
            <div
                class="flex items-center justify-between p-2.5 bg-gray-50 rounded-lg border border-gray-200 hover:bg-gray-100 transition">
                <div class="flex items-center flex-1 min-w-0">
                    <div
                        class="w-8 h-8 bg-white rounded flex items-center justify-center border border-gray-200 mr-2 flex-shrink-0">
                        @if ($evidencia->tipo_archivo === 'pdf')
                            <i class="fas fa-file-pdf text-red-600 text-sm"></i>
                        @elseif(in_array($evidencia->tipo_archivo, ['docx', 'doc']))
                            <i class="fas fa-file-word text-blue-600 text-sm"></i>
                        @elseif(in_array($evidencia->tipo_archivo, ['jpg', 'jpeg', 'png', 'gif']))
                            <i class="fas fa-file-image text-green-600 text-sm"></i>
                        @elseif(in_array($evidencia->tipo_archivo, ['xls', 'xlsx']))
                            <i class="fas fa-file-excel text-green-700 text-sm"></i>
                        @else
                            <i class="fas fa-file text-gray-600 text-sm"></i>
                        @endif
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-xs font-medium text-gray-900 truncate" title="{{ basename($evidencia->archivo) }}">{{ Str::limit(basename($evidencia->archivo), 40) }}</p>
                        <div class="flex items-center space-x-2 mt-0.5">
                            <p class="text-xs text-gray-600 font-medium">
                                <i class="far fa-user mr-1"></i>
                                {{ $evidencia->user->name ?? 'Usuario' }}
                            </p>
                            <span class="text-gray-400">·</span>
                            <p class="text-xs text-gray-500">
                                <i class="far fa-clock mr-1"></i>
                                {{ \Carbon\Carbon::parse($evidencia->fecha_subida)->timezone('America/Lima')->format('d/m/Y H:i') }}
                            </p>
                            <span
                                class="px-1.5 py-0.5 text-xs rounded-full font-medium
                                {{ $evidencia->estado_validación === 'aprobada'
                                    ? 'bg-green-100 text-green-800'
                                    : ($evidencia->estado_validación === 'rechazada'
                                        ? 'bg-red-100 text-red-800'
                                        : 'bg-yellow-100 text-yellow-800') }}">
                                {{ ucfirst($evidencia->estado_validación) }}
                            </span>
                        </div>
                        @if ($evidencia->observaciones)
                            <div class="mt-1.5 p-1.5 bg-blue-50 border border-blue-200 rounded">
                                <p class="text-xs text-blue-800">
                                    <i class="fas fa-comment-alt mr-1"></i>
                                    <strong>Observación:</strong> {{ $evidencia->observaciones }}
                                </p>
                            </div>
                        @endif
                    </div>
                </div>
                <div class="flex items-center space-x-1.5 ml-2 flex-shrink-0">
                    @php
                        $filePath = $evidencia->archivo;
                        $streamUrl = route('tasks.evidencias.stream', [
                            'taskId' => $task->id_tarea,
                            'evidenciaId' => $evidencia->id_evidencia
                        ]);
                        if (str_contains($filePath, 'http')) {
                            $filePath = parse_url($filePath, PHP_URL_PATH);
                            $filePath = ltrim($filePath, '/');
                        }
                    @endphp
                    <button type="button"
                        class="btn-view-file p-1.5 bg-green-600 text-white rounded-lg hover:bg-green-700 transition cursor-pointer"
                        data-file-path="{{ $filePath }}"
                        data-stream-url="{{ $streamUrl }}"
                        title="Ver archivo">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.93799 8.5797C7.55608 2.47343 16.4439 2.47343 20.062 8.5797C21.3127 10.6905 21.3127 13.3095 20.062 15.4203C16.4439 21.5266 7.55608 21.5266 3.93799 15.4203C2.68734 13.3095 2.68734 10.6905 3.93799 8.5797ZM9.36532 12.0548C9.36532 10.5934 10.5446 9.41018 11.9995 9.41018C13.4547 9.41018 14.6347 10.5937 14.6347 12.0548C14.6347 13.5148 13.4548 14.6984 11.9995 14.6984C10.5444 14.6984 9.36532 13.5151 9.36532 12.0548ZM11.9995 8.17147C9.86264 8.17147 8.13103 9.90954 8.13103 12.0548C8.13103 14.1992 9.86276 15.9371 11.9995 15.9371C14.136 15.9371 15.869 14.1995 15.869 12.0548C15.869 9.90928 14.1361 8.17147 11.9995 8.17147Z" fill="currentColor"/></svg>
                    </button>
                    <button type="button"
                        class="btn-download-file p-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition cursor-pointer"
                        data-file-path="{{ $filePath }}" 
                        data-file-name="{{ addslashes(basename($filePath)) }}"
                        title="Descargar evidencia">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.9703 20.6564C13.0166 21.1146 10.9834 21.1146 9.02977 20.6564C6.20842 19.9946 4.0055 17.7916 3.3437 14.9703C2.88543 13.0166 2.88543 10.9834 3.3437 9.02977C4.0055 6.20842 6.20842 4.0055 9.02977 3.3437C10.9834 2.88543 13.0166 2.88543 14.9703 3.3437C17.7916 4.00549 19.9946 6.20842 20.6564 9.02976C21.1146 10.9834 21.1146 13.0166 20.6564 14.9703C19.9946 17.7916 17.7916 19.9946 14.9703 20.6564ZM14.8175 13.3816C15.0518 13.1472 15.0518 12.7673 14.8175 12.533C14.5832 12.2987 14.2033 12.2987 13.969 12.533L12.6 13.902L12.6 8.64949C12.6 8.31812 12.3314 8.04949 12 8.04949C11.6686 8.04949 11.4 8.31812 11.4 8.64949V13.902L10.031 12.533C9.79673 12.2987 9.41683 12.2987 9.18252 12.533C8.9482 12.7673 8.9482 13.1472 9.18252 13.3816L11.5757 15.7748C11.6883 15.8873 11.8409 15.9505 12 15.9505C12.1591 15.9505 12.3117 15.8873 12.4243 15.7748L14.8175 13.3816Z" fill="currentColor"/></svg>
                    </button>
                </div>
            </div>
        @endforeach
    </div>
@else
    <div class="text-center py-8">
        <i class="fas fa-inbox text-gray-300 text-3xl mb-3"></i>
        <p class="text-sm text-gray-500 font-medium">No hay evidencias subidas</p>
        <p class="text-xs text-gray-400 mt-1">El usuario aún no ha subido evidencias para esta tarea</p>
    </div>
@endif

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const viewFileButtons = document.querySelectorAll('.btn-view-file');
        
        viewFileButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                const filePath = this.getAttribute('data-file-path');
                const streamUrl = this.getAttribute('data-stream-url');
                const fileName = filePath.split('/').pop();
                const extension = fileName.split('.').pop().toLowerCase();
                const audioExtensions = ['mp3', 'wav', 'ogg', 'm4a', 'flac'];
                const videoExtensions = ['mp4', 'webm', 'mkv', 'mov', 'avi'];

                if (audioExtensions.includes(extension) || videoExtensions.includes(extension)) {
                    // Es multimedia, abrir el media player con URL de stream desde el backend
                    e.stopImmediatePropagation();
                    e.preventDefault();
                    openMediaPlayer(streamUrl, fileName);
                }
            });
        });
    });
</script>