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

<?= $this->section('title') ?>Dashboard <?= $this->endSection() ?>

<!-- main section start-->
<?= $this->section('main') ?>
<?php
   $uri      = current_url(true);
   $segment1 = $uri->setSilent()->getSegment(1);
   $segment2 = $uri->setSilent()->getSegment(2);
   $segment3 = $uri->setSilent()->getSegment(3);
?>
<!-- Breadcumb -->
<ol class="breadcrumb page-breadcrumb">
   <li class="breadcrumb-item"><a href="javascript:void(0);"><?= env('app.name') ?></a></li>
   <li class="breadcrumb-item"><?= ucfirst($segment1) ?></li>
   <li class="breadcrumb-item">Cabang/ UPC/ UPS</li>
   <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
</ol>

<div class="subheader">
   <h1 class="subheader-title">
      <i class="subheader-icon fal fa-chart-area"></i> <?= $title ?> <span class="fw-300"><?= $tahun_aktif ?></span>
   </h1>
   <div class="subheader-block d-lg-flex align-items-center">
      <div class="d-flex mr-4">
         <div class="mr-2">
               
         </div>
         <div>
            
         </div>
      </div>
      <div class="d-flex mr-0">
         <div class="mr-2">
            <ul class="nav nav-pills border-bottom-0" role="tablist">
               <li class="nav-item">
                  <a class="nav-link active" href="<?= $link_hmap ?>">Heatmap <i class="fal fa-arrow-right"></i></a>
               </li>
            </ul>
         </div>
         <div>
               
         </div>
      </div>
   </div>
</div>

<!-- ini bagian jumlah kegiatan promosi, calon nasabah, menjadi nasabah, dan persentase konversi -->
<div class="row">
   <div class="col-sm-6 col-xl-3">
      <div class="p-3 bg-primary-300 rounded overflow-hidden position-relative text-white mb-g">
         <div class="">
               <h3 class="display-4 d-block l-h-n m-0 fw-500">
               <?= $jumlah_kegiatan ?>
               <small class="m-0 l-h-n">Kegiatan Promosi</small>
               </h3>
         </div>
         <i class="fal fa-lightbulb-on position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n0" style="font-size:6rem"></i>
      </div>
   </div>
   <div class="col-sm-6 col-xl-3">
      <div class="p-3 bg-warning-400 rounded overflow-hidden position-relative text-white mb-g">
         <div class="">
               <h3 class="display-4 d-block l-h-n m-0 fw-500">
               <?= $jumlah_calon ?>
               <small class="m-0 l-h-n">Calon Nasabah</small>
               </h3>
         </div>
         <i class="fal fa-user-clock position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n1" style="font-size: 6rem;"></i>
      </div>
   </div>
   <div class="col-sm-6 col-xl-3">
      <div class="p-3 bg-success-200 rounded overflow-hidden position-relative text-white mb-g">
         <div class="">
               <h3 class="display-4 d-block l-h-n m-0 fw-500">
               <?= $jumlah_closing ?>
               <small class="m-0 l-h-n">Menjadi Nasabah</small>
               </h3>
         </div>
         <i class="fal fa-user-check position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size: 6rem;"></i>
      </div>
   </div>
   <div class="col-sm-6 col-xl-3">
      <div class="p-3 bg-info-200 rounded overflow-hidden position-relative text-white mb-g">
         <div class="">
               <h3 class="display-4 d-block l-h-n m-0 fw-500">
               <?= $persentase_konversi ?>%
               <small class="m-0 l-h-n">Persentase Konversi</small>
               </h3>
         </div>
         <i class="fal fa-globe position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4" style="font-size: 6rem;"></i>
      </div>
   </div>
</div>
<!-- end bagian jumlah kegiatan promosi, calon nasabah, menjadi nasabah, dan persentase konversi -->

<!-- flot utama -->
<div class="row">
   <div class="col-lg-12 sortable-grid ui-sortable">
      <div id="panel-10" class="panel">
         <div class="panel-hdr">
            <h2>
               Kegiatan Promosi <span class="fw-300"><i> & Konversi Nasabah</i></span>
            </h2>
            
            <div class="panel-toolbar ml-2">
               <div class="d-flex position-relative ml-auto" style="max-width: 8rem;">
                  <i class="fal fa-search position-absolute pos-left fs-lg px-2 py-1 mt-1 fs-xs"></i>
                  <input type="text" id="cari-tahun" class="form-control form-control-sm pl-5" maxlength="4" placeholder="Cari Tahun" value="<?= $tahun_aktif ?>">
               </div>
            </div>
         </div>
         <div class="panel-container show">
            <div class="panel-content">

            <div id="js-checkbox-toggles" class="d-flex mb-3">
               <div class="custom-control custom-switch mr-2">
                     <input type="checkbox" class="custom-control-input" name="gra-0" id="gra-0" checked="">
                     <label class="custom-control-label" for="gra-0">Kegiatan Promosi</label>
               </div>
               <div class="custom-control custom-switch mr-2">
                     <input type="checkbox" class="custom-control-input" name="gra-1" id="gra-1" checked="">
                     <label class="custom-control-label" for="gra-1">Calon Nasabah</label>
               </div>
               <div class="custom-control custom-switch mr-2">
                     <input type="checkbox" class="custom-control-input" name="gra-2" id="gra-2" checked="">
                     <label class="custom-control-label" for="gra-2">Menjadi Nasabah</label>
               </div>
            </div>

            <div id="flot-toggles" class="w-100 mt-4" style="height: 300px; padding: 0px; position: relative;">
               <canvas class="flot-base" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 1544px; height: 300px;" width="1544" height="300"></canvas>
               
               <div class="flot-text" style="position: absolute; inset: 0px; font-size: smaller; color: rgb(84, 84, 84);">
                  <div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; inset: 0px;"></div>
                  
                  <div class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; inset: 0px;"></div>
               </div>
               
               <canvas class="flot-overlay" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 1544px; height: 300px;" width="1544" height="300"></canvas>
               
               <div class="legend">
                  <div style="position: absolute; width: 82.6875px; height: 53.7188px; top: 13px; right: 28px; background-color: rgb(255, 255, 255); opacity: 0.85;">
                  </div>
                  
                  <table style="position:absolute;top:13px;right:28px;;font-size:smaller;color:#545454">
                     <tbody>
                        <tr>
                           <td class="legendColorBox">
                              <div style="border:1px solid #ccc;padding:1px">
                                 <div style="width:4px;height:0;border:5px solid #8456c4ff ;overflow:hidden"></div>
                              </div>
                           </td>
                           <td class="legendLabel">Kegiatan Promosi</td>
                        </tr>
                        <tr>
                           <td class="legendColorBox">
                              <div style="border:1px solid #ccc;padding:1px">
                                 <div style="width:4px;height:0;border:5px solid #e2a851ff;overflow:hidden"></div>
                              </div>
                           </td>
                           <td class="legendLabel">Calon Nasabah</td>
                        </tr>
                        <tr>
                           <td class="legendColorBox">
                              <div style="border:1px solid #ccc;padding:1px">
                                 <div style="width:4px;height:0;border:5px solid #08d3bfff;overflow:hidden"></div>
                              </div>
                           </td>
                           <td class="legendLabel">Menjadi Nasabah</td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>

            </div>
         </div>
      </div>
   </div>
