<?php $__env->startSection('title', 'Dashboard'); ?>
<?php $__env->startSection('page-title', 'Dashboard'); ?>

<?php $__env->startSection('content'); ?>
<div class="page-header">
    <h1>Device Status</h1>
    <p>Real-time overview of your ESP32 device</p>
</div>


<div class="row g-4 mb-4">

    
    <div class="col-12 col-sm-6 col-xl-4">
        <div class="stat-card">
            <div class="stat-icon" style="background:rgba(13,110,253,0.15);">
                <i class="bi bi-clock-history" style="color:#0d6efd;"></i>
            </div>
            <div class="stat-value"><?php echo e($device->last_seen_human); ?></div>
            <div class="stat-label">Last Seen</div>
            <?php if($device->last_seen): ?>
                <div class="mt-1" style="font-size:0.72rem;color:#8b949e;">
                    <?php echo e($device->last_seen->format('d M Y, H:i:s')); ?>

                </div>
            <?php endif; ?>
        </div>
    </div>

    
    <div class="col-12 col-sm-6 col-xl-4">
        <div class="stat-card">
            <div class="stat-icon" style="background:rgba(32,201,151,0.15);">
                <i class="bi bi-hdd-network-fill" style="color:#20c997;"></i>
            </div>
            <div class="stat-value"><?php echo e($device->current_ip ?? '—'); ?></div>
            <div class="stat-label">Current IP Address</div>
        </div>
    </div>

    
    <div class="col-12 col-sm-6 col-xl-4">
        <div class="stat-card">
            <div class="stat-icon" style="background:rgba(255,193,7,0.15);">
                <i class="bi bi-wifi" style="color:#ffc107;"></i>
            </div>
            <div class="stat-value">
                <?php if($device->wifi_strength !== null): ?>
                    <?php echo e($device->wifi_strength); ?> dBm
                <?php else: ?>
                    —
                <?php endif; ?>
            </div>
            <div class="stat-label">WiFi Signal Strength</div>
            <?php if($device->wifi_percent !== null): ?>
                <div class="mt-2">
                    <div class="progress" style="height:4px;border-radius:4px;background:rgba(255,255,255,0.1);">
                        <div class="progress-bar"
                             style="width:<?php echo e($device->wifi_percent); ?>%;
                                    background:<?php echo e($device->wifi_percent > 60 ? '#20c997' : ($device->wifi_percent > 30 ? '#ffc107' : '#dc3545')); ?>;
                                    border-radius:4px;">
                        </div>
                    </div>
                    <div style="font-size:0.72rem;color:#8b949e;margin-top:3px;"><?php echo e($device->wifi_percent); ?>% signal quality</div>
                </div>
            <?php endif; ?>
        </div>
    </div>

    
    <div class="col-12 col-sm-6 col-xl-4">
        <div class="stat-card">
            <div class="stat-icon" style="background:rgba(102,16,242,0.15);">
                <i class="bi bi-cpu-fill" style="color:#6610f2;"></i>
            </div>
            <div class="stat-value"><?php echo e($device->firmware_version ?? '—'); ?></div>
            <div class="stat-label">Firmware Version</div>
        </div>
    </div>

    
    <div class="col-12 col-sm-6 col-xl-4">
        <div class="stat-card">
            <div class="stat-icon" style="background:rgba(253,126,20,0.15);">
                <i class="bi bi-arrow-repeat" style="color:#fd7e14;"></i>
            </div>
            <div class="stat-value"><?php echo e($device->refresh); ?>s</div>
            <div class="stat-label">Refresh Interval</div>
        </div>
    </div>

    
    <div class="col-12 col-sm-6 col-xl-4">
        <div class="stat-card">
            <div class="stat-icon" style="background:<?php echo e($device->last_seen && $device->last_seen->diffInMinutes(now()) < 5 ? 'rgba(40,167,69,0.15)' : 'rgba(108,117,125,0.15)'); ?>;">
                <i class="bi bi-activity"
                   style="color:<?php echo e($device->last_seen && $device->last_seen->diffInMinutes(now()) < 5 ? '#28a745' : '#6c757d'); ?>;"></i>
            </div>
            <?php
                $online = $device->last_seen && $device->last_seen->diffInMinutes(now()) < 5;
            ?>
            <div class="stat-value d-flex align-items-center gap-2">
                <span class="status-dot <?php echo e($online ? 'status-online' : 'status-offline'); ?>"></span>
                <?php echo e($online ? 'Online' : 'Offline'); ?>

            </div>
            <div class="stat-label">Device Status</div>
        </div>
    </div>

</div>


<div class="glass-card">
    <div class="d-flex align-items-center justify-content-between mb-3">
        <div>
            <h5 class="mb-1 fw-700">API Endpoint</h5>
            <p class="mb-0" style="font-size:0.82rem;color:#8b949e;">Configure your ESP32 to poll this URL</p>
        </div>
        <i class="bi bi-link-45deg" style="font-size:1.5rem;color:#0d6efd;"></i>
    </div>
    <div style="background:rgba(42,46,51,0.8);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:1rem;font-family:monospace;font-size:0.85rem;">
        <span style="color:#6c757d;">GET </span>
        <span style="color:#20c997;"><?php echo e(url('/api/device')); ?></span>
    </div>
    <div class="mt-3">
        <small style="color:#8b949e;">
            <i class="bi bi-info-circle me-1"></i>
            The ESP32 should send a POST to
            <code style="color:#fd7e14;"><?php echo e(url('/api/device/heartbeat')); ?></code>
            every refresh cycle to update its status.
        </small>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
    // Auto-refresh page every 30 seconds to show live status
    setTimeout(() => window.location.reload(), 30000);
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\ESP 32\resources\views/dashboard/index.blade.php ENDPATH**/ ?>