@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 Gejala Konseling Siswa</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 Gejala</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($gejalas as $index => $gejala)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td><b>{{ $gejala->code }}</b></td>
                                    <td>{{ $gejala->name }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="lg:col-span-5 flex justify-center items-center">
                <img src="https://st2.depositphotos.com/37853794/48904/v/450/depositphotos_489048886-stock-illustration-female-speech-therapist-with-preschool.jpg" class="animated-image" alt="Gambar Animasi">
            </div>
        </div>
    </div>

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

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



    <!--   <div class="min-h-screen">
            <div class="grid lg:grid-cols-2">
           
                <div class="px-4 lg:px-[91px] pt-10">
                        <div class="mt-0">
                               <center><h2 class="text-2xl font-bold mb-4 text-primary"><b>Data Gejala Pada Kelinci</b></h2></center>
                           <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover" id="dataTable" width="100%"  cellspacing="0">
                                <thead class="thead-dark">
                                    <tr>
                                        <th>No</th>
                                        <th>Kode</th>
                                        <th>Nama Gejala</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($gejalas as $index => $gejala)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ $gejala->code }}</td>
                                            <td>{{ $gejala->name }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        </div>
                   
                </div>
            
                <div class="hidden sm:block bg-[#F9FBFC]">
                    <div class="flex flex-col justify-center h-full px-24 pt-10 pb-20">
                        <div class="relative">
                            <div class="relative top-0 -left-5 mb-7">
                                <img src="{{ asset('images/bg2.png') }}" class="animated-image" alt="" />
                            </div>
                        </div>
                    </div>
                </div>
               
            </div>
        </div> -->

@endsection