<?= $this->extend('Admin/Layout/app_layout'); ?>
<?= $this->section('content'); ?>

<div class="layout-px-spacing">

    <div class="middle-content container-xxl p-0">

        <div class="row layout-top-spacing">

            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 layout-spacing">
                <div class="widget widget-t-sales-widget widget-m-sales">
                    <div class="media">
                        <div class="icon ml-2">
                            <i data-feather="users"></i>
                        </div>
                        <div class="media-body">
                            <p class="widget-text">Siswa</p>
                            <p class="widget-numeric-value"><?= $count_siswa ?></p>
                        </div>
                    </div>
                    <p class="widget-total-stats">View all <i data-feather="chevrons-right"></i></p>

                </div>
            </div>

            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 layout-spacing">
                <div class="widget widget-t-sales-widget widget-m-orders">
                    <div class="media">
                        <div class="icon ml-2">
                            <i data-feather="users"></i>
                        </div>
                        <div class="media-body">
                            <p class="widget-text">Guru</p>
                            <p class="widget-numeric-value"><?= $count_guru ?></p>
                        </div>
                    </div>
                    <p class="widget-total-stats">View all <i data-feather="chevrons-right"></i></p>


                </div>
            </div>

            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 layout-spacing">
                <div class="widget widget-t-sales-widget widget-m-customers">
                    <div class="media">
                        <div class="icon ml-2">
                            <i data-feather="book"></i>
                        </div>
                        <div class="media-body">
                            <p class="widget-text">RomBel</p>
                            <p class="widget-numeric-value"><?= $count_rombel ?></p>
                        </div>
                    </div>
                    <p class="widget-total-stats">View all <i data-feather="chevrons-right"></i></p>

                </div>
            </div>

            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 layout-spacing">
                <div class="widget widget-t-sales-widget widget-m-income">
                    <div class="media">
                        <div class="icon ml-2">
                            <i data-feather="book"></i>
                        </div>
                        <div class="media-body">
                            <p class="widget-text">Penilaian</p>
                            <p class="widget-numeric-value"><?= $count_penilaian ?></p>
                        </div>
                    </div>
                    <p class="widget-total-stats">View all <i data-feather="chevrons-right"></i></p>

                </div>
            </div>

            <div class="col-xl-8 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
                <div class="widget widget-chart-one">
                    <div class="widget-heading">
                        <h5 class="">Progress Penilaian</h5>
                        <div class="task-action">
                            <a id="refreshrombel" href="javascript:void(0)"><i data-feather="refresh-cw"></i></a>
                        </div>
                    </div>

                    <div class="widget-content">
                        <div class="table-responsive">
                            <table id="table-rombel" class="table">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Rombel</th>
                                        <th>Walikelas</th>
                                        <th>Siswa</th>
                                        <th>Progress Nilai</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>



            <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
                <div class="widget widget-table-one">
                    <div class="widget-heading">
                        <h5 class="">Riwayat</h5>
                        <div class="task-action">
                            <a id="refreshlog" href="javascript:void(0)"><i data-feather="refresh-cw"></i></a>
                        </div>
                    </div>

                    <div id="logList" class="widget-content">
                        memuat ...
                    </div>
                </div>
            </div>
            <div id="chartMixed" class="col-xl-12 layout-spacing">
                <div class="widget">
                    <div class="widget-header">
                        <div class="row">
                            <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                <h4>Rekap Absensi Siswa</h4>
                            </div>
                        </div>
                    </div>
                    <div class="widget-content">
                        <div id="mixed-chart" class=""></div>

                    </div>
                </div>
            </div>
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
                <div class="widget widget-chart-one">
                    <div class="widget-heading">
                        <h5 class="">Daftar Peringkat</h5>
                        <div class="task-action">
                            <a id="refreshperingkat" href="javascript:void(0)"><i data-feather="refresh-cw"></i></a>
                        </div>
                    </div>

                    <div class="widget-content">
                        <div class="table-responsive">
                            <table id="table-peringkat" class="table">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Rombel</th>
                                        <th>Daftar Peringkat</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

