<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <title>Dashboard - Alumni System</title>
    <meta content="" name="description">
    <meta content="" name="keywords">

    <!-- Favicons -->
    <link href="{{ asset('assets/img/favicon.png') }}" rel="icon">
    <link href="{{ asset('assets/img/apple-touch-icon.png') }} " rel="apple-touch-icon">

    <!-- Google Fonts -->
    <link href="https://fonts.gstatic.com" rel="preconnect">
    <link
        href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
        rel="stylesheet">

    <!-- Vendor CSS Files -->
    <link href="{{ asset('assets/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/vendor/bootstrap-icons/bootstrap-icons.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/vendor/boxicons/css/boxicons.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/vendor/quill/quill.snow.css') }} " rel="stylesheet">
    <link href="{{ asset('assets/vendor/quill/quill.bubble.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/vendor/remixicon/remixicon.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/vendor/simple-datatables/style.css') }}" rel="stylesheet">

    <!-- Template Main CSS File -->
    <link href="{{ asset('assets/css/style.css') }}" rel="stylesheet">

</head>

<body>

    @include('sidebar')
    @include('header')


    <main id="main" class="main">
        <div class="pagetitle">
            <h1>Dashboard</h1>
            <nav>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                    <li class="breadcrumb-item active">Dashboard</li>
                </ol>
            </nav>
        </div><!-- End Page Title -->

        <section class="section dashboard">
            <div class="row">

                <!-- Left side columns -->
                <div class="col-lg-12">
                    <div class="row">

                        <!-- Info Cards -->
                        <div class="col-xxl-4 col-md-6">
                            <div class="card info-card sales-card">
                                <div class="filter">
                                    <a class="icon" href="#" data-bs-toggle="dropdown"><i
                                            class="bi bi-three-dots"></i></a>
                                </div>
                                <div class="card-body">
                                    <h5 class="card-title">Total Alumni
                                        @if (request('angkatan'))
                                            <span>| Angkatan {{ $angkatanList[request('angkatan')] ?? '' }}</span>
                                        @else
                                            <span>| Semua Angkatan</span>
                                        @endif
                                    </h5>

                                    <div class="d-flex align-items-center">
                                        <div
                                            class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                            <i class="bi bi-people"></i>
                                        </div>
                                        <div class="ps-3">
                                            <h6>{{ $totalAlumniCount }}</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><!-- End Sales Card -->

                        <div class="col-xxl-4 col-md-6">
                            <div class="card info-card revenue-card">
                                <!-- Filter Dropdown -->
                                <div class="filter">
                                    <a class="icon" href="#" data-bs-toggle="dropdown"><i
                                            class="bi bi-three-dots"></i></a>
                                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                                        <li class="dropdown-header text-start">
                                            <h6>Pilih Angkatan</h6>
                                        </li>
                                        @foreach ($angkatanList as $id => $tahun)
                                            <li>
                                                <a class="dropdown-item"
                                                    href="{{ route('dashboard', ['angkatan' => $id]) }}"
                                                    {{ request('angkatan') == $id ? 'active' : '' }}>
                                                    {{ $tahun }}
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>

                                <!-- Card Content -->
                                <div class="card-body">
                                    <h4 class="card-title">Pekerjaan <br> Paling Banyak  Ditekuni
                                        @if (request('angkatan'))
                                            <br
                                            <span>| Angkatan {{ $angkatanList[request('angkatan')] ?? '' }}</span>
                                        @else
                                            <span>| Semua Angkatan</span>
                                        @endif
                                    </h4>
                                    <div class="d-flex align-items-center">
                                        <div
                                            class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                            <i class="bi bi-briefcase-fill"></i>
                                        </div>
                                        <div class="ps-3">
                                            <h5>{{ $topJobName ?? 'Belum Ada Data' }}</h5>
                                            <span class="text-primary small pt-1 fw-bold">{{ $topJobCount ?? 0 }}
                                                alumni</span>
                                            <span class="text-muted small pt-2 ps-1">menekuni profesi ini</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Revenue Card -->

                        <div class="col-xxl-4 col-xl-12">
                            <div class="card info-card customers-card">
                                <div class="filter">
                                    <a class="icon" href="#" data-bs-toggle="dropdown"><i
                                            class="bi bi-three-dots"></i></a>
                                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                                        <li class="dropdown-header text-start">
                                            <h6>Filter</h6>
                                        </li>
                                        <li><a class="dropdown-item" href="#">Today</a></li>
                                        <li><a class="dropdown-item" href="#">This Month</a></li>
                                        <li><a class="dropdown-item" href="#">This Year</a></li>
                                    </ul>
                                </div>
                                <div class="card-body">
                                    <h5 class="card-title">Total Angkatan <span>| All Time</span></h5>
                                    <div class="d-flex align-items-center">
                                        <div
                                            class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                            <i class="bi bi-calendar4-week"></i>
                                        </div>
                                        <div class="ps-3">
                                            <h6>{{ $totalAngkatanCount }}</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><!-- End Customers Card -->

                        <!-- === FILTER DROPDOWN & PIE CHART === -->
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body pt-3">
                                    <form method="GET" action="{{ route('dashboard') }}" class="mb-3">
                                        <label for="angkatan" class="form-label">Filter Angkatan:</label>
                                        <select class="form-select" name="angkatan" id="angkatan"
                                            onchange="this.form.submit()">
                                            <option value="">Semua Angkatan</option>
                                            @foreach ($angkatanList as $id => $tahun)
                                                <option value="{{ $id }}"
                                                    {{ request('angkatan') == $id ? 'selected' : '' }}>
                                                    {{ $tahun }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </form>

                                    <div id="clusterPieChart" style="height: 400px;"></div>
                                    <script src="https://code.highcharts.com/highcharts.js"></script>
                                    <script>
                                        Highcharts.chart('clusterPieChart', {
                                            chart: {
                                                type: 'pie'
                                            },
                                            title: {
                                                text: 'Kesesuaian Alumni terhadap Bidang Kerja'
                                            },
                                            series: [{
                                                name: 'Total',
                                                colorByPoint: true,
                                                data: [
                                                    @foreach ($clusterLabels as $index => $label)
                                                        {
                                                            name: "{{ $label }}",
                                                            y: {{ $clusterValues[$index] }}
                                                        }
                                                        {{ !$loop->last ? ',' : '' }}
                                                    @endforeach
                                                ]
                                            }]
                                        });
                                    </script>
                                </div>
                            </div>
                        </div>
                        <!-- === END FILTER + PIE CHART === -->
                        <!-- Cluster Distribution Table - Row 3 -->
                        <div class="col-lg-12">
                            <div class="card dashboard-card">
                                <div class="card-body">
                                    <h5 class="card-title">Distribusi Cluster Alumni
                                        @if (request('angkatan'))
                                            <span>| Angkatan {{ $angkatanList[request('angkatan')] }}</span>
                                        @else
                                            <span>| Semua Angkatan</span>
                                        @endif
                                    </h5>
                                    
                                    <div class="table-responsive">
                                        <table class="table table-borderless">
                                            <thead align="center" valign="middle">
                                                <tr>
                                                    <th scope="col">Cluster</th>
                                                    <th scope="col">Jumlah Alumni</th>
                                                    <th scope="col">Persentase</th>
                                                    <th scope="col">Keterangan</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @php
                                                    $totalAlumniInClusters = array_sum($clusterValues);
                                                    $clusterDescriptions = [
                                                        'TIDAK SESUAI' => 'Alumni dengan pekerjaan tidak sesuai dengan bidang kelulusan',
                                                        'KURANG SESUAI' => 'Alumni dengan pekerjaan cukup relevan dengan bidang kelulusan',
                                                        'SANGAT SESUAI' => 'Alumni dengan pekerjaan sangat sesuai dengan bidang kelulusan'
                                                    ];
                                                @endphp
                                                
                                                @foreach ($clusterLabels as $index => $label)
                                                    <tr>
                                                        <td>
                                                            <span class="cluster-label cluster-{{ $index }}">{{ $label }}</span>
                                                        </td>
                                                        <td>{{ $clusterValues[$index] }}</td>
                                                        <td>
                                                            @if($totalAlumniInClusters > 0)
                                                                {{ round(($clusterValues[$index] / $totalAlumniInClusters) * 100, 1) }}%
                                                            @else
                                                                0%
                                                            @endif
                                                        </td>
                                                        <td>{{ $clusterDescriptions[$label] ?? '' }}</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- === PROFESSION TREND CHART === -->
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Tren Profesi Per Angkatan <span>| All Time</span></h5>
                                    <div id="professionTrendChart"></div>
                                    <script>
                                        document.addEventListener("DOMContentLoaded", () => {
                                            const years = @json($chartYears);
                                            const seriesData = @json($chartData);
                                            new ApexCharts(document.querySelector("#professionTrendChart"), {
                                                series: seriesData,
                                                chart: {
                                                    type: 'line',
                                                    height: 350,
                                                    toolbar: {
                                                        show: true
                                                    },
                                                    zoom: {
                                                        enabled: true
                                                    }
                                                },
                                                xaxis: {
                                                    categories: years,
                                                    title: {
                                                        text: 'Tahun Angkatan'
                                                    }
                                                },
                                                yaxis: {
                                                    title: {
                                                        text: 'Jumlah Alumni'
                                                    }
                                                },
                                                stroke: {
                                                    curve: 'smooth',
                                                    width: 2
                                                },
                                                colors: ['#4154f1', '#2eca6a', '#ff771d', '#9061F9', '#ffc107'],
                                                markers: {
                                                    size: 4,
                                                    colors: ['#fff'],
                                                    strokeColors: '#4154f1',
                                                    strokeWidth: 2
                                                },
                                                title: {
                                                    text: 'Distribusi Profesi Berdasarkan Angkatan',
                                                    align: 'center'
                                                }
                                            }).render();
                                        });
                                    </script>
                                </div>
                            </div>
                        </div><!-- End Profession Trend Chart -->
                    </div>
                </div><!-- End Left side columns -->
            </div>
        </section>
    </main>

    <style>
    /* CSS untuk memberikan warna berdasarkan kategori cluster */
.cluster-label {
            padding: 5px 10px;
            border-radius: 5px;
            font-weight: 600;
            display: inline-block;
            margin-right: 10px;
        }

        .cluster-0 {
            background-color: #FFE0E0;
            color: #D10000;
        }

        .cluster-1 {
            background-color: #FFF3CD;
            color: #856404;
        }

        .cluster-2 {
            background-color: #D4EDDA;
            color: #155724;
        }
    </style>

    <!-- ======= Footer ======= -->
    @include('footer')

    <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
            class="bi bi-arrow-up-short"></i></a>

    <!-- Vendor JS Files -->
    <script src="{{ asset('assets/vendor/apexcharts/apexcharts.min.js') }} "></script>
    <script src="{{ asset('assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }} "></script>
    <script src="{{ asset('assets/vendor/chart.js/chart.umd.js') }} "></script>
    <script src="{{ asset('assets/vendor/echarts/echarts.min.js') }} "></script>
    <script src="{{ asset('assets/vendor/quill/quill.js') }} "></script>
    <script src="{{ asset('assets/vendor/simple-datatables/simple-datatables.js') }} "></script>
    <script src="{{ asset('assets/vendor/tinymce/tinymce.min.js') }} "></script>
    <script src="{{ asset('assets/vendor/php-email-form/validate.js') }} "></script>

    <!-- Template Main JS File -->
    <script src="{{ asset('assets/js/main.js') }}"></script>

</body>

</html>