@extends('layout.guest')
@section('content')
    <!-- Content -->
    <div class="min-h-screen" style="background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://fahum.umsu.ac.id/berita/wp-content/uploads/2024/08/tata-cara-membuat-surat-izin-tidak-masuk-sekolah.jpg'); background-size: cover; background-position: center;">
        <div class="max-w-7xl grid lg:grid-cols-12 mx-auto pt-14 lg:pt-20 pb-20 lg:pb-28 lg:divide-x px-4 lg:px-16">
            <div class="lg:col-span-7 lg:pl-8 lg:pr-20">
                <h2 class="text-2xl font-bold mb-4 text-white"><b>Data Masalah Konseling</b></h2><br>
                <div class="table-responsive">
                    <table class="table table-striped table-bordered table-hover" id="dataTable" width="100%" style="align-items: stretch;" cellspacing="0">
                        <thead class="thead-dark">
                            <tr>
                                <th>No</th>
                                <th>Kode</th>
                                <th>Nama Masalah</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($penyakit as $index => $penyakit)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td><b>{{ $penyakit->code }}</b></td>
                                    <td>{{ $penyakit->name }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="lg:col-span-5 flex justify-center items-center">
                <img src="https://img.freepik.com/free-vector/hand-drawn-speech-therapy-illustration_23-2149210298.jpg" class="animated-image" alt="Gambar Animasi">
            </div>
        </div>
    </div>

    <style>
        .animated-image {
            max-width: 90%;
            max-height: 90%;
            animation: float 3s infinite;
            border-radius: 10%;
            margin-left: 60px;
        }

        @keyframes float {
            0% {
                transform: translatey(0px);
            }
            50% {
                transform: translatey(-10px);
            }
            100% {
                transform: translatey(0px);
            }
        }
    </style>

@endsection