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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    @php
        $raw = $user_login->idroles ?? '';
        // jadikan array
        $roles = is_array($raw) ? $raw : preg_split('/\s*,\s*/', (string) $raw, -1, PREG_SPLIT_NO_EMPTY);

        // normalisasi: trim + lowercase + unik
        $roles = array_values(array_unique(array_map(fn($r) => strtolower(trim($r)), $roles)));
    @endphp

    @if (!empty(array_intersect($roles, ['admins', 'admhrd'])))
        <div class="container-fluid py-4">
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card mb-4" style="background-color: #fff; border-radius: 15px;">
                        <div class="pb-0 p-3" style="background-color: #fff; border-radius: 15px">
                            <h6 class="mb-1 text-primary">Dashboard</h6>
                            <p class="text-sm ">Dashboard Admin</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                @php
                    $left = [];
                    $right = [];
                    foreach ($combinedCards->values() as $i => $card) {
                        if ($i % 2 === 0) {
                            $left[] = $card;
                        } else {
                            $right[] = $card;
                        }
                    }
                @endphp
                @php
                    $pages = $combinedCards->chunk(10);
                @endphp
                @if (!$combinedCards->isEmpty())
                    <div class="container mb-2">
                        <div class="card bg-teal-700 text-white p-2 rounded-4 shadow-sm mb-2"
                            style="background-color: #f5365c;">
                            <div class="d-flex align-items-center mb-2">
                                <span class="me-2"><i class="fas fa-bell"></i></span>
                                <strong class="fs-5">Notifikasi Data Perlu Di Input</strong>
                            </div>
                            <div id="card-pages">
                                @foreach ($pages as $pageIndex => $cards)
                                    @php
                                        $left = [];
                                        $right = [];

                                        foreach ($cards->values() as $i => $card) {
                                            if ($i % 2 === 0) {
                                                $left[] = $card;
                                            } else {
                                                $right[] = $card;
                                            }
                                        }
                                    @endphp
                                    <div class="row card-page {{ $pageIndex === 0 ? 'active' : '' }} {{ $loop->last ? 'is-last' : '' }}"
                                        data-page="{{ $pageIndex }}" id="card-page-{{ $pageIndex }}">
                                        <div class="col-md-6">
                                            @foreach ($left as $card)
                                                <div class="card border-warning mb-2 transition-card"
                                                    id="card-{{ $card['type'] }}-{{ $card['id'] }}">
                                                    <div class="card-body py-2 px-3 position-relative">
                                                        <div class="position-absolute top-0 end-0 mt-1 me-2 d-flex gap-1">
                                                            <button type="button" class="btn btn-sm btn-outline-primary"
                                                                data-bs-toggle="modal" data-bs-target="#editModal"
                                                                data-type="{{ $card['type'] }}"
                                                                data-label="{{ $card['label'] ?? '' }}">
                                                                <i class="fas fa-edit me-1"></i>Update
                                                            </button>
                                                            <button type="button"
                                                                onclick="{{ $card['type'] === 'univ' ? 'submitUniv' : 'submitJurusan' }}('{{ $card['route'] }}', 'card-{{ $card['type'] }}-{{ $card['id'] }}')"
                                                                class="btn btn-sm btn-outline-success">
                                                                <i class="fas fa-plus-circle me-1"></i>Input
                                                            </button>
                                                        </div>
                                                        <div class="d-flex align-items-center">
                                                            <i class="fas fa-circle text-warning me-2"></i>
                                                            <div class="text-dark">
                                                                <strong>{{ ucfirst($card['type']) }}:</strong>
                                                                {{ $card['label'] ?? '-' }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                        <div class="col-md-6">
                                            @foreach ($right as $card)
                                                <div class="card border-warning mb-2 transition-card"
                                                    id="card-{{ $card['type'] }}-{{ $card['id'] }}">
                                                    <div class="card-body py-2 px-3 position-relative">

                                                        {{-- Tombol Update & Input --}}
                                                        <div class="position-absolute top-0 end-0 mt-1 me-2 d-flex gap-1">
                                                            <button type="button" class="btn btn-sm btn-outline-primary"
                                                                data-bs-toggle="modal" data-bs-target="#editModal"
                                                                data-type="{{ $card['type'] }}"
                                                                data-label="{{ $card['label'] ?? '' }}">
                                                                <i class="fas fa-edit me-1"></i>Update
                                                            </button>
                                                            <button type="button"
                                                                onclick="{{ $card['type'] === 'univ' ? 'submitUniv' : 'submitJurusan' }}('{{ $card['route'] }}', 'card-{{ $card['type'] }}-{{ $card['id'] }}')"
                                                                class="btn btn-sm btn-outline-success">
                                                                <i class="fas fa-plus-circle me-1"></i>Input
                                                            </button>
                                                        </div>

                                                        {{-- Konten Card --}}
                                                        <div class="d-flex align-items-center">
                                                            <i class="fas fa-circle text-warning me-2"></i>
                                                            <div class="text-dark">
                                                                <strong>{{ ucfirst($card['type']) }}:</strong>
                                                                {{ $card['label'] ?? '-' }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            @if ($pages->count() > 1)
                                <div class="pagination-buttons mt-3" style="text-align:center;">
                                    <button class="btn btn-outline-light btn-sm" onclick="changeCardPage(-1)">
                                        <i class="fas fa-chevron-left me-1"></i> Sebelumnya
                                    </button>
                                    <button class="btn btn-outline-light btn-sm" onclick="changeCardPage(1)">
                                        Berikutnya <i class="fas fa-chevron-right ms-1"></i>
                                    </button>
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="modal fade" id="editModal" data-bs-backdrop="false" tabindex="-1">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <form id="editForm" method="POST">
                                    @csrf
                                    <input type="hidden" name="type" id="editType">
                                    <input type="hidden" name="old_name" id="editOldName">

                                    <div class="modal-header">
                                        <h5 class="modal-title" id="editModalTitle">Edit</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>

                                    <div class="modal-body">
                                        <div class="mb-3">
                                            <label class="form-label" id="editLabel"></label>
                                            <input type="text" name="nama" id="editNama" class="form-control"
                                                required>
                                        </div>
                                    </div>

                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary"
                                            data-bs-dismiss="modal">Batal</button>
                                        <button type="submit" class="btn btn-primary" id="saveEditBtn">
                                            <i class="fas fa-save me-1"></i> Simpan
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <style>
                        .inline-popup {
                            position: absolute;
                            top: 20px;
                            right: 20px;
                            z-index: 1050;
                            background: white;
                            border: 1px solid #ccc;
                            padding: 15px;
                            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
                        }
                    </style>
                    <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            $('#editModal').on('show.bs.modal', function(e) {
                                const btn = e.relatedTarget;
                                const type = btn.getAttribute('data-type');
                                const label = btn.getAttribute('data-label') || '';

                                $('#editType').val(type);
                                $('#editOldName').val(label);
                                $('#editNama').val(label);
                                $('#editLabel').text(type === 'univ' ? 'Nama Universitas' : 'Nama Jurusan');
                                $('#editModalTitle').text(type === 'univ' ? 'Edit Universitas' : 'Edit Jurusan');
                            });

                            $('#editForm').on('submit', function(e) {
                                e.preventDefault();
                                const $btn = $('#saveEditBtn').prop('disabled', true)
                                    .html('<i class="fas fa-spinner fa-spin me-1"></i> Menyimpan...');

                                const formData = new FormData(this);

                                $.ajax({
                                    url: '/kandidat/rename',
                                    type: 'POST',
                                    data: formData,
                                    processData: false,
                                    contentType: false,
                                    success(res) {
                                        $('#editModal').modal('hide');
                                        $btn.prop('disabled', false).html(
                                            '<i class="fas fa-save me-1"></i> Simpan');
                                        Swal.fire({
                                            icon: 'success',
                                            title: 'Sukses',
                                            text: `${res.updated} data kandidat diperbarui`,
                                            showConfirmButton: true,
                                            confirmButtonText: 'OK',
                                            allowOutsideClick: false,
                                            allowEscapeKey: false
                                        }).then(({
                                            isConfirmed
                                        }) => {
                                            if (isConfirmed) {
                                                window.location.reload();
                                            }
                                        });
                                    },
                                    error(xhr) {
                                        let msg = 'Gagal menyimpan.';
                                        if (xhr.responseJSON?.message) msg += ' ' + xhr.responseJSON.message;
                                        if (xhr.responseJSON?.errors) {
                                            msg += '\n' + Object.values(xhr.responseJSON.errors).flat().join('\n');
                                        }
                                        Swal.fire({
                                            icon: 'error',
                                            title: 'Gagal',
                                            html: msg.replace(/\n/g, '<br>')
                                        });
                                        $btn.prop('disabled', false).html(
                                            '<i class="fas fa-save me-1"></i> Simpan');
                                    }
                                });
                            });
                        });
                    </script>

                    <style>
                        #card-pages {
                            position: relative;
                            overflow: hidden;
                            min-height: 250px;
                            margin-right: -20px;
                        }

                        .card-page {
                            position: absolute;
                            width: 100%;
                            top: 0;
                            left: 0;
                            opacity: 0;
                            transform: translateX(100%);
                            transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
                            z-index: 0;
                        }

                        .card-page.active {
                            opacity: 1;
                            transform: translateX(0%);
                            z-index: 1;
                        }

                        .card-page.to-left {
                            transform: translateX(-100%);
                        }

                        .card-page.to-right {
                            transform: translateX(100%);
                        }

                        .transition-card {
                            transition: all 1s ease;
                        }

                        .slide-out-left {
                            animation: slideOutLeft 0.5s forwards;
                        }

                        @keyframes slideOutLeft {
                            0% {
                                transform: translateX(0);
                                opacity: 1;
                            }

                            100% {
                                transform: translateX(-100%);
                                opacity: 0;
                            }
                        }
                    </style>
                    <script>
                        let currentCardPage = 0;
                        const pages = document.querySelectorAll('.card-page');
                        const totalCardPages = pages.length;

                        function changeCardPage(direction) {
                            const oldPage = currentCardPage;
                            const newPage = currentCardPage + direction;

                            if (newPage < 0 || newPage >= totalCardPages) return;

                            pages[oldPage].classList.remove('active');
                            pages[oldPage].style.zIndex = 0;
                            pages[oldPage].style.opacity = 0;
                            pages[oldPage].style.transform = direction === 1 ? 'translateX(-100%)' : 'translateX(100%)';

                            pages[newPage].style.zIndex = 1;
                            pages[newPage].style.opacity = 1;
                            pages[newPage].style.transform = direction === 1 ? 'translateX(100%)' : 'translateX(-100%)';
                            pages[newPage].classList.add('active');

                            requestAnimationFrame(() => {
                                pages[newPage].style.transform = 'translateX(0%)';
                            });

                            currentCardPage = newPage;
                        }

                        document.addEventListener('DOMContentLoaded', () => {
                            if (pages.length > 0) {
                                pages[0].classList.add('active');
                                pages[0].style.transform = 'translateX(0%)';
                                pages[0].style.opacity = 1;
                                pages[0].style.zIndex = 1;
                            }
                        });

                        function submitUniv(url, cardId) {
                            const el = document.getElementById(cardId);
                            const label = el.querySelector('.text-dark')?.innerText.trim();
                            const type = label.split(':')[1];
                            sessionStorage.setItem('univInput', JSON.stringify({
                                nama: type
                            }));
                            fetch(url, {
                                {{-- method: 'POST',
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                } --}}
                            }).then(res => {
                                if (res.ok) {
                                    const el = document.getElementById(cardId);
                                    {{-- el.classList.add('slide-out-left'); --}}
                                    {{-- setTimeout(() => {
                                        const card = el.closest('.card');
                                        const currentPageEl = document.querySelector(`#card-page-${currentCardPage}`);
                                        const nextPageEl = document.querySelector(`#card-page-${currentCardPage + 1}`);
                                        const colsCurrent = currentPageEl.querySelectorAll('.col-md-6');
                                        console.log('hh', currentPageEl);
                                        card.remove();

                                        const currentCards = currentPageEl.querySelectorAll('.card.border-warning');
                                        console.log('kk', currentCards);
                                        if (currentCards.length < 10 && nextPageEl) {
                                            const colsNext = nextPageEl.querySelectorAll('.col-md-6');
                                            let moved = false;

                                            for (let i = 0; i < 2; i++) {
                                                const nextCard = colsNext[i].querySelector('.card.border-warning');
                                                if (nextCard) {
                                                    colsCurrent[i].appendChild(nextCard);
                                                    moved = true;
                                                    break;
                                                }
                                            }

                                            const nextRemaining = nextPageEl.querySelectorAll('.card.border-warning');
                                            if (moved && nextRemaining.length === 0) {
                                                nextPageEl.remove();
                                                pages = document.querySelectorAll('.card-page');
                                                totalCardPages = pages.length;
                                            }
                                        }

                                    }, 500); --}}
                                    window.location.href = '/msuniv/add';
                                }
                            });
                        }

                        function submitJurusan(url, cardId) {
                            const el = document.getElementById(cardId);
                            const label = el.querySelector('.text-dark')?.innerText.trim();
                            const type = label.split(':')[1];
                            sessionStorage.setItem('jurusaninput', JSON.stringify({
                                nama: type
                            }));
                            fetch(url, {
                                {{-- method: 'POST',
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                } --}}
                            }).then(res => {
                                if (res.ok) {
                                    const el = document.getElementById(cardId);
                                    {{-- el.classList.add('slide-out-left'); --}}
                                    {{-- setTimeout(() => {
                                        const card = el.closest('.card');
                                        const currentPageEl = document.querySelector(`#card-page-${currentCardPage}`);
                                        const nextPageEl = document.querySelector(`#card-page-${currentCardPage + 1}`);
                                        const colsCurrent = currentPageEl.querySelectorAll('.col-md-6');
                                        console.log('hh', currentPageEl);
                                        card.remove();

                                        const currentCards = currentPageEl.querySelectorAll('.card.border-warning');
                                        console.log('kk', currentCards);
                                        if (currentCards.length < 10 && nextPageEl) {
                                            const colsNext = nextPageEl.querySelectorAll('.col-md-6');
                                            let moved = false;

                                            for (let i = 0; i < 2; i++) {
                                                const nextCard = colsNext[i].querySelector('.card.border-warning');
                                                if (nextCard) {
                                                    colsCurrent[i].appendChild(nextCard);
                                                    moved = true;
                                                    break;
                                                }
                                            }

                                            const nextRemaining = nextPageEl.querySelectorAll('.card.border-warning');
                                            if (moved && nextRemaining.length === 0) {
                                                nextPageEl.remove();
                                                pages = document.querySelectorAll('.card-page');
                                                totalCardPages = pages.length;
                                            }
                                        }

                                    }, 500); --}}
                                    window.location.href = '/msjuru/add';
                                }
                            });
                        }
                    </script>
                @endif
                <div class="col-xl-6 col-sm-6 mb-xl-0 mb-2">
                    <div class="card h-100 border-0 shadow-sm" style="background-color: #fff; border-radius: 15px;">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-9 d-flex align-items-center">
                                    <div class="numbers">
                                        <h5 class="text-dark">TOTAL PENDAFTAR MAGANG</h5>
                                    </div>
                                </div>
                                <div class="col-3 text-end">
                                    <div class="icon icon-shape text-center rounded-circle" style="background: #f0f0f0;">
                                        <i class="ni ni-single-02 text-lg opacity-10 text-dark" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex flex-column">
                                <h1 class="font-weight-bolder text-dark">{{ $total_pendaftar_magang }}</h1>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Card: Total Peserta Tes -->
                <div class="col-xl-6 col-sm-6 mb-xl-0 mb-2">
                    <div class="card h-100 border-0 shadow-sm" style="background-color: #fff; border-radius: 15px;">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-9 d-flex align-items-center">
                                    <div class="numbers">
                                        <h5 class="text-dark">TOTAL PESERTA TES</h5>
                                    </div>
                                </div>
                                <div class="col-3 text-end">
                                    <div class="icon icon-shape text-center rounded-circle" style="background: #f0f0f0;">
                                        <i class="ni ni-check-bold text-lg opacity-10 text-dark" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex flex-column">
                                <h1 class="font-weight-bolder text-dark">{{ $total_peserta_tes }}</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-2">
                <!-- Card: Pengajuan Pendaftar Terakhir -->
                <div class="col-xl-12 col-sm-12 mb-xl-0 mb-4">
                    <div class="card h-100 border-0 shadow-sm" style="background-color: #fff; border-radius: 15px;">
                        <div class="pb-0 p-3" style="background-color: #fff; border-radius: 15px;">
                            <h5>PENGAJUAN PENDAFTAR TERAKHIR</h5>
                        </div>
                        <div class="card-body p-3" style="background-color: #fff; border-radius: 0 0 15px 15px;">
                            <ul class="list-group list-group-flush">
                                <div class="row justify-content-center">
                                    <div class="d-flex justify-content-center flex-wrap gap-4">
                                        @forelse ($pengajuan_pendaftar_terakhir as $pengajuan)
                                            <div class="d-flex flex-column align-items-center mb-3"
                                                style="flex: 0 0 30%; max-width: 30%;">
                                                <h6 class="mb-1 text-dark text-md text-center">{{ $pengajuan->nama }}</h6>
                                                <span class="text-xs text-center">{{ $pengajuan->universitas }} | <span
                                                        class="font-weight-bold">{{ $pengajuan->posisi }}</span></span>
                                                <a type="button" class="btn btn-primary btn-xs mt-2"
                                                    onclick="window.location='{{ url($url_kandidat_menu . '/show/') }}/{{ encrypt($pengajuan->id) }}'">
                                                    Lihat
                                                </a>
                                            </div>
                                        @empty
                                            <div class="text-center text-secondary w-100">
                                                <p class="text-sm fw-bold fs-5">Belum ada pengajuan pendaftar.</p>
                                            </div>
                                        @endforelse
                                    </div>
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-2">
                <!-- Card: Peserta Tes yang Akan Datang -->
                <div class="col-xl-12 col-sm-12 mb-xl-0 mb-4">
                    <div class="card h-100 border-0 shadow-sm" style="background-color: #fff; border-radius: 15px;">
                        <div class="pb-0 p-3" style="background-color: #fff; border-radius: 15px;">
                            <div class="d-flex justify-content-between">
                                <h5>PESERTA TES YANG AKAN DATANG</h5>
                            </div>
                        </div>
                        <div class="card-body p-3" style="background-color: #fff; border-radius: 0 0 15px 15px;">
                            <div class="row px-4 py-2">
                                <div class="table-responsive">
                                    <table class="table display" id="list_pstsad">
                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th>No</th>
                                                <th>Nama</th>
                                                <th>Jadwal Tes</th>
                                                <th>Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($peserta_tes_mendatang as $key => $item)
                                                <tr>
                                                    <td>{{ $key + 1 }}</td>
                                                    <td>{{ $item->nama_kandidat }}</td>
                                                    <td>{{ $item->tanggal_waktu_tes }}</td>
                                                    <td>
                                                        <a type="button" class="btn btn-primary btn-xs"
                                                            onclick="window.location='{{ url($url_kandidat_menu . '/show/') }}/{{ encrypt($item->kandidat_id) }}'">
                                                            Lihat
                                                        </a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row px-4 py-2">
                                <div class="col-lg">
                                    @if ($peserta_tes_mendatang->isNotEmpty())
                                        <!-- Data exists, no additional message -->
                                    @else
                                        <div class="nav-wrapper"><code>Data not found!</code></div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-2">
                <!-- Card: Jumlah Peserta Magang Tiap Posisi -->
                <div class="col-lg-7 mb-lg-4 mb-4">
                    <div class="card h-100 border-0 shadow-sm" style="border-radius: 15px;">
                        <div class="pb-0 p-3" style="background-color: #fff; border-radius: 15px 15px 0 0;">
                            <div class="d-flex justify-content-between">
                                <h5>JUMLAH PESERTA MAGANG TIAP POSISI</h5>
                            </div>
                        </div>
                        <div class="card-body p-3" style="background-color: #fff; border-radius: 0 0 15px 15px;">
                            <div class="table-responsive" style="max-height: 420px;">
                                <table class="table align-items-center">
                                    <thead class="sticky-top" style="z-index: 1; background-color: #00b7bd4f;">
                                        <tr>
                                            <th class="text-uppercase  text-md font-weight-bolder px-4">Nama Posisi</th>
                                            <th class="text-uppercase  text-md font-weight-bolder text-center">Peserta /
                                                Kuota</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($jumlah_peserta_magang_per_posisi as $peserta)
                                            <tr>
                                                <td>
                                                    <div class="px-4">
                                                        <h6 class="text-md mb-0">{{ $peserta->nama_posisi }}</h6>
                                                        <span
                                                            class="text-sm font-weight-bold">{{ $peserta->nama_departemen }}</span>
                                                    </div>
                                                </td>
                                                <td class="text-center align-middle">
                                                    <div
                                                        class="progress-wrapper d-flex flex-column align-items-center w-100">
                                                        <div class="progress-info mb-1">
                                                            <div class="progress-percentage">
                                                                <span
                                                                    class="text-xs font-weight-bold">{{ $peserta->peserta_magang }}
                                                                    / {{ $peserta->quota ?? 0 }}</span>
                                                            </div>
                                                        </div>
                                                        <div class="progress w-75 mx-auto" style="height: 10px;">
                                                            <div class="progress-bar bg-gradient-primary"
                                                                role="progressbar"
                                                                aria-valuenow="{{ $peserta->peserta_magang }}"
                                                                aria-valuemin="0"
                                                                aria-valuemax="{{ $peserta->quota ?? 1 }}"
                                                                style="width: {{ ($peserta->peserta_magang / ($peserta->quota ?: 1)) * 100 }}%;">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="2" class="text-center text-secondary">
                                                    <p class="text-sm">Belum ada peserta magang.</p>
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Card: Top 5 Universitas -->
                <div class="col-lg-5 mb-lg-0 mb-4">
                    <div class="card border-0 shadow-sm mb-4" style="background-color: #fff; border-radius: 15px;">
                        <div class="pb-0 p-3" style="background-color: #fff; border-radius: 15px 15px 0 0;">
                            <div class="d-flex justify-content-between">
                                <h5>TOP 5 UNIVERSITAS</h5>
                            </div>
                        </div>
                        <div class="card-body p-3" style="background-color: #fff; border-radius: 0 0 15px 15px;">
                            <ul class="list-group list-group-flush">
                                <div class="d-flex flex-column">
                                    @forelse($jumlah_peserta_magang_per_universitas as $jumlah_peserta)
                                        <div class="d-flex justify-content-between mb-2">
                                            <div class="d-flex flex-column">
                                                <h6 class="mb-1 text-dark text-sm">{{ $jumlah_peserta->nama_univ }}</h6>
                                            </div>
                                            <div class="d-flex align-items-center">
                                                <h6 class="text-sm mb-0 text-dark">{{ $jumlah_peserta->jumlah_pendaftar }}
                                                </h6>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="text-center text-secondary">
                                            <p class="text-sm">Belum ada peserta magang.</p>
                                        </div>
                                    @endforelse
                                </div>
                            </ul>
                        </div>
                    </div>
                    <div class="card border-0 shadow-sm mb-4" style="background-color: #fff; border-radius: 15px;">
                        <div class="pb-0 p-3" style="background-color: #fff; border-radius: 15px 15px 0 0;">
                            <div class="d-flex justify-content-between">
                                <h5>TOP 5 RASIO PENERIMAAN SETIAP UNIVERSITAS</h5>
                            </div>
                        </div>
                        <div class="card-body p-3" style="background-color: #fff; border-radius: 0 0 15px 15px;">
                            <ul class="list-group list-group-flush">
                                <div class="d-flex flex-column">
                                    @forelse ($rasio_penerimaan_per_universitas as $jumlah_peserta)
                                        <div class="d-flex justify-content-between mb-2">
                                            <div class="d-flex flex-column">
                                                <h6 class="mb-1 text-dark text-sm">{{ $jumlah_peserta->nama_univ }}</h6>
                                            </div>
                                            <div class="d-flex align-items-center">
                                                <h6 class="text-sm mb-0 text-dark">{{ $jumlah_peserta->jumlah_diterima }}
                                                    / {{ $jumlah_peserta->jumlah_pendaftar }}</h6>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="text-center text-secondary">
                                            <p class="text-sm">Belum ada peserta magang.</p>
                                        </div>
                                    @endforelse
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
    @if (in_array('pembim', $roles, true))
        <div class="container-fluid py-4">
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card mb-4" style="border-radius: 15px;">
                        <div class="pb-0 p-3" style="border-radius: 15px;">
                            <h6 class="mb-1">Dashboard</h6>
                            <p class="text-sm">Dashboard Pembimbing</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <!-- Card: Total Pengajuan Absen -->
                <div class="col-xl-6 col-sm-6 mb-xl-0 mb-4">
                    <div class="card h-100 border-0 shadow-sm" style="border-radius: 15px;">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-9 d-flex align-items-center">
                                    <div class="numbers">
                                        <h5>TOTAL PENGAJUAN ABSEN</h5>
                                    </div>
                                </div>
                                <div class="col-3 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-primary shadow-primary text-center rounded-circle">
                                        <i class="ni ni-single-02 text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex flex-column">
                                <h1 class="font-weight-bolder text-primary">{{ $jumlah_pengajuan_absen ?? 0 }}</h1>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Card: Total Pengajuan Laporan Akhir -->
                <div class="col-xl-6 col-sm-6 mb-xl-0 mb-4">
                    <div class="card h-100 border-0 shadow-sm" style="border-radius: 15px;">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-9 d-flex align-items-center">
                                    <div class="numbers">
                                        <h5>TOTAL PENGAJUAN LAPORAN AKHIR</h5>
                                    </div>
                                </div>
                                <div class="col-3 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-success shadow-success text-center rounded-circle">
                                        <i class="ni ni-check-bold text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex flex-column">
                                <h1 class="font-weight-bolder text-success">{{ $jumlah_pengajuan_laporan ?? 0 }}</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-4 gap-4">
                <!-- Card: Pengajuan Absen Terakhir -->
                <div class="col-xl-12 col-sm-12 mb-xl-0 mb-4">
                    <div class="card h-100 border-0 shadow-sm" style="border-radius: 15px;">
                        <div class="pb-0 p-3" style="border-radius: 15px;">
                            <h5>PENGAJUAN ABSEN TERAKHIR</h5>
                        </div>
                        <div class="card-body p-3" style="border-radius: 0 0 15px 15px;">
                            <ul class="list-group list-group-flush">
                                <div class="row justify-content-center">
                                    <div class="d-flex justify-content-center flex-wrap gap-4">
                                        @forelse ($pengajuan_absen_terakhir as $pengajuan)
                                            <div class="d-flex flex-column align-items-center mb-3"
                                                style="flex: 0 0 30%; max-width: 30%;">
                                                <h6 class="mb-1 text-dark text-md text-center">{{ $pengajuan->firstname }}
                                                    {{ $pengajuan->lastname }}</h6>
                                                <span class="text-xs text-center">{{ $pengajuan->nama_projek }} | <span
                                                        class="font-weight-bold">{{ $pengajuan->tanggal }}</span></span>
                                                <a type="button" class="btn btn-primary btn-xs mt-2"
                                                    onclick="window.location='{{ url($url_pengelolaan_absen_menu . '/show/') }}/{{ encrypt($pengajuan->id) }}'">
                                                    Lihat
                                                </a>
                                            </div>
                                        @empty
                                            <div class="text-center text-secondary w-100">
                                                <p class="text-sm fw-bold fs-5">Belum ada pengajuan absen.</p>
                                            </div>
                                        @endforelse
                                    </div>
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- Card: Pengajuan Laporan Akhir Terakhir -->
                <div class="col-xl-12 col-sm-12 mb-xl-0 mb-4">
                    <div class="card h-100 border-0 shadow-sm" style="border-radius: 15px;">
                        <div class="pb-0 p-3" style="border-radius: 15px;">
                            <h5>PENGAJUAN LAPORAN AKHIR TERAKHIR</h5>
                        </div>
                        <div class="card-body p-3" style="border-radius: 0 0 15px 15px;">
                            <ul class="list-group list-group-flush">
                                <div class="row justify-content-center">
                                    <div class="d-flex justify-content-center flex-wrap gap-4">
                                        @forelse ($pengajuan_laporan_terakhir as $pengajuan)
                                            <div class="d-flex flex-column align-items-center mb-3"
                                                style="flex: 0 0 30%; max-width: 30%;">
                                                <h6 class="mb-1 text-dark text-md text-center">{{ $pengajuan->firstname }}
                                                    {{ $pengajuan->lastname }}</h6>
                                                <span class="text-xs text-center">{{ $pengajuan->nama_projek }} | <span
                                                        class="font-weight-bold">{{ $pengajuan->created_at }}</span></span>
                                                <a type="button" class="btn btn-primary btn-xs mt-2"
                                                    onclick="window.location='{{ url($url_laporan_menu . '/show/') }}/{{ encrypt($pengajuan->id_laporan_akhir) }}'">
                                                    Lihat
                                                </a>
                                            </div>
                                        @empty
                                            <div class="text-center text-secondary w-100">
                                                <p class="text-sm fw-bold fs-5">Belum ada pengajuan laporan.</p>
                                            </div>
                                        @endforelse
                                    </div>
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
    @if (in_array('atsan1', $roles, true))
        <div class="container-fluid">
            {{-- HEADER DASHBOARD --}}
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card shadow-sm border-0">
                        <div class="card-body py-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h5 class="mb-1 text-primary font-weight-bold">Dashboard {{ $role_label ?? 'Atasan' }}
                                    </h5>
                                    <p class="text-sm text-muted mb-0">Monitoring Approval {{ $approval_stage ?? '' }}</p>
                                </div>
                                <div class="text-end">
                                    <span class="badge badge-lg bg-gradient-primary">
                                        <i class="fas fa-user-tie me-1"></i> {{ $role_label ?? 'Atasan' }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- SUMMARY CARDS --}}
            <div class="row mb-4">
                {{-- Card 1: Pending Approval --}}
                <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                    <div class="card shadow-sm border-0">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-capitalize font-weight-bold">Perlu Disetujui</p>
                                        <h5 class="font-weight-bolder mb-0">
                                            {{ $pending_approval_count ?? 0 }}
                                            @if (($pending_approval_count ?? 0) > 0)
                                                <span class="text-danger text-sm ms-1">
                                                    <i class="fas fa-exclamation-circle"></i>
                                                </span>
                                            @endif
                                        </h5>
                                        <span class="text-xs text-muted">Data menunggu approval</span>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="icon icon-shape bg-gradient-danger shadow text-center border-radius-md">
                                        <i class="ni ni-notification-70 text-lg opacity-10"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Card 2: Approved This Month --}}
                <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                    <div class="card shadow-sm border-0">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-capitalize font-weight-bold">Telah Disetujui</p>
                                        <h5 class="font-weight-bolder mb-0">
                                            {{ $approved_this_month ?? 0 }}
                                        </h5>
                                        <span class="text-xs text-success">
                                            <i class="fas fa-check-circle"></i> Approved
                                        </span>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="icon icon-shape bg-gradient-success shadow text-center border-radius-md">
                                        <i class="ni ni-check-bold text-lg opacity-10"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Card 3: Total Peserta Aktif --}}
                <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                    <div class="card shadow-sm border-0">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-capitalize font-weight-bold">Peserta Aktif</p>
                                        <h5 class="font-weight-bolder mb-0">
                                            {{ $total_peserta_aktif ?? 0 }}
                                        </h5>
                                        <span class="text-xs text-muted">Mahasiswa magang</span>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                                        <i class="ni ni-badge text-lg opacity-10"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- NOTIFIKASI DATA MASUK --}}
            @if (($pending_approval_count ?? 0) > 0)
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="alert alert-warning alert-dismissible fade show mb-0" role="alert">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-bell fa-2x me-3 text-warning"></i>
                                <div class="flex-grow-1">
                                    <h6 class="alert-heading mb-1">
                                        <strong>{{ $pending_approval_count }}</strong> Data Perhitungan Absen Menunggu
                                        Persetujuan Anda!
                                    </h6>
                                    <p class="mb-0 text-sm">
                                        Silakan review data perhitungan absen yang telah diajukan.
                                        <a href="{{ url('trappr') }}" class="alert-link fw-bold">Lihat Data Sekarang
                                            →</a>
                                    </p>
                                </div>
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            {{-- TABEL DATA TERBARU YANG PERLU DIAPPROVE --}}
            @if (($pending_approval_list ?? collect())->isNotEmpty())
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="card shadow-sm border-0">
                            <div class="card-header pb-0 px-3 pt-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h6 class="mb-0">
                                        <i class="fas fa-list-alt me-2 text-primary"></i>
                                        Data Terbaru Perlu Disetujui
                                    </h6>
                                    <a href="{{ url('trappr') }}" class="btn btn-sm btn-outline-primary">
                                        Lihat Semua <i class="fas fa-arrow-right ms-1"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="card-body px-0 pt-0 pb-2">
                                <div class="table-responsive p-0">
                                    <table class="table align-items-center mb-0">
                                        <thead>
                                            <tr>
                                                <th
                                                    class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-3">
                                                    ID Transaksi</th>
                                                <th
                                                    class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                    Periode</th>
                                                <th
                                                    class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                    Status</th>
                                                <th
                                                    class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                    Tanggal</th>
                                                <th class="text-secondary opacity-7"></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($pending_approval_list as $item)
                                                <tr>
                                                    <td>
                                                        <div class="d-flex px-3 py-1">
                                                            <div class="d-flex flex-column justify-content-center">
                                                                <h6 class="mb-0 text-sm font-weight-bold">
                                                                    {{ $item->id }}</h6>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <p class="text-sm font-weight-bold mb-0">
                                                            {{ $months[$item->bulan] ?? $item->bulan }}
                                                            {{ $item->tahun }}
                                                        </p>
                                                    </td>
                                                    <td>
                                                        @if ($item->status == '2')
                                                            <span class="badge badge-sm bg-gradient-warning">Posted</span>
                                                        @elseif($item->status == '3')
                                                            <span class="badge badge-sm bg-gradient-info">Approved Atasan
                                                                1</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <span class="text-xs text-muted">
                                                            {{ \Carbon\Carbon::parse($item->created_at)->diffForHumans() }}
                                                        </span>
                                                    </td>
                                                    <td class="align-middle">
                                                        <a href="{{ url('trappr/show/' . encrypt($item->id)) }}"
                                                            class="btn btn-sm btn-primary mb-0">
                                                            <i class="fas fa-eye me-1"></i> Review
                                                        </a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            {{-- LIST PESERTA AKTIF --}}
            <div class="row">
                <div class="col-md-12">
                    <div class="row mx-1">
                        <div class="card">
                            <div class="card-header pb-0 px-3 pt-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h6 class="mb-0">
                                        <i class="fas fa-users me-2 text-info"></i>
                                        Daftar Peserta Magang Aktif
                                    </h6>
                                    <button id="btnRefresh" type="button" class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-sync-alt me-1"></i> Refresh
                                    </button>
                                </div>
                            </div>
                            <div class="row px-4 py-2 gx-3">

                                {{-- TABEL PESERTA --}}
                                <div class="row">
                                    <div class="col-12 col-lg-7 mb-4">
                                        <div class="card">
                                            <div class="card-body table-responsive px-0">
                                                <table class="table display" id="aa">
                                                    <thead class="thead-light" style="background-color:#00b7bd4f;">
                                                        <tr>
                                                            <th style="width: 40px" class="ps-3">No</th>
                                                            <th>Nama Peserta</th>
                                                            <th>Posisi</th>
                                                            <th>Departemen</th>
                                                            <th class="text-center">Hari Aktif</th>
                                                            <th class="text-center">Sisa Hari</th>
                                                            <th class="text-center">Progress</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="aa-body">
                                                        <tr>
                                                            <td colspan="7" class="text-center">Memuat…</td>
                                                        </tr>
                                                    </tbody>
                                                    <tfoot>
                                                        <tr class="fw-semibold">
                                                            <td colspan="4" class="ps-3">Total Peserta Aktif</td>
                                                            <td colspan="3" class="text-center" id="aa-total">0
                                                                Peserta</td>
                                                        </tr>
                                                    </tfoot>
                                                </table>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- RIGHT: PIE CHART --}}
                                    <div class="col-12 col-lg-5 mb-4">
                                        <div class="card h-100">
                                            <div class="card-header">
                                                <h6 class="mb-0" id="title-chart">Distribusi Peserta per Departemen</h6>
                                            </div>
                                            <div class="card-body">
                                                <div id="chart-pengeluaran-pie" style="height:420px;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
    @if (in_array('atsan2', $roles, true))
        <div class="container-fluid">
            {{-- HEADER DASHBOARD --}}
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card shadow-sm border-0">
                        <div class="card-body py-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h5 class="mb-1 text-primary font-weight-bold">Dashboard {{ $role_label ?? 'Atasan' }}
                                    </h5>
                                    <p class="text-sm text-muted mb-0">Monitoring Approval {{ $approval_stage ?? '' }}</p>
                                </div>
                                <div class="text-end">
                                    <span class="badge badge-lg bg-gradient-primary">
                                        <i class="fas fa-user-tie me-1"></i> {{ $role_label ?? 'Atasan' }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- SUMMARY CARDS --}}
            <div class="row mb-4">
                {{-- Card 1: Pending Approval --}}
                <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                    <div class="card shadow-sm border-0">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-capitalize font-weight-bold">Perlu Disetujui</p>
                                        <h5 class="font-weight-bolder mb-0">
                                            {{ $pending_approval_count ?? 0 }}
                                            @if (($pending_approval_count ?? 0) > 0)
                                                <span class="text-danger text-sm ms-1">
                                                    <i class="fas fa-exclamation-circle"></i>
                                                </span>
                                            @endif
                                        </h5>
                                        <span class="text-xs text-muted">Data menunggu approval</span>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="icon icon-shape bg-gradient-danger shadow text-center border-radius-md">
                                        <i class="ni ni-notification-70 text-lg opacity-10"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Card 2: Approved This Month --}}
                <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                    <div class="card shadow-sm border-0">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-capitalize font-weight-bold">Telah Disetujui</p>
                                        <h5 class="font-weight-bolder mb-0">
                                            {{ $approved_this_month ?? 0 }}
                                        </h5>
                                        <span class="text-xs text-success">
                                            <i class="fas fa-check-circle"></i> Approved
                                        </span>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="icon icon-shape bg-gradient-success shadow text-center border-radius-md">
                                        <i class="ni ni-check-bold text-lg opacity-10"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Card 3: Total Peserta Aktif --}}
                <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                    <div class="card shadow-sm border-0">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-capitalize font-weight-bold">Peserta Aktif</p>
                                        <h5 class="font-weight-bolder mb-0">
                                            {{ $total_peserta_aktif ?? 0 }}
                                        </h5>
                                        <span class="text-xs text-muted">Mahasiswa magang</span>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                                        <i class="ni ni-badge text-lg opacity-10"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- NOTIFIKASI DATA MASUK --}}
            @if (($pending_approval_count ?? 0) > 0)
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="alert alert-warning alert-dismissible fade show mb-0" role="alert">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-bell fa-2x me-3 text-warning"></i>
                                <div class="flex-grow-1">
                                    <h6 class="alert-heading mb-1">
                                        <strong>{{ $pending_approval_count }}</strong> Data Perhitungan Absen Menunggu
                                        Persetujuan Anda!
                                    </h6>
                                    <p class="mb-0 text-sm">
                                        Silakan review data perhitungan absen yang telah diajukan.
                                        <a href="{{ url('trappr') }}" class="alert-link fw-bold">Lihat Data Sekarang
                                            →</a>
                                    </p>
                                </div>
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            {{-- TABEL DATA TERBARU YANG PERLU DIAPPROVE --}}
            @if (($pending_approval_list ?? collect())->isNotEmpty())
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="card shadow-sm border-0">
                            <div class="card-header pb-0 px-3 pt-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h6 class="mb-0">
                                        <i class="fas fa-list-alt me-2 text-primary"></i>
                                        Data Terbaru Perlu Disetujui
                                    </h6>
                                    <a href="{{ url('trappr') }}" class="btn btn-sm btn-outline-primary">
                                        Lihat Semua <i class="fas fa-arrow-right ms-1"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="card-body px-0 pt-0 pb-2">
                                <div class="table-responsive p-0">
                                    <table class="table align-items-center mb-0">
                                        <thead>
                                            <tr>
                                                <th
                                                    class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-3">
                                                    ID Transaksi</th>
                                                <th
                                                    class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                    Periode</th>
                                                <th
                                                    class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                    Status</th>
                                                <th
                                                    class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                    Tanggal</th>
                                                <th class="text-secondary opacity-7"></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($pending_approval_list as $item)
                                                <tr>
                                                    <td>
                                                        <div class="d-flex px-3 py-1">
                                                            <div class="d-flex flex-column justify-content-center">
                                                                <h6 class="mb-0 text-sm font-weight-bold">
                                                                    {{ $item->id }}</h6>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <p class="text-sm font-weight-bold mb-0">
                                                            {{ $months[$item->bulan] ?? $item->bulan }}
                                                            {{ $item->tahun }}
                                                        </p>
                                                    </td>
                                                    <td>
                                                        @if ($item->status == '2')
                                                            <span class="badge badge-sm bg-gradient-warning">Posted</span>
                                                        @elseif($item->status == '3')
                                                            <span class="badge badge-sm bg-gradient-info">Approved Atasan
                                                                1</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <span class="text-xs text-muted">
                                                            {{ \Carbon\Carbon::parse($item->created_at)->diffForHumans() }}
                                                        </span>
                                                    </td>
                                                    <td class="align-middle">
                                                        <a href="{{ url('trappr/show/' . encrypt($item->id)) }}"
                                                            class="btn btn-sm btn-primary mb-0">
                                                            <i class="fas fa-eye me-1"></i> Review
                                                        </a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            {{-- LIST PESERTA AKTIF --}}
            <div class="row">
                <div class="col-md-12">
                    <div class="row mx-1">
                        <div class="card">
                            <div class="card-header pb-0 px-3 pt-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h6 class="mb-0">
                                        <i class="fas fa-users me-2 text-info"></i>
                                        Daftar Peserta Magang Aktif
                                    </h6>
                                    <button id="btnRefresh2" type="button" class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-sync-alt me-1"></i> Refresh
                                    </button>
                                </div>
                            </div>
                            <div class="row px-4 py-2 gx-3">

                                {{-- TABEL PESERTA --}}
                                <div class="row">
                                    <div class="col-12 col-lg-7 mb-4">
                                        <div class="card">
                                            <div class="card-body table-responsive px-0">
                                                <table class="table display" id="aa2">
                                                    <thead class="thead-light" style="background-color:#00b7bd4f;">
                                                        <tr>
                                                            <th style="width: 40px" class="ps-3">No</th>
                                                            <th>Nama Peserta</th>
                                                            <th>Posisi</th>
                                                            <th>Departemen</th>
                                                            <th class="text-center">Hari Aktif</th>
                                                            <th class="text-center">Sisa Hari</th>
                                                            <th class="text-center">Progress</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="aa-body2">
                                                        <tr>
                                                            <td colspan="7" class="text-center">Memuat…</td>
                                                        </tr>
                                                    </tbody>
                                                    <tfoot>
                                                        <tr class="fw-semibold">
                                                            <td colspan="4" class="ps-3">Total Peserta Aktif</td>
                                                            <td colspan="3" class="text-center" id="aa-total2">0
                                                                Peserta</td>
                                                        </tr>
                                                    </tfoot>
                                                </table>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- RIGHT: PIE CHART --}}
                                    <div class="col-12 col-lg-5 mb-4">
                                        <div class="card h-100">
                                            <div class="card-header">
                                                <h6 class="mb-0" id="title-chart2">Distribusi Peserta per Departemen
                                                </h6>
                                            </div>
                                            <div class="card-body">
                                                <div id="chart-pengeluaran-pie2" style="height:420px;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    @if (in_array('featku', $roles))
        <div class="container-fluid py-4">
            <div class="row">
                <div class="col-12">
                    <div class="card mb-4" style="border-radius: 15px; background: #008b8e;">
                        <div class="pb-3 p-3 text-white">
                            <div class="d-flex align-items-center">
                                <div class="icon icon-shape bg-white text-info shadow-sm text-center rounded-circle me-3">
                                    <i class="ni ni-credit-card opacity-10" style="color: #008b8e !important;"></i>
                                </div>
                                <div>
                                    <h5 class="mb-0 text-white font-weight-bolder">Dashboard Keuangan (FEAT)</h5>
                                    <p class="text-sm mb-0 text-white opacity-9">Manajemen antrean pembayaran yang telah
                                        disetujui Atasan</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                    <div class="card h-100 border-0 shadow-sm" style="border-radius: 15px;">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-9 d-flex align-items-center">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Tagihan (All)</p>
                                        <h3 class="font-weight-bolder mb-0" style="color: #008b8e;"
                                            id="featku-total-amount">
                                            Rp{{ number_format($total_tagihan_belum_bayar, 0, ',', '.') }}
                                        </h3>
                                    </div>
                                </div>
                                <div class="col-3 text-end">
                                    <div class="icon icon-shape shadow-sm text-center rounded-circle"
                                        style="background-color: #008b8e;">
                                        <i class="ni ni-money-coins text-lg opacity-10 text-white" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-2">
                                <span class="text-xs text-secondary">Akumulasi seluruh periode antrean</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                    <div class="card h-100 border-0 shadow-sm" style="border-radius: 15px;">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-9 d-flex align-items-center">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-uppercase font-weight-bold">Tagihan Bulan Ini</p>
                                        <h3 class="font-weight-bolder mb-0" style="color: #008b8e;">
                                            Rp{{ number_format($total_tagihan_bulan_ini, 0, ',', '.') }}
                                        </h3>
                                    </div>
                                </div>
                                <div class="col-3 text-end">
                                    <div class="icon icon-shape shadow-sm text-center rounded-circle"
                                        style="background-color: #008b8e;">
                                        <i class="ni ni-calendar-grid-58 text-lg opacity-10 text-white"
                                            aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-2">
                                <span class="text-xs text-secondary">Periode aktif yang siap dibayarkan</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                    <div class="card h-100 border-0 shadow-sm" style="border-radius: 15px;">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-9 d-flex align-items-center">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-uppercase font-weight-bold">Jumlah Antrean</p>
                                        <h3 class="font-weight-bolder mb-0" style="color: #008b8e;">
                                            {{ number_format($jumlah_peserta_belum_bayar, 0, ',', '.') }} Orang
                                        </h3>
                                    </div>
                                </div>
                                <div class="col-3 text-end">
                                    <div class="icon icon-shape shadow-sm text-center rounded-circle"
                                        style="background-color: #008b8e;">
                                        <i class="ni ni-single-02 text-lg opacity-10 text-white" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-2">
                                <span class="text-xs text-secondary">Total peserta menunggu proses transfer</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                {{-- LEFT: REKAP BULANAN --}}
                <div class="col-lg-5 col-12 mb-4 mb-lg-0">
                    <div class="card shadow-sm border-0 h-100" style="border-radius: 15px;">
                        <div class="card-header pb-0 bg-transparent border-0">
                            <h6 class="mb-0 font-weight-bolder">Rekap Tagihan Per Bulan</h6>
                        </div>
                        <div class="card-body px-0 pt-0 pb-2">
                            <div class="table-responsive p-0">
                                <table class="table align-items-center mb-0">
                                    <thead>
                                        <tr>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Periode</th>
                                            <th
                                                class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Total Tagihan</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($monthly_totals as $mt)
                                            <tr>
                                                <td class="ps-4">
                                                    <p class="text-sm font-weight-bold mb-0">{{ $mt->label }}</p>
                                                </td>
                                                <td class="align-middle text-center">
                                                    <span class="text-sm font-weight-bolder"
                                                        style="color: #008b8e;">Rp{{ number_format($mt->total, 0, ',', '.') }}</span>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="2" class="text-center py-4 text-secondary text-xs">Belum
                                                    ada data bulanan.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- RIGHT: ANTREAN TERBARU --}}
                <div class="col-lg-7 col-12">
                    <div class="card shadow-sm border-0 h-100" style="border-radius: 15px;">
                        <div
                            class="card-header pb-0 bg-transparent border-0 d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-0 font-weight-bolder">Antrean Pembayaran (Terbaru)</h6>
                            </div>
                            <a href="{{ url('rpprab') }}" class="btn btn-sm btn-outline-info"
                                style="color: #008b8e; border-color: #008b8e;">Semua <i
                                    class="fas fa-arrow-right ms-1"></i></a>
                        </div>
                        <div class="card-body px-0 pt-0 pb-2">
                            <div class="table-responsive p-0">
                                <table class="table align-items-center mb-0">
                                    <thead>
                                        <tr>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Peserta</th>
                                            <th
                                                class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Nominal</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($pending_payments as $pay)
                                            <tr>
                                                <td>
                                                    <div class="d-flex px-3 py-1">
                                                        <div class="d-flex flex-column">
                                                            <h6 class="mb-0 text-xs font-weight-bold">
                                                                {{ strtoupper($pay->nama) }}</h6>
                                                            <span
                                                                class="text-xxs text-secondary">{{ $pay->periode }}</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="align-middle text-center">
                                                    <span class="text-xs font-weight-bolder"
                                                        style="color: #008b8e;">Rp{{ number_format($pay->total_nominal, 0, ',', '.') }}</span>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="3" class="text-center py-4 text-secondary text-xs">Antrean
                                                    kosong.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
    @if (in_array('pesert', $roles, true))
        <div class="container-fluid py-4">
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card mb-4" style="border-radius: 15px;">
                        <div class="pb-0 p-3" style="border-radius: 15px;">
                            <h6 class="mb-1">Dashboard</h6>
                            <p class="text-sm">Dashboard Peserta Magang</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row gap-4">
                <!-- Card: Progress Bar Absen -->
                <div class="col-xl-12 col-sm-12 mb-xl-0 mb-4">
                    <div class="card h-100 border-0 shadow-sm" style="border-radius: 15px;">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-12 d-flex align-items-center justify-content-center">
                                    <div class="numbers w-100">
                                        <p class="text-xl mb-3 text-center text-uppercase font-weight-bold text-secondary">
                                            Progres Absen</p>
                                        <div class="progress-wrapper d-flex gap-3 justify-content-center">
                                            @php
                                                $wfo = (int) ($jumlahAbsenWFO ?? 0);
                                                $wfh = (int) ($jumlahAbsenWFH ?? 0);
                                                $sakit = (int) ($jumlahAbsenSakit ?? 0);
                                                $izin = (int) ($jumlahAbsenIzin ?? 0);

                                                // Total hari kerja efektif dari mulai magang sampai hari ini.
                                                $totalHariKerjaSaatIni = max(0, (int) ($totalHariKerjaSaatIni ?? 0));
                                                $den = max(1, $totalHariKerja);

                                                $pWfo = isset($progressWFO)
                                                    ? (float) $progressWFO
                                                    : round(($wfo / $den) * 100, 2);
                                                $pWfh = isset($progressWFH)
                                                    ? (float) $progressWFH
                                                    : round(($wfh / $den) * 100, 2);
                                                $pSakit = isset($progressSakit)
                                                    ? (float) $progressSakit
                                                    : round(($sakit / $den) * 100, 2);
                                                $pIzin = isset($progressIzin)
                                                    ? (float) $progressIzin
                                                    : round(($izin / $den) * 100, 2);

                                                $sum = $pWfo + $pWfh + $pSakit + $pIzin;
                                                if ($sum > 100) {
                                                    $pIzin = max(0, $pIzin - ($sum - 100));
                                                }
                                            @endphp

                                            <div class="progress w-75 seamless"
                                                style="height:30px; border-radius:.5rem; overflow:hidden;">
                                                <!-- WFO -->
                                                <div class="progress-bar bg-primary" role="progressbar"
                                                    aria-valuenow="{{ $wfo }}" aria-valuemin="0"
                                                    aria-valuemax="{{ $den }}"
                                                    style="width: {{ number_format($pWfo, 2, '.', '') }}%;"></div>

                                                <!-- WFH -->
                                                <div class="progress-bar bg-success" role="progressbar"
                                                    aria-valuenow="{{ $wfh }}" aria-valuemin="0"
                                                    aria-valuemax="{{ $den }}"
                                                    style="width: {{ number_format($pWfh, 2, '.', '') }}%;"></div>

                                                <!-- Sakit -->
                                                <div class="progress-bar bg-info" role="progressbar"
                                                    aria-valuenow="{{ $sakit }}" aria-valuemin="0"
                                                    aria-valuemax="{{ $den }}"
                                                    style="width: {{ number_format($pSakit, 2, '.', '') }}%;"></div>

                                                <!-- Izin -->
                                                <div class="progress-bar" role="progressbar"
                                                    aria-valuenow="{{ $izin }}" aria-valuemin="0"
                                                    aria-valuemax="{{ $den }}"
                                                    style="background-color:#fb6340; width: {{ number_format($pIzin, 2, '.', '') }}%;">
                                                </div>
                                            </div>

                                            <div class="progress-info">
                                                <div class="progress-percentage">
                                                    <span class="text-xl font-weight-bold">{{ $progressTotal }}%</span>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Informasi Detail Absen -->
                                        <div class="text-center mt-3">
                                            <p class="text-sm mb-1">
                                                <span class="text-primary font-weight-bold">WFO:
                                                    {{ $jumlahAbsenWFO }}
                                                    hari</span> |
                                                <span class="text-success font-weight-bold">WFH:
                                                    {{ $jumlahAbsenWFH }}
                                                    hari</span> |
                                                <span class="text-info font-weight-bold">Sakit:
                                                    {{ $jumlahAbsenSakit }}
                                                    hari</span> |
                                                <span class="font-weight-bold" style="color: #fb6340;">Izin:
                                                    {{ $jumlahAbsenIzin }} hari</span> |
                                                <span class="font-weight-bold" style="color: #5d4037;">Absen Pending:
                                                    {{ $pendingabsen }}</span> |
                                                <span class="font-weight-bold" style="color: #FF0000;">Tanpa Keterangan:
                                                    {{ $tanpaketerangan }}

                                            </p>
                                            <p class="text-sm text-muted">
                                                Total Hari Kerja Saat Ini: {{ $totalHariKerjaSaatIni }} hari |
                                                Total Hari Kerja: {{ $totalHariKerja }} hari
                                            </p>
                                        </div>
                                        <div class="text-center mt-4">
                                            <a type="button" class="btn btn-primary btn-md"
                                                onclick="window.location='{{ url($url_absen_menu . '/add') }}'">
                                                Tambahkan Absen
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-4">
                <div class="col-lg-12 mb-lg-0 mb-4">
                    <div class="card" style="border-radius: 15px;">
                        <div class="pb-0 p-3" style="border-radius: 15px;">
                            <div class="d-flex justify-content-between">
                                <h5 class="mb-2">RIWAYAT ABSEN</h5>
                            </div>
                        </div>
                        <div class="table-responsive" style="border-radius: 0 0 15px 15px;">
                            <table class="table align-items-center ">
                                <tbody>
                                    <tr>
                                        <td>
                                            <div class="d-flex px-2 py-1 align-items-center">
                                                <p class="text-sm font-weight-bold mb-0">No.</p>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="text-center">
                                                <p class="text-sm font-weight-bold mb-0">Tanggal</p>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="text-center">
                                                <p class="text-sm font-weight-bold mb-0">Jenis</p>
                                            </div>
                                        </td>
                                        <td class="align-middle text-sm">
                                            <div class="col text-center">
                                                <p class="text-sm font-weight-bold mb-0">Aktifitas</p>
                                            </div>
                                        </td>
                                        <td class="align-middle text-sm">
                                            <div class="col text-center">
                                                <p class="text-sm font-weight-bold mb-0">Status</p>
                                            </div>
                                        </td>
                                    </tr>
                                    @forelse ($riwayat_absen as $key => $absen)
                                        <tr>
                                            <td>
                                                <div class="d-flex px-2 py-1 align-items-center">
                                                    <h6 class="text-md mb-0">{{ $key + 1 }}</h6>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="text-center">
                                                    <h6 class="text-md mb-0">
                                                        {{ $absen->tanggal->translatedFormat('l, d F Y') }}</h6>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="text-center">
                                                    @if ($absen->jenis == 'WFO')
                                                        <h6 class="badge bg-primary">{{ $absen->jenis }}</h6>
                                                    @elseif ($absen->jenis == 'WFH')
                                                        <h6 class="badge bg-secondary">
                                                            {{ $absen->jenis }}</h6>
                                                    @elseif ($absen->jenis == 'Izin')
                                                        <h6 class="badge" style="background-color: #fb6340;">
                                                            {{ $absen->jenis }}</h6>
                                                    @else
                                                        <h6 class="badge bg-info">{{ $absen->jenis }}</h6>
                                                    @endif
                                                </div>
                                            </td>
                                            <td class="align-middle text-md">
                                                <div class="col text-center">
                                                    <h6 class="text-md mb-0">{{ $absen->aktivitas }}</h6>
                                                </div>
                                            </td>
                                            <td class="align-middle text-md">
                                                <div class="col text-center">
                                                    @if ($absen->status == 'Pending')
                                                        <h6 class="badge bg-secondary">{{ $absen->status }}</h6>
                                                    @elseif ($absen->status == 'Terima')
                                                        <h6 class="badge bg-success">{{ $absen->status }}</h6>
                                                    @else
                                                        <h6 class="badge bg-danger">{{ $absen->status }}</h6>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center text-secondary">
                                                <p class="text-md">Belum ada riwayat absen.</p>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection
