@extends('layouts.user')

@section('styles')
<style>
.hover-shadow:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

.card {
    overflow: hidden;
}

.chart-container {
    position: relative;
    width: 100%;
    height: 400px;
    margin: 0 auto;
    max-width: 1100px;
}

@media (max-width: 768px) {
    .chart-container {
        height: 250px; /* Lebih pendek di layar kecil */
        max-width: 100%;
    }
    .card-title {
        font-size: 1rem;
    }
}
@media (max-width: 768px) {
    .chart-container {
        height: 250px; /* Lebih pendek di layar kecil */
        max-width: 100%;
    }
}


.card-title {
    position: relative;
    padding-bottom: 10px;
}

.card-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: #4e73df;
    border-radius: 3px;
}

.chart-container {
    position: relative;
    width: 100%;  /* Changed from 400% to 100% */
    height: 400px;
    margin: 0 auto;
    max-width: 1100px;
}

.sidebar {
    position: fixed;
    width: 250px;
    min-height: 100vh;
    z-index: 1;
}
.main-content {
    margin-left: 250px;
}
.header {
    position: relative;
    z-index: 2;
    background: #fff;
}
</style>
@endsection

@section('content')
<div class="container-fluid py-4" style="background-color: #f8f9fa;">
    <!-- Header with enhanced styling -->
    <div class="text-center mb-5">
        <img src="{{ asset('images/logo.png') }}" alt="STIKOM BALI" class="img-fluid mb-3" style="max-width: 150px;">
        <h2 class="fw-bold text-primary">Tracer Study STIKOM Bali</h2>
        <p class="text-muted lead">Statistik dan Analisis Data Alumni</p>
        <div class="border-bottom border-2 w-25 mx-auto my-4"></div>
    </div>

    <!-- Enhanced Summary Cards -->
    <div class="row g-4 mb-5">
        <!-- Total Alumni Card -->
        <div class="col-md-4">
            <div class="card h-100 shadow-sm hover-shadow" style="border-radius: 15px; border: none; transition: all 0.3s;">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="rounded-circle bg-primary bg-opacity-10 p-3">
                            <i class="bi bi-people-fill text-primary fs-3"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="text-muted mb-1 small text-uppercase">Total Alumni</h6>
                            <h3 class="mb-0 fw-bold text-primary">{{ number_format($summary['total_alumni']) }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Employed Alumni Card -->
        <div class="col-md-4">
            <div class="card h-100 shadow-sm hover-shadow" style="border-radius: 15px; border: none; transition: all 0.3s;">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="rounded-circle bg-success bg-opacity-10 p-3">
                            <i class="bi bi-briefcase-fill text-success fs-3"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="text-muted mb-1 small text-uppercase">Sudah Bekerja</h6>
                            <h3 class="mb-0 fw-bold text-success">{{ number_format($summary['employed']) }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Average Salary Card -->
        <div class="col-md-4">
            <div class="card h-100 shadow-sm hover-shadow" style="border-radius: 15px; border: none; transition: all 0.3s;">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="rounded-circle bg-info bg-opacity-10 p-3">
                            <i class="bi bi-cash-stack text-info fs-3"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="text-muted mb-1 small text-uppercase">Rata-rata Gaji</h6>
                            <h3 class="mb-0 fw-bold text-info">
                                @if($summary['avg_salary'] > 0)
                                    {{ 'Rp ' . number_format($summary['avg_salary']/1000000, 1) }}jt
                                @else
                                    -
                                @endif
                            </h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Enhanced Charts Section -->
    <div class="row g-4 mb-5">
        <div class="col-md-6">
            <div class="card shadow-sm h-100" style="border-radius: 15px; border: none;">
                <div class="card-body">
                    <h5 class="card-title fw-bold mb-4 text-primary">
                        <i class="bi bi-pie-chart-fill me-2"></i>
                        Distribusi Bidang Pekerjaan
                    </h5>
                    <div class="chart-container">
                        <canvas id="jobFieldChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card shadow-sm h-100" style="border-radius: 15px; border: none;">
                <div class="card-body">
                    <h5 class="card-title fw-bold mb-4 text-primary">
                        <i class="bi bi-cash me-2"></i>
                        Distribusi Gaji
                    </h5>
                    <div class="chart-container">
                        <canvas id="salaryChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Enhanced Yearly Trend -->
    <div class="card shadow-sm mb-5" style="border-radius: 15px; border: none;">
        <div class="card-body">
            <h5 class="card-title fw-bold mb-4 text-primary">
                <i class="bi bi-graph-up me-2"></i>
                Tingkat Alumni Per Tahun
            </h5>
            <div class="chart-container">
                <canvas id="yearlyChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Enhanced Additional Stats -->
    <div class="row g-4 mb-5">
        <div class="col-md-6">
            <div class="card shadow-sm h-100" style="border-radius: 15px; border: none;">
                <div class="card-body">
                    <h5 class="card-title fw-bold mb-4 text-primary">
                        <i class="bi bi-check2-circle me-2"></i>
                        Statistik Kesesuaian Bidang Pekerjaan
                    </h5>
                    <div class="chart-container">
                        <canvas id="relevanceChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
       <!-- Card Grafik Masa Tunggu -->
    <div class="col-md-6">
    <div class="card shadow-sm h-100" style="border-radius: 15px; border: none;">
        <div class="card-body">
            <h5 class="card-title fw-bold mb-4 text-primary">
                <i class="bi bi-clock me-2"></i>
                Masa Tunggu
            </h5>
            <div class="chart-container">
                <canvas id="waitingPeriodChart"></canvas>
            </div>
        </div>
    </div>
</div>
    </div>

    <!-- Employment Status and Waiting Period Charts -->
    <div class="row g-4 mb-5">
        <div class="col-md-6">
            <div class="card shadow-sm h-100" style="border-radius: 15px; border: none;">
                <div class="card-body">
                    <h5 class="card-title fw-bold mb-4 text-primary">
                        <i class="bi bi-bar-chart-fill me-2"></i>
                        Status Responden per Tahun
                    </h5>
                    <div class="chart-container">
                        <canvas id="employmentStatusChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Grafik Kesesuaian Bidang Ilmu dengan Pekerjaan -->
    
        <div class="col-md-6">
        <div class="card shadow-sm h-100" style="border-radius: 15px; border: none;">
    <div class="card-body">
        <h5 class="card-title fw-bold mb-4 text-primary">
            <i class="bi bi-bar-chart-fill me-2"></i>
            Kesesuaian Bidang Ilmu dengan Pekerjaan (Pertahun )
        </h5>
        <div class="chart-container">
       <canvas id="kesesuaianChart"></canvas>
        </div>
    </div>
</div>

        
        </div>
    </div>
</div>

<!-- New Section for Aspek Pembelajaran -->
<div class="row g-4 mb-5">
    <div class="col-md-12">
        <div class="card shadow-sm h-100" style="border-radius: 15px; border: none;">
            <div class="card-body">
                <h5 class="card-title fw-bold mb-4 text-primary">
                    <i class="bi bi-book me-2"></i>
                    Aspek Pembelajaran Lulusan (Per Tahun)
                </h5>
                <div class="chart-container">
                    <canvas id="aspekPembelajaranChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

 <div class="col-md-6">
    <div class="card shadow-sm h-100" style="border-radius: 15px; border: none;">
    <div class="card-body">
        <h5 class="card-title fw-bold mb-4 text-primary">
            <i class="bi bi-bar-chart-fill me-2"></i>
            Keselarasan Vertikal Lulusan  Pertahun
        </h5>
        <div class="chart-container">
            <canvas id="keselarasanVertikalChart"></canvas>
        </div>
    </div>
</div>




@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    Chart.defaults.font.family = "'Poppins', sans-serif";
    Chart.defaults.color = '#666';

    // Salary Chart
    const salaryLabels = {!! json_encode(array_keys($gajiDistribusi)) !!};
    const salaryData = {!! json_encode(array_values($gajiDistribusi)) !!};
    new Chart(document.getElementById('salaryChart'), {
        type: 'pie',
        data: {
            labels: salaryLabels,
            datasets: [{
                data: salaryData,
                backgroundColor: [
                    '#4e73df', '#1cc88a', '#f6c23e', '#e74a3b'
                ],
                borderWidth: 1,
                borderColor: '#ffffff'
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: { padding: 20, usePointStyle: true, pointStyle: 'circle' }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const value = context.parsed;
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = total > 0 ? ((value * 100) / total).toFixed(1) : 0;
                            return `${context.label}: ${percentage}% (${value})`;
                        }
                    }
                }
            }
        }
    });

    // Yearly Trend Chart
    new Chart(document.getElementById('yearlyChart'), {
        type: 'line',
        data: {
            labels: {!! json_encode($yearlyStats->pluck('tahun_lulus')) !!},
            datasets: [{
                label: 'Jumlah Alumni',
                data: {!! json_encode($yearlyStats->pluck('total')) !!},
                borderColor: '#4e73df',
                backgroundColor: 'rgba(78, 115, 223, 0.1)',
                borderWidth: 2,
                fill: true,
                tension: 0.4,
                pointBackgroundColor: '#4e73df',
                pointBorderColor: '#fff',
                pointBorderWidth: 2,
                pointRadius: 5,
                pointHoverRadius: 7
            }]
        },
        options: {
            responsive: true,
            plugins: { legend: { position: 'bottom' } },
            scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } }
        }
    });

    // Job Field Chart
    const jobFieldLabels = [
        'Instansi Pemerintah', 'Organisasi Non Profit/Lembaga Swadaya Masyarakat',
        'Perusahaan Swasta', 'Wiraswasta/Perusahaan Sendiri', 'BUMN/BUMD',
        'Organisasi Multilateral', 'Lainnya'
    ];
    const jobFieldData = {!! json_encode($instansiData ?? [0,0,0,0,0,0,0]) !!};
    new Chart(document.getElementById('jobFieldChart'), {
        type: 'pie',
        data: {
            labels: jobFieldLabels,
            datasets: [{
                data: jobFieldData,
                backgroundColor: [
                    '#4e73df', '#1cc88a', '#f6c23e', '#e74a3b',
                    '#36b9cc', '#858796', '#fd7e14'
                ],
                borderWidth: 1,
                borderColor: '#ffffff'
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: { padding: 20, usePointStyle: true, pointStyle: 'circle' }
                }
            }
        }
    });

    // Relevance Chart (Statistik Kesesuaian Bidang Pekerjaan - PIE CHART)
    const relevanceLabels = {!! json_encode($kesesuaianData['labels'] ?? ['Sangat Sesuai', 'Sesuai', 'Kurang Sesuai', 'Tidak Sesuai']) !!};
    const relevanceData = {!! json_encode($kesesuaianTotal ?? [0, 0, 0, 0]) !!}; // <-- AMBIL DARI KESESUAIAN TOTAL
    new Chart(document.getElementById('relevanceChart'), {
        type: 'pie',
        data: {
            labels: relevanceLabels,
            datasets: [{
                data: relevanceData, // <-- GUNAKAN DATA TOTAL
                backgroundColor: [
                    'rgba(28, 200, 138, 0.8)',
                    'rgba(78, 115, 223, 0.8)',
                    'rgba(246, 194, 62, 0.8)',
                    'rgba(231, 74, 59, 0.8)'
                ],
                borderWidth: 1,
                borderColor: '#ffffff'
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: { padding: 20, usePointStyle: true, pointStyle: 'circle' }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const label = context.label || '';
                            const value = context.parsed || 0;
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = ((value * 100) / total).toFixed(1);
                            return `${label}: ${percentage}% (${value})`;
                        }
                    }
                }
            }
        }
    });

    // Kesesuaian Bidang Ilmu dengan Pekerjaan (Per Tahun)
    const kesesuaianLabels = {!! json_encode($kesesuaianData['labels'] ?? ['Sangat Sesuai', 'Sesuai', 'Kurang Sesuai', 'Tidak Sesuai']) !!};
