@extends('layouts.customer')

@section('title', $title)
@section('meta_description', $metaDescription)

@section('content')
<section class="py-5">
    <div class="container-fluid container-wide">
        <h1 class="solusi-page-title mb-3">
            {{ $headerLang->judul ?? 'Artikel & Edukasi' }} <span class="solusi-page-title-kategori">- {{ $kategoriNama }}</span>
        </h1>
        <div class="solusi-page-desc text-secondary mb-4">{!! $headerLang->deskripsi ?? '' !!}</div>

        <div class="d-flex flex-wrap gap-2 mb-4" id="tabKontenSolusi">
            <button class="btn btn-tab-solusi active" data-tipe="artikel">Artikel</button>
            <button class="btn btn-tab-solusi" data-tipe="produk_knowledge">Produk Knowledge</button>
            <button class="btn btn-tab-solusi" data-tipe="cara_menggunakan">Cara Menggunakan</button>
            <button class="btn btn-tab-solusi" data-tipe="case_study">Case Study</button>
        </div>

        <div id="kontenGridArea">
            {{-- diisi via AJAX --}}
        </div>
    </div>
</section>
@endsection

@push('js')
<script>
    const kategoriSlug = '{{ $kategoriSlug }}';

    function loadKontenGrid(tipe, page = 1) {
        const $area = document.getElementById('kontenGridArea');
        $area.innerHTML = '<p class="text-center text-muted py-5"><i class="fa fa-spinner fa-spin me-2"></i>Memuat...</p>';

        const url = `${window.APP_BASE_URL}/solusi/artikel/${kategoriSlug}/konten?tipe=${tipe}&page=${page}`;

        fetch(url)
            .then(res => res.text())
            .then(html => { $area.innerHTML = html; });
    }

    document.querySelectorAll('.btn-tab-solusi').forEach(function (btn) {
        btn.addEventListener('click', function () {
            document.querySelectorAll('.btn-tab-solusi').forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            loadKontenGrid(this.dataset.tipe);
        });
    });

    document.addEventListener('click', function (e) {
        const link = e.target.closest('.konten-pagination a');
        if (link) {
            e.preventDefault();
            const url = new URL(link.href);
            const page = url.searchParams.get('page') || 1;
            const activeTipe = document.querySelector('.btn-tab-solusi.active').dataset.tipe;
            loadKontenGrid(activeTipe, page);
        }
    });

    document.addEventListener('DOMContentLoaded', function () {
        loadKontenGrid('artikel');
    });
</script>
@endpush