@php
    $misJustificaciones = $tarea->justificaciones->where('user_id', auth()->id());
@endphp

@if ($misJustificaciones->count() > 0)
    <div class="space-y-2 max-h-48 overflow-y-auto">
        @foreach ($misJustificaciones as $justificacion)
            <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 hover:bg-gray-100 transition">
                <div class="flex items-start justify-between mb-2">
                    <p class="text-xs font-medium text-gray-900 flex-1">{{ Str::limit($justificacion->motivo, 60) }}</p>

                    @php
                        $justificacionColors = [
                            'sin_revisar' => 'bg-yellow-100 text-yellow-800',
                            'revisada' => 'bg-green-100 text-green-800',
                        ];
                        $justificacionClass =
                            $justificacionColors[$justificacion->estado] ?? 'bg-gray-100 text-gray-800';
                        $estadoText = $justificacion->estado === 'sin_revisar' ? 'Pendiente' : 'Revisada';
                    @endphp

                    <span class="px-2 py-1 text-xs font-medium rounded {{ $justificacionClass }}">
                        {{ $estadoText }}
                    </span>
                </div>

                <p class="text-xs text-gray-500 mb-2">
                    <i class="far fa-clock mr-1"></i>
                    {{ \Carbon\Carbon::parse($justificacion->fecha_justificacion)->timezone('America/Lima')->format('d/m/Y H:i') }}
                </p>

                @if ($justificacion->evidencia)
                    <div class="mt-2 flex items-center justify-between p-2 bg-blue-50 border border-blue-200 rounded">
                        @php
                            $filePath = $justificacion->evidencia;
                            if (str_contains($filePath, 'http')) {
                                $filePath = parse_url($filePath, PHP_URL_PATH);
                                $filePath = ltrim($filePath, '/');
                            }
                        @endphp
                        <div class="flex items-center space-x-2">
                            <i class="fas fa-paperclip text-blue-600 text-xs"></i>
                            <span class="text-xs text-blue-800 font-medium">{{ basename($filePath) }}</span>
                        </div>
                        <div class="flex items-center space-x-1">
                            <button type="button" onclick="viewFile('{{ $filePath }}', this)"
                                class="text-blue-600 hover:text-green-700 text-xs cursor-pointer" 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>
                            <button type="button"
                                onclick="downloadFile('{{ $filePath }}', this, '{{ addslashes(basename($filePath)) }}')"
                                class="text-blue-600 hover:text-blue-700 text-xs cursor-pointer" 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>
                        </div>
                    </div>
                @endif

                @if ($justificacion->estado === 'revisada' && $justificacion->observacion_admin)
                    <div class="mt-2 p-2 bg-green-50 rounded border border-green-200">
                        <p class="text-xs font-semibold text-green-800 mb-1">
                            <i class="fas fa-comment-dots mr-1"></i>
                            Observación del Admin:
                        </p>
                        <p class="text-xs text-green-700">{{ $justificacion->observacion_admin }}</p>
                    </div>
                @endif
            </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-file-alt text-gray-400 text-2xl mb-2"></i>
        <p class="text-xs text-gray-500">No hay justificaciones registradas</p>
        @if (in_array($tarea->estado, ['pendiente', 'reabierto', 'en_revision']))
            <button type="button"
                class="btn-add-justificacion mt-3 inline-flex items-center px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-xs font-medium rounded-lg transition-colors cursor-pointer"
                data-task-id="{{ $tarea->id_tarea }}">
                <i class="fas fa-plus mr-1.5"></i>
                Agregar primera justificación
            </button>
        @endif
    </div>
@endif

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Manejar clics en botones de agregar justificación
        const addJustificacionButtons = document.querySelectorAll('.btn-add-justificacion');

        addJustificacionButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                const taskId = this.getAttribute('data-task-id');
                console.log('[Justificacion] Botón clickeado, taskId:', taskId);

                if (typeof openJustificacionModal === 'function') {
                    openJustificacionModal(taskId);
                } else {
                    console.error(
                        '[Justificacion] ERROR: openJustificacionModal no está definido');
                    alert('Error: No se puede abrir el modal de justificación');
                }
            });
        });
    });
</script>