@extends('layouts.app')

@section('content')
<!-- Búsqueda rápida -->
<div class="tk-card mb-3">
    <div class="tk-card-hdr"><i class="bi bi-search me-1"></i> Buscar en la Base de Conocimiento</div>
    <div class="tk-card-body">
        <div class="d-flex gap-2">
            <input type="text" class="tk-input" id="kbBusqueda" placeholder="Buscar por título, contenido o tags..." style="max-width:500px" onkeyup="if(event.key==='Enter')buscarKB()" />
            <button class="btn tk-btn tk-btn-primary" onclick="buscarKB()"><i class="bi bi-search me-1"></i>Buscar</button>
            <button class="btn tk-btn tk-btn-secondary" onclick="$('#kbBusqueda').val('');cargarArticulos()"><i class="bi bi-x-lg"></i></button>
        </div>
        <div id="resultadosBusqueda" style="display:none" class="mt-3"></div>
    </div>
</div>

<!-- Lista de artículos + botón crear -->
<div class="tk-card">
    <div class="tk-card-hdr d-flex justify-content-between align-items-center">
        <span><i class="bi bi-book me-1"></i> Artículos</span>
        <button class="btn btn-sm" style="background:rgba(255,255,255,.15);color:#fff;border:none;border-radius:.3rem" onclick="abrirCrearArticulo()">
            <i class="bi bi-plus-lg me-1"></i>Nuevo Artículo
        </button>
    </div>
    <div class="tk-card-body">
        <input type="text" class="tk-grid-search mb-2" id="searchArticulos" placeholder="Filtrar artículos..."
               oninput="tkGridSearch('searchArticulos','gridArticulos',['TITULO','CATEGORIA','TAGS','USUARIO'])" />
        <div id="gridArticulos"></div>
    </div>
</div>

<!-- Modal Crear/Editar Artículo -->
<div class="modal fade tk-modal" id="modalArticulo" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="modalArticuloTitle"><i class="bi bi-book me-1"></i> Nuevo Artículo</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="kbId" />
                <div class="row g-2">
                    <div class="col-12">
                        <div class="tk-label">Título</div>
                        <input type="text" id="kbTitulo" class="tk-input" />
                    </div>
                    <div class="col-md-6">
                        <div class="tk-label">Categoría</div>
                        <select id="kbCategoria" class="tk-input">
                            <option value="0">-- Sin categoría --</option>
                            @foreach($categorias as $c)
                                <option value="{{ $c->value }}">{{ $c->text }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <div class="tk-label">Tags (separados por coma)</div>
                        <input type="text" id="kbTags" class="tk-input" placeholder="mysql, error, factura..." />
                    </div>
                    <div class="col-12">
                        <div class="tk-label">Contenido</div>
                        <textarea id="kbContenido" class="tk-input" style="min-height:200px"></textarea>
                    </div>
                    <div class="col-12">
                        <div class="tk-label">Adjuntar archivo (imagen, PDF, manual — opcional)</div>
                        <input type="file" id="kbAdjunto" class="tk-input" style="font-size:.75rem" accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.xlsx,.txt" />
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn tk-btn tk-btn-primary" onclick="guardarArticulo()"><i class="bi bi-save me-1"></i>Guardar</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('js/KB/funciones_kb.js') }}"></script>
<script>$(function(){ cargarArticulos(); });</script>
@endpush