TicketAssistent/resources/views/livewire/admin/article-manager.blade.php

<div class="space-y-6">
    <div class="bg-white rounded-xl p-4 shadow">
        <h2 class="font-semibold mb-3">Nieuw Artikel</h2>
        @if (session('success'))
            <div class="mb-3 text-green-700 bg-green-100 p-2 rounded">{{ session('success') }}</div>
        @endif
        <form wire:submit="save" class="space-y-3">
            <input wire:model="title" type="text" class="w-full border rounded p-2" placeholder="Titel">
            @error('title')
                <p class="text-red-600 text-sm">{{ $message }}</p>
            @enderror
            <textarea wire:model="content" class="w-full border rounded p-2 min-h-40" placeholder="Content"></textarea>
            @error('content')
                <p class="text-red-600 text-sm">{{ $message }}</p>
            @enderror
            <textarea wire:model="note" class="w-full border rounded p-2 min-h-24"
                placeholder="Interne notitie voor de LLM (niet gebruikt voor embeddings)"></textarea>
            @error('note')
                <p class="text-red-600 text-sm">{{ $message }}</p>
            @enderror
            <label class="flex items-start gap-2 text-sm">
                <input wire:model="allowedActions" type="checkbox" value="domain_inf"
                    class="mt-1 rounded border-slate-300">
                <span>
                    <span class="font-medium">domain_inf toestaan</span>
                    <span class="block text-slate-500">Alleen uitvoeren wanneer de LLM deze action aanvraagt en sld/tld
                        aanwezig zijn.</span>
                </span>
            </label>
            @error('allowedActions.*')
                <p class="text-red-600 text-sm">{{ $message }}</p>
            @enderror
            <button class="bg-slate-900 text-white px-4 py-2 rounded" type="submit">Opslaan</button>
        </form>
    </div>

    <div class="bg-white rounded-xl p-4 shadow">
        <h2 class="font-semibold mb-3">Artikelen</h2>
        <div class="space-y-3">
            @foreach ($articles as $article)
                <div class="border rounded p-3">
                    <div class="flex items-start justify-between gap-3">
                        <div>
                            <div class="font-medium">#{{ $article->id }} {{ $article->title }}</div>
                            @if (($article->status ?? 'published') === 'draft')
                                <span
                                    class="inline-block mt-1 text-xs px-2 py-0.5 rounded bg-amber-100 text-amber-800">Concept
                                    (AI)</span>
                            @endif
                        </div>
                        <div class="flex items-center gap-3">
                            @if (($article->status ?? 'published') === 'draft')
                                <button type="button" wire:click="approveDraft({{ $article->id }})"
                                    class="text-sm text-green-700 hover:underline">
                                    Valideren & publiceren
                                </button>
                            @endif
                            <button type="button" wire:click="deleteArticle({{ $article->id }})"
                                wire:confirm="Weet je zeker dat je dit artikel wilt verwijderen?"
                                class="text-sm text-red-600 hover:underline">
                                Verwijderen
                            </button>
                        </div>
                    </div>
                    @if ($article->note)
                        <div class="mt-2 text-xs rounded bg-slate-50 p-2 text-slate-600">
                            <span class="font-semibold">LLM note:</span>
                            {{ \Illuminate\Support\Str::limit($article->note, 180) }}
                        </div>
                    @endif
                    @if (($article->allowed_actions ?? []) !== [])
                        <div class="mt-2 flex flex-wrap gap-1">
                            @foreach ($article->allowed_actions as $action)
                                <span
                                    class="text-xs px-2 py-0.5 rounded bg-blue-100 text-blue-800">{{ $action }}</span>
                            @endforeach
                        </div>
                    @endif
                    <div class="text-sm text-slate-600">{{ \Illuminate\Support\Str::limit($article->content, 140) }}
                    </div>
                    <div class="mt-3 rounded bg-slate-50 p-3 space-y-2">
                        <label class="block text-xs font-semibold text-slate-500">LLM note</label>
                        <textarea wire:model="articleNotes.{{ $article->id }}" class="w-full border rounded p-2 min-h-20 text-sm"
                            placeholder="Interne aanwijzingen voor dit artikel"></textarea>
                        @error("articleNotes.{$article->id}")
                            <p class="text-red-600 text-sm">{{ $message }}</p>
                        @enderror
                        <label class="flex items-start gap-2 text-sm">
                            <input wire:model="articleAllowedActions.{{ $article->id }}" type="checkbox"
                                value="domain_inf" class="mt-1 rounded border-slate-300">
                            <span>domain_inf toestaan</span>
                        </label>
                        @error("articleAllowedActions.{$article->id}.*")
                            <p class="text-red-600 text-sm">{{ $message }}</p>
                        @enderror
                        <div>
                            <label class="block text-xs font-semibold text-slate-500 mb-1">Gekoppelde
                                snelantwoorden</label>
                            @if ($quickReplyOptions->isEmpty())
                                <p class="text-xs text-slate-500">Nog geen actieve snelantwoorden beschikbaar.</p>
                            @else
                                <div class="grid gap-1 sm:grid-cols-2">
                                    @foreach ($quickReplyOptions as $quickReply)
                                        <label class="flex items-center gap-2 text-sm">
                                            <input wire:model="articleQuickReplies.{{ $article->id }}" type="checkbox"
                                                value="{{ $quickReply->id }}" class="rounded border-slate-300">
                                            <span>{{ $quickReply->title }}</span>
                                        </label>
                                    @endforeach
                                </div>
                            @endif
                            @error("articleQuickReplies.{$article->id}.*")
                                <p class="text-red-600 text-sm">{{ $message }}</p>
                            @enderror
                        </div>
                        <button type="button" wire:click="saveMetadata({{ $article->id }})"
                            class="text-sm px-3 py-1 rounded bg-slate-900 text-white">
                            Metadata opslaan
                        </button>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="mt-4">{{ $articles->links() }}</div>
    </div>
</div>