@extends('layouts.app')
@section('title', 'Knowledge Base')
@section('breadcrumbs')
<nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li><li class="breadcrumb-item"><a href="#">AI Platform</a></li><li class="breadcrumb-item active">Knowledge Base</li></ol></nav>
@endsection
@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div><h1 class="h3 mb-1 text-dark fw-semibold">Knowledge Base</h1><p class="text-muted mb-0">Search articles and guides for import/export procedures</p></div>
</div>
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body py-4">
        <div class="row justify-content-center"><div class="col-lg-8">
            <div class="input-group input-group-lg shadow-sm">
                <span class="input-group-text bg-white border-end-0"><i class="bi bi-search text-muted fs-5"></i></span>
                <input type="text" class="form-control border-start-0 ps-0" id="kbSearch" placeholder="Search knowledge base...">
            </div>
            <div class="mt-3 d-flex gap-2 flex-wrap justify-content-center">
                @foreach(['Customs Clearance', 'Documentation', 'Freight', 'GST', 'RBI Compliance', 'DGFT'] as $tag)
                <span class="badge bg-light text-dark border px-3 py-2" style="cursor:pointer;">{{ $tag }}</span>
                @endforeach
            </div>
        </div></div>
    </div>
</div>
<div class="row g-4">
    @forelse($articles ?? [] as $article)
    <div class="col-md-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex align-items-center mb-3"><div class="bg-primary-subtle rounded-3 p-2 me-2"><i class="bi bi-{{ $article->icon ?? 'journal-text' }} text-primary"></i></div><span class="badge bg-light text-muted small">{{ $article->category ?? 'General' }}</span></div>
                <h6 class="fw-semibold mb-2">{{ $article->title ?? 'Untitled' }}</h6>
                <p class="text-muted small mb-3">{{ Str::limit($article->excerpt ?? '', 100) }}</p>
                <div class="d-flex justify-content-between align-items-center"><small class="text-muted">{{ $article->read_time ?? '5 min read' }}</small><a href="#" class="text-primary small fw-medium">Read more <i class="bi bi-arrow-right"></i></a></div>
            </div>
        </div>
    </div>
    @empty
    @foreach(['Customs Clearance Procedures' => 'Step-by-step guide for customs clearance in India', 'Required Export Documents' => 'Complete list of documents for various export categories', 'GST on Import/Export' => 'Understanding IGST, CGST implications on trade', 'Freight Booking Guide' => 'How to book ocean, air, and road freight efficiently', 'DGFT Schemes & Licenses' => 'Overview of EPCG, Advance Authorization, and more', 'HS Code Classification' => 'How to correctly classify goods with HS codes'] as $title => $excerpt)
    <div class="col-md-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex align-items-center mb-3"><div class="bg-primary-subtle rounded-3 p-2 me-2"><i class="bi bi-journal-text text-primary"></i></div><span class="badge bg-light text-muted small">Article</span></div>
                <h6 class="fw-semibold mb-2">{{ $title }}</h6>
                <p class="text-muted small mb-3">{{ $excerpt }}</p>
                <div class="d-flex justify-content-between align-items-center"><small class="text-muted">5 min read</small><a href="#" class="text-primary small fw-medium">Read more <i class="bi bi-arrow-right"></i></a></div>
            </div>
        </div>
    </div>
    @endforeach
    @endforelse
</div>
@endsection