@extends('admin.layout')

@section('title','Admin Dashboard')

@section('card_title','Dashboard')
@section('card_icon')
    <i class="bi bi-speedometer2" style="font-size:16px;color:var(--header-bg)"></i>
@endsection

@section('content')
    <div style="background:#fff;border:1px solid #e6e6e6;border-radius:8px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,0.04)">
        <div style="padding:12px 16px;border-bottom:1px solid #f1f1f1;font-weight:700;background:#fafafa;display:flex;align-items:center;gap:8px">
            @hasSection('card_icon')
                <span class="card-icon">@yield('card_icon')</span>
            @endif
            <span class="card-title">@yield('card_title')</span>
        </div>
        <div class="card-body" style="padding:16px">
            <h1 style="margin:0 0 8px 0">Halo Admin</h1>
            <p style="margin:0">Selamat datang di dashboard admin.</p>

            <div style="margin-top:10px;display:flex;gap:12px;flex-wrap:wrap">
                @if(!empty($userStats))
                    <div style="background:#fff;border:1px solid #e6e6e6;border-radius:8px;padding:8px;max-width:280px">
                    <h3 style="margin:0 0 6px 0;font-size:14px"><i class="bi bi-people" style="margin-right:8px;color:var(--header-bg)"></i>Info Pengguna</h3>
                    <div style="width:100%;">
                        <canvas id="userChart" style="width:100%;height:150px;display:block"></canvas>
                    </div>
                    <div style="display:flex;gap:6px;margin-top:6px;flex-wrap:wrap;font-size:11px">
                        @foreach(($userStats['labels'] ?? []) as $i => $label)
                            <div style="background:#f8f9fa;border:1px solid #e9ecef;padding:4px 6px;border-radius:6px">
                                {{ $label }}: <strong>{{ $userStats['data'][$i] ?? 0 }}</strong>
                            </div>
                        @endforeach
                    </div>
                </div>

                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        const labels = @json($userStats['labels'] ?? []);
                        const data = @json($userStats['data'] ?? []);
                        const ctx = document.getElementById('userChart');
                        if (!ctx) return;
                        // Register datalabels plugin if available
                        if (window.Chart && window.Chart.register && window.ChartDataLabels) {
                            try { Chart.register(window.ChartDataLabels); } catch(e) {}
                        }

                        const displayLabels = labels.map((l,i) => `${l} (${data[i] ?? 0})`);
                        new Chart(ctx, {
                            type: 'doughnut',
                            data: {
                                labels: displayLabels,
                                datasets: [{
                                    data: data,
                                    backgroundColor: ['#198754','#0d6efd','#ffc107','#6c757d']
                                }]
                            },
                            options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                aspectRatio: 1.3,
                                cutout: '50%',
                                plugins: {
                                    legend: { position: 'bottom', labels: { font: { size: 11 } } },
                                    datalabels: {
                                        color: '#ffffff',
                                        formatter: function(value){ return value; },
                                        font: { weight: '600', size: 11 }
                                    }
                                }
                            }
                        });
                    });
                    </script>
                @endif

                @if(!empty($guruStats))
                    <div style="background:#fff;border:1px solid #e6e6e6;border-radius:8px;padding:8px;max-width:280px">
                    <h3 style="margin:0 0 6px 0;font-size:14px"><i class="bi bi-person-badge" style="margin-right:8px;color:var(--header-bg)"></i>Info Guru (per Jenjang)</h3>
                    <div style="width:100%;">
                        <canvas id="guruChart" style="width:100%;height:150px;display:block"></canvas>
                    </div>
                    <div style="display:flex;gap:6px;margin-top:6px;flex-wrap:wrap;font-size:11px">
                        @foreach(($guruStats['labels'] ?? []) as $i => $label)
                            <div style="background:#f8f9fa;border:1px solid #e9ecef;padding:4px 6px;border-radius:6px">
                                {{ $label }}: <strong>{{ $guruStats['data'][$i] ?? 0 }}</strong>
                            </div>
                        @endforeach
                    </div>
                </div>

                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        const labels = @json($guruStats['labels'] ?? []);
                        const data = @json($guruStats['data'] ?? []);
                        const ctx = document.getElementById('guruChart');
                        if (!ctx) return;
                        if (window.Chart && window.Chart.register && window.ChartDataLabels) {
                            try { Chart.register(window.ChartDataLabels); } catch(e) {}
                        }

                        const displayLabels = labels.map((l,i) => `${l} (${data[i] ?? 0})`);
                        new Chart(ctx, {
                            type: 'bar',
                            data: {
                                labels: displayLabels,
                                datasets: [{
                                    label: 'Jumlah Guru',
                                    data: data,
                                    backgroundColor: ['#0d6efd','#198754','#ffc107','#6c757d']
                                }]
                            },
                            options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                aspectRatio: 1.6,
                                plugins: { legend: { display: false } },
                                scales: { y: { beginAtZero: true } }
                            }
                        });
                    });
                    </script>
                @endif

                @if(!empty($sekolahStats))
                    <div style="background:#fff;border:1px solid #e6e6e6;border-radius:8px;padding:8px;max-width:320px">
                        <h3 style="margin:0 0 6px 0;font-size:14px"><i class="bi bi-building" style="margin-right:8px;color:var(--header-bg)"></i>Info Sekolah Binaan (per Jenjang)</h3>
                        <div style="width:100%;">
                            <canvas id="sekolahChart" style="width:100%;height:150px;display:block"></canvas>
                        </div>
                        <div style="display:flex;gap:6px;margin-top:6px;flex-wrap:wrap;font-size:11px">
                            @foreach(($sekolahStats['labels'] ?? []) as $i => $label)
                                <div style="background:#f8f9fa;border:1px solid #e9ecef;padding:4px 6px;border-radius:6px">
                                    {{ $label }}: <strong>{{ $sekolahStats['data'][$i] ?? 0 }}</strong>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            const labels = @json($sekolahStats['labels'] ?? []);
                            const data = @json($sekolahStats['data'] ?? []);
                            const ctx = document.getElementById('sekolahChart');
                            if (!ctx) return;
                            if (window.Chart && window.Chart.register && window.ChartDataLabels) {
                                try { Chart.register(window.ChartDataLabels); } catch(e) {}
                            }

                            const displayLabels = labels.map((l,i) => `${l} (${data[i] ?? 0})`);
                            new Chart(ctx, {
                                type: 'pie',
                                data: {
                                    labels: displayLabels,
                                    datasets: [{ data: data, backgroundColor: ['#0d6efd','#198754','#ffc107','#6c757d'] }]
                                },
                                options: { responsive: true, maintainAspectRatio: false, aspectRatio: 1.3 }
                            });
                        });
                    </script>
                @endif
            </div>
        </div>
    </div>
@endsection