 <!-- Main content -->
<section class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <div class="row">
              <div class="col-sm-6">
                <h3 class="card-title">Akumulasi Kinerja Karyawan</h3>
              </div>
              <div class="col-sm-6">
                <ol class="float-sm-right mb-0">
                </ol>
              </div>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <table id="example2" class="table table-bordered table-striped">
                      <thead>
                      <tr>
                        <th>Bulan</th>
                        <th>Nama</th>
                        <th>Jumlah Tiket</th>
                        <th>Tiket Jalur</th>
                        <th>Tiket Lain</th>
                        <th>Bobot Pekerjaan</th>
                        <th>Create to Proses</th>
                        <th>Proses to Close</th>
                        <!--<th>Action</th>-->
                      </tr>
                      </thead>
                      <tbody>
                      <?php
                        $aserver = mysqli_query($con,"SELECT * FROM v_akumulasi_kinerja_by_tiket $SqlDataWHId ORDER BY waktu DESC");
                        while ($server = mysqli_fetch_assoc($aserver)) 
                        {
                      ?>
                      <tr>
                        <td><?php echo substr(formatIndo($server['waktu']),3); ?></td>
                        <td><?php echo $server['nama_teknisi']; ?></td>
                        <td><?php echo $server['jumlah_tiket']; ?></td>
                        <td><?php echo $server['tiket_jalur']; ?></td>
                        <td><?php echo $server['tiket_lain']; ?></td>
                        <td><?php echo $server['bobot']; ?></td>
                        <td><?php echo $server['rata_rata_sebelum']; ?> Menit</td>
                        <td><?php echo $server['rata_rata_sesudah']; ?> Menit</td>
                        <!--<td>-->
                        <!--    <a type="button" class="btn btn-secondary btn-sm ml-1">Detail</a>-->
                        <!--</td>-->
                      </tr>
                    <?php } ?>
                      </tbody>
                    </table>
                </div>
                <div class="col-md-6">
                    <div class="card" id="reportChartid">
                      <div class="card-body">
                          <center>
                              <h5>Grafik Kinerja Berdasarkan Tiket</h5>
                          </center>
                          <label><small>Tahun :</small></label>
                          <select id="yearSelect">
                              <option value="2024">2024</option>
                              <option value="2025" selected>2025</option>
                              <option value="2026">2026</option>
                          </select>
                          <label><small>Karyawan :</small></label>
                          <select id="userSelect">
                              <option value="all">All</option>
                              <?php 
                                $userOp = mysqli_query($con,"SELECT id_penyelesai_tiket,nama_teknisi FROM v_akumulasi_kinerja_by_tiket $SqlDataWHId GROUP BY id_penyelesai_tiket ORDER BY nama_teknisi");
                                while ($userOption = mysqli_fetch_assoc($userOp)) 
                                { ?>
                                  <option value="<?php echo $userOption['id_penyelesai_tiket'] ?>"><?php echo $userOption['nama_teknisi'] ?></option>
                                <?php } ?>
                          </select>
                          <button id="fullscreenBtn" style="float: right;" class="btn btn-sm btn-secondary">Fullscreen</button>
                          <canvas id="reportChart"></canvas>
                      </div>
                    </div>
                </div>
            </div>
          </div>
          <!-- /.card-body -->
        </div>
        <!-- /.card -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container-fluid -->
</section>
<!-- /.content -->