@push('js')
    <style>
        .progress.seamless {
            height: 30px;
            border-radius: 8px;
            overflow: hidden;
            background: #e9ecef;
        }

        .progress.seamless .progress-bar {
            border-radius: 0 !important;
            box-shadow: none !important;
        }

        .progress.seamless .progress-bar:first-child {
            border-top-left-radius: 8px !important;
            border-bottom-left-radius: 8px !important;
        }

        .progress.seamless .progress-bar:last-child {
            border-top-right-radius: 8px !important;
            border-bottom-right-radius: 8px !important;
        }

        .line-clamp-5 {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 5;
            overflow: hidden;
        }
    </style>

    <script>
        // ============================================
        // DASHBOARD PESERTA AKTIF - ATASAN 1 & 2
        // ============================================
        (function() {
            const btnRefresh = document.getElementById('btnRefresh');
            const btnRefresh2 = document.getElementById('btnRefresh2');

            const tbody = document.getElementById('aa-body');
            const tbody2 = document.getElementById('aa-body2');
            const totalCell = document.getElementById('aa-total');
            const totalCell2 = document.getElementById('aa-total2');

            const elChart = document.getElementById('chart-pengeluaran-pie');
            const elChart2 = document.getElementById('chart-pengeluaran-pie2');
            const titleEl = document.getElementById('title-chart');
            const titleEl2 = document.getElementById('title-chart2');

            const API_URL = `{{ route('magang.dept.chart') }}`;

            let dt = null;
            let dt2 = null;
            let chart = elChart ? echarts.init(elChart) : null;
            let chart2 = elChart2 ? echarts.init(elChart2) : null;

            function initDT() {
                if (!window.jQuery || !$.fn.DataTable || !tbody) return;
                if ($.fn.DataTable.isDataTable('#aa')) {
                    $('#aa').DataTable().clear().destroy();
                }
                dt = $('#aa').DataTable({
                    paging: true,
                    pageLength: 10,
                    lengthMenu: [
                        [5, 10, 25, 50, -1],
                        [5, 10, 25, 50, 'All']
                    ],
                    searching: true,
                    info: true,
                    ordering: true,
                    order: [
                        [4, 'desc']
                    ], // sort Hari Aktif
                    columnDefs: [{
                        targets: 0,
                        orderable: false,
                        searchable: false
                    }],
                    responsive: true,
                    autoWidth: false,
                    drawCallback: function() {
                        const api = this.api();
                        api.column(0, {
                                search: 'applied',
                                order: 'applied'
                            }).nodes()
                            .each((cell, i) => cell.innerHTML = i + 1);
                    }
                });
            }

            function initDT2() {
                if (!window.jQuery || !$.fn.DataTable || !tbody2) return;
                if ($.fn.DataTable.isDataTable('#aa2')) {
                    $('#aa2').DataTable().clear().destroy();
                }
                dt2 = $('#aa2').DataTable({
                    paging: true,
                    pageLength: 10,
                    lengthMenu: [
                        [5, 10, 25, 50, -1],
                        [5, 10, 25, 50, 'All']
                    ],
                    searching: true,
                    info: true,
                    ordering: true,
                    order: [
                        [4, 'desc']
                    ], // sort Hari Aktif
                    columnDefs: [{
                        targets: 0,
                        orderable: false,
                        searchable: false
                    }],
                    responsive: true,
                    autoWidth: false,
                    drawCallback: function() {
                        const api = this.api();
                        api.column(0, {
                                search: 'applied',
                                order: 'applied'
                            }).nodes()
                            .each((cell, i) => cell.innerHTML = i + 1);
                    }
                });
            }

            function getProgressBarColor(pct) {
                if (pct >= 75) return 'bg-success';
                if (pct >= 50) return 'bg-info';
                if (pct >= 25) return 'bg-warning';
                return 'bg-danger';
            }

            async function loadData() {
                const col = tbody ? 7 : 1;
                const targetBody = tbody || tbody2;
                const targetTotal = totalCell || totalCell2;
                const targetChart = chart || chart2;
                const targetTitle = titleEl || titleEl2;
                const targetDT = tbody ? dt : dt2;

                if (!targetBody) return;

                // reset tabel
                if (targetDT) {
                    targetDT.clear().destroy();
                    if (tbody) dt = null;
                    else dt2 = null;
                }
                targetBody.innerHTML = `<tr><td colspan="${col}" class="text-center">Memuat…</td></tr>`;
                if (targetTotal) targetTotal.textContent = '0 Peserta';

                try {
                    const res = await fetch(API_URL, {
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        credentials: 'same-origin'
                    });

                    if (!res.ok) throw new Error('Gagal ambil data');
                    const data = await res.json();

                    // ====== TABEL PESERTA ======
                    if (!data.table || data.table.length === 0) {
                        targetBody.innerHTML =
                            `<tr><td colspan="${col}" class="text-center">Tidak ada peserta aktif</td></tr>`;
                        if (targetTotal) targetTotal.textContent = '0 Peserta';
                    } else {
                        const rowsHtml = data.table.map((row, i) => {
                            const pct = Number(row.persentase || 0);
                            const barColor = getProgressBarColor(pct);
                            return `<tr>
                                <td class="ps-3"></td>
                                <td><strong>${row.nama || '-'}</strong></td>
                                <td>${row.posisi || '-'}</td>
                                <td>${row.departemen || '-'}</td>
                                <td class="text-center" data-order="${row.hari_aktif}">
                                    <span class="badge bg-primary">${row.hari_aktif} hari</span>
                                </td>
                                <td class="text-center" data-order="${row.hari_tersisa}">
                                    <span class="badge bg-warning">${row.hari_tersisa} hari</span>
                                </td>
                                <td class="text-center" data-order="${pct}">
                                    <div class="progress" style="height: 20px;">
                                        <div class="progress-bar ${barColor}" role="progressbar" 
                                             style="width: ${pct}%" 
                                             aria-valuenow="${pct}" aria-valuemin="0" aria-valuemax="100">
                                            ${pct}%
                                        </div>
                                    </div>
                                </td>
                            </tr>`;
                        }).join('');
                        targetBody.innerHTML = rowsHtml;
                        if (targetTotal) targetTotal.textContent = `${data.total_peserta || 0} Peserta`;

                        if (tbody) initDT();
                        else initDT2();
                    }

                    // ====== PIE CHART ======
                    if (targetChart && data.pieData) {
                        const sorted = data.pieData.slice().sort((a, b) => (b.value || 0) - (a.value || 0));

                        if (targetTitle) {
                            targetTitle.textContent = data.subtitle || 'Distribusi Peserta per Departemen';
                        }

                        targetChart.clear();
                        targetChart.setOption({
                            title: {
                                text: data.subtitle || 'Peserta Aktif',
                                left: 'center',
                                textStyle: {
                                    fontSize: 14
                                }
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{b}: {c} peserta ({d}%)'
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {
                                        title: 'Unduh PNG'
                                    },
                                    restore: {}
                                }
                            },
                            legend: {
                                type: 'scroll',
                                orient: 'horizontal',
                                bottom: 0,
                                left: 'center'
                            },
                            series: [{
                                name: 'Jumlah Peserta',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                center: ['50%', '45%'],
                                avoidLabelOverlap: true,
                                itemStyle: {
                                    borderRadius: 8,
                                    borderColor: '#fff',
                                    borderWidth: 2
                                },
                                label: {
                                    show: true,
                                    formatter: '{b}: {c}'
                                },
                                data: sorted
                            }]
                        }, true);
                    }

                } catch (e) {
                    console.error('[LOAD FAIL]', e);
                    targetBody.innerHTML =
                        `<tr><td colspan="${col}" class="text-center text-danger">Gagal memuat data</td></tr>`;
                    if (targetTotal) targetTotal.textContent = '0 Peserta';
                }
            }

            if (btnRefresh) btnRefresh.addEventListener('click', loadData);
            if (btnRefresh2) btnRefresh2.addEventListener('click', loadData);
            if (chart) window.addEventListener('resize', () => chart.resize());
            if (chart2) window.addEventListener('resize', () => chart2.resize());

            // Load initial data
            if (tbody || tbody2) loadData();
        })();
    </script>

    <script>
        let columnAbjad = '';
        $(document).ready(function() {
            let table = $('#list_pstsad').DataTable();
            let indexStatus = 0;
            let numColumns = $('#list_pstsad').DataTable().columns().count();
            let columnNames = '';
            let filter = '{{ @$table_class->alias }}'.toLowerCase();
            for (let index = 0; index < numColumns; index++) {
                columnNames = $('#list_pstsad').DataTable().columns(index).header()[0].textContent;
                filtercolom = columnNames.toLowerCase();
                if (columnNames == 'Status' || columnNames == 'status' || columnNames == 'STATUS') {
                    columnAbjad = String.fromCharCode(65 + index);
                }
                if (filtercolom == filter) {
                    indexStatus = index;
                }
            }
            //redraw table where filter
            $('#{{ @$table_class->field }}').change(function() {
                table.column(indexStatus).search($(this).val()).draw();
            })
            //check note
            if ($('*').hasClass('exp')) {
                $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
                style="color: #ffe768;" class="fas fa-circle"></i> Data Expired )</code>`)
            }
            if ($('*').hasClass('stock')) {
                $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
                style="color: #f93c3c;" class="fas fa-circle"></i> Stock < Min Stock )</code>`)
            }
            if ($('*').hasClass('exp') && $('*').hasClass('stock')) {
                $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
                style="color: #ffe768;" class="fas fa-circle"></i> Data Expired ), ( <i aria-hidden="true"
                style="color: #f93c3c;" class="fas fa-circle"></i> Stock < Min Stock )</code>`)
            }
        });
        //set table into datatables
        $('#list_pstsad').DataTable({
            "language": {
                "search": "Cari :",
                "lengthMenu": "Tampilkan _MENU_ baris",
                "zeroRecords": "Maaf - Tidak data peserta tes dalam 1 minggu kedepan",
                "info": "Data _START_ - _END_ dari _TOTAL_",
                "infoEmpty": "Tidak ada data",
                "infoFiltered": "(pencarian dari _MAX_ data)"
            },
            responsive: true,
        });
    </script>
    <script src="./assets/js/plugins/chartjs.min.js"></script>
    <script>
        var ctx1 = document.getElementById("chart-line").getContext("2d");
        var gradientStroke1 = ctx1.createLinearGradient(0, 230, 0, 50);
        gradientStroke1.addColorStop(1, 'rgba(251, 99, 64, 0.2)');
        gradientStroke1.addColorStop(0.2, 'rgba(251, 99, 64, 0.0)');
        gradientStroke1.addColorStop(0, 'rgba(251, 99, 64, 0)');
        new Chart(ctx1, {
            type: "line",
            data: {
                labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                datasets: [{
                    label: "Mobile apps",
                    tension: 0.4,
                    borderWidth: 0,
                    pointRadius: 0,
                    borderColor: "#fb6340",
                    backgroundColor: gradientStroke1,
                    borderWidth: 3,
                    fill: true,
                    data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
                    maxBarThickness: 6

                }],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false,
                    }
                },
                interaction: {
                    intersect: false,
                    mode: 'index',
                },
                scales: {
                    y: {
                        grid: {
                            drawBorder: false,
                            display: true,
                            drawOnChartArea: true,
                            drawTicks: false,
                            borderDash: [5, 5]
                        },
                        ticks: {
                            display: true,
                            padding: 10,
                            color: '#fbfbfb',
                            font: {
                                size: 11,
                                family: "Open Sans",
                                style: 'normal',
                                lineHeight: 2
                            },
                        }
                    },
                    x: {
                        grid: {
                            drawBorder: false,
                            display: false,
                            drawOnChartArea: false,
                            drawTicks: false,
                            borderDash: [5, 5]
                        },
                        ticks: {
                            display: true,
                            color: '#ccc',
                            padding: 20,
                            font: {
                                size: 11,
                                family: "Open Sans",
                                style: 'normal',
                                lineHeight: 2
                            },
                        }
                    },
                },
            },
        });
    </script>
@endpush