<?php
$date = date('Y-m-d H:i:s');
$db = mysqli_query($con,"SELECT * FROM pelanggan WHERE id = '$page[1]'");
$isi = mysqli_fetch_assoc($db);
$user = $isi['akun'];

?>
<!-- Main content -->
<section class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header bg-secondary">
            <div class="row">
              <div class="col-sm-6">
                <h5>Riwayat Aktif Koneksi</h5>
              </div>
              <div class="col-sm-6">
              </div>
            </div>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-md-8">
                <div class="card">
                  <div class="p-2 border bg-light">
                    <div class="card-body">
                      <center>
                        <h6>Riwayat Aktif Koneksi</h6>
                      </center>
                      <?php 
                        $sebelum = new DateTime();
                        $sebelum->modify('-1 month');
                        $bulanF = $sebelum->format('F');
                        $bulanM = $sebelum->format('m');
                      ?>
                      <div style="display: flex; justify-content: space-between; align-items: center;">
                          <div>
                              <select id="monthSelect">
                                  <option value="<?php echo date('m'); ?>"><?php echo date('F'); ?></option>
                                  <option value="<?php echo $bulanM; ?>"><?php echo $bulanF; ?></option>
                              </select>
                          </div>
                          
                          <div>
                              <select id="timeFilter">
                                  <option value="reset">Filter</option>
                                  <option value="6">6 Jam Terakhir</option>
                                  <option value="12">12 Jam Terakhir</option>
                                  <option value="24">1 Hari Terakhir</option>
                                  <option value="72">3 Hari Terakhir</option>
                                  <option value="168">1 Minggu Terakhir</option>
                                  <option value="336">2 Minggu Terakhir</option>
                              </select>
                          </div>
                      </div>

                      <canvas id="myChart"></canvas>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-4">
                <div class="card">
                  <div class="card-body">
                    <center>
                      <h6>Detail Pelanggan</h6>
                      <hr>
                    </center>
                    <table class="table table-borderless" style="zoom: 90%">
                      <tbody>
                        <tr>
                          <td style="min-width: 150px"><b>Id Pelanggan</b></td>
                          <td><?php echo $isi['akun']; ?></td>
                        </tr>
                        <tr>
                          <td><b>Nama</b></td>
                          <td><?php echo $isi['nama']; ?></td>
                        </tr>
                        <tr>
                          <td><b>Alamat</b></td>
                          <td><?php echo $isi['alamat']; ?></td>
                        </tr>
                        <tr>
                          <td><b>Nomor WhatsApp</b></td>
                          <td><?php echo $isi['nomor_whatsapp']; ?></td>
                        </tr>
                      </tbody>
                    </table><br>
                  </div>
                </div>
                <div class="card">
                  <div class="card-body">
                    <div class="card direct-chat direct-chat-primary">
                      <div class="card-header bg-danger">
                        <h3 class="card-title">Riwayat Tiket Gangguan</h3>
                        <div class="card-tools">
                          <?php 
                            $stmt = $pdo->prepare("SELECT COUNT(id) AS jumlahtiket FROM v_tiket_gangguan WHERE id_pelanggan = '$page[1]' ");
                            $stmt->execute();
                            $datatiket = $stmt->fetchAll();
                          ?>
                          <span title="3 New Messages" class="badge badge-light"><?php echo $datatiket[0]['jumlahtiket']; ?></span>
                        </div>
                      </div>
                      <!-- /.card-header -->
                      <div class="card-body">
                        <div class="direct-chat-messages" style="height: 300px">
                          <?php
                            $stmt = $pdo->prepare("SELECT * FROM v_tiket_gangguan WHERE id_pelanggan = '$page[1]' ORDER BY start_time DESC");
                            $stmt->execute();
                            while ($data = $stmt->fetch(PDO::FETCH_ASSOC)) {
                          ?>
                          <a href="?<?php echo encrypt_url('tiket_buat') ?>">
                            <div class="card p-2 text-dark" style="border-left: 8px solid red">
                              <div class="row">
                                <div class="col-6">
                                  <p class="m-0 text-danger"><?php echo $data['jenis_tiket']; ?></p>
                                  <p class="m-0"><?php echo $data['nama_pelanggan'].' ('.$data['nama_server'].')'; ?></p>
                                  <p class="m-0"><?php echo $data['start_time']; ?></p>
                                </div>
                                <div class="col-6 text-right">
                                  <p class="m-0"><?php echo $data['permasalahan']; ?></p>
                                </div>
                              </div>
                            </div>
                          </a>
                          <?php } ?>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<script>
    const ctx = document.getElementById('myChart').getContext('2d');
    let myChart; // Initialize chart variable
    let allData = null; // Variable untuk menyimpan semua data

    // Fungsi untuk mengambil data dan menggambar chart
    function fetchDataAndRenderChart(month) {
        fetch(`load/data_monitoring_pelanggan.php?m=${month}&i=<?php echo $page[1]; ?>`)
            .then(response => response.json())
            .then(data => {
                allData = data; // Simpan data ke dalam variable allData
                renderChart(data); // Panggil fungsi untuk menggambar chart
                document.getElementById('timeFilter').value = 'reset';
            })
            .catch(error => {
                console.error('Error fetching data:', error);
            });
    }

    // Fungsi untuk menggambar chart berdasarkan data yang diberikan
    function renderChart(data) {
        const chartLabels = data.waktu.map(dateString => {
            const date = new Date(dateString);
            const options = { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' };
            return date.toLocaleString('id-ID', options);
        });

        const chartData = data.status;

        const chartConfig = {
            type: 'line',
            data: {
                labels: chartLabels,
                datasets: [
                    {
                        label: 'Koneksi',
                        data: chartData,
                        borderColor: 'green',
                        backgroundColor: 'rgba(4, 214, 46, 0.6)',
                        stepped: true,
                        fill: true
                    }
                ]
            },
            options: {
                scales: {
                    y: {
                        min: -0.3,
                        max: 5,
                        ticks: {
                            callback: function(value) {
                                return value === 0 ? 'OFF' : (value === 4 ? 'ON' : '');
                            }
                        }
                    }
                }
            }
        };

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

        // Buat instance chart baru
        myChart = new Chart(ctx, chartConfig);
    }

    // Fungsi untuk memfilter data berdasarkan pilihan waktu
    document.getElementById('timeFilter').addEventListener('change', function() {
        const filterValue = this.value;

        if (filterValue === 'reset') {
            renderChart(allData); // Tampilkan data awal tanpa filter
        } else {
            const hoursToSubtract = parseInt(filterValue);
            const cutoffDate = new Date();

            // Ambil waktu terakhir dari data
            if (allData && allData.waktu.length > 0) {
                const lastDataDate = new Date(allData.waktu[allData.waktu.length - 1]);
                const filterStartDate = new Date(lastDataDate);
                filterStartDate.setHours(lastDataDate.getHours() - hoursToSubtract); // Hitung tanggal batas berdasarkan data terakhir

                const filteredData = {
                    waktu: [],
                    status: []
                };

                // Filter data berdasarkan waktu terakhir yang diambil
                allData.waktu.forEach((dateString, index) => {
                    const date = new Date(dateString);
                    if (date >= filterStartDate) {
                        filteredData.waktu.push(dateString);
                        filteredData.status.push(allData.status[index]);
                    }
                });

                // Jika hanya satu data yang ditemukan, tambahkan data awal
                if (filteredData.waktu.length === 1) {
                    filteredData.waktu.unshift(filterStartDate.toISOString()); // Tambahkan data awal
                    filteredData.status.unshift(4); // Status untuk data awal
                }

                renderChart(filteredData); // Panggil fungsi untuk menggambar chart dengan data yang sudah difilter
            }
        }
    });

    // Ambil data awal untuk bulan saat ini saat halaman dimuat
    const currentMonth = new Date().getMonth() + 1; // Ambil bulan saat ini (0-11)
    fetchDataAndRenderChart(currentMonth < 10 ? '0' + currentMonth : currentMonth);

    // Event listener untuk pemilihan bulan
    document.getElementById('monthSelect').addEventListener('change', function() {
        const selectedMonth = this.value;
        fetchDataAndRenderChart(selectedMonth);
    });
</script>
