@extends('layouts.customer')

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

@section('content')
<section class="py-5">
    <div class="container-fluid container-narrow">

        {{-- Breadcrumb --}}
        <nav class="mb-3 small text-muted artikel-breadcrumb">
            <a href="{{ route('customer.solusi') }}" class="text-decoration-none">Solusi</a>
            @if ($kategori)
                /
                <a href="{{ route('customer.solusi.artikel', $kategori->slug) }}" class="text-decoration-none">
                    {{ $kategoriLang->judul ?? $kategori->slug }}
                </a>
            @endif
        </nav>

        {{-- Judul --}}
        <h1 class="artikel-title mb-3">{{ $lang->judul ?? '-' }}</h1>

        {{-- Tanggal --}}
        @if ($artikel->tanggal)
        <p class="text-muted mb-4">
            <i class="fas fa-calendar-alt me-1"></i>
            {{ \Illuminate\Support\Carbon::parse($artikel->tanggal)->translatedFormat('d F Y') }}
        </p>
        @endif

        {{-- Gambar utama --}}
        @if ($artikel->gambar)
        <img src="{{ img_src($artikel->gambar) }}" alt="{{ $lang->judul ?? '' }}" class="img-fluid rounded-4 mb-4 artikel-cover">
        @endif

        {{-- Isi artikel (rich content dari Summernote: gambar, video, link) --}}
        <div class="artikel-body">
            {!! $lang->isi ?? '' !!}
        </div>

        {{-- Artikel terkait --}}
        @if ($terkait->isNotEmpty())
        <hr class="my-5">
        <h5 class="mb-4">Artikel Terkait</h5>
        <div class="row g-4">
            @foreach ($terkait as $t)
            <div class="col-6 col-md-3">
                <a href="{{ route('customer.artikel.show', $t->slug) }}" class="text-decoration-none text-dark">
                    @if ($t->gambar)
                        <img src="{{ img_src($t->gambar) }}" class="konten-card-img rounded-3 mb-2">
                    @endif
                    <p class="fw-semibold small mb-0 artikel-terkait-title">{{ $t->judul ?? '-' }}</p>
                </a>
            </div>
            @endforeach
        </div>
        @endif

        {{-- Kembali --}}
        <div class="mt-5">
            <a href="{{ $kategori ? route('customer.solusi.artikel', $kategori->slug) : route('customer.solusi') }}" class="text-decoration-none fw-semibold">
                <i class="fas fa-arrow-left me-1"></i> Kembali ke halaman solusi {{ $kategoriLang->judul ?? 'Solusi' }}
            </a>
        </div>

    </div>
</section>
@endsection

@push('js')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.artikel-body table').forEach(function (table) {
            if (!table.parentElement.classList.contains('table-responsive')) {
                const wrapper = document.createElement('div');
                wrapper.className = 'table-responsive my-3';
                table.parentNode.insertBefore(wrapper, table);
                wrapper.appendChild(table);
            }
        });
    });
</script>
@endpush