<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="mb-4">
                <i class="fas fa-tachometer-alt me-2" style="color: var(--nis-primary);"></i>
                Dashboard
            </h2>
        </div>
    </div>
    
    <!-- Statistics Cards -->
    <div class="row">
        <div class="col-md-3">
            <div class="stat-card">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="stat-value"><?= $stats['total'] ?? 0 ?></div>
                        <div class="stat-label">Total Migrants</div>
                    </div>
                    <i class="fas fa-users fa-3x opacity-50"></i>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card" style="background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="stat-value"><?= $maleCount ?? 0 ?></div>
                        <div class="stat-label">Male Migrants</div>
                    </div>
                    <i class="fas fa-mars fa-3x opacity-50"></i>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card" style="background: linear-gradient(135deg, #d63384 0%, #c71f6e 100%);">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="stat-value"><?= $femaleCount ?? 0 ?></div>
                        <div class="stat-label">Female Migrants</div>
                    </div>
                    <i class="fas fa-venus fa-3x opacity-50"></i>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card" style="background: linear-gradient(135deg, #22753e 0%, #22753e 100%);">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="stat-value"><?= $highestNationality['name'] ?? 'N/A' ?></div>
                        <div class="stat-label">Top Nationality</div>
                    </div>
                    <i class="fas fa-globe-africa fa-3x opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Charts Row -->
    <div class="row mt-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-chart-pie"></i>
                    Nationality Distribution
                </div>
                <div class="card-body">
                    <canvas id="nationalityChart" height="250"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-venus-mars"></i>
                    Sex Distribution
                </div>
                <div class="card-body">
                    <canvas id="sexChart" height="250"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Quick Actions -->
    <div class="row mt-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-rocket"></i> Quick Actions
                </div>
                <div class="card-body">
                    <!-- <a href="<?= APP_URL ?>/migrants/create" class="btn btn-nis w-100 mb-2">
                        <i class="fas fa-user-plus me-2"></i>New Registration
                    </a> -->
                    <a href="<?= APP_URL ?>/migrants/search" class="btn btn-outline-nis w-100">
                        <i class="fas fa-search me-2"></i>Search Migrants
                    </a>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-user"></i> User Information
                </div>
                <div class="card-body">
                    <table class="table table-borderless">
                        <tr>
                            <th width="40%">Name:</th>
                            <td><?= htmlspecialchars($_SESSION['full_name'] ?? '') ?></td>
                        </tr>
                        <tr>
                            <th>Username:</th>
                            <td><?= htmlspecialchars($_SESSION['username'] ?? '') ?></td>
                        </tr>
                        <tr>
                            <th>Role:</th>
                            <td><span class="badge bg-info"><?= $_SESSION['role'] ?? '' ?></span></td>
                        </tr>
                        <tr>
                            <th>Last Login:</th>
                            <td><?= date('d/m/Y H:i') ?></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Recent Registrations -->
    <?php if (!empty($recent)): ?>
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-clock"></i> Recent Registrations
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Person ID</th>
                                    <th>Name</th>
                                    <th>Document No</th>
                                    <th>Nationality</th>
                                    <th>Sex</th>
                                    <th>Date</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($recent as $row): ?>
                                <tr>
                                    <td><code><?= htmlspecialchars($row['person_id']) ?></code></td>
                                    <td><?= htmlspecialchars($row['surname']) ?>, <?= htmlspecialchars($row['given_name']) ?></td>
                                    <td><?= htmlspecialchars($row['document_no']) ?></td>
                                    <td><?= htmlspecialchars($row['nationality']) ?></td>
                                    <td>
                                        <?php if ($row['sex'] == 'Male'): ?>
                                            <span class="badge bg-primary"><i class="fas fa-mars me-1"></i>Male</span>
                                        <?php else: ?>
                                            <span class="badge bg-danger"><i class="fas fa-venus me-1"></i>Female</span>
                                        <?php endif; ?>
                                    </td>
                                    <td><?= date('d/m/Y', strtotime($row['created_at'])) ?></td>
                                    <td>
                                        <a href="<?= APP_URL ?>/migrants/<?= urlencode($row['person_id']) ?>" 
                                           class="btn btn-sm btn-outline-nis">
                                            <i class="fas fa-eye"></i> View
                                        </a>
                                    </td>
                                </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php endif; ?>
</div>

<!-- Make sure you have the Chart.js library included in your layout -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>

<script>
    // Nationality Chart
    <?php if (!empty($stats['by_nationality'])): ?>
    const nationalityCtx = document.getElementById('nationalityChart').getContext('2d');
    new Chart(nationalityCtx, {
        type: 'pie',
        data: {
            labels: [<?php foreach ($stats['by_nationality'] as $n): ?><?= "'" . addslashes($n['nationality']) . "'," ?><?php endforeach; ?>],
            datasets: [{
                data: [<?php foreach ($stats['by_nationality'] as $n): ?><?= $n['count'] ?>,<?php endforeach; ?>],
                backgroundColor: ['#006747', '#00843D', '#FFD100', '#004225', '#2E7D32', '#388E3C', '#43A047', '#4CAF50', '#66BB6A', '#81C784']
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { position: 'bottom' }
            }
        }
    });
    <?php endif; ?>

    // Sex Distribution Chart
    const sexCtx = document.getElementById('sexChart').getContext('2d');
    new Chart(sexCtx, {
        type: 'doughnut',
        data: {
            labels: ['Male', 'Female'],
            datasets: [{
                data: [<?= $maleCount ?? 0 ?>, <?= $femaleCount ?? 0 ?>],
                backgroundColor: ['#0d6efd', '#d63384']
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { position: 'bottom' }
            }
        }
    });
</script>