@extends('layouts.app')
@section('content')
<section id="section4" class="container mx-auto p-12 md:py-12">
    <div class="flex justify-between mb-15">
        <h4 class="text-lg md:text-2xl font-extrabold text-black">Sekolah Adiwiyata</h4>
    </div>
    <div class="w-full">
        <table id="example" class="table-auto w-full">
            <thead>
                <tr class="border text-center border-[#333]">
                    <th class="bg-success text-white text-center border border-[#eaeaea]">No</th>
                    <th class="bg-success text-white text-center border border-[#eaeaea]">Sekolah</th>
                    <th class="bg-success text-white text-center border border-[#eaeaea]">Kota</th>
                    <th class="bg-success text-white text-center border border-[#eaeaea]">Tahun</th>
                    <th class="bg-success text-white text-center border border-[#eaeaea]">Skor</th>
                </tr>
            </thead>
            <tbody>
            <?php
            $data = [
                ['name' => 'SMPN 253','kota' => 'Jakarta Selatan','skor' => '89,86','tahun' => '2024'],
                ['name' => 'SDI Al Irsyad Islamiyah','kota' => 'Jakarta Pusat','skor' => '89,85','tahun' => '2024'],
                ['name' => 'SDN Kemanggisan 17','kota' => 'Jakarta Barat','skor' => '89,45','tahun' => ''],
                ['name' => 'SDN Sukabumi Utara 07','kota' => 'Jakarta Barat','skor' => '89,54','tahun' => ''],
                ['name' => 'SDS Strada Santo Ignatius','kota' => 'Jakarta Utara','skor' => '89,24','tahun' => ''],
                ['name' => 'SDN Jatinegara 06 Pagi','kota' => 'Jakarta Timur','skor' => '89,33','tahun' => ''],
                ['name' => 'SDN Pekayon 03 Pagi','kota' => 'Jakarta Timur','skor' => '89,43','tahun' => ''],
                ['name' => 'SDN Lubang Buaya 06 Pagi','kota' => 'Jakarta Timur','skor' => '89,71','tahun' => ''],
            ];
            ?>
            @foreach($data as $k => $val)
            <tr class="border">
                <td class="border border-[#eaeaea] text-center">{{ $k+1 }}</td>                    
                <td class="border border-[#eaeaea] text-center">{{ $val['name'] }}</td>
                <td class="border border-[#eaeaea] text-center">{{ $val['kota'] }}</td>
                <td class="border border-[#eaeaea] text-center">{{ $val['tahun'] }}</td>
                <td class="border border-[#eaeaea] text-center">{{ $val['skor'] }}</td>
            </tr>
            @endforeach
            </tbody>
            
        </table>
    </div>
</section>
@endsection
@section('js')
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.3.2/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/2.3.2/js/dataTables.tailwindcss.js"></script>
<script>
	new DataTable('#example');
</script>
@endsection