<?= $this->extend('layout/template') ?>

<?= $this->section('content') ?>

<div class="container-fluid">
    <!-- Welcome Card -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm rounded-lg" style="background: linear-gradient(45deg, #1a237e, #283593); color: white;">
                <div class="card-body p-4">
                    <h2 class="fw-bold">Selamat Datang, Super Admin!</h2>
                    <p class="mb-0 opacity-75">Anda memiliki akses penuh untuk mengelola data master, user, dan memantau evaluasi seluruh OPD.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="row mb-4">
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <h6 class="text-muted text-uppercase mb-1">Total OPD</h6>
                            <h3 class="fw-bold mb-0"><?= $total_opd ?></h3>
                        </div>
                        <div class="rounded-circle bg-primary bg-opacity-10 p-3 text-primary">
                            <i class="fas fa-building fa-lg"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <h6 class="text-muted text-uppercase mb-1">Total Bidang</h6>
                            <h3 class="fw-bold mb-0"><?= $total_bidang ?></h3>
                        </div>
                        <div class="rounded-circle bg-success bg-opacity-10 p-3 text-success">
                            <i class="fas fa-layer-group fa-lg"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <h6 class="text-muted text-uppercase mb-1">Laporan Masuk</h6>
                            <h3 class="fw-bold mb-0"><?= $laporan_masuk ?></h3>
                        </div>
                        <div class="rounded-circle bg-warning bg-opacity-10 p-3 text-warning">
                            <i class="fas fa-file-alt fa-lg"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <h6 class="text-muted text-uppercase mb-1">Progress Total</h6>
                            <h3 class="fw-bold mb-0"><?= $progress_persen ?>%</h3>
                        </div>
                        <div class="rounded-circle bg-info bg-opacity-10 p-3 text-info">
                            <i class="fas fa-chart-pie fa-lg"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="row">
        <!-- Progress OPD Chart -->
        <div class="col-lg-8 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 py-3">
                    <h5 class="mb-0 fw-bold text-dark"><i class="fas fa-chart-bar me-2 text-primary"></i>Statistik Penyelesaian Laporan per Bidang</h5>
                </div>
                <div class="card-body">
                    <canvas id="progressChart" height="150"></canvas>
                </div>
            </div>
        </div>

        <!-- Status Pie Chart -->
        <div class="col-lg-4 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 py-3">
                    <h5 class="mb-0 fw-bold text-dark"><i class="fas fa-chart-pie me-2 text-primary"></i>Status Evaluasi</h5>
                </div>
                <div class="card-body">
                    <canvas id="statusChart" height="200"></canvas>
                    <div class="mt-4">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted"><i class="fas fa-circle text-success me-1"></i> Selesai</span>
                            <span class="fw-bold"><?= $status_selesai ?> OPD</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted"><i class="fas fa-circle text-warning me-1"></i> Dalam Proses</span>
                            <span class="fw-bold"><?= $status_proses ?> OPD</span>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span class="text-muted"><i class="fas fa-circle text-danger me-1"></i> Perlu Revisi</span>
                            <span class="fw-bold"><?= $status_revisi ?> OPD</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Activity Table -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 py-3 d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 fw-bold text-dark">Aktivitas Terbaru OPD</h5>
                    <a href="<?= base_url('laporan/progres') ?>" class="btn btn-sm btn-outline-primary">Lihat Semua</a>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th class="ps-4">Nama OPD</th>
                                <th>Bidang</th>
                                <th>Aktivitas</th>
                                <th>Waktu</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php if(empty($aktivitas_terbaru)): ?>
                                <tr>
                                    <td colspan="5" class="text-center py-3 text-muted">Belum ada aktivitas laporan.</td>
                                </tr>
                            <?php else: ?>
                                <?php foreach($aktivitas_terbaru as $a): ?>
                                <tr>
                                    <td class="ps-4 fw-bold"><?= $a['nama_opd'] ?></td>
                                    <td><?= $a['nama_bidang'] ?></td>
                                    <td>Mengupdate <?= substr($a['nama_sub_kegiatan'], 0, 30) ?>...</td>
                                    <td class="text-muted"><?= date('d M Y H:i', strtotime($a['updated_at'])) ?></td>
                                    <td>
                                        <?php if($a['status'] == 'Disetujui'): ?>
                                            <span class="badge bg-success">Selesai</span>
                                        <?php elseif($a['status'] == 'Revisi'): ?>
                                            <span class="badge bg-danger">Revisi</span>
                                        <?php else: ?>
                                            <span class="badge bg-warning text-dark">Proses</span>
                                        <?php endif; ?>
                                    </td>
                                </tr>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Progress Chart
    const ctxProgress = document.getElementById('progressChart').getContext('2d');
    const progressChart = new Chart(ctxProgress, {
        type: 'bar',
        data: {
            labels: ['Bidang Perencanaan', 'Bidang Evaluasi', 'Bidang Ekonomi', 'Bidang Sosial', 'Bidang Fisik'],
            datasets: [{
                label: 'Persentase Selesai (%)',
                data: [85, 60, 45, 70, 30],
                backgroundColor: '#1a237e',
                borderRadius: 5
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { display: false }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100
                }
            }
        }
    });

    // Status Chart
    const ctxStatus = document.getElementById('statusChart').getContext('2d');
    const statusChart = new Chart(ctxStatus, {
        type: 'doughnut',
        data: {
            labels: ['Selesai', 'Dalam Proses', 'Perlu Revisi'],
            datasets: [{
                data: [<?= $status_selesai ?>, <?= $status_proses ?>, <?= $status_revisi ?>],
                backgroundColor: ['#198754', '#ffc107', '#dc3545'],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom',
                    display: false // Custom legend created in HTML
                }
            },
            cutout: '70%'
        }
    });
</script>

<?= $this->endSection() ?>
