@props(['data' => null, 'title' => 'Visualisasi Tracer Study Kemdikbud (IKU 1)'])

@php
    $initialData = $data ?? [
        'statusAktivitas' => ['labels' => ['Bekerja', 'Lanjut Studi', 'Mencari Kerja'], 'series' => [0, 0, 0], 'total' => 0],
        'masaTunggu' => ['categories' => ['≤ 3 bulan', '3-6 bulan', '> 6 bulan'], 'series' => [0, 0, 0], 'total' => 0]
    ];
    $statusSeries = json_encode($initialData['statusAktivitas']['series'] ?? [0,0,0]);
    $statusLabels = json_encode($initialData['statusAktivitas']['labels'] ?? ['Bekerja', 'Lanjut Studi', 'Mencari Kerja']);
    $masaSeries = json_encode($initialData['masaTunggu']['series'] ?? [0,0,0]);
    $masaCategories = json_encode($initialData['masaTunggu']['categories'] ?? ['≤ 3 bulan', '3-6 bulan', '> 6 bulan']);
    $uniqueId = uniqid('tracer_');
@endphp

<!-- CDN ApexCharts -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<div class="tc-wrapper" id="{{ $uniqueId }}-container">
    <!-- Component Header -->
    <div class="tc-header">
        <div>
            <div class="tc-badge-group">
                <span class="tc-badge tc-badge-emerald">
                    <i class="fas fa-chart-line"></i> Standar IKU 1 Kemdikbud
                </span>
                <span class="tc-badge tc-badge-indigo">Live Realtime</span>
            </div>
            <h3 class="tc-title">{{ $title }}</h3>
            <p class="tc-subtitle">Statistik Status Aktivitas Alumni & Masa Tunggu Kerja Lulusan Universitas Cenderawasih</p>
        </div>

        <button type="button" class="tc-btn-refresh" id="{{ $uniqueId }}-btn-refresh" onclick="refreshTracerCharts_{{ $uniqueId }}()" title="Refresh Data Grafik">
            <i class="fas fa-sync-alt"></i> Sync Data
        </button>
    </div>

    <!-- Quick KPI Mini Badges -->
    <div class="tc-kpi-grid">
        <div class="tc-kpi-card">
            <div class="tc-kpi-icon" style="background: rgba(16, 185, 129, 0.15); color: #10B981;">
                <i class="fas fa-briefcase"></i>
            </div>
            <div>
                <div class="tc-kpi-label">Bekerja (IKU 1)</div>
                <div class="tc-kpi-value" id="{{ $uniqueId }}-val-bekerja">
                    {{ $initialData['statusAktivitas']['series'][0] ?? 0 }}
                </div>
            </div>
        </div>

        <div class="tc-kpi-card">
            <div class="tc-kpi-icon" style="background: rgba(59, 130, 246, 0.15); color: #3B82F6;">
                <i class="fas fa-user-graduate"></i>
            </div>
            <div>
                <div class="tc-kpi-label">Melanjutkan Studi</div>
                <div class="tc-kpi-value" id="{{ $uniqueId }}-val-studi">
                    {{ $initialData['statusAktivitas']['series'][1] ?? 0 }}
                </div>
            </div>
        </div>

        <div class="tc-kpi-card">
            <div class="tc-kpi-icon" style="background: rgba(245, 158, 11, 0.15); color: #F59E0B;">
                <i class="fas fa-search-dollar"></i>
            </div>
            <div>
                <div class="tc-kpi-label">Mencari Kerja</div>
                <div class="tc-kpi-value" id="{{ $uniqueId }}-val-mencari">
                    {{ $initialData['statusAktivitas']['series'][2] ?? 0 }}
                </div>
            </div>
        </div>

        <div class="tc-kpi-card">
            <div class="tc-kpi-icon" style="background: rgba(16, 185, 129, 0.15); color: #10B981;">
                <i class="fas fa-clock"></i>
            </div>
            <div>
                <div class="tc-kpi-label">≤ 3 Bulan Kerja</div>
                <div class="tc-kpi-value" id="{{ $uniqueId }}-val-cepat">
                    {{ $initialData['masaTunggu']['series'][0] ?? 0 }}
                </div>
            </div>
        </div>
    </div>

    <!-- 2 Main Charts Row -->
    <div class="tc-charts-grid">
        <!-- Chart 1: Donut Chart Status Aktivitas Alumni -->
        <div class="tc-chart-box">
            <div class="tc-chart-header">
                <div>
                    <h4 class="tc-chart-title">
                        <i class="fas fa-chart-pie" style="color: #10B981;"></i> Status Aktivitas Alumni (IKU 1)
                    </h4>
                    <span class="tc-chart-sub">Proporsi Bekerja, Lanjut Studi, & Mencari Kerja</span>
                </div>
                <span class="tc-pill" id="{{ $uniqueId }}-total-status">
                    Total: {{ $initialData['statusAktivitas']['total'] ?? 0 }}
                </span>
            </div>
            <div id="{{ $uniqueId }}-chart-status" style="min-height: 320px; width: 100%;"></div>
        </div>

        <!-- Chart 2: Bar / Column Chart Masa Tunggu Kerja -->
        <div class="tc-chart-box">
            <div class="tc-chart-header">
                <div>
                    <h4 class="tc-chart-title">
                        <i class="fas fa-chart-column" style="color: #3B82F6;"></i> Masa Tunggu Kerja Lulusan
                    </h4>
                    <span class="tc-chart-sub">Distribusi Waktu Tunggu Alumni (Bulan)</span>
                </div>
                <span class="tc-pill" id="{{ $uniqueId }}-total-masa">
                    Total: {{ $initialData['masaTunggu']['total'] ?? 0 }}
                </span>
            </div>
            <div id="{{ $uniqueId }}-chart-masa" style="min-height: 320px; width: 100%;"></div>
        </div>
    </div>
