@if ($tarea->evidencias->count() > 0)
    <div class="space-y-2 max-h-48 overflow-y-auto">
        @foreach ($tarea->evidencias as $evidencia)
            <div
                class="flex items-center justify-between p-2 bg-gray-50 rounded-lg border border-gray-200 hover:bg-gray-100 transition">
                <div class="flex items-center space-x-2 flex-1 min-w-0">
                    <div
                        class="flex-shrink-0 w-8 h-8 bg-white rounded flex items-center justify-center border border-gray-200">
                        @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, ['xlsx', 'xls']))
                            <i class="fas fa-file-excel text-green-600 text-sm"></i>
                        @elseif(in_array($evidencia->tipo_archivo, ['pptx', 'ppt']))
                            <i class="fas fa-file-powerpoint text-orange-600 text-sm"></i>
                        @elseif(in_array($evidencia->tipo_archivo, ['jpg', 'jpeg', 'png', 'gif']))
                            <i class="fas fa-file-image text-purple-600 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), 25) }}
                        </p>
                        <p class="text-xs text-gray-500">
                            @if ($evidencia->user_id === auth()->id())
                                <span class="font-semibold text-blue-600">(YO)</span>
                            @else
                                <span class="font-medium">{{ $evidencia->user->name ?? 'Usuario' }}</span>
                            @endif
                            ·
                            {{ \Carbon\Carbon::parse($evidencia->fecha_subida)->timezone('America/Lima')->format('d/m/Y H:i') }}
                        </p>
                    </div>
                </div>

                <div class="flex items-center space-x-1 ml-2">
                    <!-- Estado de Validación -->
                    @php
                        $validacionColors = [
                            'pendiente' => 'bg-yellow-100 text-yellow-800',
                            'aprobada' => 'bg-green-100 text-green-800',
                            'rechazada' => 'bg-red-100 text-red-800',
                        ];
                        $validacionClass =
                            $validacionColors[$evidencia->estado_validación] ?? 'bg-gray-100 text-gray-800';
                    @endphp

                    <span class="px-2 py-1 text-xs font-medium rounded {{ $validacionClass }}">
                        {{ ucfirst($evidencia->estado_validación) }}
                    </span>

                    @php
                        $filePath = $evidencia->archivo;
                        $streamUrl = route('tasks.evidencias.stream', [
                            'taskId' => $tarea->id_tarea,
                            'evidenciaId' => $evidencia->id_evidencia,
                        ]);
                        if (str_contains($filePath, 'http')) {
                            $filePath = parse_url($filePath, PHP_URL_PATH);
                            $filePath = ltrim($filePath, '/');
                        }
                    @endphp
                    <!-- Botón Ver -->
                    <button type="button"
                        class="btn-view-file p-1.5 text-green-600 hover:bg-green-50 rounded transition cursor-pointer"
                        data-file-path="{{ $filePath }}" data-stream-url="{{ $streamUrl }}" title="Ver archivo">
                        <svg width="22" height="20" 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>
                    <!-- Botón Descargar -->
                    <button type="button"
                        class="btn-download-file p-1.5 text-blue-600 hover:bg-blue-50 rounded transition cursor-pointer"
                        data-file-path="{{ $filePath }}" data-file-name="{{ addslashes(basename($filePath)) }}"
                        title="Descargar">
                        <svg width="22" height="20" 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>

                    {{-- Solo el dueño puede editar/eliminar sus propias evidencias ANTES de enviar O cuando está REABIERTA --}}
                    @php
                        $puedeEditar =
                            $evidencia->user_id == auth()->id() &&
                            !in_array($tarea->estado, ['completado', 'cancelado']) &&
                            (
                                // Si está reabierta, puede editar cualquier evidencia propia
                                $tarea->estado == 'reabierto' ||
                                // Si no está reabierta, solo puede editar si está pendiente y no enviada
                                ($evidencia->estado_validación == 'pendiente' && !$evidencia->enviado)
                            );
                    @endphp
                    @if ($puedeEditar)
                        <button type="button"
                            class="evidencia-action p-1.5 text-indigo-600 hover:bg-indigo-50 rounded transition cursor-pointer"
                            title="Renombrar" data-task-id="{{ $tarea->id_tarea }}"
                            data-evidencia-id="{{ $evidencia->id_evidencia }}"
                            data-file-name="{{ basename($evidencia->archivo) }}"
                            onclick="openRenameModal({{ $tarea->id_tarea }}, {{ $evidencia->id_evidencia }}, '{{ addslashes(basename($evidencia->archivo)) }}')">
                            <i class="fas fa-edit text-sm"></i>
                        </button>

                        <button type="button"
                            class="evidencia-delete-btn p-1.5 text-red-600 hover:bg-red-50 rounded transition cursor-pointer"
                            title="Eliminar" data-task-id="{{ $tarea->id_tarea }}"
                            data-evidencia-id="{{ $evidencia->id_evidencia }}"
                            onclick="openDeleteEvidenciaModal({{ $tarea->id_tarea }}, {{ $evidencia->id_evidencia }}, '{{ addslashes(basename($evidencia->archivo)) }}')">
                            <i class="fas fa-trash-alt text-sm"></i>
                        </button>
                    @endif
                </div>
            </div>
        @endforeach
    </div>
@else
    <div class="text-center py-6 bg-gray-50 rounded-lg border-2 border-dashed border-gray-200">
        <i class="fas fa-upload text-gray-400 text-2xl mb-2"></i>
        <p class="text-xs text-gray-500">No hay evidencias subidas</p>
        @if (in_array($tarea->estado, ['pendiente', 'reabierto']))
            <button onclick="openUploadModal({{ $tarea->id_tarea }})"
                class="mt-3 inline-flex items-center px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium rounded-lg transition-colors cursor-pointer">
                <i class="fas fa-upload mr-1.5"></i>
                Subir primera evidencia
            </button>
        @endif
    </div>