const kesesuaianDataFromController = {!! json_encode($kesesuaianData) !!};

// Daftar warna untuk tiap tahun (akan diulang jika tahun lebih banyak dari warna)
const warnaTahun = [
    'rgba(28, 200, 138, 0.8)',   // hijau
    'rgba(78, 115, 223, 0.8)',   // biru
    'rgba(246, 194, 62, 0.8)',   // kuning
    'rgba(231, 74, 59, 0.8)',    // merah
    'rgba(153, 102, 255, 0.8)',  // ungu
    'rgba(54, 162, 235, 0.8)',   // biru muda
    'rgba(255, 99, 132, 0.8)',   // pink
    'rgba(255, 159, 64, 0.8)'    // orange
];

// Ambil semua key tahun (kecuali 'labels')
const tahunKeys = Object.keys(kesesuaianDataFromController).filter(key => key !== 'labels');

// Buat datasets dengan warna berbeda untuk setiap tahun
const kesesuaianDatasets = tahunKeys.map((year, idx) => ({
    label: year,
    data: kesesuaianDataFromController[year],
    backgroundColor: warnaTahun[idx % warnaTahun.length], // warna diulang jika tahun > warna
    borderColor: '#fff',
    borderWidth: 1
}));

const ctx = document.getElementById('kesesuaianChart');
if (ctx && ctx.getContext) {
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: kesesuaianLabels,
            datasets: kesesuaianDatasets
        },
        options: {
            responsive: true,
            plugins: {
                legend: { position: 'bottom' },
                tooltip: {
                    callbacks: {
                        label: function (context) {
                            if (context.dataset && context.dataset.data && typeof context.parsed.y === 'number') {
                                const value = context.parsed.y;
                                const totalTahunIni = context.dataset.data.reduce((a, b) => a + b, 0);
                                const percentage = totalTahunIni > 0 ? ((value * 100) / totalTahunIni).toFixed(1) : 0;
                                return `${context.dataset.label}: ${context.label}: ${value} (${percentage}%)`;
                            }
                            return `${context.dataset.label}: ${context.label}: Data tidak tersedia`;
                        }
                    }
                }
            },
            scales: {
                x: { grid: { display: false } },
                y: { beginAtZero: true }
            }
        }
    });
} else {
    console.log("Canvas dengan ID 'kesesuaianChart' tidak ditemukan.");
}
    // Employment Status Chart
    const employmentStatusLabels = Object.keys({!! json_encode($employmentStatus) !!});
    const employmentStatusData = {!! json_encode($employmentStatus) !!};
    const employmentStatusDatasets = employmentStatusLabels.map(label => ({
        label: label,
        data: employmentStatusData[label],
        backgroundColor: label === 'Bekerja' ? 'rgba(54, 162, 235, 0.8)' :
                         label === 'Wiraswasta' ? 'rgba(255, 159, 64, 0.8)' :
                         label === 'Belum Bekerja' ? 'rgba(75, 192, 192, 0.8)' :
                         label === 'Lanjut Studi' ? 'rgba(153, 102, 255, 0.8)' : '#cccccc'
    }));
    new Chart(document.getElementById('employmentStatusChart'), {
        type: 'bar',
        data: {
            labels: {!! json_encode($yearLabels) !!},
            datasets: employmentStatusDatasets
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: { padding: 20, usePointStyle: true, pointStyle: 'circle' }
                }
            },
            scales: {
                x: { grid: { display: false } },
                y: {
                    beginAtZero: true,
                    max: 100,
                    ticks: {
                        callback: function(value) { return value + '%'; }
                    }
                }
            }
        }
    });

    // Waiting Period Chart
    const waitingPeriodLabels = ['0 Bulan', '1-6 Bulan', '7-12 Bulan', '> 12 Bulan'];
    const waitingPeriodData = Object.values({!! json_encode($waitingPeriod) !!});
    new Chart(document.getElementById('waitingPeriodChart'), {
        type: 'pie',
        data: {
            labels: waitingPeriodLabels,
            datasets: [{
                data: waitingPeriodData.map(yearData => yearData.reduce((sum, val) => sum + val, 0)),
                backgroundColor: [
                    'rgba(78, 115, 223, 0.8)',
                    'rgba(28, 200, 138, 0.8)',
                    'rgba(246, 194, 62, 0.8)',
                    'rgba(231, 74, 59, 0.8)'
                ],
                borderWidth: 1,
                borderColor: '#ffffff'
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: { padding: 20, usePointStyle: true, pointStyle: 'circle' }
                }
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        const value = context.parsed;
                        const total = context.dataset.data.reduce((a, b) => a + b, 0);
                        const percentage = total > 0 ? ((value * 100) / total).toFixed(1) : 0;
                        return `${context.label}: ${percentage}% (${value})`;
                    }
                }
            }
        }
    });

    // Yearly Waiting Period Chart
    const yearlyWaitingPeriodLabels = {!! json_encode($waitingPeriodStats->pluck('tahun_lulus')) !!};
    const yearlyWaitingPeriodData = {!! json_encode($waitingPeriodStats->pluck('avg_waiting')) !!};
    new Chart(document.getElementById('yearlyWaitingPeriodChart'), {
        type: 'bar',
        data: {
            labels: yearlyWaitingPeriodLabels,
            datasets: [{
                label: 'Rata-rata Masa Tunggu (bulan)',
                data: yearlyWaitingPeriodData,
                backgroundColor: 'rgba(231, 74, 59, 0.8)',
                borderRadius: 10
            }]
        },
        options: {
            responsive: true,
            plugins: { legend: { position: 'bottom' } },
            scales: {
                y: {
                    beginAtZero: true,
                    title: { display: true, text: 'Bulan' }
                }
            }
        }
    });

    // Aspek Pembelajaran Radar Chart
    const aspekLabels = {!! json_encode($aspekPembelajaranData['labels'] ?? []) !!};
    const aspekDataFromController = {!! json_encode($aspekPembelajaranData['data'] ?? []) !!};
    const aspekPembelajaranDatasets = Object.keys(aspekDataFromController).map(year => ({
        label: 'Tahun ' + year,
        data: aspekDataFromController[year],
        backgroundColor: year === '2021' ? 'rgba(78, 115, 223, 0.2)' :
                         year === '2022' ? 'rgba(28, 200, 138, 0.2)' :
                         year === '2023' ? 'rgba(246, 194, 62, 0.2)' : '#cccccc',
        borderColor: year === '2021' ? 'rgba(78, 115, 223, 1)' :
                       year === '2022' ? 'rgba(28, 200, 138, 1)' :
                       year === '2023' ? 'rgba(246, 194, 62, 1)' : '#cccccc',
        pointBackgroundColor: year === '2021' ? 'rgba(78, 115, 223, 1)' :
                              year === '2022' ? 'rgba(28, 200, 138, 1)' :
                              year === '2023' ? 'rgba(246, 194, 62, 1)' : '#cccccc',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: year === '2021' ? 'rgba(78, 115, 223, 1)' :
                                year === '2022' ? 'rgba(28, 200, 138, 1)' :
                                year === '2023' ? 'rgba(246, 194, 62, 1)' : '#cccccc'
    }));
    const ctxAspek = document.getElementById('aspekPembelajaranChart');
    if (ctxAspek) {
        new Chart(ctxAspek, {
            type: 'radar',
            data: {
                labels: aspekLabels,
                datasets: aspekPembelajaranDatasets
            },
            options: {
                responsive: true,
                plugins: {
                    legend: { position: 'top' },
                    title: { display: true, text: 'Aspek Pembelajaran Lulusan' }
                },
                scales: {
                    r: {
                        angleLines: { display: true },
                        suggestedMin: 0,
                        suggestedMax: 5,
                        ticks: { beginAtZero: true }
                    }
                }
            }
        });
    } else {
        console.log("Canvas dengan ID 'aspekPembelajaranChart' tidak ditemukan.");
    }

    // Keselarasan Vertikal Lulusan Chart
    const keselarasanLabels = {!! json_encode($keselarasanDataVertikal['labels'] ?? []) !!};
    const keselarasanDataFromController = {!! json_encode($keselarasanDataVertikal) !!};
    const keselarasanDatasets = Object.keys(keselarasanDataFromController)
        .filter(key => key !== 'labels')
        .map(year => ({
            label: year,
            data: keselarasanDataFromController[year],
            backgroundColor: year === '2021' ? 'rgba(78, 115, 223, 0.8)' :
                             year === '2022' ? 'rgba(28, 200, 138, 0.8)' :
                             year === '2023' ? 'rgba(246, 194, 62, 0.8)' : '#cccccc',
            borderColor: year === '2021' ? 'rgba(78, 115, 223, 1)' :
                         year === '2022' ? 'rgba(28, 200, 138, 1)' :
                         year === '2023' ? 'rgba(246, 194, 62, 1)' : '#cccccc',
            borderWidth: 1
        }));
    const ctxKeselarasan = document.getElementById('keselarasanVertikalChart');
    if (ctxKeselarasan) {
        new Chart(ctxKeselarasan, {
            type: 'bar',
            data: {
                labels: keselarasanLabels,
                datasets: keselarasanDatasets
            },
            options: {
                responsive: true,
                plugins: {
                    legend: { position: 'bottom' },
                    title: { display: true, text: 'Keselarasan Vertikal Lulusan per Tahun' }
                },
                scales: {
                    x: { grid: { display: false } },
                    y: { beginAtZero: true }
                }
            }
        });
    } else {
        console.log("Canvas dengan ID 'keselarasanVertikalChart' tidak ditemukan.");
    }
});
</script>
@endpush