
<?php  include VFORM_PLUGIN_PATH."inc/admin/notification-bar.php"; ?>


<!-- data analytics -->
<?php  include VFORM_PLUGIN_PATH."inc/admin/show-analytics-dashboard.php"; ?>


<div class="css-18e3853-PageLayout--mobile-PageLayout--tablet-PageLayout--desktop">
        <main class="css-17sl3ck-PageLayout--mainStyle">
            <div>
                <!-- <div class="css-1dxorl-HistoryPage--mobile-HistoryPage--tablet"><span class="css-1131mgd-Text" data-zds="true">VPSUForm Analytics</span></div> -->
                <div class="css-1bt4ztp-HistoryPage--mobile-HistoryPage--tablet">
                    <div class="css-85pk7a-HistoryTabNavigation--navStyle">
                        <nav data-zds="true" class="css-14tgpsv-Tabs">
                            <div data-zds="true" class="css-uzkwfh-Tabs__primary">
                                
                                    <a aria-current="page" class="css-xh4twp-Tabs__item " data-zds="true" href="admin.php?page=vform_entries"><span data-text="[object Object]" data-zds="true" class="css-7zaj10-Tabs__itemText"><span class="css-mq6vhk-Text" data-zds="true">Entries</span></span></a>
                                        
                                        <a class="css-1uspe5b-Tabs__item active" data-zds="true" href="admin.php?page=vform_entries&amp;frm_action=analytics"><span data-zds="true" class="css-7zaj10-Tabs__itemText"><span class="css-mq6vhk-Text" data-zds="true">Analytics</span></span></a>
                                        
                            </div>
                            <div data-zds="true" class="css-1nu6yqo-Tabs__indicatorTrack">
                                <div data-type="default" data-zds="true" class="css-bcq1s5-Tabs__indicator" style="left: 0px; width: 126px;"></div>
                            </div>
                        </nav>
                    </div>
                </div>
                <div data-zds="true" class="css-xeniyz-Spacer-0-by-20"></div>
                <div>


                    <div class="css-1i7v3y3-TaskUsageTab--rootStyle">
                        <div class="css-1i65g83-TaskUsageTab--taskTrendStyle">
                                <span>
                                    <h3 class="css-lk1ene-Text" data-zds="true">Leads</h3><span class="css-howwmv-Text" data-zds="true">Past 30
                                    days</span>
                                </span>
                            <div class="graphmain">
                                <?php
                                    $table_name = $wpdb->prefix . 'vform_userinput';

                                    // Get data for the past 30 days
                                    $results = $wpdb->get_results("
                                    SELECT DATE_FORMAT(STR_TO_DATE(currentdate, '%M %d, %Y, %h:%i %p'), '%Y-%m-%d') AS lead_date, 
                                           COUNT(*) AS lead_count
                                    FROM $table_name
                                    WHERE STR_TO_DATE(currentdate, '%M %d, %Y, %h:%i %p') >= CURDATE() - INTERVAL 30 DAY
                                    GROUP BY lead_date
                                    ORDER BY lead_date ASC
                                ");
                                

                                    // Format results into an array
                                    $formatted_data = [];
                                    foreach ($results as $row) {
                                        $formatted_data[$row->lead_date] = $row->lead_count;
                                    }

                                    // Fill in missing days with zero leads
                                    $dates = [];
                                    for ($i = 29; $i >= 0; $i--) {
                                        $date = date('Y-m-d', strtotime("-$i days"));
                                        $dates[] = [
                                            'date' => $date,
                                            'leads' => $formatted_data[$date] ?? 0
                                        ];
                                    }
                                ?>
                                <div id="bar-chart-container">
                                    <div id="bar-chart">
                                        <?php foreach ($dates as $item): ?>
                                            <div class="bar" style="height: <?= $item['leads'] * 10 ?>px;" title="<?= $item['date'] ?>: <?= $item['leads'] ?> leads">
                                                <span class="bar-count"><?= $item['leads'] ?></span>
                                                <span class="bar-label"><?= date('M d', strtotime($item['date'])) ?></span>
                                            </div>
                                        <?php endforeach; ?>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                    </div>



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

<?php
// Get all browser strings
$results = $wpdb->get_results("
    SELECT browser FROM $table_name 
     WHERE STR_TO_DATE(currentdate, '%M %d, %Y, %h:%i %p') >= CURDATE() - INTERVAL 30 DAY
");

// Function to detect browser name from user agent
function detect_browser($user_agent) {
    if (stripos($user_agent, 'Chrome') !== false && stripos($user_agent, 'Edge') === false) return 'Chrome';
    if (stripos($user_agent, 'Firefox') !== false) return 'Firefox';
    if (stripos($user_agent, 'Safari') !== false && stripos($user_agent, 'Chrome') === false) return 'Safari';
    if (stripos($user_agent, 'Edge') !== false) return 'Edge';
    if (stripos($user_agent, 'OPR') !== false || stripos($user_agent, 'Opera') !== false) return 'Opera';
    return 'Other';
}

// Count browsers
$browser_counts = [];
foreach ($results as $row) {
    $browser_name = detect_browser($row->browser);
    if (!isset($browser_counts[$browser_name])) {
        $browser_counts[$browser_name] = 0;
    }
    $browser_counts[$browser_name]++;
}

// Prepare data for Chart.js
$browser_labels = json_encode(array_keys($browser_counts));
$browser_data = json_encode(array_values($browser_counts));
?>

<!-- Load Chart.js -->
 
<script src="<?php echo VFORM_PLUGIN_URL."assets/js/chart.js"; ?>"></script>



<div style="
    width: 98%;
    display: block;
    padding: 10px;">
<div style="
    width: 44%;
    display: inline-block;
    margin: 20px;
    padding: 20px;    
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    ">
    <h3 style="margin-bottom:0;">Browser Analytics</h3>
    <small>Past 30 days</small>
    <canvas id="browserChart" style="max-width:400px; margin:auto;"></canvas>
</div>
<div style="
    width: 42%;
    display: inline-block;
    margin: 20px;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);">
    <h3 style="margin-bottom:0;">Device Analytics</h3>
    <small>Past 30 days</small>
    <canvas id="deviceChart" style="max-width:400px; margin:auto;"></canvas>
</div>
</div>

<script>
const ctx = document.getElementById('browserChart').getContext('2d');
new Chart(ctx, {
    type: 'pie',
    data: {
        labels: <?php echo $browser_labels; ?>,
        datasets: [{
            data: <?php echo $browser_data; ?>,
            backgroundColor: ['#4285F4', '#FF5733', '#FFC107', '#28A745', '#6610f2', '#6c757d']
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { position: 'bottom' }
        }
    }
});
</script>


<!-- desktop mobile chart -->
<?php

// Detect device type from user agent
function detect_device($user_agent) {
    if (preg_match('/mobile/i', $user_agent) && !preg_match('/tablet/i', $user_agent)) return 'Mobile';
    if (preg_match('/tablet|ipad/i', $user_agent)) return 'Tablet';
    return 'Desktop';
}

// Count devices
$device_counts = [];
foreach ($results as $row) {
    $device_type = detect_device($row->browser);
    $device_counts[$device_type] = ($device_counts[$device_type] ?? 0) + 1;
}

// Prepare for Chart.js
$device_labels = json_encode(array_keys($device_counts));
$device_data = json_encode(array_values($device_counts));
?>
<script>
new Chart(document.getElementById('deviceChart'), {
    type: 'pie',
    data: {
        labels: <?php echo $device_labels; ?>,
        datasets: [{
            data: <?php echo $device_data; ?>,
            backgroundColor: ['#17a2b8', '#ffc107', '#28a745']
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { position: 'bottom' } }
    }
});
</script>


