@extends('admin.layout')

@section('title', 'Grafik F17')

@section('page-title', 'Report Tabulasi Tingkat Kompetensi (F17)')
@section('page-subtitle', 'Jawaban Pada saat lulus, Tingkat Kompetensi yang dikuasai (A) / Jawaban Pada saat ini, Tingkat Kompetensi yang diperlukan dalam pekerjaan?(B)')

@section('content')
    <div class="flex flex-col gap-6">
        <!-- Filter Card -->
        <div
            class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-5 transition-colors duration-300">
            <form action="{{ route('grafik.f17') }}" method="GET" class="flex flex-col md:flex-row md:items-end gap-4">
                <div class="flex-1 max-w-xs">
                    <label for="filterprodi" class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
                        Filter Program Studi
                    </label>
                    <div class="relative">
                        <select name="filterprodi" id="filterprodi"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white transition-all">
                            <option value="">Semua Program Studi</option>
                            @foreach ($prodis as $prodi)
                                <option value="{{ $prodi->KodeID }}" {{ request('filterprodi') == $prodi->KodeID ? 'selected' : '' }}>
                                    {{ $prodi->KodeID }} - {{ $prodi->Nama }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="flex flex-col sm:flex-row gap-2 w-full md:w-auto mt-4 md:mt-0">
                    <button type="submit"
                        class="w-full sm:w-auto px-5 py-2.5 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow-md hover:shadow-lg transition-all flex items-center justify-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="11" cy="11" r="8" />
                            <path d="m21 21-4.3-4.3" />
                        </svg>
                        Filter
                    </button>
                    @if (request()->filled('filterprodi'))
                        <a href="{{ route('grafik.f17') }}"
                            class="w-full sm:w-auto px-5 py-2.5 text-sm font-medium text-center text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-all">
                            Reset
                        </a>
                    @endif
                </div>
            </form>
        </div>

        <!-- Chart Cards -->
        <div class="grid grid-cols-1 gap-6">
            @forelse($chartData as $column => $data)
                <div
                    class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden transition-colors duration-300">
                    <div
                        class="p-6 border-b border-gray-50 dark:border-gray-700 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                        <div>
                            <h3 class="text-lg font-bold text-gray-800 dark:text-white">
                                {!! $data['title'] !!}
                            </h3>
                            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                                Grafik Per Tahun Lulus
                                {{ request('filterprodi') ? 'Prodi ' . request('filterprodi') : 'Semua Program Studi' }}
                            </p>
                        </div>
                        <div class="flex items-center gap-2">
                            <span
                                class="px-3 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 text-xs font-bold rounded-full whitespace-nowrap">
                                Data Tahun {{ $years->min() }} - {{ $years->max() }}
                            </span>
                        </div>
                    </div>
                    <div class="p-6">
                        <div id="chart-{{ $column }}" class="w-full h-[320px] md:h-[320px]"></div>
                    </div>
                </div>
            @empty
                <div
                    class="col-span-full bg-gray-50 dark:bg-gray-700/50 rounded-2xl p-12 text-center border-2 border-dashed border-gray-200 dark:border-gray-600">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 text-gray-400 mx-auto mb-4" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7" />
                        <line x1="9" y1="9" x2="15" y2="15" />
                        <line x1="15" y1="9" x2="9" y2="15" />
                    </svg>
                    <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Tidak Ada Data</h3>
                    <p class="text-gray-500 dark:text-gray-400">Silakan pilih program studi lain atau sesuaikan filter Anda.</p>
                </div>
            @endforelse
        </div>
    </div>
@endsection

@push('scripts')
    <!-- Highcharts core -->
    <script src="{{ asset('js/highcharts/highcharts.js') }}"></script>

    <!-- Export modules -->
    <script src="{{ asset('js/highcharts/modules/exporting.js') }}"></script>
    <script src="{{ asset('js/highcharts/modules/export-data.js') }}"></script>

    <!-- Offline exporting dependencies (for client-side image generation) -->
    <script src="https://cdn.jsdelivr.net/npm/canvg@3.0.10/lib/umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/svg2pdf.js@2.2.1/dist/svg2pdf.umd.min.js"></script>
    <script src="{{ asset('js/highcharts/modules/offline-exporting.js') }}"></script>

    <script src="{{ asset('js/highcharts/modules/accessibility.js') }}"></script>

    <div id="chart-data-container" 
         data-years="{{ json_encode($years) }}" 
         data-chart-data="{{ json_encode($chartData) }}" 
         style="display: none;">
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const container = document.getElementById('chart-data-container');
            const years = JSON.parse(container.dataset.years);
            const chartData = JSON.parse(container.dataset.chartData);
            const charts = {};

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

            function createChart(column, data) {
                const colors = getColors();
                return Highcharts.chart('chart-' + column, {
                    chart: {
                        type: 'column',
                        backgroundColor: colors.bg,
                        style: {
                            fontFamily: 'Inter, system-ui, sans-serif'
                        }
                    },
                    title: { text: null },
                    xAxis: {
                        categories: years,
                        crosshair: true,
                        labels: {
                            style: { color: colors.text }
                        },
                        lineColor: colors.grid,
                        tickColor: colors.grid
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Jumlah Alumni',
                            style: { color: colors.text }
                        },
                        labels: {
                            style: { color: colors.text }
                        },
                        gridLineColor: colors.grid
                    },
                    tooltip: {
                        shared: true,
                        useHTML: true,
                        backgroundColor: 'rgba(255, 255, 255, 0.95)',
                        borderWidth: 0,
                        borderRadius: 12,
                        shadow: true,
                        formatter: function () {
                            let s = '<span style="font-size:11px; font-weight: bold; color: #4B5563">' + this.x + '</span><br/>';
                            let hasData = false;
                            this.points.forEach(function (point) {
                                if (point.y > 0) {
                                    s += '<span style="color:' + point.series.color + '">\u25CF</span> ' + point.series.name + ': <b>' + point.y + '</b> alumni<br/>';
                                    hasData = true;
                                }
                            });
                            return hasData ? s : false;
                        }
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0,
                            borderRadius: 6,
                            dataLabels: {
                                enabled: true,
                                style: {
                                    fontSize: '11px',
                                    color: colors.text,
                                    textOutline: 'none'
                                }
                            }
                        }
                    },
                    legend: {
                        itemStyle: {
                            color: colors.legendText,
                            fontWeight: '500',
                            fontSize: '12px'
                        },
                        itemHoverStyle: {
                            color: '#3B82F6'
                        }
                    },
                    series: data.series,
                    credits: { enabled: false },
                    exporting: {
                        enabled: true,
                        filename: 'Report-F17-' + column + '-' + new Date().toISOString().slice(0, 10),
                        buttons: {
                            contextButton: {
                                menuItems: [
                                    'viewFullscreen',
                                    'printChart',
                                    'separator',
                                    {
                                        text: 'Download PNG image',
                                        onclick: function () {
                                            var chart = this;
                                            var svg = chart.getSVG({
                                                chart: {
                                                    height: 800
                                                },
                                                legend: {
                                                    navigation: { enabled: false },
                                                    maxHeight: null
                                                }
                                            });
                                            var canvas = document.createElement('canvas');
                                            var ctx = canvas.getContext('2d');
                                            var img = new Image();

                                            canvas.width = 1200;
                                            canvas.height = 800;

                                            img.onload = function () {
                                                ctx.fillStyle = '#ffffff';
                                                ctx.fillRect(0, 0, canvas.width, canvas.height);
                                                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

                                                var link = document.createElement('a');
                                                link.download = 'Report-F17-' + column + '.png';
                                                link.href = canvas.toDataURL('image/png');
                                                link.click();
                                            };

                                            img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg)));
                                        }
                                    },
                                    {
                                        text: 'Download JPEG image',
                                        onclick: function () {
                                            var chart = this;
                                            var svg = chart.getSVG({
                                                chart: {
                                                    height: 800
                                                },
                                                legend: {
                                                    navigation: { enabled: false },
                                                    maxHeight: null
                                                }
                                            });
                                            var canvas = document.createElement('canvas');
                                            var ctx = canvas.getContext('2d');
                                            var img = new Image();

                                            canvas.width = 1200;
                                            canvas.height = 800;

                                            img.onload = function () {
                                                ctx.fillStyle = '#ffffff';
                                                ctx.fillRect(0, 0, canvas.width, canvas.height);
                                                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

                                                var link = document.createElement('a');
                                                link.download = 'Report-F17-' + column + '.jpg';
                                                link.href = canvas.toDataURL('image/jpeg', 0.9);
                                                link.click();
                                            };

                                            img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg)));
                                        }
                                    },
                                    {
                                        text: 'Download SVG vector image',
                                        onclick: function () {
                                            var chart = this;
                                            var svg = chart.getSVG({
                                                chart: {
                                                    height: 800
                                                },
                                                legend: {
                                                    navigation: { enabled: false },
                                                    maxHeight: null
                                                }
                                            });
                                            var blob = new Blob([svg], { type: 'image/svg+xml' });
                                            var url = URL.createObjectURL(blob);

                                            var link = document.createElement('a');
                                            link.download = 'Report-F17-' + column + '.svg';
                                            link.href = url;
                                            link.click();

                                            URL.revokeObjectURL(url);
                                        }
                                    },
                                    'separator',
                                    'downloadCSV',
                                    'downloadXLS',
                                    'viewData'
                                ]
                            }
                        },
                        tableCaption: data.title,
                        csv: {
                            columnHeaderFormatter: function (item, key) {
                                if (!item || item instanceof Highcharts.Axis) {
                                    return 'Category'
                                }
                                return item.name;
                            }
                        }
                    },
                    responsive: {
                        rules: [{
                            condition: {
                                maxWidth: 768
                            },
                            chartOptions: {
                                legend: {
                                    align: 'center',
                                    verticalAlign: 'bottom',
                                    layout: 'horizontal'
                                }
                            }
                        }]
                    }
                });
            }

            if (Object.keys(chartData).length > 0 && years.length > 0) {
                Object.keys(chartData).forEach(column => {
                    charts[column] = createChart(column, chartData[column]);
                });
            }

            // Update charts on theme change
            const observer = new MutationObserver(function (mutations) {
                mutations.forEach(function (mutation) {
                    if (mutation.attributeName === "class") {
                        const colors = getColors();
                        Object.values(charts).forEach(chart => {
                            chart.update({
                                chart: { backgroundColor: colors.bg },
                                xAxis: {
                                    labels: { style: { color: colors.text } },
                                    lineColor: colors.grid,
                                    tickColor: colors.grid
                                },
                                yAxis: {
                                    title: { style: { color: colors.text } },
                                    labels: { style: { color: colors.text } },
                                    gridLineColor: colors.grid
                                },
                                legend: {
                                    itemStyle: { color: colors.legendText }
                                },
                                plotOptions: {
                                    column: {
                                        dataLabels: { style: { color: colors.text } }
                                    }
                                }
                            });
                        });
                    }
                });
            });

            observer.observe(document.documentElement, { attributes: true });
        });
    </script>
