@extends('root')
@section('title', 'Dashboard')

@section('content')
<div class="container">
    <h1 class="mt-4">Dashboard</h1>

    <!-- Kartu Ringkasan -->
    <div class="row">
    </div>

</div>
@endsection



@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>

    <script>

        // Chart untuk Kehadiran per Departemen
        const departmentCtx = document.getElementById('departmentChart').getContext('2d');
        const departmentChart = new Chart(departmentCtx, {
            type: 'bar',
            data: {
                labels: ['HRD', 'IT', 'Keuangan', 'Marketing', 'Produksi'],
                datasets: [{
                    label: 'Jumlah Karyawan',
                    data: [8, 12, 10, 15, 20], // Data statis
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.6)',
                        'rgba(54, 162, 235, 0.6)',
                        'rgba(255, 206, 86, 0.6)',
                        'rgba(75, 192, 192, 0.6)',
                        'rgba(153, 102, 255, 0.6)',
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                    ],
                    borderWidth: 1,
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: true,
                    },
                },
                scales: {
                    x: {
                        beginAtZero: true,
                    },
                    y: {
                        beginAtZero: true,
                    },
                },
            },
        });



        $(document).ready(function () {

            const attendanceCtx = document.getElementById('attendanceChart').getContext('2d');
const attendanceChart = new Chart(attendanceCtx, {
    type: 'line',
    data: {
        labels: [], // Initial empty labels
        datasets: [{
            label: 'Jumlah Kehadiran',
            data: [], // Initial empty data
            borderColor: 'rgba(75, 192, 192, 1)',
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderWidth: 2,
            fill: true,
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                display: true,
            },
        },
        scales: {
            x: {
                beginAtZero: true,
            },
            y: {
                beginAtZero: true,
            },
        },
    },
});

    // Fungsi untuk memuat data dashboard
    function loadDashboardData() {
        $.ajax({
            url: "{{ route('dashboard.getData') }}", // Route ke endpoint getData
            method: "GET",
            dataType: "json",
            success: function (response) {
                // Perbarui kartu ringkasan
                $('#total-pegawai').text(response.total_pegawai); // Total Pegawai
                $('#total-absen').text(response.kehadiran_hari_ini); // Total Pegawai
                $('#total-terlambat').text(response.terlambat_hari_ini); // Total Pegawai
                $('#total-tidak-hadir').text(response.tidak_hadir_hari_ini); // Total Pegawai


                // Perbarui grafik kehadiran 7 hari terakhir
                updateAttendanceChart(response.statistik_kehadiran);

                // Perbarui grafik kehadiran per divisi
                updateDepartmentChart(response.kehadiran_per_divisi);

                // Perbarui tabel absensi terbaru
                updateAbsensiTable(response.absensi_terbaru);
            },
            error: function (xhr, status, error) {
                console.error("Error fetching dashboard data:", error);
                alert("Gagal memuat data dashboard. Silakan coba lagi.");
            }
        });
    }

    // Panggil fungsi saat halaman dimuat
    loadDashboardData();

    // Fungsi untuk memperbarui grafik kehadiran 7 hari terakhir
    function updateAttendanceChart(data) {
        if (!attendanceChart) {
        console.error("attendanceChart is not initialized.");
        return;
    }

    // Update labels and data
    attendanceChart.data.labels = data.map(item => item.tanggal);
    attendanceChart.data.datasets[0].data = data.map(item => item.jumlah);

    // Notify Chart.js to re-render
    attendanceChart.update();
    }

    // Fungsi untuk memperbarui grafik kehadiran per divisi
    function updateDepartmentChart(data) {



        if (!departmentChart) {
        console.error("departmentChart is not initialized.");
        return;
    }

    // Update labels and data
    departmentChart.data.labels = data.map(item => item.nama_divisi);
    departmentChart.data.datasets[0].data = data.map(item => item.jumlah_kehadiran);

    // Notify Chart.js to re-render
    departmentChart.update();


    }

    // Fungsi untuk memperbarui tabel absensi terbaru
    function updateAbsensiTable(data) {
        const tableBody = $('#tabelAbsensiTerbaru tbody');
        tableBody.empty(); // Kosongkan tabel sebelumnya

        if (data.length > 0) {
            data.forEach(absensi => {
                const row = `
                    <tr>
                        <td>
                            <div class="d-flex align-items-center">
                                <i class="ti ti-user me-2 text-secondary"></i>
                                ${absensi.nama_pegawai}
                            </div>
                        </td>
                        <td>${absensi.divisi}</td>
                        <td>${absensi.waktu_masuk}</td>
                        <td>${absensi.waktu_keluar}</td>
                        <td>
                            ${getStatusBadge(absensi.status)}
                        </td>
                        <td>
                            <a href="#" class="btn btn-sm btn-info">
                                <i class="ti ti-eye me-1"></i>Detail
                            </a>
                        </td>
                    </tr>
                `;
                tableBody.append(row);
            });
        } else {
            tableBody.append('<tr><td colspan="6" class="text-center">Tidak ada data absensi</td></tr>');
        }
    }

    // Fungsi untuk mendapatkan badge status
    function getStatusBadge(status) {
        switch (status) {
            case 'hadir':
                return '<span class="badge bg-success"><i class="ti ti-check me-1"></i>Hadir</span>';
            case 'terlambat':
                return '<span class="badge bg-warning"><i class="ti ti-clock me-1"></i>Terlambat</span>';
            case 'izin':
                return '<span class="badge bg-info"><i class="ti ti-file me-1"></i>Izin</span>';
            case 'sakit':
                return '<span class="badge bg-secondary"><i class="ti ti-medicine me-1"></i>Sakit</span>';
            case 'tidak_hadir':
                return '<span class="badge bg-danger"><i class="ti ti-x me-1"></i>Tidak Hadir</span>';
            default:
                return '<span class="badge bg-dark">-</span>';
        }
    }
});

    </script>
@endpush