</div>

<div class="row">
   <!-- Panel Chart Top 5 Karyawan -->
   <div class="col-xl-6">
      <div id="panel-karyawan" class="panel">
         <div class="panel-hdr">
            <h2>Leaderboard <span class="fw-300"><i>Promoter</i></span></h2>
            <div class="panel-toolbar ml-2">
               <h5 class="m-0">
                  <span class="badge badge-info fw-400 l-h-n">
                     Top 5
                  </span>
               </h5>
            </div>
            <div class="panel-toolbar">
               <button class="btn btn-panel waves-effect waves-themed" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"></button>
            </div>
         </div>
         <div class="panel-container show">
            <div class="panel-content">
               <div class="table-responsive">
                  <table class="table table-clean">
                     <thead>
                        <tr>
                           <th colspan="2">Karyawan</th>
                           <th class="text-center">Kegiatan</th>
                           <th class="text-center">Calon</th>
                           <th class="text-center">Closing</th>
                           <th class="text-center">% Konversi</th>
                           <th class="text-center">Efektivitas</th>
                         </tr>
                     </thead>
                     <tbody id="karyawan-efektif-table">
                     </tbody>
                  </table>
               </div>
            </div>
         </div>
      </div>
   </div><!-- end col-xl-6 -->

   <!-- Panel Chart Produk -->
   <div class="col-xl-6">
      <div id="panel-produk" class="panel">
         <div class="panel-hdr">
            <h2>Produk <span class="fw-300"><i>Paling Diminati</i></span></h2>
            <div class="panel-toolbar">
               <button class="btn btn-panel waves-effect waves-themed" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"></button>
            </div>
         </div>
         <div class="panel-container show">
             <div class="panel-content">
                <div id="produk-horizontal-bar" style="height: 400px; width: 100%;"></div>
             </div>
          </div>
       </div>
   </div><!-- end col-xl-6 -->
</div>

<div class="row">
   <!-- Panel Chart Kategori Lokasi -->
   <div class="col-xl-6">
      <div id="panel-lokasi" class="panel">
         <div class="panel-hdr">
            <h2>Kategori <span class="fw-300"><i>Lokasi</i></span></h2>
            <div class="panel-toolbar">
               <button class="btn btn-panel waves-effect waves-themed" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"></button>
            </div>
         </div>
         <div class="panel-container show">
            <div class="panel-content">
               <div id="lokasi-pie" style="height: 300px; width: 100%;"></div>
               <!-- Tabel Efektivitas -->
               <div class="mt-3">
                  <h6 class="text-muted mb-2">📊 Analisis Efektivitas Kategori Lokasi</h6>
                  <div class="table-responsive">
                     <table class="table table-sm table-hover">
                        <thead>
                        <tr>
                        <th>Kategori</th>
                        <th>Kegiatan</th>
                        <th>Calon</th>
                           <th>Closing</th>
                              <th>% Konversi</th>
                               <th>Efektivitas</th>
                            </tr>
                         </thead>
                        <tbody id="efektivitas-lokasi-table">
                        </tbody>
                     </table>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div><!-- end col-xl-6 -->

   <!-- Panel Chart Jenis Promosi -->
   <div class="col-xl-6">
      <div id="panel-jprom" class="panel">
         <div class="panel-hdr">
            <h2>Jenis <span class="fw-300"><i>Promosi</i></span></h2>
            <div class="panel-toolbar">
               <button class="btn btn-panel waves-effect waves-themed" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"></button>
            </div>
         </div>
         <div class="panel-container show">
            <div class="panel-content">
               <div id="jenis-promosi-pie" style="height: 300px; width: 100%;"></div>
               <!-- Tabel Efektivitas -->
               <div class="mt-3">
                  <h6 class="text-muted mb-2">📊 Analisis Efektivitas Jenis Promosi</h6>
                  <div class="table-responsive">
                     <table class="table table-sm table-hover" id="efektivitas-table">
                        <thead class="thead-light">
                           <tr>
                              <th>Jenis Kegiatan</th>
                              <th class="text-center">Kegiatan</th>
                              <th class="text-center">Calon</th>
                              <th class="text-center">Closing</th>
                              <th class="text-center">% Konversi</th>
                              <th class="text-center">Efektivitas</th>
                           </tr>
                        </thead>
                        <tbody id="efektivitas-tbody">
                           <!-- Will be populated by JavaScript -->
                        </tbody>
                     </table>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div><!-- end col-xl-6 -->
