@extends('layouts.app')

@section('content')
<div class="mb-3">
    <a href="{{ route('kb.index') }}" style="color:#14b8a6; text-decoration:none; font-size:.82rem">
        <i class="bi bi-arrow-left me-1"></i>Volver a la Base de Conocimiento
    </a>
</div>

<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> {{ $articulo->TITULO }}</span>
        <span style="font-size:.72rem; opacity:.7">
            <i class="bi bi-eye me-1"></i>{{ $articulo->VISTAS }} vistas
        </span>
    </div>
    <div class="tk-card-body">
        <div class="d-flex gap-3 flex-wrap mb-3" style="font-size:.78rem; color:var(--eq-text-dim)">
            <span><i class="bi bi-folder me-1"></i>{{ $articulo->CATEGORIA }}</span>
            <span><i class="bi bi-person me-1"></i>{{ $articulo->USUARIO }}</span>
            <span><i class="bi bi-calendar me-1"></i>{{ $articulo->FECHA }}</span>
            @if($articulo->ID_TICKET_ORIGEN > 0)
                <span><i class="bi bi-ticket-detailed me-1"></i>Ticket #{{ $articulo->ID_TICKET_ORIGEN }}</span>
            @endif
            @if(!empty($articulo->TAGS))
                @foreach(explode(',', $articulo->TAGS) as $tag)
                    @if(trim($tag) !== '')
                        <span style="background:rgba(20,184,166,.12); color:#14b8a6; padding:1px 8px; border-radius:10px; font-size:.7rem">{{ trim($tag) }}</span>
                    @endif
                @endforeach
            @endif
        </div>
        <hr style="border-color:var(--eq-border)">
        <div style="line-height:1.7; font-size:.88rem">
            {!! $articulo->CONTENIDO !!}
        </div>

        <hr style="border-color:var(--eq-border)">
        <h6 style="font-size:.82rem; color:#0ea5e9"><i class="bi bi-paperclip me-1"></i>Archivos Adjuntos</h6>
        <div id="listaAdjuntosKB"></div>
        <div class="mt-2 d-flex gap-2 align-items-center">
            <input type="file" id="inp_adjunto_kb" class="tk-input" style="max-width:300px;font-size:.75rem" accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.xlsx,.txt" />
            <button type="button" class="btn tk-btn tk-btn-info btn-sm" onclick="subirAdjuntoKB()">
                <i class="bi bi-upload me-1"></i>Subir
            </button>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
var _kbArticuloId = {{ $articulo->ID }};

function subirAdjuntoKB() {
    var inp = document.getElementById('inp_adjunto_kb');
    if (!inp || !inp.files.length) { tkToast('Seleccione un archivo.', 'warning'); return; }
    var fd = new FormData();
    fd.append('idTicket', _kbArticuloId);
    fd.append('contexto', 'kb');
    fd.append('archivo', inp.files[0]);
    $.ajax({
        url: '/Tickets/SubirAdjunto', type: 'POST', data: fd,
        processData: false, contentType: false,
        success: function (r) {
            var res = typeof r === 'string' ? JSON.parse(r) : r;
            if (res.CODIGO === 'TRUE') { tkToast('Archivo adjuntado.', 'success'); cargarAdjuntosKB(); inp.value = ''; }
            else { tkToast(res.MENSAJE || 'Error', 'error'); }
        }
    });
}

function cargarAdjuntosKB() {
    $.post('/Tickets/GetAdjuntos', { idTicket: _kbArticuloId }, function (data) {
        var kbData = data.filter(function(a) { return a.CONTEXTO === 'kb'; });
        var html = '';
        if (kbData.length === 0) {
            html = '<p style="color:var(--eq-text-dim);font-size:.78rem">Sin archivos adjuntos.</p>';
        } else {
            $.each(kbData, function (i, a) {
                var isImg = /\.(jpg|jpeg|png|gif)$/i.test(a.NOMBRE_ARCHIVO);
                var isPdf = /\.pdf$/i.test(a.NOMBRE_ARCHIVO);
                var icon = isImg ? 'bi-image' : isPdf ? 'bi-file-earmark-pdf' : 'bi-file-earmark';
                var iconColor = isImg ? '#3b82f6' : isPdf ? '#ef4444' : '#6b7280';
                var url = '/Tickets/DescargarAdjunto/' + a.ID;

                html += '<div class="tk-seg-item d-flex align-items-center gap-2 mb-1">';

                if (isImg) {
                    html += '<img src="' + url + '" onclick="tkPreviewImg(\'' + url + '\',\'' + a.NOMBRE_ARCHIVO.replace(/'/g,"\\'") + '\')" style="max-height:50px;max-width:70px;border-radius:4px;border:1px solid var(--eq-border);cursor:pointer;object-fit:cover" title="Click para ver" />';
                } else {
                    html += '<i class="bi ' + icon + '" style="color:' + iconColor + ';font-size:1.1rem"></i>';
                }

                html += '<div style="flex:1">';
                if (isImg) {
                    html += '<a href="javascript:void(0)" onclick="tkPreviewImg(\'' + url + '\',\'' + a.NOMBRE_ARCHIVO.replace(/'/g,"\\'") + '\')" style="color:#14b8a6;text-decoration:none;font-weight:600;font-size:.82rem">' + a.NOMBRE_ARCHIVO + '</a>';
                } else {
                    html += '<a href="' + url + '" target="_blank" style="color:#14b8a6;text-decoration:none;font-weight:600;font-size:.82rem">' + a.NOMBRE_ARCHIVO + '</a>';
                }
                html += ' <small style="color:var(--eq-text-dim)">(' + a.TAMANO_KB + ' KB · ' + a.FECHA + ')</small>';
                html += '</div>';

                if (isPdf) {
                    html += '<a href="' + url + '" target="_blank" class="btn tk-btn tk-btn-danger btn-sm" style="font-size:.7rem"><i class="bi bi-file-pdf me-1"></i>PDF</a>';
                }
                html += '<a href="' + url + '" download class="btn btn-sm" style="color:var(--eq-text-dim)" title="Descargar"><i class="bi bi-download"></i></a>';
                html += '<button class="btn btn-sm" style="color:#ef4444" onclick="eliminarAdjuntoKB(' + a.ID + ')"><i class="bi bi-trash"></i></button>';
                html += '</div>';
            });
        }
        $('#listaAdjuntosKB').html(html);
    });
}

function eliminarAdjuntoKB(id) {
    tkConfirm('¿Eliminar este archivo?', function () {
        $.post('/Tickets/EliminarAdjunto', { id: id }, function (r) {
            var res = typeof r === 'string' ? JSON.parse(r) : r;
            if (res.CODIGO === 'TRUE') { tkToast('Archivo eliminado.', 'success'); cargarAdjuntosKB(); }
            else { tkToast(res.MENSAJE || 'Error', 'error'); }
        });
    });
}

$(function(){ cargarAdjuntosKB(); });
</script>
@endpush