<script>
document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('reportChart'); // Mendapatkan elemen canvas
    const rcrt = canvas.getContext('2d'); // Mendapatkan konteks dari canvas
    const yearSelect = document.getElementById('yearSelect');
    const userSelect = document.getElementById('userSelect');
    const fullscreenBtn = document.getElementById('fullscreenBtn');
    
    // Mengatur ukuran awal canvas
    canvas.style.maxHeight = '350px'; // Kembali ke ukuran asli
    canvas.style.width = '100%'; // Kembali ke ukuran asli

    
    let reportChart; // Simpan referensi chart di sini


    // Fungsi untuk mengambil data dari file PHP berdasarkan tahun
    async function fetchData(year,kar) {
        try {
            const response = await fetch(`load/data_kpi_teknisi.php?year=${year}&d=${kar}&i=<?php echo $SqlDataId; ?>`);
            const data = await response.json();
            // console.log(data); // Log data yang diterima

            const bulanSingkatan = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'];
            const bulanArray = bulanSingkatan.map((singkatan, index) => `${year}-${String(index + 1).padStart(2, '0')}`);

            const jumlah = new Array(12).fill(0);
            const createToProses = new Array(12).fill(0);
            const prosesToClose = new Array(12).fill(0);
            const tiketJalur = new Array(12).fill(0);
            const tiketLain = new Array(12).fill(0);
            const bobot = new Array(12).fill(0);

            data.bulan.forEach((bulan, index) => {
                const monthIndex = bulanArray.indexOf(bulan);
                if (monthIndex !== -1) {
                    jumlah[monthIndex] = data.jumlah[index];
                    createToProses[monthIndex] = data.createToProses[index];
                    prosesToClose[monthIndex] = data.prosesToClose[index];
                    tiketJalur[monthIndex] = data.tiketJalur[index];
                    tiketLain[monthIndex] = data.tiketLain[index];
                    bobot[monthIndex] = data.bobot[index];
                }
            });

            const report = {
                labels: bulanSingkatan,
                datasets: [
                    {
                        label: 'Create To Proses',
                        data: createToProses,
                        backgroundColor: 'rgba(255, 206, 86, 0.5)', // Warna kuning transparan
                        borderColor: 'rgb(255, 206, 86)', // Kuning solid
                        borderWidth: 1,
                        fill: true,
                        type: 'bar',
                    },
                    {
                        label: 'Proses To Close',
                        data: prosesToClose,
                        backgroundColor: 'rgba(54, 162, 235, 0.5)', // Warna biru transparan
                        borderColor: 'rgb(54, 162, 235)', // Biru solid
                        borderWidth: 1,
                        fill: true,
                        type: 'bar',
                    },
                    {
                        label: 'Jumlah',
                        data: jumlah,
                        backgroundColor: 'rgba(75, 192, 192, 0.5)', // Warna hijau kebiruan transparan
                        borderColor: 'rgb(75, 192, 192)', // Hijau kebiruan solid
                        borderWidth: 1,
                        fill: true,
                        type: 'bar',
                    },
                    {
                        label: 'Bobot',
                        data: bobot,
                        backgroundColor: 'rgba(153, 102, 255, 0.5)', // Warna ungu transparan
                        borderColor: 'rgb(153, 102, 255)', // Ungu solid
                        borderWidth: 1,
                        fill: true,
                        type: 'bar',
                    },
                    {
                        label: 'Tiket Jalur',
                        data: tiketJalur,
                        backgroundColor: 'rgba(255, 99, 132, 0.5)', // Warna merah transparan
                        borderColor: 'rgb(255, 99, 132)', // Merah solid
                        borderWidth: 1,
                        fill: true,
                    },
                    {
                        label: 'Tiket Lain',
                        data: tiketLain,
                        backgroundColor: 'rgba(201, 203, 207, 0.5)', // Warna abu-abu transparan
                        borderColor: 'rgb(201, 203, 207)', // Abu-abu solid
                        borderWidth: 1,
                        fill: true,
                    }
                ]
            };

            // Hapus chart lama jika sudah ada
            if (reportChart) {
                reportChart.destroy();
            }

            const rconfig = {
                type: 'line',
                data: report,
                options: {
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    const absValue = Math.abs(value);
                                    if (absValue >= 1000000) {
                                        return (value / 1000000) + 'M';
                                    } else if (absValue >= 1000) {
                                        return (value / 1000) + 'K';
                                    } else {
                                        return value;
                                    }
                                }
                            }
                        }
                    }
                }
            };

            // Membuat chart baru
            reportChart = new Chart(rcrt, rconfig);

        } catch (error) {
            console.error('Error fetching data:', error);
        }
    }

    // Fungsi untuk mengaktifkan mode fullscreen
    function toggleFullscreen() {
        const canvasContainer = document.getElementById('reportChartid');
        if (!document.fullscreenElement) {
            canvasContainer.requestFullscreen().catch(err => {
                console.error(`Error attempting to enable full-screen mode: ${err.message}`);
            });
        } else {
            document.exitFullscreen();
        }
    }

   // Event listener untuk tombol fullscreen
    fullscreenBtn.addEventListener('click', toggleFullscreen);

    // Memanggil fetchData saat halaman dimuat
    fetchData(yearSelect.value, userSelect.value);
    
    // Menangani perubahan pada select year
    yearSelect.addEventListener('change', () => {
        fetchData(yearSelect.value, userSelect.value);
    });
    
    // Menangani perubahan pada select user
    userSelect.addEventListener('change', () => {
        fetchData(yearSelect.value, userSelect.value);
    });
    
    

    // Mengatur tinggi canvas saat masuk dan keluar fullscreen
    document.addEventListener('fullscreenchange', () => {
        if (document.fullscreenElement) {
            canvas.style.height = ''; // Kembali ke ukuran asli
            canvas.style.maxHeight = '100%'; 
            canvas.style.width = '100%'; // Atur lebar canvas menjadi 100vw
            fullscreenBtn.textContent = 'Close Fullscreen';
        } else {
            canvas.style.height = ''; // Kembali ke ukuran asli
            canvas.style.maxHeight = '350px'; // Kembali ke max-height asli
            canvas.style.width = '100%'; // Kembali ke lebar asli
            fullscreenBtn.textContent = 'Fullscreen';
        }
    });
});
</script>

<script>
    window.onload = function() {
        const body = document.body;
        
        // Tambahkan kelas 'sidebar-collapse' saat halaman dimuat
        body.classList.add('sidebar-collapse');
    };
</script>