@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body ">
            <div class="col">
                {{-- button back --}}
                <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                    </i><span class="font-weight-bold">Kembali</button>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4 class="mb-0">Report Peserta Magang</h4>
        </div>
        @php $filterAktif = request('periode') || request('tahun') || request('universitas') || request('departemen') || request('posisi') || request('nama'); @endphp
        <div class="row g-3 mb-4">
            @foreach ($dashboard['perbandingan'] as $i => $tahunData)
                @php
                    $sebelumnya = $dashboard['perbandingan']->get($i - 1);
                    $perubahanJumlah = $sebelumnya && $sebelumnya->jumlah_total > 0
                        ? (($tahunData->jumlah_total - $sebelumnya->jumlah_total) / $sebelumnya->jumlah_total) * 100
                        : null;
                    $perubahanNilai = $sebelumnya && $sebelumnya->nilai
                        ? (($tahunData->nilai - $sebelumnya->nilai) / $sebelumnya->nilai) * 100
                        : null;
                @endphp
                <div class="col-md-4">
                    <div class="card shadow-sm h-100">
                        <div class="card-body">
                            <h5 class="mb-3">Tahun {{ $tahunData->tahun }}</h5>
                            <small class="text-muted">Total peserta</small>
                            <h2 class="mb-1 text-primary">{{ $tahunData->jumlah_total }}</h2>
                            <small class="text-muted">Total peserta dinilai</small>
                            <h5 class="mb-2 text-info">{{ $tahunData->jumlah }}</h5>
                            <small class="text-muted">Rata-rata nilai</small>
                            <h4 class="mb-2 text-success">{{ $tahunData->nilai !== null ? number_format($tahunData->nilai, 2) : '-' }}</h4>
                            <small class="text-muted">
                                Anggota:
                                @if ($perubahanJumlah !== null)
                                    {{ sprintf('%+.2f%%', $perubahanJumlah) }}
                                @elseif ($tahunData->jumlah_total > 0)
                                    +{{ $tahunData->jumlah_total }}
                                @else
                                    0
                                @endif
                                · Nilai:
                                @if ($perubahanNilai !== null)
                                    {{ sprintf('%+.2f%%', $perubahanNilai) }}
                                @elseif ($tahunData->nilai !== null)
                                    +{{ number_format($tahunData->nilai, 2) }}
                                @else
                                    0
                                @endif
                            </small>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="row g-3 mb-4">
            <div class="col-lg-8">
                <div class="card shadow-sm h-100">
                    <div class="card-header">
                        <h6 class="mb-0">Tren Nilai per Periode</h6>
                    </div>
                    <div class="card-body">
                        <div style="height: 320px"><canvas id="grafik-tren-peserta"></canvas></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card shadow-sm h-100">
                    <div class="card-header">
                        <h6 class="mb-0">Rata-rata Nilai per Universitas</h6>
                    </div>
                    <div class="card-body">
                        <div style="height: 320px"><canvas id="grafik-universitas"></canvas></div>
                        <div class="mt-3 small" style="max-height: 120px; overflow-y: auto;">
                            <div class="fw-bold mb-1">Keterangan Universitas:</div>
                            <div class="row">
                                @foreach ($dashboard['perbandingan_universitas'] as $tahunData)
                                    <div class="col-md-4">
                                        <strong>{{ $tahunData->tahun }}</strong>
                                        <ol class="mb-2 ps-3">
                                            @foreach ($tahunData->universitas as $item)
                                                <li>{{ $item->nama }} ({{ number_format($item->nilai, 2) }})</li>
                                            @endforeach
                                        </ol>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card shadow-sm mb-4">
            <div class="card-header">
                <h6 class="mb-0">Perbandingan 3 Tahun per Departemen</h6>
            </div>
            <div class="table-responsive">
                <table class="table table-hover table-striped mb-0">
                    <thead>
                        <tr>
                            <th>Tahun</th>
                            <th>Departemen</th>
                            <th>Jumlah Anggota</th>
                            <th>Rata-rata Nilai</th>
                            <th>Universitas</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($dashboard['perbandingan'] as $tahunData)
                            @forelse ($tahunData->departemen as $item)
                                <tr>
                                    <td>{{ $tahunData->tahun }}</td>
                                    <td>{{ $item->nama }}</td>
                                    <td>{{ $item->jumlah }}</td>
                                    <td><strong>{{ number_format($item->nilai, 2) }}</strong></td>
                                    <td>{{ $item->universitas->implode(', ') }}</td>
                                </tr>
                            @empty
                                <tr><td>{{ $tahunData->tahun }}</td><td colspan="4">Belum ada data</td></tr>
                            @endforelse
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
      
        {{-- <div class="mt-4">
            <h5 class="mb-3">Performa Nilai per Periode</h5>
            @forelse ($dashboard['periode_details'] as $periode)
                <div class="card shadow-sm mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">{{ $periode->nama }}</h6>
                        <span class="text-muted">{{ $periode->peserta->count() }} peserta dinilai</span>
                    </div>
                    <div class="row g-0">
                        <div class="col-lg-7">
                            <div class="table-responsive">
                                <table class="table table-hover table-striped mb-0">
                                    <thead>
                                        <tr>
                                            <th>Peringkat</th>
                                            <th>Peserta</th>
                                            <th>Universitas</th>
                                            <th>Rata-rata Nilai</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($periode->peserta as $i => $item)
                                            <tr>
                                                <td>{{ $i + 1 }}</td>
                                                <td>{{ $item->nama }}</td>
                                                <td>{{ $item->universitas }}</td>
                                                <td><strong>{{ number_format($item->nilai, 2) }}</strong></td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-lg-5 border-start">
                            <div class="p-3">
                                <h6>Universitas dengan Nilai Terbaik</h6>
                                <div class="table-responsive">
                                    <table class="table table-sm mb-0">
                                        <thead>
                                            <tr>
                                                <th>Universitas</th>
                                                <th>Peserta</th>
                                                <th>Rata-rata</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($periode->universitas as $i => $item)
                                                <tr>
                                                    <td>{{ $item->nama }}</td>
                                                    <td>{{ $item->jumlah }}</td>
                                                    <td><span
                                                            class="badge bg-success">{{ number_format($item->nilai, 2) }}</span>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="alert alert-info">Belum ada data penilaian per periode.</div>
            @endforelse
        </div> --}}
    </div>
