@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-9">
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div>
                            <span class="badge {{ $knowledgeBase->category_badge }} mb-2">{{ $knowledgeBase->category_name }}</span>
                            @if($knowledgeBase->is_featured)
                                <span class="badge bg-warning text-dark"><i class="bi bi-star-fill"></i> Destacado</span>
                            @endif
                            @if($knowledgeBase->is_public)
                                <span class="badge bg-success"><i class="bi bi-eye"></i> Público</span>
                            @endif
                        </div>
                        @if(auth()->id() == $knowledgeBase->created_by || auth()->user()->hasRole(['administrador', 'supervisor']))
                        <div class="dropdown">
                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                <i class="bi bi-three-dots-vertical"></i>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="{{ route('knowledge-base.edit', $knowledgeBase) }}"><i class="bi bi-pencil"></i> Editar</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li>
                                    <form method="POST" action="{{ route('knowledge-base.destroy', $knowledgeBase) }}" onsubmit="return confirm('¿Eliminar este artículo?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="dropdown-item text-danger"><i class="bi bi-trash"></i> Eliminar</button>
                                    </form>
                                </li>
                            </ul>
                        </div>
                        @endif
                    </div>

                    <h1 class="mb-3">{{ $knowledgeBase->title }}</h1>

                    <div class="d-flex gap-4 text-muted small mb-4">
                        <span><i class="bi bi-person"></i> {{ $knowledgeBase->creator->name }}</span>
                        <span><i class="bi bi-clock"></i> {{ $knowledgeBase->created_at->format('d/m/Y H:i') }}</span>
                        <span><i class="bi bi-eye"></i> {{ $knowledgeBase->views }} vistas</span>
                        @if($knowledgeBase->updated_at != $knowledgeBase->created_at)
                            <span><i class="bi bi-pencil"></i> Actualizado {{ $knowledgeBase->updated_at->diffForHumans() }}</span>
                        @endif
                    </div>

                    @if($knowledgeBase->project)
                        <div class="alert alert-info">
                            <i class="bi bi-folder"></i> Este artículo pertenece al proyecto: <strong>{{ $knowledgeBase->project->name }}</strong>
                        </div>
                    @endif

                    <div class="article-content">
                        {!! nl2br(e($knowledgeBase->content)) !!}
                    </div>

                    @if($knowledgeBase->tags && count($knowledgeBase->tags) > 0)
                        <div class="mt-4">
                            <strong>Tags:</strong>
                            @foreach($knowledgeBase->tags as $tag)
                                <span class="badge bg-secondary">{{ $tag }}</span>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-3">
            @if($relatedArticles->count() > 0)
            <div class="card shadow-sm">
                <div class="card-header bg-white">
                    <h6 class="mb-0"><i class="bi bi-lightbulb"></i> Artículos Relacionados</h6>
                </div>
                <div class="list-group list-group-flush">
                    @foreach($relatedArticles as $related)
                        <a href="{{ route('knowledge-base.show', $related) }}" class="list-group-item list-group-item-action">
                            <div class="d-flex justify-content-between align-items-start">
                                <div class="small">{{ $related->title }}</div>
                                <span class="badge {{ $related->category_badge }} badge-sm">{{ $related->category_name }}</span>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

<style>
.article-content {
    line-height: 1.8;
    font-size: 1.05rem;
}
.badge-sm {
    font-size: 0.7rem;
}
</style>
@endsection