@endpush

@push('styles')
    <style>
        /* Highcharts Data Table Styling */
        .highcharts-data-table {
            overflow-x: auto !important;
            max-width: 100% !important;
            margin-top: 25px !important;
            border: none !important;
            box-shadow: none !important;
        }

        .highcharts-data-table table {
            border-collapse: collapse !important;
            border-spacing: 0;
            background: white;
            min-width: 100%;
            margin-top: 0 !important;
            font-family: 'Inter', system-ui, sans-serif !important;
            border: none !important;
        }

        .highcharts-data-table th,
        .highcharts-data-table td {
            padding: 12px 10px !important;
            text-align: center !important;
            border: 1px solid #e5e7eb !important;
            color: #4b5563 !important;
            font-size: 13px !important;
        }

        .highcharts-data-table thead tr {
            background-color: #f8fafc !important;
        }

        .highcharts-data-table thead th {
            font-weight: 700 !important;
            color: #1f2937 !important;
            vertical-align: middle !important;
            min-width: 100px;
            white-space: normal !important;
            line-height: 1.4 !important;
        }

        .highcharts-data-table tbody tr:nth-child(even) {
            background-color: #fcfcfd !important;
        }

        .highcharts-data-table tbody th {
            font-weight: 700 !important;
            color: #111827 !important;
            background-color: transparent !important;
        }

        .highcharts-data-table caption {
            caption-side: bottom !important;
            text-align: left !important;
            padding: 15px 5px !important;
            color: #374151 !important;
            font-size: 16px !important;
            font-weight: 400 !important;
            font-family: 'Inter', sans-serif !important;
            border: none !important;
        }

        /* Dark mode support for highcharts table */
        .dark .highcharts-data-table table {
            background: #1f2937;
            border: none !important;
        }

        .dark .highcharts-data-table tbody tr:nth-child(even) {
            background-color: #1f2937 !important;
        }

        .dark .highcharts-data-table th,
        .dark .highcharts-data-table td {
            border-color: #374151 !important;
            color: #d1d5db !important;
        }

        .dark .highcharts-data-table thead tr {
            background-color: #111827 !important;
        }

        .dark .highcharts-data-table thead th {
            color: #f3f4f6 !important;
        }

        .dark .highcharts-data-table tbody th {
            color: #ffffff !important;
        }

        .dark .highcharts-data-table caption {
            color: #9ca3af !important;
        }
    </style>
@endpush