@php
    use App\Models\Penyakit;
    $penyakits = Penyakit::all();
@endphp

<!-- Penyakit Section Start -->
<div class="container-fluid bg-light py-5">
    <div class="container py-5">
        <div class="text-center mx-auto pb-4 wow fadeInUp" data-wow-delay="0.2s" style="max-width: 800px;">
            <h4 class="text-primary">Penyakit Kucing</h4>
            <h1 class="display-5 fw-bold">Kenali & Cegah Penyakit Kucing Sejak Dini</h1>
            <p class="text-muted">Berikut adalah beberapa penyakit virus yang dapat menyerang kucing kesayangan Anda. Klik untuk melihat informasi lebih lanjut.</p>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="accordion shadow-lg rounded" id="accordionPenyakit">
                    @foreach ($penyakits as $key => $penyakit)
                        <div class="accordion-item border-0">
                            <h2 class="accordion-header" id="heading{{ $penyakit->id }}">
                                <button class="accordion-button fw-semibold px-4 py-3 {{ $key == 0 ? '' : 'collapsed' }}" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#collapse{{ $penyakit->id }}"
                                    aria-expanded="{{ $key == 0 ? 'true' : 'false' }}"
                                    aria-controls="collapse{{ $penyakit->id }}">
                                    <i class="bi bi-virus2 me-2 text-danger"></i> {{ $penyakit->penyakit }}
                                </button>
                            </h2>
                            <div id="collapse{{ $penyakit->id }}"
                                class="accordion-collapse collapse {{ $key == 0 ? 'show' : '' }}"
                                aria-labelledby="heading{{ $penyakit->id }}" data-bs-parent="#accordionPenyakit">
                                <div class="accordion-body p-4 text-justify">
                                    <p class="mb-0 text-muted">{{ $penyakit->definisi }}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Penyakit Section End -->