@extends('root')
@section('title', 'Detail Dokumen AI')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Detail Dokumen AI',
        'links' => [
            ['url' => route('client.balasan-otomatis.index'), 'label' => 'Auto Reply'],
            ['url' => route('client.ai-knowledge.index'), 'label' => 'Knowledge Base'],
        ],
        'current' => 'Info Dokumen'
    ])

    <div class="row row-cards justify-content-center">
                <div class="col-lg-8">
                    <div class="card shadow-sm border-0 mb-3">
                        <div class="card-header bg-white py-3 border-bottom-0 d-flex justify-content-between align-items-center">
                            <div>
                                <h3 class="card-title fw-bold text-dark"><i class="ti ti-file-info me-2 text-primary"></i> {{ $aiKnowledge->title }}</h3>
                                <p class="text-muted small mb-0 mt-1">
                                    <span class="badge bg-primary-lt me-2">{{ strtoupper($aiKnowledge->knowledge_type) }}</span>
                                    Dibuat: {{ $aiKnowledge->created_at->format('d M Y H:i') }}
                                </p>
                            </div>
                            <div class="btn-group">
                                <a href="{{ route('client.ai-knowledge.edit', $aiKnowledge) }}" class="btn btn-sm btn-white text-primary border shadow-sm rounded-start">
                                    <i class="ti ti-edit me-1"></i> Edit
                                </a>
                                <a href="{{ route('client.ai-knowledge.index') }}" class="btn btn-sm btn-white border shadow-sm rounded-end">
                                    <i class="ti ti-arrow-left me-1"></i> Kembali
                                </a>
                            </div>
                        </div>
                    </div>

                    <h4 class="fw-bold mt-4 mb-3 text-dark">Data Pecahan (Chunks)</h4>
                    <p class="small text-muted mb-4">AI mencari potongan teks yang paling relevan dengan pertanyaan user dari daftar berikut ini.</p>

                    @forelse($aiKnowledge->documents as $index => $doc)
                        <div class="card shadow-sm border mb-3">
                            <div class="card-header bg-light py-2">
                                <h4 class="card-title text-muted fw-semibold small mb-0"><i class="ti ti-puzzle me-1"></i> Chunk #{{ $index + 1 }}</h4>
                            </div>
                            <div class="card-body py-3">
                                <p class="mb-0 text-dark" style="white-space: pre-wrap; font-family: 'Segoe UI', system-ui, sans-serif; line-height: 1.6;">{{ $doc->content_chunk }}</p>
                            </div>
                            <div class="card-footer py-2 bg-white text-end">
                                <span class="badge bg-secondary-lt text-secondary border border-secondary border-opacity-25" style="font-size: 0.70rem;">
                                    Size: {{ strlen($doc->content_chunk) }} chars
                                </span>
                            </div>
                        </div>
                    @empty
                        <div class="alert alert-warning">
                            <i class="ti ti-alert-circle me-2"></i> Dokumen ini kosong (tidak ada potongan teks). Edit dokumen dan tambahkan teks agar AI dapat menggunakannya.
                        </div>
                    @endforelse

                </div>
            </div>
    </div>
</div>
@endsection