<?= $this->extend('layout/template'); ?>
<?= $this->section('content'); ?>


<script src="<?= base_url(); ?>/public/assets/vendors/chartjs/Chart.min.js"></script>
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
    <div>
        <h4 class="mb-3 mb-md-0">Welcome to Dashboard</h4>
    </div>

</div>

<div class="row">
    <div class="col-12 col-xl-12 stretch-card">
        <div class="row flex-grow-1">
            <div class="col-md-4 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-baseline">
                            <h6 class="card-title mb-0">Data User</h6>
                            <div class="dropdown mb-2">
                                <a type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
                                    <a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="eye" class="icon-sm me-2"></i> <span class="">View</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6 col-md-12 col-xl-5">
                                <h3 class="mb-2" id="totalpegawai">0</h3>

                            </div>
                            <div class="col-6 col-md-12 col-xl-7">
                                <div id="customersChart" class="mt-md-3 mt-xl-0"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-baseline">
                            <h6 class="card-title mb-0">Data Pengajuan Cuti</h6>
                            <div class="dropdown mb-2">
                                <a type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
                                    <a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="eye" class="icon-sm me-2"></i> <span class="">View</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6 col-md-12 col-xl-5">
                                <h3 class="mb-2" id="totalcuti">0</h3>
                            </div>
                            <div class="col-6 col-md-12 col-xl-7">
                                <div id="ordersChart" class="mt-md-3 mt-xl-0"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-baseline">
                            <h6 class="card-title mb-0">Data Cuti Setuju</h6>
                            <div class="dropdown mb-2">
                                <a type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
                                    <a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="eye" class="icon-sm me-2"></i> <span class="">View</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6 col-md-12 col-xl-5">
                                <h3 class="mb-2" id="cutidisetuju">0</h3>
                            </div>
                            <div class="col-6 col-md-12 col-xl-7">
                                <div id="growthChart" class="mt-md-3 mt-xl-0"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> <!-- row -->

<div class="row">
    <div class="col-lg-12 col-xl-12 stretch-card">
        <div class="card">
            <div class="card-body">
                <h6 class="card-title">Grafik Data </h6>
                <canvas id="myChart" width="400" height="200"></canvas>
            </div>
        </div>
    </div>
</div>

<script>
    // Ambil Data dari Backend dan Tampilkan di Elemen
    function fetchDashboardTotals() {
        $.ajax({
            url: '<?= base_url('/Dashboard/getDashboardData') ?>', // URL Controller
            method: 'GET',
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    // Update langsung ke elemen HTML
                    $('#totalpegawai').text(response.data.pegawai.total || 0);
                    $('#totalcuti').text(response.data.cuti.total || 0);
                    $('#cutidisetuju').text(response.data.disetujui.total || 0);
                } else {
                    console.error('Gagal mengambil data dashboard');
                }
            },
            error: function() {
                console.error('Kesalahan server saat mengambil data dashboard');
            }
        });
    }

    // Panggil fungsi saat halaman dimuat
    $(document).ready(function() {
        fetchDashboardTotals();
    });
</script>

<script>
    function fetchDashboardChart() {
        $.ajax({
            url: '<?= base_url('/Dashboard/getDashboardData') ?>',
            method: 'GET',
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    const cutiData = response.data.monthly;

                    // Persiapkan label bulan
                    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                    const cutiBulanan = new Array(12).fill(0);

                    // Isi jumlah pengajuan cuti per bulan
                    cutiData.forEach(item => {
                        const monthIndex = item.month - 1;
                        cutiBulanan[monthIndex] = item.total;
                    });

                    // Gambar chart
                    createBarChart(months, cutiBulanan);
                } else {
                    console.error('Gagal mengambil data');
                }
            },
            error: function() {
                console.error('Kesalahan server saat mengambil data');
            }
        });
    }

    function createBarChart(labels, cutiData) {
        const ctx = document.getElementById('myChart').getContext('2d');

        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Pengajuan Cuti per Bulan',
                    data: cutiData,
                    backgroundColor: 'rgba(75, 192, 192, 0.5)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0
                        }
                    }
                }
            }
        });
    }

    // Jalankan saat halaman dimuat
    $(document).ready(function() {
        fetchDashboardChart();
    });
</script>


<?= $this->endSection(); ?>