@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow-lg">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <div>
                                <h4 class="card-title text-primary mb-1">
                                    <i class="fas fa-chart-line me-2"></i>Hasil Penilaian Magang
                                </h4>
                            </div>
                            <div class="text-end">
                                <h5 class="text-secondary">
                                    {{ $user->firstname ?? session('username') }}{{ $user->lastname ?? session('username') }}
                                </h5>
                            </div>
                        </div>
                        <p class="mb-4 text-muted">
                            <i class="fas fa-info-circle me-2"></i>
                            Berikut adalah hasil penilaian Anda selama periode magang.
                        </p>

                        <div class="card border mb-4">
                            <div class="card-header bg-light">
                                <h5 class="mb-0 text-primary">Tren Nilai Penilaian</h5>
                            </div>
                            <div class="card-body">
                                <div style="position: relative; height: 320px;">
                                    <canvas id="trpnpt-trend"></canvas>
                                </div>
                            </div>
                        </div>

                        <script src="{{ asset('assets/js/plugins/chartjs.min.js') }}"></script>
                        <script>
                            const trpnptTrend = document.getElementById('trpnpt-trend');
                            if (trpnptTrend && typeof Chart !== 'undefined') {
                                new Chart(trpnptTrend.getContext('2d'), {
                                    type: 'line',
                                    data: {
                                        labels: @json($tren_penilaian->pluck('label')),
                                        datasets: [
                                            { label: 'Teknis', data: @json($tren_penilaian->pluck('teknis')), borderColor: '#028284', backgroundColor: '#02828422', tension: .3, spanGaps: true },
                                            { label: 'Nonteknis', data: @json($tren_penilaian->pluck('nonteknis')), borderColor: '#f59e0b', backgroundColor: '#f59e0b22', tension: .3, spanGaps: true }
                                        ]
                                    },
                                    options: { responsive: true, maintainAspectRatio: false, scales: { y: { min: 0, max: 100, ticks: { stepSize: 10 } } } }
                                });
                            }
                        </script>

                        @forelse ($periode_penilaian as $periodeKey => $items)
                            <div class="card border mb-4">
                                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0 text-primary">
                                        <i class="fas fa-calendar-alt me-2"></i>
                                        {{ \Carbon\Carbon::createFromFormat('Y-m', $periodeKey)->locale('id')->translatedFormat('F Y') }}
                                    </h5>
                                </div>
                                <div class="table-responsive">
                                    <table class="table table-striped mb-0">
                                        <thead>
                                            <tr>
                                                <th>Tipe</th>
                                                <th>Aspek Penilaian</th>
                                                <th>Nilai</th>
                                                <th>Indeks</th>
                                                <th>Keterangan</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($items as $item)
                                                <tr>
                                                    <td>{{ $item->tipe_nilai === 'komentar' ? 'Komentar' : ucfirst($item->tipe_nilai ?? '-') }}
                                                    </td>
                                                    <td>{{ $nama_penilaian['Teknis']->firstWhere('id', $item->penilaian_id)->nama_penilaian ?? ($nama_penilaian['NonTeknis']->firstWhere('id', $item->penilaian_id)->nama_penilaian ?? '-') }}
                                                    </td>
                                                    <td>{{ $item->penilaian ?? '-' }}</td>
                                                    <td><span
                                                            class="badge bg-info">{{ $item->indeks_penilaian ?? '-' }}</span>
                                                    </td>
                                                    <td>{{ $item->keterangan ?: '-' }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        @empty
                            <div class="alert alert-info">Belum ada penilaian bulanan.</div>
                        @endforelse
                        @if (empty($penilaian_user))
                            <div class="alert alert-info mt-3">
                                Belum ada penilaian yang diberikan oleh pembimbing.
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    <script>
        $(document).ready(function() {
            // Inisialisasi DataTable untuk Teknis dan NonTeknis
            ['teknis', 'nonteknis'].forEach(function(tipe) {
                let tableId = '#table-penilaian-' + tipe;
                if ($(tableId).length) {
                    $(tableId).DataTable({
                        paging: true,
                        pageLength: 10,
                        lengthMenu: [5, 10, 25, 50, 100],
                        searching: true,
                        ordering: true,
                        info: true,
                        responsive: true,
                        language: {
                            search: "Cari :",
                            lengthMenu: "Tampilkan _MENU_ baris",
                            zeroRecords: "Maaf - Data tidak ada",
                            info: "Data _START_ - _END_ dari _TOTAL_",
                            infoEmpty: "Tidak ada data",
                            infoFiltered: "(pencarian dari _MAX_ data)"
                        },
                        dom: '<"row d-flex justify-content-between align-items-center"<"col-lg-12 d-flex justify-content-between align-items-center"Bf>>rtip',
                        buttons: [{
                                extend: 'excelHtml5',
                                text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
                                className: 'btn btn-secondary',
                                title: 'Penilaian ' + tipe.charAt(0).toUpperCase() + tipe.slice(
                                    1)
                            },
                            {
                                extend: 'pdfHtml5',
                                text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF</span>',
                                className: 'btn btn-secondary',
                                title: 'Penilaian ' + tipe.charAt(0).toUpperCase() + tipe.slice(
                                    1),
                                orientation: 'landscape',
                                pageSize: 'A4'
                            }
                        ],
                        initComplete: function() {
                            // Custom search bar
                            var searchBarHtml = `
                        <div class="dataTables_filter d-flex justify-content-end">
                            <input type="text" class="form-control me-2" placeholder="Search..." data-dt-search="${tableId}">
                        </div>
                    `;
                            $(tableId + '_filter').remove();
                            $(searchBarHtml).insertAfter(tableId + '_wrapper .dt-buttons');
                            // Sinkronisasi search input custom
                            $(document).on('input', `[data-dt-search='${tableId}']`,
                                function() {
                                    $(tableId).DataTable().search(this.value).draw();
                                });
                        }
                    });
                }
            });
            // Styling tombol DataTable
            $('.dt-button').addClass('btn btn-secondary').removeClass('dt-button');
        });
    </script>
@endpush