<?= $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 Pasien</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="totalpasien">0</h3>
                                <!-- <div class="d-flex align-items-baseline">
                                    <p class="text-success">
                                        <span id="presentasetotalcustomer"></span>
                                        <i data-feather="arrow-up" class="icon-sm mb-1"></i>
                                    </p>
                                </div> -->
                            </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 Kunjungan</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="totalkunjungan">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 Rekammedis</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="totalrekammedis">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
                    $('#totalkunjungan').text(response.data.kunjungan.total || 0);
                    $('#totalrekammedis').text(response.data.rekammedis.total || 0);
                    $('#totalpasien').text(response.data.pasien.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>
    // Fungsi untuk mengambil data dan menggambar chart
    function fetchDashboardChart() {
        $.ajax({
            url: '<?= base_url('/Dashboard/getDashboardData') ?>', // URL ke controller
            method: 'GET',
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    // Ambil data untuk chart
                    const customerData = response.data.monthlycustomer;
                    const bookingsData = response.data.monthlybookings;
                    const serviceData = response.data.monthlyservice;

                    // Persiapkan label bulan
                    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

                    // Persiapkan data untuk chart
                    const customerTotals = new Array(12).fill(0);
                    const bookingsTotals = new Array(12).fill(0);
                    const serviceTotals = new Array(12).fill(0);

                    // Isi data berdasarkan bulan
                    customerData.forEach(item => {
                        const monthIndex = item.month - 1; // 1 = January, 2 = February, dll.
                        customerTotals[monthIndex] = item.total;
                    });
                    bookingsData.forEach(item => {
                        const monthIndex = item.month - 1; // 1 = January, 2 = February, dll.
                        bookingsTotals[monthIndex] = item.total;
                    });
                    serviceData.forEach(item => {
                        const monthIndex = item.month - 1; // 1 = January, 2 = February, dll.
                        serviceTotals[monthIndex] = item.total;
                    });

                    // Membuat chart
                    createBarChart(months, customerTotals, bookingsTotals, serviceTotals);
                } else {
                    console.error('Gagal mengambil data');
                }
            },
            error: function() {
                console.error('Kesalahan server saat mengambil data');
            }
        });
    }

    // Fungsi untuk menggambar chart
    function createBarChart(labels, customerData, bookingsData, serviceData) {
        var ctx = document.getElementById('myChart').getContext('2d');

        // if (myChart) {
        //     myChart.destroy(); // Hancurkan chart lama jika ada
        // }

        myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels, // Bulan
                datasets: [{
                        label: 'Jumlah customer',
                        data: customerData, // Data customer per bulan
                        backgroundColor: 'rgba(54, 162, 235, 0.2)', // Warna bar customer
                        borderColor: 'rgba(54, 162, 235, 1)', // Warna border customer
                        borderWidth: 1
                    },
                    {
                        label: 'Jumlah bookings',
                        data: bookingsData, // Data ibu hamil per bulan
                        backgroundColor: 'rgba(255, 99, 132, 0.2)', // Warna bar Ibu Hamil
                        borderColor: 'rgba(255, 99, 132, 1)', // Warna border Ibu Hamil
                        borderWidth: 1
                    },
                    {
                        label: 'Jumlah service',
                        data: serviceData, // Data service per bulan
                        backgroundColor: 'rgba(224, 222, 63, 0.2)', // Warna bar service
                        borderColor: 'rgb(228, 215, 34)', // Warna border service
                        borderWidth: 1
                    }
                ]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                responsive: true
            }
        });
    }

    // Ambil data dan buat chart saat halaman dimuat
    fetchDashboardChart();
</script>

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