@extends('admin.layout')

@section('title', 'Dashboard')

@section('page-title', 'Dashboard')
@section('page-subtitle', 'Selamat datang di sistem Tracer Universitas Muhammadiyah Jember')

@section('content')
    <!-- Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 mb-6 sm:mb-8">
        <!-- Card 1 -->
        <div
            class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 sm:p-6 border-l-4 border-blue-500 transition-colors duration-300">
            <div class="flex items-center justify-between">
                <div class="flex-1 min-w-0">
                    <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 font-medium">Total Alumni</p>
                    <h3 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-white mt-1 sm:mt-2">
                        {{ number_format($totalAlumni) }}
                    </h3>
                </div>
                <div
                    class="w-10 h-10 sm:w-14 sm:h-14 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center flex-shrink-0 ml-2">
                    <svg class="w-6 h-6 sm:w-8 sm:h-8 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z">
                        </path>
                    </svg>
                </div>
            </div>
            <div class="mt-3 sm:mt-4">
                <span class="text-blue-500 text-xs sm:text-sm font-medium">Data Terdaftar</span>
                <span class="text-gray-500 dark:text-gray-400 text-xs sm:text-sm ml-2">Sistem Tracer</span>
            </div>
        </div>

        <!-- Card 2 -->
        <div
            class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 sm:p-6 border-l-4 border-green-500 transition-colors duration-300">
            <div class="flex items-center justify-between">
                <div class="flex-1 min-w-0">
                    <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 font-medium">Sudah Bekerja</p>
                    <h3 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-white mt-1 sm:mt-2">
                        {{ number_format($sudahBekerjaCount) }}
                    </h3>
                </div>
                <div
                    class="w-10 h-10 sm:w-14 sm:h-14 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center flex-shrink-0 ml-2">
                    <svg class="w-6 h-6 sm:w-8 sm:h-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
                        </path>
                    </svg>
                </div>
            </div>
            <div class="mt-3 sm:mt-4">
                <span class="text-green-500 text-xs sm:text-sm font-medium">{{ $bekerjaPercentage }}%</span>
                <span class="text-gray-500 dark:text-gray-400 text-xs sm:text-sm ml-2">dari total alumni</span>
            </div>
        </div>

        <!-- Card 3 -->
        <div
            class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 sm:p-6 border-l-4 border-yellow-500 transition-colors duration-300">
            <div class="flex items-center justify-between">
                <div class="flex-1 min-w-0">
                    <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 font-medium">Wirausaha</p>
                    <h3 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-white mt-1 sm:mt-2">
                        {{ number_format($wirausahaCount) }}
                    </h3>
                </div>
                <div
                    class="w-10 h-10 sm:w-14 sm:h-14 bg-yellow-100 dark:bg-yellow-900/30 rounded-full flex items-center justify-center flex-shrink-0 ml-2">
                    <svg class="w-6 h-6 sm:w-8 sm:h-8 text-yellow-500" fill="none" stroke="currentColor"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                    </svg>
                </div>
            </div>
            <div class="mt-3 sm:mt-4">
                <span class="text-yellow-500 text-xs sm:text-sm font-medium">{{ $wirausahaPercentage }}%</span>
                <span class="text-gray-500 dark:text-gray-400 text-xs sm:text-sm ml-2">dari total alumni</span>
            </div>
        </div>

        <!-- Card 4 -->
        <div
            class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 sm:p-6 border-l-4 border-purple-500 transition-colors duration-300">
            <div class="flex items-center justify-between">
                <div class="flex-1 min-w-0">
                    <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 font-medium">Melanjutkan Studi</p>
                    <h3 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-white mt-1 sm:mt-2">
                        {{ number_format($melanjutkanStudiCount) }}
                    </h3>
                </div>
                <div
                    class="w-10 h-10 sm:w-14 sm:h-14 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center flex-shrink-0 ml-2">
                    <svg class="w-6 h-6 sm:w-8 sm:h-8 text-purple-500" fill="none" stroke="currentColor"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253">
                        </path>
                    </svg>
                </div>
            </div>
            <div class="mt-3 sm:mt-4">
                <span class="text-purple-500 text-xs sm:text-sm font-medium">{{ $studiPercentage }}%</span>
                <span class="text-gray-500 dark:text-gray-400 text-xs sm:text-sm ml-2">dari total alumni</span>
            </div>
        </div>
    </div>

    <!-- statistik -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
        <!-- statistik -->
        <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 sm:p-6 transition-colors duration-300">
            <h3 class="text-base sm:text-lg font-bold text-gray-800 dark:text-white mb-3 sm:mb-4">Statistik Alumni per Tahun
            </h3>
            <div id="yearChart" class="w-full h-48 sm:h-64"></div>
        </div>

        <!-- aktifitas -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 sm:p-6 transition-colors duration-300">
            <h3 class="text-base sm:text-lg font-bold text-gray-800 dark:text-white mb-3 sm:mb-4">Aktivitas Terbaru</h3>
            <div class="space-y-3 sm:space-y-4">
                @foreach($recentActivities as $activity)
                    <div class="flex items-start space-x-2 sm:space-x-3">
                        <div class="w-2 h-2 bg-{{ $activity['color'] }}-500 rounded-full mt-1.5 sm:mt-2 flex-shrink-0"></div>
                        <div class="flex-1 min-w-0">
                            <p class="text-xs sm:text-sm font-medium text-gray-800 dark:text-gray-200">{{ $activity['title'] }}
                            </p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">{{ $activity['time'] }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('js/highcharts/highcharts.js') }}"></script>
    <script id="chart-data" type="application/json">{"years":@json($years),"counts":@json($counts)}</script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const raw = JSON.parse(document.getElementById('chart-data').textContent);
            // Filter out null/empty years (caused by model accessor interference)
            const pairs = raw.years.map((y, i) => [y, raw.counts[i]]).filter(([y]) => y !== null && y !== '');
            const years = pairs.map(([y]) => y);
            const counts = pairs.map(([, c]) => Number(c));

            if (!years.length) return;


            function getColors() {
                const isDark = document.documentElement.classList.contains('dark');
                return {
                    text: isDark ? '#9CA3AF' : '#4B5563',
                    grid: isDark ? '#374151' : '#E5E7EB',
                    bg: 'transparent'
                };
            }

            function initChart() {
                const colors = getColors();
                Highcharts.chart('yearChart', {
                    chart: {
                        type: 'areaspline',
                        backgroundColor: colors.bg,
                        style: { fontFamily: 'Inter, system-ui, sans-serif' }
                    },
                    title: { text: null },
                    xAxis: {
                        categories: years,
                        labels: { style: { color: colors.text } },
                        lineColor: colors.grid,
                        tickColor: colors.grid
                    },
                    yAxis: {
                        title: { text: null },
                        labels: { style: { color: colors.text } },
                        gridLineColor: colors.grid,
                        min: 0
                    },
                    legend: { enabled: false },
                    credits: { enabled: false },
                    tooltip: {
                        shared: true,
                        borderRadius: 12,
                        borderWidth: 0,
                        shadow: true,
                        useHTML: true,
                        headerFormat: '<span style="font-size: 10px">{point.key}</span><br/>',
                        pointFormat: '<span style="color:{point.color}">\u25CF</span> Total: <b>{point.y}</b> alumni'
                    },
                    plotOptions: {
                        areaspline: {
                            fillColor: {
                                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                                stops: [
                                    [0, 'rgba(59, 130, 246, 0.3)'],
                                    [1, 'rgba(59, 130, 246, 0)']
                                ]
                            },
                            marker: {
                                radius: 4,
                                lineColor: '#3B82F6',
                                fillColor: 'white',
                                lineWidth: 2
                            },
                            lineWidth: 3,
                            lineColor: '#3B82F6'
                        }
                    },
                    series: [{
                        name: 'Alumni',
                        data: counts
                    }]
                });
            }

            initChart();

            // Theme observer
            const observer = new MutationObserver((mutations) => {
                mutations.forEach((mutation) => {
                    if (mutation.attributeName === 'class') {
                        initChart();
                    }
                });
            });
            observer.observe(document.documentElement, { attributes: true });
        });
    </script>
@endpush