@extends('user.template')

@section('content')

<!-- Page Title -->
<div class="page-title">
    <div class="container d-lg-flex justify-content-between align-items-center">
        <h1 class="mb-2 mb-lg-0">{{ $kategori->kepanjangan_kategori }}</h1>
        <nav class="breadcrumbs">
            <ol>
                <li><a href="{{ route('user.index') }}">Beranda</a></li>
                <li><a href="{{ route('user.about') }}">Tentang</a></li>
                <li class="current">{{ $kategori->nama_kategori }}</li>
            </ol>
        </nav>
    </div>
</div>
<!-- End Page Title -->

<!-- Service Details Section -->
<section id="service-details" class="service-details section">
    <div class="container">
        <div class="row gy-4">

            <!-- Sidebar Kategori -->
            <div class="col-lg-4" data-aos="fade-up" data-aos-delay="100">
                <div class="services-list">
                    @foreach ($kategoriTps as $kat)
                        <a href="{{ route('user.about.kategori', ['id' => $kat->id_kategori_tps]) }}"
                           class="{{ $kat->id_kategori_tps == $kategori->id_kategori_tps ? 'active' : '' }}">
                            {{ $kat->nama_kategori }}
                        </a>
                    @endforeach
                </div>

                {{-- Deskripsi singkat satu kalimat --}}
                <h4>{{ $kategori->kepanjangan_kategori }}</h4>
                <p>
                    {{ Str::before($kategori->deskripsi, '.') }}.
                </p>
            </div>

            <!-- Konten Kategori -->
            <div class="col-lg-8" data-aos="fade-up" data-aos-delay="200">
                {{-- Judul --}}
                <h3>{{ $kategori->kepanjangan_kategori }}</h3>

                {{-- Foto --}}
                @if($kategori->foto_kategori)
                    <img src="{{ asset('storage/' . $kategori->foto_kategori) }}"
                         alt="{{ $kategori->nama_kategori }}" class="mb-3 img-fluid services-img">
                @else
                    <img src="{{ asset('assets/user/img/services.jpg') }}"
                         alt="{{ $kategori->nama_kategori }}" class="mb-3 img-fluid services-img">
                @endif

                {{-- Deskripsi lengkap --}}
                <p>{{ $kategori->deskripsi }}</p>

                {{-- Contoh list poin --}}
                <ul>
                    <li><i class="bi bi-check-circle"></i> <span>Informasi lengkap tentang {{ $kategori->nama_kategori }}.</span></li>
                    <li><i class="bi bi-check-circle"></i> <span>Menyediakan data dan layanan terkait kategori ini.</span></li>
                    <li><i class="bi bi-check-circle"></i> <span>Fasilitas atau prosedur yang berlaku.</span></li>
                </ul>
            </div>

        </div>
    </div>
</section>
<!-- /Service Details Section -->

@endsection