<?php $__env->startSection('content'); ?>
<div class="row mb-4">
    <div class="col-md-12">
        <h2 class="fw-bold text-dark">Dashboard Overview</h2>
        <p class="text-secondary">Welcome back, <span class="fw-semibold text-primary"><?php echo e(Auth::user()->name); ?></span>! Here's your system summary.</p>
    </div>
</div>

<!-- Stats Cards -->
<div class="row">
    <!-- Total Users Card -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
            <div class="card-body p-4">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0 bg-primary-subtle text-primary p-3 rounded-3 me-3">
                        <i class="bi bi-people-fill fs-4"></i>
                    </div>
                    <div>
                        <p class="text-uppercase text-secondary mb-1 fw-bold small" style="letter-spacing: 0.5px;">Total Users</p>
                        <h4 class="mb-0 fw-bold">1,284</h4>
                    </div>
                </div>
                <div class="mt-3">
                    <span class="text-success small fw-bold"><i class="bi bi-arrow-up-short"></i> 12%</span>
                    <span class="text-secondary small ms-1">since last month</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Active Sessions Card -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
            <div class="card-body p-4">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0 bg-success-subtle text-success p-3 rounded-3 me-3">
                        <i class="bi bi-activity fs-4"></i>
                    </div>
                    <div>
                        <p class="text-uppercase text-secondary mb-1 fw-bold small" style="letter-spacing: 0.5px;">Active Sessions</p>
                        <h4 class="mb-0 fw-bold">45</h4>
                    </div>
                </div>
                <div class="mt-3">
                    <span class="text-success small fw-bold"><i class="bi bi-arrow-up-short"></i> 5%</span>
                    <span class="text-secondary small ms-1">increase today</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Notifications Card -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
            <div class="card-body p-4">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0 bg-warning-subtle text-warning p-3 rounded-3 me-3">
                        <i class="bi bi-bell-fill fs-4"></i>
                    </div>
                    <div>
                        <p class="text-uppercase text-secondary mb-1 fw-bold small" style="letter-spacing: 0.5px;">Notifications</p>
                        <h4 class="mb-0 fw-bold">12</h4>
                    </div>
                </div>
                <div class="mt-3">
                    <span class="text-danger small fw-bold"><i class="bi bi-exclamation-circle-fill"></i> 3 critical</span>
                </div>
            </div>
        </div>
    </div>

    <!-- System Status Card -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
            <div class="card-body p-4">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0 bg-info-subtle text-info p-3 rounded-3 me-3">
                        <i class="bi bi-cpu-fill fs-4"></i>
                    </div>
                    <div>
                        <p class="text-uppercase text-secondary mb-1 fw-bold small" style="letter-spacing: 0.5px;">System Load</p>
                        <h4 class="mb-0 fw-bold">24%</h4>
                    </div>
                </div>
                <div class="mt-3">
                    <span class="badge bg-success-subtle text-success rounded-pill px-3">Healthy</span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Main Chart Section -->
    <div class="col-lg-8 mb-4">
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-header bg-white border-0 py-3 px-4">
                <h6 class="m-0 fw-bold text-dark">System Traffic Analytics</h6>
            </div>
            <div class="card-body px-4 pb-4">
                <div style="height: 300px;">
                    <canvas id="lineChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Pie Chart Section -->
    <div class="col-lg-4 mb-4">
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-header bg-white border-0 py-3 px-4">
                <h6 class="m-0 fw-bold text-dark">User Distribution</h6>
            </div>
            <div class="card-body px-4 pb-4">
                <div style="height: 300px; display: flex; justify-content: center; align-items: center;">
                    <canvas id="pieChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-header bg-white border-0 py-3 px-4">
                <h6 class="m-0 fw-bold text-dark">Recent Logs</h6>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light text-secondary small text-uppercase">
                            <tr>
                                <th class="px-4 py-3">Action</th>
                                <th class="py-3">User</th>
                                <th class="py-3">IP Address</th>
                                <th class="py-3">Status</th>
                                <th class="px-4 py-3">Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="px-4 py-3"><span class="fw-semibold text-dark">User Login</span></td>
                                <td class="py-3">Admin</td>
                                <td class="py-3">127.0.0.1</td>
                                <td class="py-3"><span class="badge bg-success-subtle text-success rounded-pill px-3">Success</span></td>
                                <td class="px-4 py-3 text-secondary small">May 14, 2026 - 16:58</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-3"><span class="fw-semibold text-dark">Password Change</span></td>
                                <td class="py-3">Staff_01</td>
                                <td class="py-3">192.168.1.5</td>
                                <td class="py-3"><span class="badge bg-success-subtle text-success rounded-pill px-3">Success</span></td>
                                <td class="px-4 py-3 text-secondary small">May 14, 2026 - 15:30</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Line Chart
    const ctxLine = document.getElementById('lineChart').getContext('2d');
    new Chart(ctxLine, {
        type: 'line',
        data: {
            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            datasets: [{
                label: 'Visitors',
                data: [450, 600, 520, 800, 750, 1100, 950],
                borderColor: '#0d6efd',
                backgroundColor: 'rgba(13, 110, 253, 0.05)',
                fill: true,
                tension: 0.4,
                borderWidth: 3,
                pointRadius: 4,
                pointBackgroundColor: '#0d6efd'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false }
            },
            scales: {
                y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.05)' } },
                x: { grid: { display: false } }
            }
        }
    });

    // Pie Chart
    const ctxPie = document.getElementById('pieChart').getContext('2d');
    new Chart(ctxPie, {
        type: 'doughnut',
        data: {
            labels: ['Admins', 'Staff', 'Customers'],
            datasets: [{
                data: [15, 35, 50],
                backgroundColor: ['#0d6efd', '#198754', '#ffc107'],
                hoverOffset: 10,
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '70%',
            plugins: {
                legend: { position: 'bottom', labels: { usePointStyle: true, padding: 20 } }
            }
        }
    });
</script>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('styles'); ?>
<style>
    body {
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
    }
    .card {
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    }
    .bg-primary-subtle { background-color: #e7f1ff !important; }
    .bg-success-subtle { background-color: #e1f6eb !important; }
    .bg-warning-subtle { background-color: #fff4e0 !important; }
    .bg-info-subtle { background-color: #e7f7ff !important; }
    .text-primary { color: #0d6efd !important; }
    .text-success { color: #198754 !important; }
    .text-warning { color: #f59e0b !important; }
    .text-info { color: #0dcaf0 !important; }
</style>
<?php $__env->stopSection(); ?>

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