</div>

<style>
    .tc-wrapper {
        background-color: #0f172a;
        border: 1px solid #1e293b;
        border-radius: 20px;
        padding: 24px;
        margin-bottom: 24px;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
        color: #f8fafc;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }
    .tc-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #1e293b;
        flex-wrap: wrap;
    }
    .tc-badge-group {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
    }
    .tc-badge {
        font-size: 12px;
        font-weight: 700;
        padding: 4px 12px;
        border-radius: 9999px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .tc-badge-emerald {
        background: rgba(16, 185, 129, 0.15);
        color: #10B981;
        border: 1px solid rgba(16, 185, 129, 0.3);
    }
    .tc-badge-indigo {
        background: rgba(99, 102, 241, 0.15);
        color: #818cf8;
        border: 1px solid rgba(99, 102, 241, 0.3);
    }
    .tc-title {
        color: #ffffff;
        font-size: 1.25rem;
        font-weight: 800;
        margin: 0;
        line-height: 1.3;
    }
    .tc-subtitle {
        color: #94a3b8;
        font-size: 0.85rem;
        margin: 4px 0 0 0;
    }
    .tc-btn-refresh {
        background: transparent;
        border: 1px solid #334155;
        color: #e2e8f0;
        font-size: 13px;
        font-weight: 600;
        padding: 8px 16px;
        border-radius: 9999px;
        cursor: pointer;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .tc-btn-refresh:hover {
        background: #1e293b;
        color: #ffffff;
        border-color: #6366f1;
    }
    .tc-kpi-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
    }
    .tc-kpi-card {
        background: #070a12;
        border: 1px solid #1e293b;
        border-radius: 16px;
        padding: 16px;
        display: flex;
        align-items: center;
        gap: 14px;
    }
    .tc-kpi-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
    }
    .tc-kpi-label {
        color: #94a3b8;
        font-size: 12px;
        font-weight: 600;
    }
    .tc-kpi-value {
        color: #ffffff;
        font-size: 1.5rem;
        font-weight: 800;
        line-height: 1.2;
    }
    .tc-charts-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 20px;
    }
    .tc-chart-box {
        background: #070a12;
        border: 1px solid #1e293b;
        border-radius: 16px;
        padding: 20px;
        display: flex;
        flex-direction: column;
    }
    .tc-chart-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }
    .tc-chart-title {
        color: #ffffff;
        font-size: 0.95rem;
        font-weight: 700;
        margin: 0 0 4px 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .tc-chart-sub {
        color: #94a3b8;
        font-size: 0.75rem;
        display: block;
    }
    .tc-pill {
        background: rgba(30, 41, 59, 0.8);
        color: #cbd5e1;
        font-size: 12px;
        font-weight: 600;
        padding: 4px 12px;
        border-radius: 9999px;
        border: 1px solid #334155;
    }
</style>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        var statusSeries = {!! $statusSeries !!};
        var statusLabels = {!! $statusLabels !!};
        var masaSeries = {!! $masaSeries !!};
        var masaCategories = {!! $masaCategories !!};

        // Emerald Green accent (#10B981) for Bekerja & <= 3 bulan
        var colorStatus = ['#10B981', '#3B82F6', '#F59E0B'];
        var colorMasa   = ['#10B981', '#3B82F6', '#8B5CF6'];

        // Donut Chart Configuration
        var optionsStatus = {
            chart: {
                type: 'donut',
                height: 330,
                background: 'transparent',
                toolbar: { show: false }
            },
            series: statusSeries,
            labels: statusLabels,
            colors: colorStatus,
            stroke: {
                width: 2,
                colors: ['#070a12']
            },
            dataLabels: {
                enabled: true,
                style: {
                    fontSize: '12px',
                    fontFamily: 'Plus Jakarta Sans, sans-serif',
                    fontWeight: 700
                },
                dropShadow: { enabled: false }
            },
            legend: {
                position: 'bottom',
                horizontalAlign: 'center',
                labels: { colors: '#cbd5e1' },
                fontSize: '13px',
                fontFamily: 'Plus Jakarta Sans, sans-serif',
                markers: { radius: 12 }
            },
            plotOptions: {
                pie: {
                    donut: {
                        size: '70%',
                        background: 'transparent',
                        labels: {
                            show: true,
                            name: {
                                show: true,
                                fontSize: '13px',
                                color: '#94a3b8'
                            },
                            value: {
                                show: true,
                                fontSize: '22px',
                                fontFamily: 'Plus Jakarta Sans, sans-serif',
                                fontWeight: 800,
                                color: '#ffffff',
                                formatter: function(val) { return val; }
                            },
                            total: {
                                show: true,
                                label: 'Total Alumni',
                                color: '#94a3b8',
                                formatter: function(w) {
                                    return w.globals.seriesTotals.reduce(function(a, b) { return a + b; }, 0);
                                }
                            }
                        }
                    }
                }
            },
            tooltip: {
                theme: 'dark',
                y: {
                    formatter: function(val) {
                        return val + " Alumni";
                    }
                }
            }
        };

        var chartStatus_{{ $uniqueId }} = new ApexCharts(document.querySelector("#{{ $uniqueId }}-chart-status"), optionsStatus);
        chartStatus_{{ $uniqueId }}.render();

        // Column Bar Chart Configuration
        var optionsMasa = {
            chart: {
                type: 'bar',
                height: 330,
                background: 'transparent',
                toolbar: { show: false }
            },
            series: [{
                name: 'Jumlah Alumni',
                data: masaSeries
            }],
            xaxis: {
                categories: masaCategories,
                labels: {
                    style: {
                        colors: '#cbd5e1',
                        fontSize: '12px',
                        fontFamily: 'Plus Jakarta Sans, sans-serif'
                    }
                },
                axisBorder: { color: '#1e293b' },
                axisTicks: { color: '#1e293b' }
            },
            yaxis: {
                labels: {
                    style: {
                        colors: '#94a3b8',
                        fontSize: '12px'
                    }
                }
            },
            colors: [function({ value, seriesIndex, dataPointIndex }) {
                return colorMasa[dataPointIndex] || '#10B981';
            }],
            plotOptions: {
                bar: {
                    distributed: true,
                    borderRadius: 8,
                    columnWidth: '55%',
                    dataLabels: {
                        position: 'top'
                    }
                }
            },
            dataLabels: {
                enabled: true,
                offsetY: -20,
                style: {
                    fontSize: '12px',
                    colors: ["#ffffff"],
                    fontWeight: 700
                }
            },
            grid: {
                borderColor: '#1e293b',
                strokeDashArray: 4
            },
            legend: { show: false },
            tooltip: {
                theme: 'dark',
                y: {
                    formatter: function(val) {
                        return val + " Alumni";
                    }
                }
            }
        };

        var chartMasa_{{ $uniqueId }} = new ApexCharts(document.querySelector("#{{ $uniqueId }}-chart-masa"), optionsMasa);
        chartMasa_{{ $uniqueId }}.render();

        // Global refresh function for dynamic updates
        window.refreshTracerCharts_{{ $uniqueId }} = function(filters) {
            var btn = document.getElementById("{{ $uniqueId }}-btn-refresh");
            if (btn) {
                var icon = btn.querySelector("i");
                if (icon) icon.classList.add("fa-spin");
            }

            var url = "{{ route('api.tracer.statistik') }}";
            if (filters) {
                var params = new URLSearchParams(filters).toString();
                if (params) url += "?" + params;
            }

            fetch(url)
                .then(function(res) { return res.json(); })
                .then(function(resData) {
                    if (resData.status === 'success' && resData.data) {
                        var d = resData.data;

                        // Update Charts
                        chartStatus_{{ $uniqueId }}.updateSeries(d.statusAktivitas.series);
                        chartMasa_{{ $uniqueId }}.updateSeries([{ name: 'Jumlah Alumni', data: d.masaTunggu.series }]);

                        // Update Quick Counters
                        document.getElementById("{{ $uniqueId }}-val-bekerja").innerText = d.statusAktivitas.series[0] || 0;
                        document.getElementById("{{ $uniqueId }}-val-studi").innerText   = d.statusAktivitas.series[1] || 0;
                        document.getElementById("{{ $uniqueId }}-val-mencari").innerText = d.statusAktivitas.series[2] || 0;
                        document.getElementById("{{ $uniqueId }}-val-cepat").innerText   = d.masaTunggu.series[0] || 0;

                        // Update Totals
                        document.getElementById("{{ $uniqueId }}-total-status").innerText = "Total: " + (d.statusAktivitas.total || 0);
                        document.getElementById("{{ $uniqueId }}-total-masa").innerText   = "Total: " + (d.masaTunggu.total || 0);
                    }
                })
                .catch(function(err) {
                    console.error("Error refreshing tracer charts:", err);
                })
                .finally(function() {
                    if (btn) {
                        var icon = btn.querySelector("i");
                        if (icon) icon.classList.remove("fa-spin");
                    }
                });
        };
    });
</script>