@extends('layouts.app')
@section('style')
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.2/css/dataTables.bootstrap5.css">
@endsection
@section('content')
<section class="min-vh-100 section-bg">
    <div class="container" data-aos="fade-up">
        <div class="section-title">
            <h3>Daftar <span>Orang Tua Asuh</span></h3>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card border-primary">
                    <div class="card-body">
                        <span>Berikut adalah nama Pahlawan Pancasila yang telah membantu membumikan pancasila, dengan mengangkat anak asuh dibidang Pendidikan guna mewujudkan Indonesia Emas 2045.</span>

                        <div class="table-responsive">
                            <table id="myTable" class="mt-2 table table-hover">
                                <thead>
                                    <th>NO</th>
                                    <th>Orang Tua Asuh</th>
                                    <th>Jumlah Anak Asuh</th>
                                </thead>
                                <tbody>
                                    @foreach($daftar_pengasuh as $key => $value)
                                    <tr>
                                        <td>{{$key+1}}</td>
                                        <td>{{$value->pengasuh_nama}}</td>
                                        <td>{{$value->pengasuh_jumlah_anak_asuh}}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>
@endsection
@section('javascript')
<script src="https://cdn.datatables.net/2.0.2/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/2.0.2/js/dataTables.bootstrap5.js"></script>
<script type="text/javascript">
    var my_data = {"status":"success","data":[{"club_code":"3P","club_id":"1020001","club_name":"STAGE ROBERT DAL FARRA"},{"club_code":"6D","club_id":"1020002","club_name":"BRIDGE VOYAGES SUD OUEST"},{"club_code":"1-","club_id":"1020003","club_name":"STAGE FRANCK BUSSELIER"}]};

    $('#myTable').DataTable({
        "autoWidth": true,
        "processing": true,
        "responsive": true,
        "deferRender": true,
        "lengthChange": false,
        "searching": false,
        "language": {
            "info": "Total _TOTAL_ Data",
            "infoFiltered": "",
            "infoEmpty": '0 Data',
            "zeroRecords": "Tidak Ada Data",
            "emptyTable": "Tidak Ada Data",
            "lengthMenu":"Tampilan _MENU_ Data",
            "search": "Pencarian:",
        },
        "columnDefs":[
            { "width": "10%", "targets": 0 },
            { "width": "20%", "targets": 2 },
            ],
    });
</script>
@endsection