

<?php $__env->startSection('content'); ?>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- STATS -->
<div class="grid grid-cols-4 gap-4 mb-6">

<div class="bg-blue-600 text-white p-5 rounded-xl shadow">
    <h3 class="text-lg">Users</h3>
    <h1 class="text-3xl font-bold"><?php echo e($users); ?></h1>
</div>

<div class="bg-green-600 text-white p-5 rounded-xl shadow">
    <h3>Devices</h3>
    <h1 class="text-3xl font-bold"><?php echo e($devices); ?></h1>
</div>

<div class="bg-purple-600 text-white p-5 rounded-xl shadow">
    <h3>Feeders</h3>
    <h1 class="text-3xl font-bold"><?php echo e($feeders); ?></h1>
</div>

<div class="bg-red-600 text-white p-5 rounded-xl shadow">
    <h3>Alerts</h3>
    <h1 class="text-3xl font-bold"><?php echo e($alerts); ?></h1>
</div>

</div>

<!-- CHARTS -->
<div class="grid grid-cols-2 gap-6 mb-6">

<div class="bg-white p-5 rounded-xl shadow">
    <h3 class="mb-3 font-bold">Voltage Trend</h3>
    <canvas id="voltageChart"></canvas>
</div>

<div class="bg-white p-5 rounded-xl shadow">
    <h3 class="mb-3 font-bold">Power Trend</h3>
    <canvas id="powerChart"></canvas>
</div>

</div>

<!-- RECENT LOGS -->
<div class="bg-white p-5 rounded-xl shadow">

<h3 class="font-bold mb-3">Recent Logs</h3>

<table class="w-full text-sm border">
<tr class="bg-gray-200">
    <th>ID</th>
    <th>Voltage</th>
    <th>Power</th>
    <th>Status</th>
    <th>Time</th>
</tr>

<?php $__currentLoopData = $logs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<tr>
    <td><?php echo e($row->id); ?></td>
    <td><?php echo e($row->voltage); ?></td>
    <td><?php echo e($row->power); ?></td>
    <td><?php echo e($row->status); ?></td>
    <td><?php echo e($row->recorded_at); ?></td>
</tr>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

</table>

</div>

<!-- CHART SCRIPT -->
<script>

const labels = <?php echo json_encode($time); ?>;
const voltage = <?php echo json_encode($voltage); ?>;
const power = <?php echo json_encode($power); ?>;

// Voltage Chart
new Chart(document.getElementById('voltageChart'), {
    type: 'line',
    data: {
        labels: labels,
        datasets: [{
            label: 'Voltage',
            data: voltage,
            borderWidth: 2,
            tension: 0.4
        }]
    }
});

// Power Chart
new Chart(document.getElementById('powerChart'), {
    type: 'bar',
    data: {
        labels: labels,
        datasets: [{
            label: 'Power',
            data: power,
            borderWidth: 1
        }]
    }
});

</script>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home2/jitrealx/public_html/amccms/resources/views/dashboard.blade.php ENDPATH**/ ?>