@extends('admin.layout')

@section('title', 'Report Tabulasi Bagaimana Mencari Pekerjaan')

@section('page-title', 'Report Tabulasi Bagaimana Mencari Pekerjaan (f4)')
@section('page-subtitle', 'Bagaimana anda mencari pekerjaan tersebut?')

@section('content')
    <div class="mb-6">
        <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.f4') }}" 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.f4') }}"
                            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>
    </div>

    @if($years->isEmpty())
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-10 text-center">
            <svg class="w-16 h-16 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z">
                </path>
            </svg>
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">Tidak ada data tersedia</h3>
            <p class="text-gray-500 dark:text-gray-400 mt-1">Silakan pilih program studi lain atau sesuaikan filter Anda.</p>
        </div>
    @else
        <div class="space-y-6">
            @foreach($chartData as $column => $data)
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md 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">
                        <h3 class="text-lg font-bold text-gray-800 dark:text-white">
                            {{ $data['title'] }}
                        </h3>
                        <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 id="chart-{{ $column }}" class="w-full h-[350px] md:h-[350px]"></div>
                </div>
            @endforeach
        </div>
    @endif

    @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
                        },
                        title: { text: null },
                        xAxis: {
                            categories: years,
                            crosshair: true,
                            labels: { style: { color: colors.text } }
                        },
                        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.1,
                                borderWidth: 0,
                                borderRadius: 4
                            }
                        },
                        legend: {
                            itemStyle: {
                                color: colors.legendText,
                                fontSize: '11px',
                                fontWeight: 'medium'
                            },
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom',
                            padding: 10
                        },
                        series: data.series,
                        credits: { enabled: false },
                        exporting: {
                            enabled: true,
                            filename: 'Report-f4-' + 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-f4-' + 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-f4-' + 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-f4-' + 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: {
                                        itemWidth: null,
                                        width: null,
                                        align: 'center',
                                        padding: 0
                                    },
                                    plotOptions: {
                                        column: {
                                            dataLabels: { enabled: false }
                                        }
                                    }
                                }
                            }]
                        }
                    });
                }

                if (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({
                                    xAxis: { labels: { style: { color: colors.text } } },
                                    yAxis: {
                                        title: { style: { color: colors.text } },
                                        labels: { style: { color: colors.text } },
                                        gridLineColor: colors.grid
                                    },
                                    legend: {
                                        itemStyle: { color: colors.legendText }
                                    }
                                });
                            });
                        }
                    });
                });

                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
@endsection