@if ($task->justificaciones && $task->justificaciones->count() > 0)
    <div class="space-y-2">
        @foreach ($task->justificaciones as $justificacion)
            <div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition">
                <div class="p-2.5 bg-gray-50 border-b border-gray-200">
                    <div class="flex items-start justify-between">
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center space-x-2 mb-1">
                                <h4 class="text-sm font-semibold text-gray-900">{{ $justificacion->motivo }}</h4>
                                <span
                                    class="px-1.5 py-0.5 text-xs rounded-full font-medium flex-shrink-0 inline-flex items-center gap-1
                                    {{ $justificacion->estado === 'sin_revisar' ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800' }}">
                                    @if ($justificacion->estado === 'sin_revisar')
                                        <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="M9.02977 3.3437C10.9834 2.88543 13.0166 2.88543 14.9703 3.3437C17.7916 4.0055 19.9946 6.20843 20.6564 9.02977C21.1146 10.9834 21.1146 13.0166 20.6564 14.9703C19.9946 17.7916 17.7916 19.9946 14.9703 20.6564C13.0166 21.1146 10.9834 21.1146 9.02977 20.6564C6.20843 19.9946 4.0055 17.7916 3.3437 14.9703C2.88543 13.0166 2.88543 10.9834 3.3437 9.02976C4.0055 6.20842 6.20842 4.0055 9.02977 3.3437ZM12.2758 9.12813C12.2758 8.79676 12.0072 8.52813 11.6758 8.52813C11.3445 8.52813 11.0758 8.79676 11.0758 9.12813V12.6643C11.0758 12.8694 11.1807 13.0604 11.3538 13.1705L14.0711 14.8994C14.3507 15.0773 14.7215 14.9949 14.8994 14.7153C15.0773 14.4357 14.9949 14.0649 14.7153 13.887L12.2758 12.3349V9.12813Z"
                                                fill="currentColor" />
                                        </svg>
                                        Pendiente
                                    @else
                                        <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="M9.02975 3.3437C10.9834 2.88543 13.0166 2.88543 14.9703 3.3437C17.7916 4.00549 19.9945 6.20842 20.6563 9.02975C21.1146 10.9834 21.1146 13.0166 20.6563 14.9703C19.9945 17.7916 17.7916 19.9945 14.9703 20.6563C13.0166 21.1146 10.9834 21.1146 9.02975 20.6563C6.20842 19.9945 4.0055 17.7916 3.3437 14.9703C2.88543 13.0166 2.88543 10.9834 3.3437 9.02974C4.0055 6.20841 6.20842 4.00549 9.02975 3.3437ZM15.0524 10.4773C15.2689 10.2454 15.2563 9.88195 15.0244 9.6655C14.7925 9.44906 14.4291 9.46159 14.2126 9.6935L11.2678 12.8487L9.77358 11.3545C9.54927 11.1302 9.1856 11.1302 8.9613 11.3545C8.73699 11.5788 8.73699 11.9425 8.9613 12.1668L10.8759 14.0814C10.986 14.1915 11.1362 14.2522 11.2919 14.2495C11.4477 14.2468 11.5956 14.181 11.7019 14.0671L15.0524 10.4773Z"
                                                fill="currentColor" />
                                        </svg>
                                        Revisada
                                    @endif
                                </span>
                            </div>
                            <div class="flex items-center space-x-2 text-xs text-gray-500">
                                <span class="font-medium text-gray-600">
                                    <i class="far fa-user mr-1"></i>
                                    {{ ($justificacion->usuario->name ?? '') . ' ' . ($justificacion->usuario->last_name ?? '') ?: 'Usuario' }}
                                </span>
                                <span class="text-gray-400">·</span>
                                <span>
                                    <i class="far fa-calendar mr-1"></i>
                                    {{ \Carbon\Carbon::parse($justificacion->fecha_justificacion)->format('d/m/Y H:i') }}
                                </span>
                                <span class="text-gray-400">·</span>
                                <span>
                                    <i class="far fa-clock mr-1"></i>
                                    {{ \Carbon\Carbon::parse($justificacion->fecha_justificacion)->diffForHumans() }}
                                </span>
                            </div>
                        </div>
                        @if ($justificacion->estado === 'sin_revisar')
                            <form method="POST" action="{{ route('admin.justificaciones.revisar', $justificacion) }}"
                                class="inline flex-shrink-0">
                                @csrf
                                <button type="submit"
                                    class="inline-flex items-center px-2.5 py-1.5 bg-green-600 text-white text-xs font-medium rounded-lg hover:bg-green-700 transition cursor-pointer">
                                    <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="M9.02975 3.3437C10.9834 2.88543 13.0166 2.88543 14.9703 3.3437C17.7916 4.00549 19.9945 6.20842 20.6563 9.02975C21.1146 10.9834 21.1146 13.0166 20.6563 14.9703C19.9945 17.7916 17.7916 19.9945 14.9703 20.6563C13.0166 21.1146 10.9834 21.1146 9.02975 20.6563C6.20842 19.9945 4.0055 17.7916 3.3437 14.9703C2.88543 13.0166 2.88543 10.9834 3.3437 9.02974C4.0055 6.20841 6.20842 4.00549 9.02975 3.3437ZM15.0524 10.4773C15.2689 10.2454 15.2563 9.88195 15.0244 9.6655C14.7925 9.44906 14.4291 9.46159 14.2126 9.6935L11.2678 12.8487L9.77358 11.3545C9.54927 11.1302 9.1856 11.1302 8.9613 11.3545C8.73699 11.5788 8.73699 11.9425 8.9613 12.1668L10.8759 14.0814C10.986 14.1915 11.1362 14.2522 11.2919 14.2495C11.4477 14.2468 11.5956 14.181 11.7019 14.0671L15.0524 10.4773Z"
                                            fill="currentColor" />
                                    </svg>
                                    Marcar Revisada
                                </button>
                            </form>
                        @endif
                    </div>
                </div>

                @if ($justificacion->evidencia)
                    <div class="p-2.5 bg-white">
                        <h5 class="text-xs font-semibold text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-paperclip text-orange-500 mr-1.5"></i>
                            Evidencia Adjunta
                        </h5>

                        <div
                            class="flex items-center justify-between p-2 bg-orange-50 border border-orange-200 rounded-lg">
                            <div class="flex items-center min-w-0 flex-1">
                                <div
                                    class="w-8 h-8 bg-white rounded flex items-center justify-center border border-orange-200 mr-2 flex-shrink-0">
                                    @php
                                        $filePath = $justificacion->evidencia;
                                        if (str_contains($filePath, 'http')) {
                                            $filePath = parse_url($filePath, PHP_URL_PATH);
                                            $filePath = ltrim($filePath, '/');
                                        }
                                        $extension = pathinfo($filePath, PATHINFO_EXTENSION);
                                    @endphp
                                    @if ($extension === 'pdf')
                                        <i class="fas fa-file-pdf text-red-600 text-sm"></i>
                                    @elseif(in_array($extension, ['docx', 'doc']))
                                        <i class="fas fa-file-word text-blue-600 text-sm"></i>
                                    @elseif(in_array($extension, ['jpg', 'jpeg', 'png', 'gif']))
                                        <i class="fas fa-file-image text-green-600 text-sm"></i>
                                    @else
                                        <i class="fas fa-file text-gray-600 text-sm"></i>
                                    @endif
                                </div>
                                <div class="min-w-0 flex-1">
                                    <p class="text-xs font-medium text-gray-900 truncate"
                                        title="{{ basename($filePath) }}">
                                        {{ Str::limit(basename($filePath), 40) }}
                                    </p>
                                    <p class="text-xs text-gray-500">
                                        Documento de justificación
                                    </p>
                                </div>
                            </div>
                            <div class="flex items-center space-x-1.5 flex-shrink-0 ml-2">
                                <button type="button" onclick="viewFile('{{ $filePath }}', this)"
                                    class="p-1.5 bg-green-600 text-white rounded-lg hover:bg-green-700 transition cursor-pointer"
                                    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"
                                    onclick="downloadFile('{{ $filePath }}', this, '{{ addslashes(basename($filePath)) }}')"
                                    class="p-1.5 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition cursor-pointer"
                                    title="Descargar 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="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>

                        @if ($justificacion->observacion_admin)
                            <div class="p-2 bg-green-50 border-t border-green-200">
                                <h5 class="text-xs font-semibold text-green-800 mb-1">
                                    <i class="fas fa-comment-dots mr-1"></i>
                                    Observación del Administrador:
                                </h5>
                                <p class="text-xs text-green-700">{{ $justificacion->observacion_admin }}</p>
                            </div>
                        @endif
                    </div>
                @endif
            </div>
        @endforeach
    </div>
@else
    <div class="text-center py-8">
        <i class="fas fa-clipboard-list text-gray-300 text-3xl mb-3"></i>
        <p class="text-sm text-gray-500 font-medium">No hay justificaciones registradas</p>
        <p class="text-xs text-gray-400 mt-1">El usuario no ha enviado justificaciones para esta tarea</p>
    </div>
@endif