</div>
<?= $this->endSection() ?>

<!-- pageScripts section start-->
<?= $this->section('pageScripts') ?>
<script src="<?= base_url('smart/dist/js/statistics/flot/flot.bundle.js') ?>"></script>
<script>
$(document).ready(function() {
    // Event handler untuk input tahun
    $('#cari-tahun').on('keypress', function(e) {
        if (e.which == 13) { // Enter key
            var tahun = $(this).val();
            
            if (tahun.length == 4 && $.isNumeric(tahun)) {
                $.ajax({
                    url: '<?= base_url('dashboard/cabang/setTahun') ?>',
                    type: 'POST',
                    data: {
                        tahun: tahun
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (response.status == 'success') {
                            // Reload halaman untuk update data
                            location.reload();
                        } else {
                            alert(response.message);
                        }
                    },
                    error: function() {
                        alert('Terjadi kesalahan sistem');
                    }
                });
            } else {
                alert('Format tahun tidak valid. Gunakan format 4 digit (contoh: 2025)');
            }
        }
    });
    
    // Hanya allow input angka
    $('#cari-tahun').on('input', function() {
        this.value = this.value.replace(/[^0-9]/g, '');
    });

    // Data bulanan dari PHP
    var dataBulanan = <?= json_encode($data_bulanan) ?>;
    
    // Persiapan data untuk Flot
    var dataKegiatan = [];
    var dataCalonNasabah = [];
    var dataClosingNasabah = [];
    var labelBulan = ['', 'Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Ags', 'Sep', 'Okt', 'Nov', 'Des'];
    
    // Format data untuk Flot
    for (var i = 0; i < dataBulanan.length; i++) {
        var bulan = dataBulanan[i].bulan;
        dataKegiatan.push([bulan, dataBulanan[i].kegiatan_promosi]);
        dataCalonNasabah.push([bulan, dataBulanan[i].calon_nasabah]);
        dataClosingNasabah.push([bulan, dataBulanan[i].closing_nasabah]);
    }

    // Konfigurasi chart
    var chartData = [
        {
            data: dataKegiatan,
            label: "Kegiatan Promosi",
            bars: {
                show: true,
                barWidth: 0.6,
                align: "center"
            },
            color: "#8456c4"
        },
        {
            data: dataCalonNasabah,
            label: "Calon Nasabah",
            lines: {
                show: true,
                lineWidth: 3
            },
            points: {
                show: true,
                radius: 4
            },
            color: "#e2a851"
        },
        {
            data: dataClosingNasabah,
            label: "Menjadi Nasabah",
            lines: {
                show: true,
                lineWidth: 3
            },
            points: {
                show: true,
                radius: 4
            },
            color: "#08d3bf"
        }
    ];

    var chartOptions = {
        series: {
            shadowSize: 0
        },
        xaxis: {
            min: 0.5,
            max: 12.5,
            ticks: [
                [1, "Jan"], [2, "Feb"], [3, "Mar"], [4, "Apr"],
                [5, "Mei"], [6, "Jun"], [7, "Jul"], [8, "Ags"],
                [9, "Sep"], [10, "Okt"], [11, "Nov"], [12, "Des"]
            ],
            tickColor: "rgba(0,0,0,0.15)"
        },
        yaxis: {
            min: 0,
            tickColor: "rgba(0,0,0,0.15)"
        },
        grid: {
            borderWidth: 1,
            borderColor: "rgba(0,0,0,0.15)",
            hoverable: true,
            clickable: true
        },
        legend: {
            show: true,
            position: "ne",
            backgroundColor: "rgba(255,255,255,0.85)"
        },
        tooltip: true,
        tooltipOpts: {
            content: function(label, xval, yval) {
                return "<strong>" + label + "</strong><br>" + 
                       labelBulan[xval] + ": " + yval;
            }
        }
    };

    // Render chart
    var plot = $.plot("#flot-toggles", chartData, chartOptions);

    // Toggle chart series berdasarkan checkbox
    $("#js-checkbox-toggles input").on("change", function() {
        var seriesIndex = parseInt($(this).attr('name').split('-')[1]);
        var series = plot.getData()[seriesIndex];
        
        if ($(this).is(':checked')) {
            series.lines.show = seriesIndex > 0;
            series.points.show = seriesIndex > 0;
            series.bars.show = seriesIndex === 0;
        } else {
            series.lines.show = false;
            series.points.show = false;
            series.bars.show = false;
        }
        
        plot.setData(plot.getData());
        plot.draw();
    });

    // Data jenis promosi dari PHP untuk pie chart
    var dataJenisPromosiPie = <?= json_encode($data_jenis_promosi_pie) ?>;
    
    // Debug: check data dari PHP
    console.log('Raw data from PHP:', dataJenisPromosiPie);
    
    // Validasi data
    if (!dataJenisPromosiPie || !Array.isArray(dataJenisPromosiPie)) {
        console.error('Data jenis promosi tidak valid atau kosong');
        dataJenisPromosiPie = [];
    }
    
    // Prepare data untuk pie chart
    var pieData = [];
    var colors = ["#8456c4", "#e2a851", "#08d3bf", "#dc3545", "#28a745", "#ffc107", "#17a2b8", "#6f42c1", "#fd7e14", "#20c997"];
    
    for (var i = 0; i < dataJenisPromosiPie.length; i++) {
        var item = dataJenisPromosiPie[i];
        
        // Validasi setiap item
        if (item && typeof item === 'object') {
            var jenisPromosi = item.jenis_promosi || 'Jenis Promosi ' + (i + 1);
            var proporsiPie = parseFloat(item.proporsi_pie) || 0;
            var jumlahClosing = parseInt(item.jumlah_closing) || 0;
            
            // Pastikan data valid sebelum push
            if (jumlahClosing > 0) {
                pieData.push({
                    label: jenisPromosi + " (" + proporsiPie + "%)",
                    data: jumlahClosing,
                    color: colors[i % colors.length],
                    dataIndex: i  // Tambahkan index untuk referensi
                });
                console.log('Added pie data:', {
                    index: i,
                    label: jenisPromosi + " (" + proporsiPie + "%)",
                    data: jumlahClosing,
                    originalItem: item
                });
            } else {
                console.warn('Skipping item with zero closing at index', i, ':', item);
            }
        } else {
            console.warn('Invalid item at index', i, ':', item);
        }
    }
    
    console.log('Processed pie data:', pieData);

    // Render pie chart
    if (pieData.length > 0) {
        console.log('Data pie chart:', dataJenisPromosiPie); // Debug
        
        var pieOptions = {
            series: {
                pie: {
                    show: true,
                    radius: 1,
                    label: {
                        show: true,
                        radius: 2/3,
                        formatter: function(label, series) {
                            console.log('Label formatter called:', {label: label, series: series}); // Debug
                            
                            // Cari index dari label
                            var index = -1;
                            for (var i = 0; i < pieData.length; i++) {
                                if (pieData[i].label === label) {
                                    index = i;
                                    break;
                                }
                            }
                            
                            console.log('Found index:', index); // Debug
                            
                            if (index >= 0 && index < dataJenisPromosiPie.length && dataJenisPromosiPie[index]) {
                                var item = dataJenisPromosiPie[index];
                                var proporsi = item.proporsi_pie || '0';
                                return '<div style="font-size:11px; text-align:center; padding:2px; color:white; font-weight:bold;">' + 
                                       proporsi + '%</div>';
                            } else {
                                // Fallback: ambil persentase dari label
                                var match = label.match(/\((\d+(?:\.\d+)?)%\)/);
                                var percentage = match ? match[1] : '0';
                                return '<div style="font-size:11px; text-align:center; padding:2px; color:white; font-weight:bold;">' + 
                                       percentage + '%</div>';
                            }
                        },
                        background: {
                            opacity: 0.8
                        }
                    }
                }
            },
            legend: {
                show: true,
                position: "right",
                margin: [0, -50]
            },
            grid: {
                clickable: true,
                hoverable: true
            },
            // Matikan tooltip default agar tidak konflik
            tooltip: false
        };

        var pieChart = $.plot("#jenis-promosi-pie", pieData, pieOptions);
        
        console.log('Pie chart created:', pieChart); // Debug

        // Handle click event pada pie chart
        $("#jenis-promosi-pie").off('plotclick').on('plotclick', function (event, pos, obj) {
            console.log('Pie chart clicked!', obj); // Debug
            console.log('Available data:', dataJenisPromosiPie); // Debug
            
            if (obj && obj.series) {
                console.log('Series index:', obj.seriesIndex); // Debug
                console.log('Pie data length:', pieData.length); // Debug
                console.log('Original data length:', dataJenisPromosiPie.length); // Debug
                
                // Ambil item dari pieData yang diklik
                var clickedPieData = pieData[obj.seriesIndex];
                console.log('Clicked pie data:', clickedPieData); // Debug
                
                if (clickedPieData && clickedPieData.dataIndex !== undefined) {
                    // Gunakan dataIndex yang sudah kita simpan
                    var originalIndex = clickedPieData.dataIndex;
                    var item = dataJenisPromosiPie[originalIndex];
                    console.log('Original index:', originalIndex, 'Selected item:', item); // Debug
                    
                    // Validasi item data
                    if (item && typeof item === 'object') {
                        // Hapus alert sebelumnya jika ada
                        $('#pie-chart-info').remove();
                        
                        // Pastikan semua field ada, jika tidak beri default value
                        var jenisPromosi = item.jenis_promosi || 'Tidak diketahui';
                        var proporsiPie = item.proporsi_pie || '0';
                        var jumlahClosing = item.jumlah_closing || '0';
                        var totalCalon = item.total_calon || '0';
                        var persentaseKonversi = item.persentase_konversi || '0';
                        
                        // Buat tooltip custom saat diklik
                        var clickInfo = '<div id="pie-chart-info" class="alert alert-primary alert-dismissible fade show" style="position: absolute; top: 10px; left: 10px; z-index: 9999; max-width: 280px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">' +
                            '<button type="button" class="close" onclick="$(\'#pie-chart-info\').remove()" aria-label="Close">' +
                            '<span aria-hidden="true">&times;</span>' +
                            '</button>' +
                            '<div class="d-flex align-items-center mb-2">' +
                            '<i class="fa fa-chart-pie text-primary mr-2"></i>' +
                            '<h6 class="mb-0">Detail Jenis Promosi</h6>' +
                            '</div>' +
                            '<hr class="my-2">' +
                            '<h6 class="text-primary">' + jenisPromosi + '</h6>' +
                            '<div class="small">' +
                            '<div class="row mb-1">' +
                            '<div class="col-6">📊 Proporsi:</div>' +
                            '<div class="col-6 font-weight-bold">' + proporsiPie + '%</div>' +
                            '</div>' +
                            '<div class="row mb-1">' +
                            '<div class="col-6">✅ Closing:</div>' +
                            '<div class="col-6 font-weight-bold">' + jumlahClosing + ' nasabah</div>' +
                            '</div>' +
                            '<div class="row mb-1">' +
                            '<div class="col-6">👥 Total Calon:</div>' +
                            '<div class="col-6 font-weight-bold">' + totalCalon + ' calon</div>' +
                            '</div>' +
                            '<div class="row">' +
                            '<div class="col-6">📈 Konversi:</div>' +
                            '<div class="col-6 font-weight-bold text-success">' + persentaseKonversi + '%</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                        
                        // Tambahkan alert ke panel
                        $('#panel-jprom .panel-content').prepend(clickInfo);
                        
                        // Auto close setelah 8 detik
                        setTimeout(function() {
                            $('#pie-chart-info').fadeOut(function() {
                                $(this).remove();
                            });
                        }, 8000);
                    } else {
                        console.error('Item data is invalid:', item);
                        alert('Data tidak valid untuk item yang diklik');
                    }
                } else {
                    // Fallback: coba ambil dari obj.seriesIndex langsung
                    console.warn('Using fallback method for index:', obj.seriesIndex);
                    
                    if (obj.seriesIndex >= 0 && obj.seriesIndex < dataJenisPromosiPie.length) {
                        var item = dataJenisPromosiPie[obj.seriesIndex];
                        if (item && typeof item === 'object') {
                            $('#pie-chart-info').remove();
                            
                            var jenisPromosi = item.jenis_promosi || 'Tidak diketahui';
                            var proporsiPie = item.proporsi_pie || '0';
                            var jumlahClosing = item.jumlah_closing || '0';
                            var totalCalon = item.total_calon || '0';
                            var persentaseKonversi = item.persentase_konversi || '0';
                            
                            var clickInfo = '<div id="pie-chart-info" class="alert alert-warning alert-dismissible fade show" style="position: absolute; top: 10px; left: 10px; z-index: 9999; max-width: 280px;">' +
                                '<button type="button" class="close" onclick="$(\'#pie-chart-info\').remove()">' +
                                '<span aria-hidden="true">&times;</span>' +
                                '</button>' +
                                '<h6 class="text-warning">📊 ' + jenisPromosi + '</h6>' +
                                '<small>' +
                                'Proporsi: ' + proporsiPie + '%<br>' +
                                'Closing: ' + jumlahClosing + ' nasabah<br>' +
                                'Total Calon: ' + totalCalon + ' calon<br>' +
                                'Konversi: ' + persentaseKonversi + '%' +
                                '</small>' +
                                '</div>';
                            
                            $('#panel-jprom .panel-content').prepend(clickInfo);
                            
                            setTimeout(function() {
                                $('#pie-chart-info').fadeOut(function() {
                                    $(this).remove();
                                });
                            }, 5000);
                        }
                    } else {
                        console.error('Invalid series index:', obj.seriesIndex, 'Data length:', dataJenisPromosiPie.length);
                        alert('Data tidak dapat ditampilkan. Index: ' + obj.seriesIndex);
                    }
                }
            } else {
                console.log('No valid object clicked');
            }
        });

        // Handle hover untuk cursor pointer
        $("#jenis-promosi-pie").off('plothover').on('plothover', function (event, pos, item) {
            if (item) {
                $(this).css('cursor', 'pointer');
            } else {
                $(this).css('cursor', 'default');
            }
        });

        // Set initial cursor
        $("#jenis-promosi-pie").css('cursor', 'pointer');
        
        console.log('Event handlers attached'); // Debug
        
    } else {
        $("#jenis-promosi-pie").html('<div class="text-center p-4"><h5 class="text-muted">Belum ada data untuk tahun ini</h5></div>');
    }

    // Populate tabel efektivitas
    var dataJenisPromosi = <?= json_encode($data_jenis_promosi) ?>;
    console.log('Data jenis promosi untuk tabel:', dataJenisPromosi);
    
    if (dataJenisPromosi && dataJenisPromosi.length > 0) {
        // Hitung skor efektivitas untuk setiap jenis promosi
        var dataWithEfektivitas = dataJenisPromosi.map(function(item) {
            var konversi = parseFloat(item.persentase_konversi) || 0;
            var jumlahKegiatan = parseInt(item.total_kegiatan) || 1;
            
            // Skor efektivitas: tinggi konversi dengan sedikit kegiatan
            var skorEfektivitas = jumlahKegiatan > 0 ? (konversi / jumlahKegiatan) * 10 : 0;
            
            return {
                jenis_promosi: item.jenis_promosi,
                total_kegiatan: item.total_kegiatan,
                total_calon: item.total_calon,
                total_closing: item.total_closing,
                persentase_konversi: item.persentase_konversi,
                skor_efektivitas: skorEfektivitas.toFixed(2)
            };
        });
        
        // Sort berdasarkan % konversi tertinggi
        dataWithEfektivitas.sort(function(a, b) {
            return parseFloat(b.persentase_konversi) - parseFloat(a.persentase_konversi);
        });
        
        // Cari yang paling efektif (skor efektivitas tertinggi)
        var maxEfektivitas = Math.max.apply(Math, dataWithEfektivitas.map(function(item) {
            return parseFloat(item.skor_efektivitas);
        }));
        
        // Cari yang paling tidak efektif (skor efektivitas terendah)
        var minEfektivitas = Math.min.apply(Math, dataWithEfektivitas.map(function(item) {
            return parseFloat(item.skor_efektivitas);
        }));
        
        var tableRows = '';
        dataWithEfektivitas.forEach(function(item, index) {
            var isEfektif = parseFloat(item.skor_efektivitas) === maxEfektivitas;
            var isTidakEfektif = parseFloat(item.skor_efektivitas) === minEfektivitas && dataWithEfektivitas.length > 1;
            
            var rowClass = '';
            if (isEfektif) {
                rowClass = 'table-success';
            } else if (isTidakEfektif) {
                rowClass = 'table-danger';
            }
            
            var efektivitasBadge = '';
            if (isEfektif) {
                efektivitasBadge = '<span class="badge badge-success">★ ' + item.skor_efektivitas + '</span>';
            } else if (isTidakEfektif) {
                efektivitasBadge = '<span class="badge badge-danger">⚠ ' + item.skor_efektivitas + '</span>';
            } else {
                efektivitasBadge = item.skor_efektivitas;
            }
            
            var labelBadge = '';
            if (isEfektif) {
                labelBadge = ' <span class="badge badge-sm badge-success ml-1">EFEKTIF</span>';
            } else if (isTidakEfektif) {
                labelBadge = ' <span class="badge badge-sm badge-danger ml-1">KURANG EFEKTIF</span>';
            }
            
            tableRows += '<tr class="' + rowClass + '">' +
                '<td><strong>' + item.jenis_promosi + '</strong>' + labelBadge + '</td>' +
                '<td class="text-center">' + item.total_kegiatan + '</td>' +
                '<td class="text-center">' + item.total_calon + '</td>' +
                '<td class="text-center"><strong>' + item.total_closing + '</strong></td>' +
                '<td class="text-center"><span class="badge badge-primary">' + item.persentase_konversi + '%</span></td>' +
                '<td class="text-center">' + efektivitasBadge + '</td>' +
                '</tr>';
        });
        
        $('#efektivitas-tbody').html(tableRows);
        
        console.log('Tabel efektivitas populated with', dataWithEfektivitas.length, 'items');
        console.log('Most effective:', dataWithEfektivitas.find(function(item) {
            return parseFloat(item.skor_efektivitas) === maxEfektivitas;
        }));
        
    } else {
        $('#efektivitas-tbody').html('<tr><td colspan="6" class="text-center text-muted"><i>Tidak ada data untuk ditampilkan</i></td></tr>');
    }

    // Data produk diminati untuk horizontal bar chart
    var dataProdukDiminati = <?= json_encode($data_produk_diminati) ?>;
    console.log('Data produk diminati:', dataProdukDiminati);
    
    if (dataProdukDiminati && dataProdukDiminati.length > 0) {
        // Prepare data untuk horizontal bar chart
        var produkData = [];
        var produkLabels = [];
        var colors = ["#f39c12", "#e67e22", "#d35400", "#f1c40f", "#ff9f43", "#ff6348", "#ff4757", "#ffa502", "#ff7675", "#fd79a8"];
        
        // Reverse array agar tertinggi di atas
        var reversedData = dataProdukDiminati.slice().reverse();
        
        for (var i = 0; i < reversedData.length; i++) {
            var item = reversedData[i];
            var konversi = parseFloat(item.persentase_konversi) || 0;
            
            produkData.push([konversi, i]); // [value, y-position]
            produkLabels.push([i, item.nama_produk]); // [y-position, label]
        }
        
        var horizontalBarData = [{
            data: produkData,
            color: colors[0],
            bars: {
                show: true,
                horizontal: true,
                barWidth: 0.6,
                align: "center"
            }
        }];
        
        var horizontalBarOptions = {
            series: {
                shadowSize: 0
            },
            xaxis: {
                min: 0,
                tickFormatter: function(val) {
                    return val + "%";
                },
                tickColor: "rgba(0,0,0,0.15)"
            },
            yaxis: {
                ticks: produkLabels,
                tickColor: "rgba(0,0,0,0.15)"
            },
            grid: {
                borderWidth: 1,
                borderColor: "rgba(0,0,0,0.15)",
                hoverable: true
            },
            tooltip: true,
            tooltipOpts: {
                content: function(label, xval, yval, flotItem) {
                    var originalIndex = dataProdukDiminati.length - 1 - yval;
                    var item = dataProdukDiminati[originalIndex];
                    return "<strong>" + item.nama_produk + "</strong><br>" + 
                           "Konversi: " + item.persentase_konversi + "%<br>" +
                           "Total Calon: " + item.total_calon + " calon<br>" +
                           "Total Closing: " + item.total_closing + " nasabah";
                }
            }
        };
        
        // Render horizontal bar chart
        $.plot("#produk-horizontal-bar", horizontalBarData, horizontalBarOptions);
        
        console.log('Horizontal bar chart rendered with', dataProdukDiminati.length, 'products');
        
    } else {
        $("#produk-horizontal-bar").html('<div class="text-center p-4"><h5 class="text-muted">Belum ada data produk untuk tahun ini</h5><p class="text-muted small">Minimal perlu 3 calon nasabah per produk</p></div>');
    }

    // ========== KATEGORI LOKASI PIE CHART ==========
    // Data kategori lokasi untuk pie chart
    var dataKategoriLokasiPie = <?= json_encode($data_kategori_lokasi_pie) ?>;
    console.log('Data kategori lokasi pie:', dataKategoriLokasiPie);
    
    if (dataKategoriLokasiPie && dataKategoriLokasiPie.length > 0) {
        // Prepare data untuk pie chart Flot.js
        var pieDataLokasi = [];
        var colorsLokasi = ["#28a745", "#dc3545", "#ffc107", "#17a2b8", "#6f42c1", "#fd7e14", "#20c997", "#6c757d", "#f8f9fa", "#343a40"];
        
        for (var i = 0; i < dataKategoriLokasiPie.length; i++) {
            var item = dataKategoriLokasiPie[i];
            pieDataLokasi.push({
                label: item.kategori_lokasi + " (" + item.proporsi_pie + "%)",
                data: parseFloat(item.proporsi_pie),
                color: colorsLokasi[i % colorsLokasi.length]
            });
        }
        
        var pieOptionsLokasi = {
            series: {
                pie: {
                    show: true,
                    radius: 1,
                    label: {
                        show: true,
                        radius: 2/3,
                        formatter: function(label, series) {
                            return '<div style="font-size:8pt; text-align:center; padding:2px; color:white;">' + 
                                   Math.round(series.percent) + '%</div>';
                        },
                        threshold: 0.1
                    }
                }
            },
            legend: {
                show: true,
                position: "ne"
            },
            grid: {
                hoverable: true,
                clickable: true
            }
        };
        
        // Render pie chart untuk kategori lokasi
        $.plot("#lokasi-pie", pieDataLokasi, pieOptionsLokasi);
        
        console.log('Lokasi pie chart rendered with', dataKategoriLokasiPie.length, 'categories');
        
        // Handle click events untuk pie chart kategori lokasi
        $("#lokasi-pie").off('plotclick').on('plotclick', function (event, pos, obj) {
            console.log('Lokasi pie chart clicked:', obj); // Debug
            
            if (obj) {
                console.log('Series index:', obj.seriesIndex, 'Data length:', dataKategoriLokasiPie.length);
                
                // Cari data berdasarkan label yang cocok
                var clickedLabel = obj.series.label;
                console.log('Clicked label:', clickedLabel);
                
                // Extract kategori lokasi dari label (hapus bagian persentase)
                var kategoriMatch = clickedLabel.match(/^(.+?)\s*\(/);
                var kategoriLokasi = kategoriMatch ? kategoriMatch[1].trim() : clickedLabel;
                console.log('Extracted kategori:', kategoriLokasi);
                
                // Cari item berdasarkan kategori lokasi
                var item = dataKategoriLokasiPie.find(function(data) {
                    return data.kategori_lokasi === kategoriLokasi;
                });
                
                if (item && typeof item === 'object') {
                    console.log('Found item:', item);
                    
                    // Remove existing info popup
                    $('#lokasi-pie-chart-info').remove();
                    
                    var kategoriLokasiName = item.kategori_lokasi || 'Tidak diketahui';
                    var proporsiPie = item.proporsi_pie || '0';
                    var jumlahClosing = item.jumlah_closing || '0';
                    var totalCalon = item.total_calon || '0';
                    var persentaseKonversi = item.persentase_konversi || '0';
                    
                    var clickInfo = '<div id="lokasi-pie-chart-info" class="alert alert-info alert-dismissible fade show" style="position: absolute; top: 10px; left: 10px; z-index: 9999; max-width: 280px;">' +
                        '<button type="button" class="close" onclick="$(\'#lokasi-pie-chart-info\').remove()">' +
                        '<span aria-hidden="true">&times;</span>' +
                        '</button>' +
                        '<h6 class="text-info">📍 ' + kategoriLokasiName + '</h6>' +
                        '<small>' +
                        'Proporsi: ' + proporsiPie + '%<br>' +
                        'Closing: ' + jumlahClosing + ' nasabah<br>' +
                        'Total Calon: ' + totalCalon + ' calon<br>' +
                        'Konversi: ' + persentaseKonversi + '%' +
                        '</small>' +
                        '</div>';
                    
                    $('#panel-lokasi .panel-content').prepend(clickInfo);
                    
                    setTimeout(function() {
                        $('#lokasi-pie-chart-info').fadeOut(function() {
                            $(this).remove();
                        });
                    }, 8000);
                } else {
                    console.error('Item data is invalid:', item);
                    alert('Data tidak valid untuk item yang diklik');
                }
            } else {
                console.log('No valid object clicked');
            }
        });

        // Handle hover untuk cursor pointer
        $("#lokasi-pie").off('plothover').on('plothover', function (event, pos, item) {
            if (item) {
                $(this).css('cursor', 'pointer');
            } else {
                $(this).css('cursor', 'default');
            }
        });

        // Set initial cursor
        $("#lokasi-pie").css('cursor', 'pointer');
        
    } else {
        $("#lokasi-pie").html('<div class="text-center p-4"><h5 class="text-muted">Belum ada data untuk tahun ini</h5></div>');
    }

    // Populate tabel efektivitas kategori lokasi
    var dataKategoriLokasi = <?= json_encode($data_kategori_lokasi) ?>;
    console.log('Data kategori lokasi untuk tabel:', dataKategoriLokasi);
    
    if (dataKategoriLokasi && dataKategoriLokasi.length > 0) {
        // Hitung skor efektivitas untuk setiap kategori lokasi
        var dataWithEfektivitasLokasi = dataKategoriLokasi.map(function(item) {
            var konversi = parseFloat(item.persentase_konversi) || 0;
            var jumlahKegiatan = parseInt(item.total_kegiatan) || 1;
            
            // Skor efektivitas: tinggi konversi dengan sedikit kegiatan
            var skorEfektivitas = jumlahKegiatan > 0 ? (konversi / jumlahKegiatan) * 10 : 0;
            
            return {
                kategori_lokasi: item.kategori_lokasi,
                total_kegiatan: item.total_kegiatan,
                total_calon: item.total_calon,
                total_closing: item.total_closing,
                persentase_konversi: item.persentase_konversi,
                skor_efektivitas: skorEfektivitas.toFixed(2)
            };
        });
        
        // Sort berdasarkan % konversi tertinggi
        dataWithEfektivitasLokasi.sort(function(a, b) {
            return parseFloat(b.persentase_konversi) - parseFloat(a.persentase_konversi);
        });
        
        // Cari yang paling efektif (skor efektivitas tertinggi)
        var maxEfektivitasLokasi = Math.max.apply(Math, dataWithEfektivitasLokasi.map(function(item) {
            return parseFloat(item.skor_efektivitas);
        }));
        
        // Cari yang paling tidak efektif (skor efektivitas terendah)
        var minEfektivitasLokasi = Math.min.apply(Math, dataWithEfektivitasLokasi.map(function(item) {
            return parseFloat(item.skor_efektivitas);
        }));
        
        var tableRowsLokasi = '';
        dataWithEfektivitasLokasi.forEach(function(item, index) {
            var isEfektif = parseFloat(item.skor_efektivitas) === maxEfektivitasLokasi;
            var isTidakEfektif = parseFloat(item.skor_efektivitas) === minEfektivitasLokasi && dataWithEfektivitasLokasi.length > 1;
            
            var rowClass = '';
            if (isEfektif) {
                rowClass = 'table-success';
            } else if (isTidakEfektif) {
                rowClass = 'table-danger';
            }
            
            var efektivitasBadge = '';
            if (isEfektif) {
                efektivitasBadge = '<span class="badge badge-success">★ ' + item.skor_efektivitas + '</span>';
            } else if (isTidakEfektif) {
                efektivitasBadge = '<span class="badge badge-danger">⚠ ' + item.skor_efektivitas + '</span>';
            } else {
                efektivitasBadge = item.skor_efektivitas;
            }
            
            var labelBadge = '';
            if (isEfektif) {
                labelBadge = ' <span class="badge badge-sm badge-success ml-1">EFEKTIF</span>';
            } else if (isTidakEfektif) {
                labelBadge = ' <span class="badge badge-sm badge-danger ml-1">KURANG EFEKTIF</span>';
            }
            
            // Truncate category name to 20 characters
            var kategoriName = item.kategori_lokasi.length > 20 ? item.kategori_lokasi.substr(0, 20) + '...' : item.kategori_lokasi;
            
            tableRowsLokasi += '<tr class="' + rowClass + '">' +
                '<td><strong>' + kategoriName + '</strong>' + labelBadge + '</td>' +
                '<td class="text-center">' + item.total_kegiatan + '</td>' +
                '<td class="text-center">' + item.total_calon + '</td>' +
                '<td class="text-center"><strong>' + item.total_closing + '</strong></td>' +
                '<td class="text-center"><span class="badge badge-primary">' + item.persentase_konversi + '%</span></td>' +
                '<td class="text-center">' + efektivitasBadge + '</td>' +
                '</tr>';
        });
        
        $('#efektivitas-lokasi-table').html(tableRowsLokasi);
        
        console.log('Tabel efektivitas lokasi populated with', dataWithEfektivitasLokasi.length, 'items');
        console.log('Most effective location category:', dataWithEfektivitasLokasi.find(function(item) {
            return parseFloat(item.skor_efektivitas) === maxEfektivitasLokasi;
        }));
        
    } else {
        $('#efektivitas-lokasi-table').html('<tr><td colspan="6" class="text-center text-muted"><i>Tidak ada data untuk ditampilkan</i></td></tr>');
    }

    // ========== TOP 5 KARYAWAN EFEKTIF ==========
    var dataKaryawanEfektif = <?= json_encode($data_karyawan_efektif) ?>;
    console.log('Data karyawan efektif:', dataKaryawanEfektif);
    
    if (dataKaryawanEfektif && dataKaryawanEfektif.length > 0) {
        var tableRowsKaryawan = '';
        
        dataKaryawanEfektif.forEach(function(item, index) {
            
            // Foto karyawan dengan fallback
            var fotoKaryawan = item.foto_karyawan && item.foto_karyawan !== '' ? 
                '/files/avatar/' + item.foto_karyawan : 
                '/assets/img/demo/avatars/avatar-admin.png';
            
            // Nama karyawan (truncate jika terlalu panjang)
            var namaKaryawan = item.nama_karyawan.length > 15 ? 
                item.nama_karyawan.substr(0, 15) + '...' : 
                item.nama_karyawan;
            
            // NIP karyawan
            var nipKaryawan = item.nip_karyawan || '-';
            
            // Badge efektivitas
            var efektivitasBadge = '<span class="badge badge-secondary">' + item.skor_efektivitas + '</span>';
            
            // Row class untuk highlight - hanya peringkat 1
            var rowClass = '';
            if (index === 0) {
                rowClass = 'table-success';
            }
            
            tableRowsKaryawan += '<tr class="' + rowClass + '">' +
                '<td class="text-center" style="width: 60px;">' +
                    '<img src="' + fotoKaryawan + '" alt="' + item.nama_karyawan + '" ' +
                    'class="img-thumbnail rounded-circle" style="width: 40px; height: 40px; object-fit: cover;">' +
                '</td>' +
                '<td>' +
                    '<div class="d-flex flex-column">' +
                        '<strong>' + namaKaryawan + '</strong>' +
                        '<small class="text-muted">' + nipKaryawan + '</small>' +
                    '</div>' +
                '</td>' +
                '<td class="text-center">' + item.total_kegiatan + '</td>' +
                '<td class="text-center">' + item.total_calon + '</td>' +
                '<td class="text-center"><strong>' + item.total_closing + '</strong></td>' +
                '<td class="text-center"><span class="badge badge-primary">' + item.persentase_konversi + '%</span></td>' +
                '<td class="text-center">' + efektivitasBadge + '</td>' +
                '</tr>';
        });
        
        $('#karyawan-efektif-table').html(tableRowsKaryawan);
        
        console.log('Tabel karyawan efektif populated with', dataKaryawanEfektif.length, 'employees');
        
    } else {
        $('#karyawan-efektif-table').html('<tr><td colspan="7" class="text-center text-muted"><i>Belum ada data karyawan untuk tahun ini</i></td></tr>');
    }

});
</script>

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