

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

<?php $__env->startSection('content_header'); ?>
    <h1><i class="fas fa-user-tie mr-2"></i>Selamat Datang, <?php echo e(Auth::user()->name); ?>!</h1>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
    
    <?php if(isset($iklanList) && $iklanList->count() > 0): ?>
        <div class="card card-outline card-danger mb-3">
            <div class="card-body py-2 px-3" style="overflow:hidden;white-space:nowrap;">
                <div class="d-flex align-items-center">
                    <span class="badge badge-danger mr-3" style="flex-shrink:0;"><i class="fas fa-bullhorn mr-1"></i>
                        PENGUMUMAN</span>
                    <div class="marquee-wrapper" style="overflow:hidden;flex:1;">
                        <div class="marquee-content">
                            <?php $__currentLoopData = $iklanList; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $iklan): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <span class="mr-5">
                                    <i class="fas fa-angle-double-right text-danger mr-1"></i>
                                    <strong><?php echo e($iklan->tajuk); ?></strong> — <?php echo e($iklan->kandungan); ?>

                                </span>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <?php endif; ?>

    
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="text-muted mb-0"><i class="fas fa-school mr-1"></i> Statistik Mengikut Jenis Sekolah (Daerah
            <?php echo e($daerah ?? '-'); ?>) — Disahkan oleh Checker</h5>
        <form method="GET" action="<?php echo e(route('supervisor.dashboard')); ?>" class="form-inline">
            <label class="mr-2 text-muted"><i class="fas fa-calendar-alt mr-1"></i>Tahun:</label>
            <select name="tahun" class="form-control form-control-sm" onchange="this.form.submit()">
                <?php $__currentLoopData = $senarai_tahun; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $t): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <option value="<?php echo e($t); ?>" <?php echo e($t == $tahun ? 'selected' : ''); ?>><?php echo e($t); ?></option>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </select>
        </form>
    </div>

    
    <div class="row">
        <div class="col-lg col-6">
            <div class="small-box bg-info">
                <div class="inner">
                    <h3><?php echo e($stats['jumlah_sekolah']); ?></h3>
                    <p>Jumlah Sekolah (<?php echo e($daerah); ?>)</p>
                </div>
                <a href="<?php echo e(route('supervisor.senarai', ['status' => 'semua', 'tahun' => $tahun])); ?>"
                    class="small-box-footer">
                    Lihat semua <i class="fas fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        <div class="col-lg col-6">
            <div class="small-box bg-success">
                <div class="inner">
                    <h3><?php echo e($stats['lulus']); ?></h3>
                    <p>Lulus <?php echo e($tahun); ?></p>
                </div>
                <a href="<?php echo e(route('supervisor.senarai', ['status' => 'lulus', 'tahun' => $tahun])); ?>"
                    class="small-box-footer">
                    Lihat senarai <i class="fas fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        <div class="col-lg col-6">
            <div class="small-box bg-primary">
                <div class="inner">
                    <h3><?php echo e($stats['belum_semak']); ?></h3>
                    <p>Belum Semak <?php echo e($tahun); ?></p>
                </div>
                <a href="<?php echo e(route('supervisor.senarai', ['status' => 'belum_semak', 'tahun' => $tahun])); ?>"
                    class="small-box-footer">
                    Lihat senarai <i class="fas fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        <div class="col-lg col-6">
            <div class="small-box bg-warning">
                <div class="inner">
                    <h3><?php echo e($stats['belum_hantar']); ?></h3>
                    <p>Belum Hantar <?php echo e($tahun); ?></p>
                </div>
                <a href="<?php echo e(route('supervisor.senarai', ['status' => 'belum_hantar', 'tahun' => $tahun])); ?>"
                    class="small-box-footer">
                    Lihat senarai <i class="fas fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>

    </div>

    <div class="row">
        <?php
            $colors = ['SRA' => 'info', 'SRAI' => 'success', 'KAFAI' => 'warning', 'KKM' => 'danger'];
        ?>

        <?php $__currentLoopData = $cards; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $card): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="col-md-3">
                <div class="card card-outline card-<?php echo e($colors[$card['jenis']] ?? 'primary'); ?>">
                    <div class="card-header">
                        <h3 class="card-title">
                            <strong><?php echo e($card['jenis']); ?></strong>
                        </h3>
                    </div>
                    <div class="card-body">
                        
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="text-muted">Jumlah Sekolah</span>
                            <h3 class="mb-0 font-weight-bold text-<?php echo e($colors[$card['jenis']] ?? 'primary'); ?>">
                                <?php echo e($card['jumlah_sekolah']); ?>

                            </h3>
                        </div>

                        <hr class="my-2">

                        
                        <p class="text-muted mb-2"><small><i class="fas fa-chart-pie mr-1"></i>Pengesahan
                                <?php echo e($tahun); ?></small></p>
                        <div class="row text-center">
                            <div class="col-4 mb-2">
                                <div class="text-muted small">Lulus</div>
                                <a href="<?php echo e(route('supervisor.senarai', ['kod_jenis' => $card['kod_jenis'], 'status' => 'lulus', 'tahun' => $tahun])); ?>"
                                    class="badge badge-success badge-pill px-3 py-2"><?php echo e($card['lulus']); ?></a>
                            </div>
                            <div class="col-4 mb-2">
                                <div class="text-muted small">Belum Semak</div>
                                <a href="<?php echo e(route('supervisor.senarai', ['kod_jenis' => $card['kod_jenis'], 'status' => 'belum_semak', 'tahun' => $tahun])); ?>"
                                    class="badge badge-primary badge-pill px-3 py-2"><?php echo e($card['belum_semak']); ?></a>
                            </div>
                            <div class="col-4 mb-2">
                                <div class="text-muted small">Belum Hantar</div>
                                <a href="<?php echo e(route('supervisor.senarai', ['kod_jenis' => $card['kod_jenis'], 'status' => 'belum_hantar', 'tahun' => $tahun])); ?>"
                                    class="badge badge-warning badge-pill px-3 py-2"><?php echo e($card['belum_hantar']); ?></a>
                            </div>
                        </div>

                        <?php if($card['jumlah_sekolah'] > 0): ?>
                            <div class="progress mt-2" style="height:8px">
                                <?php
                                    $total = $card['jumlah_sekolah'] ?: 1;
                                    $pctLulus = round(($card['lulus'] / $total) * 100);
                                    $pctSemak = round(($card['belum_semak'] / $total) * 100);
                                    $pctBelum = max(0, 100 - $pctLulus - $pctSemak);
                                ?>
                                <div class="progress-bar bg-success" style="width:<?php echo e($pctLulus); ?>%"></div>
                                <div class="progress-bar bg-primary" style="width:<?php echo e($pctSemak); ?>%"></div>
                                <div class="progress-bar bg-warning" style="width:<?php echo e($pctBelum); ?>%"></div>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </div>

    
    <div class="row mt-4">
        <div class="col-12">
            <div class="card card-outline card-primary">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-chart-bar mr-1"></i>
                        <strong>Graf Pengesahan Mengikut Jenis Sekolah — <?php echo e($tahun); ?></strong>
                    </h3>
                    <div class="card-tools">
                        <button type="button" id="toggleGrafBtn" class="btn btn-tool btn-sm" onclick="toggleGraf()"
                            title="Tunjuk / Sembunyi Graf">
                            <i class="fas fa-eye" id="toggleGrafIcon"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body" id="grafContainer" style="display:none;">
                    <canvas id="barChart" style="max-height:400px"></canvas>
                </div>
            </div>
        </div>
    </div>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('js'); ?>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
    <script>
        // Kill all Chart.js animations globally before any chart is created
        Chart.defaults.animation = false;
        Chart.defaults.responsive = false;
        Chart.defaults.transitions = {
            active: {
                animation: {
                    duration: 0
                }
            },
            resize: {
                animation: {
                    duration: 0
                }
            },
            show: {
                animation: {
                    duration: 0
                }
            },
            hide: {
                animation: {
                    duration: 0
                }
            }
        };

        (function() {
            // Chart is hidden by default — render lazily on first show
            window._barChartRendered = false;

            window.toggleGraf = function() {
                var container = document.getElementById('grafContainer');
                var icon = document.getElementById('toggleGrafIcon');
                var isHidden = container.style.display === 'none';

                if (isHidden) {
                    container.style.display = 'block';
                    icon.className = 'fas fa-eye-slash';

                    // Render chart only once on first open
                    if (!window._barChartRendered) {
                        window._barChartRendered = true;
                        var canvas = document.getElementById('barChart');
                        canvas.width = container.offsetWidth - 30;
                        canvas.height = 400;

                        new Chart(canvas, {
                            type: 'bar',
                            data: {
                                labels: [<?php echo collect($cards)->map(fn($c) => "'" . $c['jenis'] . "'")->implode(','); ?>],
                                datasets: [{
                                        label: 'Lulus',
                                        data: [<?php echo collect($cards)->pluck('lulus')->implode(','); ?>],
                                        backgroundColor: '#28a745'
                                    },
                                    {
                                        label: 'Belum Semak',
                                        data: [<?php echo collect($cards)->pluck('belum_semak')->implode(','); ?>],
                                        backgroundColor: '#007bff'
                                    },
                                    {
                                        label: 'Belum Hantar',
                                        data: [<?php echo collect($cards)->pluck('belum_hantar')->implode(','); ?>],
                                        backgroundColor: '#ffc107'
                                    }
                                ]
                            },
                            options: {
                                responsive: false,
                                animation: false,
                                transitions: {
                                    active: {
                                        animation: {
                                            duration: 0
                                        }
                                    },
                                    resize: {
                                        animation: {
                                            duration: 0
                                        }
                                    },
                                    show: {
                                        animation: {
                                            duration: 0
                                        }
                                    },
                                    hide: {
                                        animation: {
                                            duration: 0
                                        }
                                    }
                                },
                                plugins: {
                                    legend: {
                                        position: 'bottom',
                                        labels: {
                                            padding: 15
                                        }
                                    }
                                },
                                scales: {
                                    y: {
                                        beginAtZero: true,
                                        ticks: {
                                            stepSize: 1
                                        }
                                    }
                                }
                            }
                        });
                    }
                } else {
                    container.style.display = 'none';
                    icon.className = 'fas fa-eye';
                }
            };
        })();
    </script>
    <style>
        .marquee-wrapper {
            position: relative;
        }

        .marquee-content {
            display: inline-block;
            white-space: nowrap;
            animation: marqueeScroll 15s linear infinite;
        }

        @keyframes marqueeScroll {
            0% {
                transform: translateX(100%);
            }

            100% {
                transform: translateX(-100%);
            }
        }

        .marquee-content:hover {
            animation-play-state: paused;
        }
    </style>
<?php $__env->stopSection(); ?>

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