</div>

<?= $this->endSection(); ?>
<?= $this->section('pagejs'); ?>
<script type="text/javascript">
    $(document).ready(function() {
        // Memuat data peringkat saat halaman dimuat
        loadPeringkat();

        // Fungsi untuk memuat data peringkat
        function loadPeringkat() {
            $.ajax({
                url: "<?= base_url() ?>home/getperingkat",
                method: "GET",
                success: function(response) {
                    // Menghapus isi tabel sebelum mengisi dengan data baru
                    $('#table-peringkat tbody').empty();

                    // Iterasi setiap data peringkat
                    $.each(response, function(index, peringkat) {
                        var row = '<tr>' +
                            '<td>' + (index + 1) + '</td>' +
                            '<td>' + peringkat.nama_rombel + '</td>' +
                            '<td>';

                        // Menambahkan badge untuk setiap siswa dalam peringkat
                        $.each(peringkat.peringkat, function(i, siswa) {
                            var no = i + 1;
                            row += '<span class="badge badge-primary mr-2">' + no + ". " + siswa.nama_siswa + ' (' + siswa.total_nilai + ')</span> ';
                        });

                        row += '</td></tr>';

                        // Menambahkan baris ke dalam tabel
                        $('#table-peringkat tbody').append(row);
                    });
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        }

        // Memuat data peringkat ketika tombol refresh diklik
        $('#refreshperingkat').click(function() {
            loadPeringkat();
        });
        $('#refreshlog').click(function() {
            getlog();
        });
        $('#refreshrombel').click(function() {
            getrombel();
        });
        getrombel();

        function getrombel() {
            $.ajax({
                url: '<?= base_url('home/getrombel') ?>', // Ubah ini sesuai dengan URL endpoint Anda
                type: 'GET',
                dataType: "json",
                success: function(data) {
                    var tbody = $('#table-rombel tbody');
                    tbody.empty();
                    $.each(data.data, function(index, item) {
                        // Hitung persentase progres
                        var jumlahnilai = item.jumlah_anggota * item.jumlah_pembelajaran;
                        var progressValue = item.jumlah_penilaian != 0 ? Math.round((item.jumlah_penilaian / jumlahnilai) * 100) : 0;
                        var no = index + 1;
                        var row = '<tr>' +
                            '<td>' + no + '</td>' +
                            '<td>' + item.nama_rombel + '</td>' +
                            '<td>' + item.nama_walas + '</td>' +
                            '<td>' + item.jumlah_anggota + '</td>' +

                            //var progressBarStyle = 'background-color: #007bff; width: ' + progressValue + '%;'; // Gaya untuk progres bar
                            '<td><span>' + item.jumlah_penilaian + ' dari ' + jumlahnilai + ' Nilai</span><div class="progress br-30" style="height:15px"><div class="progress-bar bg-primary" role="progressbar" style="width: ' + progressValue + '%" aria-valuemin="0" aria-valuemax="100">' + progressValue + '%</div></div></td>';
                        '</tr>';

                        tbody.append(row);
                    });
                },
                error: function(xhr, status, error) {
                    console.error(status, error);
                    // Tindakan yang sesuai jika ada kesalahan dalam pengambilan data
                }
            });
        }
        getlog();

        function getInitials(name) {
            // Pisahkan nama menjadi array kata-kata
            var words = name.split(' ');

            var initials = ''; // Inisialisasi variabel untuk menampung inisial

            // Loop melalui setiap kata dalam nama
            for (var i = 0; i < words.length && initials.length < 2; i++) {
                // Ambil huruf pertama dari setiap kata dan tambahkan ke inisial
                initials += words[i][0];
            }

            return initials.toUpperCase(); // Kembalikan inisial dalam huruf besar
        }

        function getlog() {
            $.ajax({
                url: '<?= base_url('home/getlogs') ?>',
                method: 'GET',
                success: function(response) {
                    $('#logList').empty();
                    var html = '';
                    response.forEach(function(log) {
                        html += '<div class="transactions-list t-info" id="logList">' +
                            '<div class="t-item">' +
                            '<div class="t-company-name">' +
                            '<div class="t-icon">' +
                            '<div class="avatar">' +
                            '<span class="avatar-title">' + getInitials(log.nama) + '</span>' +
                            '</div>' +
                            '</div>' +
                            '<div class="t-name">' +
                            '<h4><b>' + log.nama + '</b></h4>' +
                            '<p class="meta-date">' + log.riwayat + '</p>' +
                            '</div>' +
                            '</div>' +
                            '<p class="meta-date" style="font-size: smaller;">' + log.created_at + '</p>' +
                            '</div>' +
                            '</div>';
                    });
                    $('#logList').html(html); // Mengganti konten widget dengan data log
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        }

        function chartabsensi() {
            // Mixed Chart
            var options = {
                chart: {
                    fontFamily: 'Nunito, Arial, sans-serif',
                    height: 350,
                    type: 'line',
                    toolbar: {
                        show: false,
                    }
                },
                series: [{
                        name: 'Website Blog',
                        type: 'column',
                        data: [440, 505, 414, 671, 227, 413]
                    },

                ],
                stroke: {
                    width: [0, 4]
                },

                legend: {
                    markers: {
                        width: 10,
                        height: 10,
                        offsetX: -5,
                        offsetY: 0
                    },
                    itemMargin: {
                        horizontal: 10,
                        vertical: 0
                    }
                },
                labels: ['XA', 'XB', 'XC', 'XD', 'XE', 'XF'],
                xaxis: {
                    type: 'string',
                },
                yaxis: [{
                        title: {
                            text: 'Website Blog',
                        },

                    },

                ]

            }
            var chart = new ApexCharts(
                document.querySelector("#mixed-chart"),
                options
            );

            chart.render();
        }
        // chartabsensi();

        function fetchDataForChart() {
            $.ajax({
                url: '<?= base_url() ?>home/getabsensi', // Ganti dengan URL yang benar
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    drawChart(response);
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        }
        fetchDataForChart();

        function drawChart(data) {
            // Inisialisasi array kosong untuk menyimpan data absensi dan nama rombel
            var absensi = [];
            var sakit = [];
            var ijin = [];
            var alfa = [];
            var nama_rombel = [];

            // Iterasi setiap elemen array dalam data
            $.each(data, function(index, item) {
                // Tambahkan data absensi dan nama rombel ke dalam array yang telah disiapkan
                absensi.push(item.total_absensi);
                nama_rombel.push(item.nama_rombel);
                sakit.push(item.total_sakit);
                ijin.push(item.total_ijin);
                alfa.push(item.total_alfa);
            });

            // Konfigurasi grafik menggunakan data yang telah disiapkan
            var options = {
                chart: {
                    fontFamily: 'Nunito, Arial, sans-serif',
                    height: 350,
                    type: 'bar',
                    toolbar: {
                        show: false,
                    }
                },
                colors: ['#008eff', '#ffbb44', '#e7515a'],
                series: [{
                        name: 'Sakit',
                        type: 'column',
                        data: sakit,

                    },
                    {
                        name: 'Ijin',
                        type: 'column',
                        data: ijin,
                    },
                    {
                        name: 'Alfa',
                        type: 'column',
                        data: alfa
                    }
                ],
                labels: nama_rombel,
                // Konfigurasi lainnya
            };

            // Render grafik menggunakan library ApexCharts
            var chart = new ApexCharts(document.querySelector("#mixed-chart"), options);
            chart.render();
        }
    });
</script>
<?= $this->endSection(); ?>