@extends('admin.layout')

@section('title', 'Kepuasan Pengguna')

@section('page-title', 'Laporan Tingkat Kepuasan Pengguna')
@section('page-subtitle', 'Data Statistik Kepuasan Pengguna terhadap Lulusan')

@section('content')
    <div class="flex flex-col gap-6 overflow-x-hidden">
        <!-- 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 method="GET" action="{{ route('penilaian.kepuasan-pengguna.index') }}"
                class="flex flex-col md:flex-row md:items-end gap-4">
                <div class="flex-1 w-full md: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>
                    <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 }}" {{ ($selectedProdi == $prodi->KodeID) ? 'selected' : '' }}>
                                {{ $prodi->KodeID }} - {{ $prodi->Nama }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="flex items-center gap-2 w-full md:w-auto">
                    <button type="submit"
                        class="flex-1 md:flex-none justify-center 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 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 ($selectedProdi)
                        <a href="{{ route('penilaian.kepuasan-pengguna.index') }}"
                            class="flex-1 md:flex-none text-center px-5 py-2.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-all">
                            Reset
                        </a>
                    @endif
                    <a href="{{ route('penilaian.kepuasan-pengguna.export', ['filterprodi' => $selectedProdi]) }}"
                        class="flex-1 md:flex-none justify-center px-5 py-2.5 text-sm font-medium text-white bg-green-600 hover:bg-green-700 rounded-lg shadow-md hover:shadow-lg transition-all flex items-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">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                            <polyline points="7 10 12 15 17 10" />
                            <line x1="12" y1="15" x2="12" y2="3" />
                        </svg>
                        Expor Excel
                    </a>
                </div>
            </form>
        </div>

        <!-- Table View -->
        <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">
                <h3 class="text-lg font-bold text-gray-800 dark:text-white">Persentase Kepuasan Pengguna</h3>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full border-collapse">
                    <thead class="bg-gray-50 dark:bg-gray-700/50">
                        <tr>
                            <th rowspan="2"
                                class="border-b border-r border-gray-200 dark:border-gray-600 px-4 py-3 text-center text-xs font-bold text-gray-600 dark:text-gray-300 uppercase w-12">
                                No</th>
                            <th rowspan="2"
                                class="border-b border-r border-gray-200 dark:border-gray-600 px-4 py-3 text-left text-xs font-bold text-gray-600 dark:text-gray-300 uppercase">
                                Jenis Kemampuan</th>
                            <th colspan="4"
                                class="border-b border-gray-200 dark:border-gray-600 px-4 py-3 text-center text-xs font-bold text-gray-600 dark:text-gray-300 uppercase">
                                Tingkat Kepuasan Pengguna (%)</th>
                        </tr>
                        <tr>
                            <th
                                class="border-b border-r border-gray-200 dark:border-gray-600 px-4 py-2 text-center text-xs font-bold text-gray-500 dark:text-gray-400 uppercase bg-green-50 dark:bg-green-900/10">
                                Sangat Baik</th>
                            <th
                                class="border-b border-r border-gray-200 dark:border-gray-600 px-4 py-2 text-center text-xs font-bold text-gray-500 dark:text-gray-400 uppercase bg-blue-50 dark:bg-blue-900/10">
                                Baik</th>
                            <th
                                class="border-b border-r border-gray-200 dark:border-gray-600 px-4 py-2 text-center text-xs font-bold text-gray-500 dark:text-gray-400 uppercase bg-yellow-50 dark:bg-yellow-900/10">
                                Cukup</th>
                            <th
                                class="border-b border-gray-200 dark:border-gray-600 px-4 py-2 text-center text-xs font-bold text-gray-500 dark:text-gray-400 uppercase bg-red-50 dark:bg-red-900/10">
                                Kurang</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                        @foreach($reportData as $index => $row)
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors">
                                <td
                                    class="px-4 py-3 text-sm text-center text-gray-600 dark:text-gray-400 border-r border-gray-100 dark:border-gray-700">
                                    {{ $index + 1 }}
                                </td>
                                <td
                                    class="px-4 py-3 text-sm font-medium text-gray-800 dark:text-white border-r border-gray-100 dark:border-gray-700">
                                    {{ $row['name'] }}
                                </td>
                                <td
                                    class="px-4 py-3 text-sm text-center text-gray-600 dark:text-gray-300 border-r border-gray-100 dark:border-gray-700 bg-green-50/20 dark:bg-green-900/5">
                                    {{ $row['sangat_baik'] }}%</td>
                                <td
                                    class="px-4 py-3 text-sm text-center text-gray-600 dark:text-gray-300 border-r border-gray-100 dark:border-gray-700 bg-blue-50/20 dark:bg-blue-900/5">
                                    {{ $row['baik'] }}%</td>
                                <td
                                    class="px-4 py-3 text-sm text-center text-gray-600 dark:text-gray-300 border-r border-gray-100 dark:border-gray-700 bg-yellow-50/20 dark:bg-yellow-900/5">
                                    {{ $row['cukup'] }}%</td>
                                <td
                                    class="px-4 py-3 text-sm text-center text-gray-600 dark:text-gray-300 bg-red-50/20 dark:bg-red-900/5">
                                    {{ $row['kurang'] }}%</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Chart Card -->
        <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">
                <h3 class="text-lg font-bold text-gray-800 dark:text-white">Grafik Kepuasan Pengguna</h3>
            </div>
            <div class="p-6">
                <div id="chart-container" class="w-full h-[400px] md:h-[450px]" data-series='@json($chartSeries)'></div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('js/highcharts/highcharts.js') }}"></script>
    <script src="{{ asset('js/highcharts/modules/exporting.js') }}"></script>
    <script src="{{ asset('js/highcharts/modules/export-data.js') }}"></script>
    <script src="{{ asset('js/highcharts/modules/accessibility.js') }}"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const chartSeries = JSON.parse(document.getElementById('chart-container').dataset.series);

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

            let colors = getColors();

            const chart = Highcharts.chart('chart-container', {
                chart: {
                    type: 'column',
                    backgroundColor: colors.bg,
                    style: { fontFamily: 'Inter, system-ui, sans-serif' }
                },
                title: { text: null },
                xAxis: {
                    categories: ['Sangat Baik', 'Baik', 'Cukup', 'Kurang'],
                    crosshair: true,
                    labels: { style: { color: colors.text } },
                    lineColor: colors.grid,
                    tickColor: colors.grid
                },
                yAxis: {
                    min: 0,
                    title: { text: 'Jumlah Jawaban', 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,
                    headerFormat: '<span style="font-size:11px; font-weight: bold; color: #4B5563">{point.key}</span><br/>',
                    pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>'
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.1,
                        borderWidth: 0,
                        borderRadius: 6,
                        dataLabels: {
                            enabled: true,
                            style: { fontSize: '10px', color: colors.text, textOutline: 'none' }
                        }
                    }
                },
                legend: {
                    itemStyle: { color: colors.legendText, fontWeight: '500', fontSize: '12px' },
                    itemHoverStyle: { color: '#3B82F6' }
                },
                navigation: {
                    buttonOptions: {
                        enabled: false
                    }
                },
                series: chartSeries,
                credits: { enabled: false },
                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 768
                        },
                        chartOptions: {
                            legend: {
                                align: 'center',
                                verticalAlign: 'bottom',
                                layout: 'horizontal',
                                itemStyle: { fontSize: '10px' }
                            },
                            xAxis: {
                                labels: {
                                    style: { fontSize: '10px' },
                                    rotation: -45
                                }
                            },
                            plotOptions: {
                                column: {
                                    dataLabels: {
                                        enabled: false
                                    }
                                }
                            }
                        }
                    }]
                }
            });

            // Theme change observer
            const observer = new MutationObserver(() => {
                const newColors = getColors();
                chart.update({
                    chart: { backgroundColor: newColors.bg },
                    xAxis: {
                        labels: { style: { color: newColors.text } },
                        lineColor: newColors.grid,
                        tickColor: newColors.grid
                    },
                    yAxis: {
                        title: { style: { color: newColors.text } },
                        labels: { style: { color: newColors.text } },
                        gridLineColor: newColors.grid
                    },
                    legend: { itemStyle: { color: newColors.legendText } },
                    plotOptions: { column: { dataLabels: { style: { color: newColors.text } } } }
                });
            });
            observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
        });
    </script>
@endpush