<div class="page-title">
    <h2><i class="bi bi-speedometer2"></i> Dashboard Overview</h2>
</div>

<div class="row">
    <!-- Total Campaigns -->
    <div class="col-md-3">
        <div class="stat-card primary">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-muted mb-2">Total Campaigns</h6>
                    <h3 class="mb-0"><?= $campaign_stats['total_campaigns'] ?></h3>
                </div>
                <i class="bi bi-megaphone icon"></i>
            </div>
        </div>
    </div>
    
    <!-- Total Users -->
    <div class="col-md-3">
        <div class="stat-card success">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-muted mb-2">Total Users</h6>
                    <h3 class="mb-0"><?= $user_count ?></h3>
                </div>
                <i class="bi bi-people icon"></i>
            </div>
        </div>
    </div>
    
    <!-- Total Master Data -->
    <div class="col-md-3">
        <div class="stat-card info">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-muted mb-2">Total Data</h6>
                    <h3 class="mb-0"><?= number_format($data_stats['total_data']) ?></h3>
                </div>
                <i class="bi bi-database icon"></i>
            </div>
        </div>
    </div>
    
    <!-- Today's Activity -->
    <div class="col-md-3">
        <div class="stat-card warning">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-muted mb-2">Today's Sent</h6>
                    <h3 class="mb-0"><?= number_format($campaign_stats['today_sent']) ?></h3>
                </div>
                <i class="bi bi-send icon"></i>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <!-- Messages Statistics -->
    <div class="col-md-3">
        <div class="stat-card success">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-muted mb-2">Total Sent</h6>
                    <h3 class="mb-0 text-success"><?= number_format($campaign_stats['total_sent']) ?></h3>
                </div>
                <i class="bi bi-check-circle icon text-success"></i>
            </div>
        </div>
    </div>
    
    <div class="col-md-3">
        <div class="stat-card danger">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-muted mb-2">Total Failed</h6>
                    <h3 class="mb-0 text-danger"><?= number_format($campaign_stats['total_failed']) ?></h3>
                </div>
                <i class="bi bi-x-circle icon text-danger"></i>
            </div>
        </div>
    </div>
    
    <div class="col-md-3">
        <div class="stat-card primary">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-muted mb-2">Active Campaigns</h6>
                    <h3 class="mb-0"><?= $campaign_stats['active_campaigns'] ?></h3>
                </div>
                <i class="bi bi-play-circle icon"></i>
            </div>
        </div>
    </div>
    
    <div class="col-md-3">
        <div class="stat-card info">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-muted mb-2">Unassigned Data</h6>
                    <h3 class="mb-0"><?= number_format($data_stats['unassigned_data']) ?></h3>
                </div>
                <i class="bi bi-clipboard-data icon"></i>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <!-- Chart: Sent vs Failed -->
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-bar-chart"></i> Performance Chart (Last 7 Days)</h5>
            </div>
            <div class="card-body">
                <canvas id="performanceChart" height="80"></canvas>
            </div>
        </div>
    </div>
    
    <!-- Recent Login Activity -->
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-shield-lock"></i> Recent Logins</h5>
            </div>
            <div class="card-body">
                <?php if (!empty($recent_logins)): ?>
                    <div class="list-group list-group-flush">
                        <?php foreach ($recent_logins as $log): ?>
                            <div class="list-group-item px-0">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <strong><?= $log->username ?></strong>
                                        <br><small class="text-muted"><?= $log->ip_address ?></small>
                                    </div>
                                    <small class="text-muted"><?= date('h:i A', strtotime($log->created_at)) ?></small>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php else: ?>
                    <p class="text-muted text-center">No recent logins</p>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <!-- Today's Login Statistics -->
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-graph-up"></i> Today's Statistics</h5>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-md-3">
                        <h3 class="text-success"><?= $login_stats['today_logins'] ?></h3>
                        <p class="text-muted">Successful Logins</p>
                    </div>
                    <div class="col-md-3">
                        <h3 class="text-danger"><?= $login_stats['today_failed'] ?></h3>
                        <p class="text-muted">Failed Attempts</p>
                    </div>
                    <div class="col-md-3">
                        <h3 class="text-info"><?= $login_stats['unique_users_today'] ?></h3>
                        <p class="text-muted">Unique Users</p>
                    </div>
                    <div class="col-md-3">
                        <h3 class="text-primary"><?= $campaign_stats['today_sent'] ?></h3>
                        <p class="text-muted">Messages Sent</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Performance Chart
    const chartData = <?= json_encode($chart_data) ?>;
    
    const labels = chartData.map(item => item.date);
    const sentData = chartData.map(item => parseInt(item.sent));
    const failedData = chartData.map(item => parseInt(item.failed));
    
    const ctx = document.getElementById('performanceChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Sent',
                data: sentData,
                borderColor: 'rgb(40, 167, 69)',
                backgroundColor: 'rgba(40, 167, 69, 0.1)',
                tension: 0.4
            }, {
                label: 'Failed',
                data: failedData,
                borderColor: 'rgb(220, 53, 69)',
                backgroundColor: 'rgba(220, 53, 69, 0.1)',
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: {
                    position: 'top',
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
});
</script>