@endsection

@push('js')
    <script src="{{ asset('assets/js/plugins/chartjs.min.js') }}"></script>
    <script>
        const tren = @json($dashboard['tren']);
        const universitas = @json($dashboard['universitas']);
        const perbandingan = @json($dashboard['perbandingan']);
        const perbandinganUniversitas = @json($dashboard['perbandingan_universitas']);
        const perbandinganTren = @json($dashboard['perbandingan_tren']);
        new Chart(document.getElementById('grafik-tren-peserta'), {
            type: 'line',
            data: {
                labels: perbandinganTren.map(x => x.tahun),
                datasets: [{
                        label: 'Teknis',
                        data: perbandinganTren.map(x => x.teknis),
                        borderColor: '#028284',
                        pointRadius: 5,
                        pointHoverRadius: 7,
                        tension: .3,
                        spanGaps: true
                    },
                    {
                        label: 'Nonteknis',
                        data: perbandinganTren.map(x => x.nonteknis),
                        borderColor: '#f59e0b',
                        pointRadius: 5,
                        pointHoverRadius: 7,
                        tension: .3,
                        spanGaps: true
                    },
                    {
                        label: 'Rata-rata',
                        data: perbandinganTren.map(x => x.total),
                        borderColor: '#7c3aed',
                        pointRadius: 5,
                        pointHoverRadius: 7,
                        borderDash: [5, 5],
                        tension: .3,
                        spanGaps: true
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        min: 0,
                        max: 100
                    }
                }
            }
        });
        new Chart(document.getElementById('grafik-universitas'), {
            type: 'bar',
            data: {
                labels: [...new Set(perbandinganUniversitas.flatMap(x => x.universitas.map(u => u.nama)))],
                datasets: perbandinganUniversitas.map((tahun, i) => ({
                    label: tahun.tahun,
                    data: [...new Set(perbandinganUniversitas.flatMap(x => x.universitas.map(u => u.nama)))].map(nama =>
                        (tahun.universitas.find(u => u.nama === nama) || {}).nilai ?? null),
                    backgroundColor: ['#028284', '#f59e0b', '#7c3aed'][i]
                }))
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: { y: { min: 0, max: 100 } },
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: context => 'Rata-rata: ' + (context.raw ?? '-')
                        }
                    }
                }
            }
        });
    </script>
@endpush