@endif

{{-- Modal de Confirmación de Eliminación de Evidencia --}}
<div id="deleteEvidenciaModal-{{ $tarea->id_tarea }}"
    class="hidden fixed inset-0 flex justify-center items-center z-50 bg-black/5"
    style="backdrop-filter: blur(1px); animation: fadeIn 0.2s ease-out;">

    <!-- Contenedor del modal centrado -->
    <div class="flex min-h-screen items-center justify-center p-4">
        <div class="relative bg-white rounded-2xl shadow-2xl max-w-md w-full transform transition-all"
            style="animation: slideUp 0.3s ease-out;">

            <div class="p-6">
                <!-- Icono con animación -->
                <div class="flex items-center justify-center mb-5">
                    <div class="relative">
                        <div class="absolute inset-0 bg-red-100 rounded-full animate-ping opacity-30"></div>
                        <div
                            class="relative flex items-center justify-center w-16 h-16 bg-gradient-to-br from-red-100 to-red-50 rounded-full shadow-lg">
                            <i class="fas fa-trash-alt text-3xl text-red-600"></i>
                        </div>
                    </div>
                </div>

                <!-- Título -->
                <h3 class="text-xl font-bold text-center mb-3" style="color: #1C3146;">
                    ¿Eliminar evidencia?
                </h3>

                <!-- Descripción -->
                <p class="text-sm text-center mb-4 leading-relaxed" style="color: #768070;">
                    Esta acción no se puede deshacer. La evidencia será eliminada permanentemente.
                </p>

                <!-- Nombre del archivo con icono -->
                <div class="mb-6 p-3 bg-gradient-to-r from-red-50 to-orange-50 border border-red-100 rounded-lg">
                    <div class="flex items-center justify-center space-x-2">
                        <i class="fas fa-file-alt text-red-500"></i>
                        <p id="evidenciaFileName-{{ $tarea->id_tarea }}"
                            class="text-sm font-semibold text-red-900 truncate max-w-xs">
                        </p>
                    </div>
                </div>

                <!-- Botones con mejor diseño -->
                <div class="flex gap-3">
                    <button type="button" onclick="closeDeleteEvidenciaModal({{ $tarea->id_tarea }})"
                        class="flex-1 px-5 py-2.5 text-sm font-semibold rounded-xl transition-all duration-200 transform hover:scale-105 active:scale-95 cursor-pointer"
                        style="background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); color: #374151; box-shadow: 0 2px 4px rgba(0,0,0,0.05);"
                        onmouseover="this.style.boxShadow='0 4px 12px rgba(0,0,0,0.1)'"
                        onmouseout="this.style.boxShadow='0 2px 4px rgba(0,0,0,0.05)'">
                        <i class="fas fa-times mr-2"></i>
                        Cancelar
                    </button>
                    <button type="button" id="confirmDeleteBtn-{{ $tarea->id_tarea }}"
                        class="flex-1 px-5 py-2.5 text-sm font-semibold text-white rounded-xl transition-all duration-200 transform hover:scale-105 active:scale-95 cursor-pointer"
                        style="background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);"
                        onmouseover="this.style.boxShadow='0 6px 20px rgba(220, 38, 38, 0.4)'"
                        onmouseout="this.style.boxShadow='0 4px 12px rgba(220, 38, 38, 0.3)'">
                        <i class="fas fa-trash-alt mr-2"></i>
                        Eliminar
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(20px) scale(0.95);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
</style>

<script>
    // Verificar si currentDeleteData ya existe (el parcial puede incluirse múltiples veces)
    if (typeof currentDeleteData === 'undefined') {
        var currentDeleteData = {};
    }
    
    // Usar una estructura específica por tarea para evitar conflictos
    if (!currentDeleteData[{{ $tarea->id_tarea }}]) {
        currentDeleteData[{{ $tarea->id_tarea }}] = {
            taskId: null,
            evidenciaId: null
        };
    }

    // Abrir modal de confirmación de eliminación
    function openDeleteEvidenciaModal(taskId, evidenciaId, fileName) {
        currentDeleteData[taskId].taskId = taskId;
        currentDeleteData[taskId].evidenciaId = evidenciaId;

        const modal = document.getElementById('deleteEvidenciaModal-' + taskId);
        const fileNameElement = document.getElementById('evidenciaFileName-' + taskId);

        if (fileNameElement) {
            fileNameElement.textContent = fileName;
        }

        if (modal) {
            modal.classList.remove('hidden');
        }

        // Configurar el botón de confirmar
        const confirmBtn = document.getElementById('confirmDeleteBtn-' + taskId);
        if (confirmBtn) {
            confirmBtn.onclick = function() {
                confirmDeleteEvidencia(taskId, evidenciaId);
            };
        }
    }

    // Cerrar modal de confirmación
    function closeDeleteEvidenciaModal(taskId) {
        const modal = document.getElementById('deleteEvidenciaModal-' + taskId);
        if (modal) {
            modal.classList.add('hidden');
        }
        currentDeleteData = {
            taskId: null,
            evidenciaId: null
        };
    }

    // Confirmar y ejecutar eliminación
    function confirmDeleteEvidencia(taskId, evidenciaId) {
        const confirmBtn = document.getElementById('confirmDeleteBtn-' + taskId);
        if (confirmBtn) {
            confirmBtn.disabled = true;
            confirmBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Eliminando...';
        }

        // Llamar a la función original de eliminación
        deleteEvidenciaConfirmed(taskId, evidenciaId);
    }

    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>