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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid mt-4">
        @php
            $userLogin = auth()->user();
            $userRoles = $userLogin ? explode(',', $userLogin->idroles) : [];

            // ======= DEFAULT YEAR (controller) =======
            // Controller wajib kirim:
            // $selected_year = request('filter-year', $defaultYearFromMstPeriode)
            // $tahun_list    = list periode dari mst_periode
            $selectedYear = $selected_year ?? request('filter-year', date('Y'));
            $tahunList = $tahun_list ?? collect(range(date('Y'), date('Y') - 5));
        @endphp

        <div class="row">
            <div class="col-md-12 mb-4">
                <div class="card shadow-sm">
                    <div class="card-body text-center">
                        <h2 class="mb-3">Selamat Datang di Sistem MSJ Talenta</h2>
                        <p class="lead">
                            Aplikasi ini membantu dalam mengelola dan memantau perkembangan kompetensi karyawan di
                            perusahaan.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        {{-- ===== APPROVAL ACTION CENTER ===== --}}
        @if (isset($approval_tasks) && $approval_tasks->isNotEmpty())
            <div class="row">
                <div class="col-md-12 mb-4">
                    <section class="approval-action-panel" aria-labelledby="approvalActionTitle">
                        <div class="approval-action-header">
                            <div class="d-flex align-items-center gap-3">
                                <span class="approval-action-bell"><i class="fas fa-bell"></i></span>
                                <div>
                                    <h5 class="mb-1" id="approvalActionTitle">Perlu Tindakan Anda</h5>
                                    <p class="text-sm text-muted mb-0">Selesaikan approval berikut agar proses training
                                        dapat dilanjutkan.</p>
                                </div>
                            </div>
                            <span class="approval-action-total">
                                {{ $approval_tasks->sum('count') }} menunggu
                            </span>
                        </div>
                        <div class="approval-action-grid">
                            @foreach ($approval_tasks as $task)
                                <article class="approval-action-item {{ $task['type'] }}">
                                    <div class="approval-action-icon"><i class="{{ $task['icon'] }}"></i></div>
                                    <div class="approval-action-copy">
                                        <div class="d-flex align-items-center gap-2 mb-1">
                                            <h6 class="mb-0">{{ $task['title'] }}</h6>
                                            <span class="approval-count-badge">{{ $task['count'] }}</span>
                                        </div>
                                        <p class="mb-0">{{ $task['description'] }}</p>
                                    </div>
                                    <a href="{{ $task['url'] }}" class="approval-action-button">
                                        {{ $task['button'] }} <i class="fas fa-arrow-right"></i>
                                    </a>
                                </article>
                            @endforeach
                        </div>
                    </section>
                </div>
            </div>
        @endif

        {{-- ===== LIVE TRACKING PROCESS SECTION ===== --}}
        @if (isset($active_requests) && $active_requests->count() > 0)
            <div class="row">
                <div class="col-md-12 mb-4">
                    <div class="card tracker-panel border-0">
                        <div class="tracker-panel-header">
                            <div class="d-flex align-items-center gap-3">
                                <div class="tracker-panel-icon"><i class="fas fa-route"></i></div>
                                <div>
                                    <h5 class="fw-bold mb-1">Tracking Process</h5>
                                    <p class="text-sm text-muted mb-0">Pantau progres pengajuan training hingga menjadi TRN.
                                    </p>
                                </div>
                            </div>
                            <span class="tracker-request-count">
                                {{ $active_requests->count() }} proses aktif
                            </span>
                        </div>

                        <div class="tracker-panel-body">
                            @foreach ($active_requests as $request)
                                @php
                                    $stepKeys = ['step1', 'step2', 'step3', 'step4'];
                                    $approvedCount = collect($request->steps)->where('status', 'approved')->count();
                                    $currentStep = collect($request->steps)->firstWhere('status', 'current');
                                    $progressPercentage = min(100, $approvedCount * 25);
                                @endphp
                                <article class="tracker-request-row">
                                    <div class="tracker-row-info">
                                        <div class="tracker-request-main">
                                            <div class="tracker-request-symbol"><i class="fas fa-file-alt"></i></div>
                                            <div class="min-width-0">
                                                <div class="tracker-request-eyebrow">Training Request</div>
                                                <h6 class="tracker-request-title" title="{{ $request->name_trn }}">
                                                    {{ $request->name_trn }}</h6>
                                                <div class="tracker-request-meta">
                                                    <span><i class="fas fa-user"></i>{{ $request->requestor_name }}</span>
                                                    <span><i
                                                            class="far fa-calendar-alt"></i>{{ \Carbon\Carbon::parse($request->created_at)->format('d M Y, H:i') }}</span>
                                                </div>
                                                @if ($currentStep)
                                                    <div class="tracker-row-current"
                                                        title="{{ $currentStep['description'] }}">
                                                        <i class="fas fa-circle"></i>{{ $currentStep['description'] }}
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="tracker-row-progress">
                                        <div class="tracker-flow">
                                            @foreach ($stepKeys as $index => $key)
                                                @php
                                                    $step = $request->steps[$key];
                                                    $statusClass = 'is-' . $step['status'];
                                                    $iconClass = match ($step['status']) {
                                                        'approved' => 'fas fa-check',
                                                        'current' => 'fas fa-hourglass-half',
                                                        'rejected' => 'fas fa-times',
                                                        default => 'fas fa-lock',
                                                    };
                                                    $statusLabel = match ($step['status']) {
                                                        'approved' => 'Selesai',
                                                        'current' => 'Sedang diproses',
                                                        'rejected' => 'Ditolak',
                                                        default => 'Menunggu',
                                                    };
                                                @endphp
                                                <div class="tracker-step-item {{ $statusClass }}">
                                                    <div class="tracker-step-visual">
                                                        <div class="tracker-step-icon"><i class="{{ $iconClass }}"></i>
                                                        </div>
                                                        @if (!$loop->last)
                                                            <div
                                                                class="tracker-connector {{ $step['status'] === 'approved' ? 'is-complete' : '' }}">
                                                            </div>
                                                        @endif
                                                    </div>
                                                    <div class="tracker-step-content">
                                                        <div class="tracker-step-label">{{ $step['label'] }}</div>
                                                        <span class="tracker-step-status">{{ $statusLabel }}</span>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>

                                    <div class="tracker-row-action">
                                        <div class="tracker-compact-progress">
                                            <div class="tracker-progress-bar" role="progressbar"
                                                aria-valuenow="{{ $progressPercentage }}" aria-valuemin="0"
                                                aria-valuemax="100">
                                                <span style="width: {{ $progressPercentage }}%"></span>
                                            </div>
                                            <small>{{ $approvedCount }}/4 tahap</small>
                                        </div>
                                        <div class="tracker-lead-time">
                                            <small>Lead Time</small>
                                            <strong>
                                                @if ($request->lead_time_days > 0)
                                                    {{ $request->lead_time_days }} hari {{ $request->lead_time_hours }}
                                                    jam
                                                @else
                                                    {{ $request->lead_time_hours }} jam
                                                @endif
                                            </strong>
                                        </div>
                                        <a href="{{ url('trsreq/show/' . $request->encrypted_id) }}"
                                            class="tracker-detail-button"
                                            aria-label="Lihat detail {{ $request->name_trn }}">
                                            Detail <i class="fas fa-chevron-right"></i>
                                        </a>
                                    </div>
                                </article>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @if (in_array('hrdgax', $userRoles) || in_array('admins', $userRoles))
            {{-- FILTER YEAR --}}
            <div class="row">
                <div class="col-md-12 mb-4">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <form method="GET" action="{{ url()->current() }}">
                                <div class="row g-2 align-items-center">
                                    <div class="col-md-3 mb-0">
                                        <div class="d-flex align-items-center gap-2">
                                            <label class="form-label mb-0" style="white-space:nowrap;">Tahun</label>

                                            <select name="filter-year" class="form-select">
                                                @foreach ($tahunList as $y)
                                                    <option value="{{ $y }}"
                                                        {{ (string) $selectedYear === (string) $y ? 'selected' : '' }}>
                                                        {{ $y }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-5 mb-0">
                                        <div class="d-flex gap-2 align-items-center mb-0">
                                            <button type="submit" class="btn btn-primary mb-0">
                                                Terapkan Filter
                                            </button>

                                            <a href="{{ url()->current() }}" class="btn btn-outline-secondary mb-0">
                                                Reset
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </form>

                            <div class="mt-2 small text-muted">
                                Filter aktif: Tahun <b>{{ $selectedYear }}</b>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Header -->
            <div class="row">
                <div class="col-md-12 mb-4">
                    <div class="card" style="background-color: #00b7bd4f;">
                        <div class="card-body">
                            <h2 class="text-center">REPORT ALL DEPARTEMEN</h2>
                            <h5 class="text-center">Tahun {{ $selectedYear }}</h5>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Ringkasan + Chart -->
            <div class="row">
                <!-- Ringkasan Tabel Kriteria -->
                <div class="col-md-4 mb-4">
                    <div class="card shadow-sm">
                        <div class="card-header text-center" style="background-color: #00b7bd4f;">
                            <h5 class="mb-0">Ringkasan Kompetensi</h5>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-bordered mb-0">
                                    <thead class="text-center bg-light">
                                        <tr>
                                            <th>Kriteria</th>
                                            <th>Range</th>
                                            <th>Persentase</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="row-kriteria" data-kriteria="Outstanding" style="cursor:pointer;">
                                            <td>Outstanding</td>
                                            <td class="text-center">&gt; 149%</td>
                                            <td class="text-end">
                                                {{ number_format($kriteria_chart['Outstanding']['percentage'] ?? 0, 2) }}%
                                            </td>
                                        </tr>
                                        <tr class="row-kriteria" data-kriteria="Exceed Expectations"
                                            style="cursor:pointer;">
                                            <td>Exceed Expectations</td>
                                            <td class="text-center">101% - 149%</td>
                                            <td class="text-end">
                                                {{ number_format($kriteria_chart['Exceed Expectations']['percentage'] ?? 0, 2) }}%
                                            </td>
                                        </tr>
                                        <tr class="row-kriteria" data-kriteria="Meets Expectations"
                                            style="cursor:pointer;">
                                            <td>Meets Expectations</td>
                                            <td class="text-center">99% - 100.99%</td>
                                            <td class="text-end">
                                                {{ number_format($kriteria_chart['Meets Expectations']['percentage'] ?? 0, 2) }}%
                                            </td>
                                        </tr>
                                        <tr class="row-kriteria" data-kriteria="Needs Improvement"
                                            style="cursor:pointer;">
                                            <td>Needs Improvement</td>
                                            <td class="text-center">70% - 98.99%</td>
                                            <td class="text-end">
                                                {{ number_format($kriteria_chart['Needs Improvement']['percentage'] ?? 0, 2) }}%
                                            </td>
                                        </tr>
                                        <tr class="row-kriteria" data-kriteria="Unsatisfactory" style="cursor:pointer;">
                                            <td>Unsatisfactory</td>
                                            <td class="text-center">&lt; 70%</td>
                                            <td class="text-end">
                                                {{ number_format($kriteria_chart['Unsatisfactory']['percentage'] ?? 0, 2) }}%
                                            </td>
                                        </tr>

                                        <tr class="bg-light fw-bold">
                                            <td>Total</td>
                                            <td class="text-center"></td>
                                            <td class="text-end">
                                                {{ number_format(collect($kriteria_chart)->sum('percentage'), 2) }}%
                                            </td>
                                        </tr>
                                        <tr class="bg-light fw-bold">
                                            <td>Average</td>
                                            <td class="text-center"></td>
                                            <td class="text-end">{{ number_format($average_kompetensi ?? 0, 2) }}%</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Pie Chart -->
                <div class="col-md-4 mb-4">
                    <div class="card shadow-sm">
                        <div class="card-header text-center" style="background-color: #00b7bd4f;">
                            @if (isset($departemen_info))
                                <h5 class="mb-0">Kompetensi Departemen {{ $departemen_info->nama }}</h5>
                            @else
                                <h5 class="mb-0">Kompetensi Seluruh Departemen</h5>
                            @endif
                        </div>
                        <div class="card-body">
                            <div id="pieChart" style="height: 300px; cursor: pointer;" class="chart"></div>
                        </div>
                    </div>
                </div>

                <!-- Bar Chart Departemen -->
                <div class="col-md-4 mb-4">
                    <div class="card shadow-sm">
                        <div class="card-header text-center" style="background-color: #00b7bd4f;">
                            <h5 class="mb-0">Pemenuhan Kompetensi per Department</h5>
                        </div>
                        <div class="card-body">
                            <div id="barChart" style="height: 300px; cursor: pointer;" class="chart"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Note -->
            <div class="row px-4 py-2">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <code>Note : Grafik berwarna merah berarti nilai kompetensi kurang dari 70%</code>
                    </div>
                </div>
            </div>
        @endif

        <!-- Calendar Training Section -->
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6>Calender Training</h6>
                            <div>
                                <span class="badge" style="background-color: #dc3545; padding: 8px 12px;">
                                    <i class="fas fa-circle me-1"></i> Training Active
                                </span>
                                <span class="badge" style="background-color: #28a745; padding: 8px 12px;">
                                    <i class="fas fa-circle me-1"></i> Training Done
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="calendar"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Detail Kriteria -->
    <div class="modal fade" id="detailKriteriaModal" tabindex="-1" aria-labelledby="detailKriteriaLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#00b7bd4f;">
                    <h5 class="modal-title" id="detailKriteriaLabel">Criteria Detail</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="detailKriteriaBody">
                    <div class="text-center py-4">
                        <div class="spinner-border" role="status"></div>
                        <p class="mt-2 mb-0">Load data...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Detail Event -->
    <div class="modal fade" id="eventDetailModal" tabindex="-1" aria-labelledby="eventDetailModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content event-detail-modal">
                <div class="modal-header event-detail-header">
                    <div>
                        <p class="text-uppercase text-xs font-weight-bold mb-1 text-white-50">Training Schedule</p>
                        <h5 class="modal-title text-white mb-0" id="eventDetailModalLabel">Training Detail</h5>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="event-detail-hero mb-4">
                        <div>
                            <span class="event-detail-label">Training Name</span>
                            <h5 class="mb-0 mt-1" id="detail_nama_trn">-</h5>
                        </div>
                        <div class="event-detail-status-box">
                            <span class="event-detail-label">Attendance Status</span>
                            <div class="d-flex align-items-center justify-content-md-end flex-wrap gap-2 mt-1">
                                <span id="detail_status" class="badge bg-secondary">-</span>
                                <a href="{{ url('/trsuex') }}" id="btn_trsuex"
                                    class="btn btn-sm btn-primary mb-0 d-none">
                                    Go to Exam
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="row g-3">
                        <div class="col-md-4">
                            <div class="event-detail-card h-100">
                                <span class="event-detail-label">Date</span>
                                <p class="event-detail-value" id="detail_jadwal">-</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="event-detail-card h-100">
                                <span class="event-detail-label">Time</span>
                                <p class="event-detail-value" id="detail_jam">-</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="event-detail-card h-100">
                                <span class="event-detail-label">Place</span>
                                <p class="event-detail-value" id="detail_ruangan">-</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="event-detail-card h-100">
                                <span class="event-detail-label">Trainer</span>
                                <p class="event-detail-value" id="detail_trainer">-</p>
                            </div>
                        </div>
                        <div class="col-md-12" id="wrapper_nilai">
                            <div class="event-detail-card event-detail-score-card">
                                <span class="event-detail-label">Nilai</span>
                                <p class="event-detail-score" id="detail_nilai">-</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/main.min.css' rel='stylesheet' />
    <style>
        .fc-event {
            cursor: pointer;
        }

        .fc-event:hover {
            opacity: 0.8;
        }

        #calendar {
            max-width: 100%;
            margin: 0 auto;
        }

        .fc .fc-button-primary {
            background-color: #008B8B !important;
            border-color: #008B8B !important;
        }

        .fc .fc-button-primary:hover {
            background-color: #006666 !important;
            border-color: #006666 !important;
        }

        .fc .fc-button-primary:not(:disabled):active,
        .fc .fc-button-primary:not(:disabled).fc-button-active {
            background-color: #006666 !important;
            border-color: #006666 !important;
        }

        .event-detail-modal {
            border: 0;
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 20px 45px rgba(0, 0, 0, .18);
        }

        .event-detail-header {
            border-bottom: 0;
            background: linear-gradient(135deg, #008B8B, #00b7bd);
            padding: 1.25rem 1.5rem;
        }

        .event-detail-hero {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            padding: 1.25rem;
            border: 1px solid #e9ecef;
            border-radius: 16px;
            background: #f8ffff;
        }

        .event-detail-status-box {
            min-width: 190px;
            text-align: right;
        }

        .event-detail-card {
            padding: 1rem;
            border: 1px solid #e9ecef;
            border-radius: 14px;
            background: #fff;
        }

        .event-detail-label {
            display: block;
            color: #8392ab;
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        .event-detail-value {
            margin: .35rem 0 0;
            color: #344767;
            font-weight: 600;
        }

        .event-detail-score-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: linear-gradient(135deg, #fff, #f7f9fc);
        }

        .event-detail-score {
            margin: 0;
            color: #008B8B;
            font-size: 1.5rem;
            font-weight: 700;
        }

        #detail_status {
            font-size: .75rem;
            padding: .5rem .75rem;
        }

        @media (max-width: 767.98px) {

            .event-detail-hero,
            .event-detail-score-card {
                display: block;
            }

            .event-detail-status-box {
                min-width: auto;
                margin-top: 1rem;
                text-align: left;
            }

            .event-detail-score {
                margin-top: .35rem;
            }
        }

        /* ===== APPROVAL ACTION CENTER ===== */
        .approval-action-panel {
            overflow: hidden;
            border: 1px solid #f0d394;
            border-radius: 14px;
            background: #fff;
            box-shadow: 0 5px 18px rgba(145, 92, 0, .08);
        }

        .approval-action-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1.15rem 1.3rem;
            border-bottom: 1px solid #f6e4bd;
            background: linear-gradient(90deg, #fff9ec, #fffdf8);
        }

        .approval-action-bell {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 42px;
            width: 42px;
            height: 42px;
            color: #fff;
            border-radius: 11px;
            background: linear-gradient(135deg, #f3a712, #df8500);
            box-shadow: 0 5px 12px rgba(223, 133, 0, .25);
        }

        .approval-action-total,
        .approval-count-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #9a5d00;
            font-size: .72rem;
            font-weight: 700;
            border: 1px solid #edcf8f;
            border-radius: 999px;
            background: #fff4d7;
        }

        .approval-action-total {
            padding: .4rem .75rem;
            white-space: nowrap;
        }

        .approval-count-badge {
            min-width: 24px;
            height: 24px;
            padding: 0 .45rem;
        }

        .approval-action-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: .75rem;
            padding: 1rem;
            background: #fff;
        }

        .approval-action-item {
            display: grid;
            grid-template-columns: 42px minmax(0, 1fr) auto;
            align-items: center;
            gap: .85rem;
            padding: .9rem 1rem;
            border: 1px solid #e6ebf1;
            border-left: 4px solid #f3a712;
            border-radius: 10px;
            background: #fff;
            transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
        }

        .approval-action-item:hover {
            border-color: #e4be6d;
            box-shadow: 0 5px 15px rgba(52, 71, 103, .08);
            transform: translateY(-1px);
        }

        .approval-action-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            color: #ad6900;
            border-radius: 10px;
            background: #fff3d4;
        }

        .approval-action-copy {
            min-width: 0;
        }

        .approval-action-copy h6 {
            color: #263858;
            font-size: .86rem;
            font-weight: 700;
        }

        .approval-action-copy p {
            color: #7b8ba5;
            font-size: .72rem;
            line-height: 1.45;
        }

        .approval-action-button {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            padding: .55rem .75rem;
            color: #fff;
            font-size: .7rem;
            font-weight: 700;
            white-space: nowrap;
            border-radius: 8px;
            background: #028284;
        }

        .approval-action-button:hover {
            color: #fff;
            background: #016e70;
        }

        @media (max-width: 767.98px) {
            .approval-action-header {
                align-items: flex-start;
            }

            .approval-action-grid {
                grid-template-columns: 1fr;
            }

            .approval-action-item {
                grid-template-columns: 42px minmax(0, 1fr);
            }

            .approval-action-button {
                grid-column: 1 / -1;
                justify-content: center;
            }
        }

        /* ===== TRACKING PROCESS ===== */
        .tracker-panel {
            overflow: hidden;
            border-radius: 14px;
            box-shadow: 0 4px 18px rgba(52, 71, 103, 0.08);
        }

        .tracker-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1.25rem 1.35rem;
            border-bottom: 1px solid #edf0f4;
            background: #fff;
        }

        .tracker-panel-icon,
        .tracker-request-symbol {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            color: #fff;
            background: linear-gradient(135deg, #028284, #04a6a8);
            box-shadow: 0 5px 12px rgba(2, 130, 132, 0.2);
        }

        .tracker-panel-icon {
            width: 44px;
            height: 44px;
            border-radius: 11px;
            font-size: 1rem;
        }

        .tracker-request-count {
            padding: 0.38rem 0.7rem;
            color: #027b7d;
            font-size: 0.72rem;
            font-weight: 700;
            border: 1px solid #bde2e2;
            border-radius: 999px;
            background: #eefafa;
            white-space: nowrap;
        }

        .tracker-panel-body {
            display: grid;
            gap: 1rem;
            padding: 1.1rem;
            background: #f7f9fb;
        }

        .tracker-request-header,
        .tracker-request-main,
        .tracker-request-actions,
        .tracker-request-meta,
        .tracker-progress-summary,
        .tracker-current-info {
            display: flex;
            align-items: center;
        }

        .tracker-request-header {
            justify-content: space-between;
            gap: 1.25rem;
        }

        .tracker-request-main {
            gap: 0.8rem;
            min-width: 0;
        }

        .tracker-request-symbol {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            font-size: 0.9rem;
        }

        .min-width-0 {
            min-width: 0;
        }

        .tracker-request-eyebrow {
            margin-bottom: 0.15rem;
            color: #98a2b3;
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .tracker-request-title {
            overflow: hidden;
            margin: 0;
            color: #263653;
            font-size: 0.96rem;
            font-weight: 700;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .tracker-request-meta {
            flex-wrap: wrap;
            gap: 0.3rem 0.85rem;
            margin-top: 0.3rem;
            color: #8392ab;
            font-size: 0.7rem;
        }

        .tracker-request-meta span {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
        }

        .tracker-request-actions {
            gap: 0.8rem;
            flex: 0 0 auto;
        }

        .tracker-lead-time {
            padding-right: 0.85rem;
            text-align: right;
            border-right: 1px solid #e3e8ee;
        }

        .tracker-lead-time small,
        .tracker-lead-time strong {
            display: block;
        }

        .tracker-lead-time small {
            color: #98a2b3;
            font-size: 0.62rem;
            font-weight: 700;
            text-transform: uppercase;
        }

        .tracker-lead-time strong {
            margin-top: 0.1rem;
            color: #344767;
            font-size: 0.78rem;
        }

        .tracker-detail-button {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.55rem 0.75rem;
            color: #fff;
            font-size: 0.7rem;
            font-weight: 700;
            border-radius: 7px;
            background: #1a535c;
            transition: background-color 0.15s ease, transform 0.15s ease;
        }

        .tracker-detail-button:hover {
            color: #fff;
            background: #123e45;
            transform: translateY(-1px);
        }

        .tracker-progress-summary {
            gap: 0.7rem;
            margin: 1rem 0 0.9rem;
            color: #8392ab;
            font-size: 0.68rem;
        }

        .tracker-progress-summary>span {
            font-weight: 700;
            text-transform: uppercase;
        }

        .tracker-progress-summary strong {
            color: #67748e;
            font-size: 0.68rem;
            white-space: nowrap;
        }

        .tracker-progress-bar {
            flex: 1;
            height: 5px;
            overflow: hidden;
            border-radius: 999px;
            background: #e9edf2;
        }

        .tracker-progress-bar span {
            display: block;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, #028284, #2dce89);
        }

        .tracker-flow {
            display: flex;
            align-items: flex-start;
            padding: 0.2rem 0.5rem 0;
        }

        .tracker-step-item {
            position: relative;
            flex: 1 1 25%;
            min-width: 0;
            text-align: center;
        }

        .tracker-step-visual {
            position: relative;
            display: flex;
            justify-content: center;
        }

        .tracker-step-icon {
            position: relative;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            color: #aab2bf;
            font-size: 0.75rem;
            border: 2px solid #e1e6ec;
            border-radius: 50%;
            background: #f5f7fa;
        }

        .tracker-step-item.is-approved .tracker-step-icon {
            color: #fff;
            border-color: #2dce89;
            background: #2dce89;
            box-shadow: 0 4px 10px rgba(45, 206, 137, 0.22);
        }

        .tracker-step-item.is-current .tracker-step-icon {
            color: #fff;
            border-color: #f5a623;
            background: #f5a623;
            box-shadow: 0 0 0 5px rgba(245, 166, 35, 0.12);
            animation: pulseTracker 2s infinite;
        }

        .tracker-step-item.is-rejected .tracker-step-icon {
            color: #fff;
            border-color: #f5365c;
            background: #f5365c;
        }

        .tracker-connector {
            position: absolute;
            top: 18px;
            left: calc(50% + 19px);
            z-index: 1;
            width: calc(100% - 38px);
            height: 3px;
            background: #e6eaf0;
        }

        .tracker-connector.is-complete {
            background: #2dce89;
        }

        .tracker-step-content {
            padding: 0.5rem 0.35rem 0;
        }

        .tracker-step-number {
            display: block;
            color: #a3acba;
            font-size: 0.56rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .tracker-step-label {
            min-height: 31px;
            margin-top: 0.15rem;
            color: #344767;
            font-size: 0.7rem;
            font-weight: 700;
            line-height: 1.35;
        }

        .tracker-step-status {
            display: inline-block;
            margin-top: 0.25rem;
            padding: 0.2rem 0.48rem;
            color: #8392ab;
            font-size: 0.58rem;
            font-weight: 700;
            border-radius: 999px;
            background: #f0f2f5;
        }

        .tracker-step-item.is-approved .tracker-step-status {
            color: #15835a;
            background: #e9f9f1;
        }

        .tracker-step-item.is-current .tracker-step-status {
            color: #a86700;
            background: #fff4dd;
        }

        .tracker-step-item.is-rejected .tracker-step-status {
            color: #c22d4a;
            background: #feecef;
        }

        .tracker-current-info {
            gap: 0.65rem;
            margin-top: 0.9rem;
            padding: 0.65rem 0.8rem;
            color: #9d650b;
            border: 1px solid #f5ddb2;
            border-radius: 8px;
            background: #fff9ed;
        }

        .tracker-current-info>i {
            flex: 0 0 auto;
        }

        .tracker-current-info span,
        .tracker-current-info strong {
            display: block;
        }

        .tracker-current-info span {
            font-size: 0.6rem;
            font-weight: 700;
            text-transform: uppercase;
        }

        .tracker-current-info strong {
            margin-top: 0.1rem;
            color: #6f4b12;
            font-size: 0.72rem;
        }

        @keyframes pulseTracker {
            0% {
                box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.35);
            }

            70% {
                box-shadow: 0 0 0 9px rgba(245, 166, 35, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(245, 166, 35, 0);
            }
        }

        /* Compact list: one outer card contains every tracking request */
        .tracker-panel-body {
            display: block;
            max-height: 470px;
            overflow-y: auto;
            padding: 0;
            scrollbar-color: #cbd5df transparent;
            scrollbar-width: thin;
        }

        .tracker-panel-body::-webkit-scrollbar {
            width: 6px;
        }

        .tracker-panel-body::-webkit-scrollbar-thumb {
            border-radius: 999px;
            background: #cbd5df;
        }

        .tracker-request-row {
            display: grid;
            grid-template-columns: minmax(220px, 1fr) minmax(440px, 2.25fr) 145px;
            align-items: center;
            gap: 1.2rem;
            padding: 1rem 1.25rem;
            border-bottom: 1px solid #e8edf2;
            background: #fff;
            transition: background-color 0.15s ease;
        }

        .tracker-request-row:last-child {
            border-bottom: 0;
        }

        .tracker-request-row:hover {
            background: #fbfdfd;
        }

        .tracker-row-info,
        .tracker-row-progress {
            min-width: 0;
        }

        .tracker-request-row .tracker-request-symbol {
            width: 34px;
            height: 34px;
            border-radius: 8px;
            font-size: 0.76rem;
            box-shadow: 0 3px 8px rgba(2, 130, 132, 0.16);
        }

        .tracker-request-row .tracker-request-title {
            font-size: 0.82rem;
        }

        .tracker-request-row .tracker-request-meta {
            gap: 0.2rem 0.55rem;
            margin-top: 0.2rem;
            font-size: 0.6rem;
        }

        .tracker-row-current {
            overflow: hidden;
            margin-top: 0.35rem;
            color: #a86700;
            font-size: 0.62rem;
            font-weight: 600;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .tracker-row-current i {
            margin-right: 0.35rem;
            font-size: 0.38rem;
            vertical-align: middle;
        }

        .tracker-request-row .tracker-flow {
            width: 100%;
            padding: 0;
        }

        .tracker-request-row .tracker-step-icon {
            width: 30px;
            height: 30px;
            font-size: 0.62rem;
        }

        .tracker-request-row .tracker-connector {
            top: 14px;
            left: calc(50% + 15px);
            width: calc(100% - 30px);
            height: 2px;
        }

        .tracker-request-row .tracker-step-content {
            padding: 0.35rem 0.2rem 0;
        }

        .tracker-request-row .tracker-step-label {
            min-height: 26px;
            margin-top: 0;
            font-size: 0.61rem;
            line-height: 1.25;
        }

        .tracker-request-row .tracker-step-status {
            margin-top: 0.12rem;
            padding: 0.14rem 0.38rem;
            font-size: 0.51rem;
        }

        .tracker-row-action {
            display: flex;
            align-items: flex-end;
            flex-direction: column;
            gap: 0.45rem;
            min-width: 0;
        }

        .tracker-compact-progress {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            width: 100%;
        }

        .tracker-compact-progress .tracker-progress-bar {
            height: 4px;
        }

        .tracker-compact-progress small {
            color: #8392ab;
            font-size: 0.54rem;
            font-weight: 700;
            white-space: nowrap;
        }

        .tracker-request-row .tracker-lead-time {
            padding: 0;
            text-align: right;
            border: 0;
        }

        .tracker-request-row .tracker-lead-time strong {
            font-size: 0.7rem;
        }

        .tracker-request-row .tracker-detail-button {
            padding: 0.42rem 0.62rem;
            font-size: 0.62rem;
        }

        @media (max-width: 1199.98px) {
            .tracker-request-row {
                grid-template-columns: minmax(210px, 0.9fr) minmax(400px, 2fr) 125px;
                gap: 0.8rem;
                padding-inline: 1rem;
            }
        }

        @media (max-width: 991.98px) {
            .tracker-request-row {
                grid-template-columns: minmax(190px, 0.8fr) minmax(360px, 1.7fr);
            }

            .tracker-row-action {
                grid-column: 1 / -1;
                align-items: center;
                justify-content: flex-end;
                flex-direction: row;
                padding-top: 0.65rem;
                border-top: 1px dashed #e3e8ee;
            }

            .tracker-compact-progress {
                width: 150px;
                margin-right: auto;
            }

            .tracker-request-row .tracker-lead-time {
                padding-right: 0.75rem;
                border-right: 1px solid #e3e8ee;
            }
        }

        @media (max-width: 767.98px) {

            .tracker-panel-header,
            .tracker-request-header {
                align-items: flex-start;
                flex-direction: column;
            }

            .tracker-request-actions {
                justify-content: space-between;
                width: 100%;
            }

            .tracker-flow {
                flex-direction: column;
                gap: 0;
                padding: 0;
            }

            .tracker-request-row {
                display: block;
            }

            .tracker-row-progress {
                margin-top: 0.9rem;
            }

            .tracker-request-row .tracker-step-item {
                min-height: 62px;
            }

            .tracker-request-row .tracker-step-content {
                padding: 0 0 0.75rem 0.55rem;
            }

            .tracker-request-row .tracker-connector {
                top: 30px;
                left: 14px;
                width: 2px;
                height: calc(100% - 30px);
            }

            .tracker-row-action {
                display: flex;
                margin-top: 0.35rem;
            }

            .tracker-step-item {
                display: grid;
                grid-template-columns: 42px minmax(0, 1fr);
                width: 100%;
                min-height: 78px;
                text-align: left;
            }

            .tracker-step-visual {
                justify-content: flex-start;
            }

            .tracker-connector {
                top: 38px;
                left: 18px;
                width: 3px;
                height: calc(100% - 38px);
            }

            .tracker-step-content {
                padding: 0.1rem 0 1rem 0.65rem;
            }

            .tracker-step-label {
                min-height: 0;
            }
        }

        @media (max-width: 420px) {
            .tracker-request-row {
                padding: 0.85rem;
            }

            .tracker-request-meta {
                align-items: flex-start;
                flex-direction: column;
            }

            .tracker-lead-time {
                text-align: left;
            }
        }
    </style>
@endpush

@push('addjs')
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js'></script>
    @push('addjs')
        <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
        <script>
            // Aspek pengembangan dari backend
            // Struktur ideal:
            // [ { nik, nama, departemen, kategori, kompetensi, nilai_aktual, nilai_target }, ... ]
            const aspekPengembangan = @json($aspek_pengembangan ?? []);
            const kriteriaSummary = @json($kriteria_chart ?? []);
            const totalKaryawan = {{ $total_karyawan ?? 0 }};

            document.addEventListener('DOMContentLoaded', function() {

                // Initialize Bootstrap tooltips for tracker
                var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                tooltipTriggerList.map(function(tooltipTriggerEl) {
                    return new bootstrap.Tooltip(tooltipTriggerEl);
                });

                // ==== 1. DATA DETAIL FLAT DARI PHP ====
                // Isi dari controller: detail_flat = per karyawan
                // [ { nik, nama, departemen, persentase, kriteria, total_target, total_actual }, ... ]
                const kompetensiDetail = @json($detail_flat ?? []);

                // ==== 2. HELPER: mapping kriteria <-> range persen ====
                function getKategoriByPersentase(percent) {
                    const p = Number(percent) || 0;

                    if (p > 149) {
                        return 'Outstanding';
                    } else if (p >= 101 && p <= 149) {
                        return 'Exceed Expectations';
                    } else if (p >= 99 && p <= 100.99) {
                        return 'Meets Expectations';
                    } else if (p >= 70 && p <= 98.99) {
                        return 'Needs Improvement';
                    } else {
                        return 'Unsatisfactory';
                    }
                }

                function getRangeLabel(kriteria) {
                    switch (kriteria) {
                        case 'Outstanding':
                            return '> 149%';
                        case 'Exceed Expectations':
                            return '101% - 149%';
                        case 'Meets Expectations':
                            return '99% - 100.99%';
                        case 'Needs Improvement':
                            return '70% - 98.99%';
                        case 'Unsatisfactory':
                            return '< 70%';
                        default:
                            return '-';
                    }
                }

                function buildDetailTable(rows, kriteria) {
                    if (!rows || !rows.length) {
                        return `
            <div class="alert alert-warning mb-0">
                Tidak ada data untuk kriteria <b>${kriteria}</b> pada periode & filter ini.
            </div>
        `;
                    }

                    const rangeLabel = getRangeLabel(kriteria);
                    const persenList = rows.map(r => Number(r.persentase || 0));
                    const totalTarget = rows.reduce((sum, r) => sum + Number(r.total_target || 0), 0);
                    const totalActual = rows.reduce((sum, r) => sum + Number(r.total_actual || 0), 0);
                    const totalPersen = persenList.reduce((sum, v) => sum + v, 0);
                    const count = persenList.length;
                    const avg = count ? totalPersen / count : 0;
                    const min = Math.min(...persenList);
                    const max = Math.max(...persenList);

                    // === PERBANDINGAN DENGAN TOTAL KARYAWAN (SUPAYA MATCH PIE CHART) ===

                    // ambil persen dari kriteriaSummary (supaya sama dengan pie chart)
                    const summaryKriteria = (kriteriaSummary && kriteriaSummary[kriteria]) ?
                        kriteriaSummary[kriteria] :
                        null;

                    const persenKriteria = summaryKriteria ?
                        Number(summaryKriteria.percentage || 0) :
                        (totalKaryawan ? (count / totalKaryawan) * 100 : 0);

                    // total untuk label: pakai totalKaryawan dari backend kalau ada
                    const totalLabel = totalKaryawan > 0 ? totalKaryawan : count;
                    const headerLabel =
                        `Tabel Karyawan (${count} dari ${totalLabel} karyawan, ${persenKriteria.toFixed(2)}%)`;

                    // === HEADER PENJELASAN + ACCORDION (PANEL KARYAWAN) ===
                    let html = `
        <div class="mb-3 small p-3 bg-white border rounded">
            <div class="fw-bold mb-1">Definisi Kriteria</div>
            <p class="mb-1">
                Kriteria <b>${kriteria}</b> didefinisikan untuk persentase
                <b>${rangeLabel}</b>.
            </p>
            <p class="mb-1">
                Persentase pemenuhan dihitung dengan rumus:
                <code>total_nilai_aktual / total_nilai_target × 100%</code>.
            </p>
            <p class="mb-0">
                Kriteria ini membantu mengelompokkan karyawan berdasarkan tingkat
                pemenuhan kompetensinya sepanjang periode penilaian.
            </p>
        </div>

        <div class="accordion" id="accordionKriteria">
            <!-- PANEL 1: KARYAWAN (DEFAULT COLLAPSED) -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingKaryawan">
                    <button class="accordion-button collapsed py-2" type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#collapseKaryawan"
                        aria-expanded="false"
                        aria-controls="collapseKaryawan">
                        ${headerLabel}
                    </button>
                </h2>
                <div id="collapseKaryawan" class="accordion-collapse collapse"
                    aria-labelledby="headingKaryawan">
                    <div class="accordion-body p-2">
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered align-middle mb-0">
                                <thead class="table-light">
                                    <tr class="text-center">
                                        <th style="width:50px;">No</th>
                                        <th style="min-width:90px;">NIK</th>
                                        <th style="min-width:160px;">Nama</th>
                                        <th style="min-width:130px;">Departemen</th>
                                        <th style="min-width:110px;">Total Target</th>
                                        <th style="min-width:110px;">Total Aktual</th>
                                        <th style="min-width:110px;">Persentase</th>
                                    </tr>
                                </thead>
                                <tbody>
    `;

                    // Isi tabel karyawan
                    rows.forEach((row, index) => {
                        const nik = row.nik || '-';
                        const nama = row.nama || '-';
                        const departemen = row.departemen || '-';
                        const target = Number(row.total_target || 0);
                        const actual = Number(row.total_actual || 0);
                        const persentase = Number(row.persentase || 0).toFixed(2);

                        html += `
            <tr>
                <td class="text-center">${index + 1}</td>
                <td>${nik}</td>
                <td>${nama}</td>
                <td>${departemen}</td>
                <td class="text-end">${target.toLocaleString('id-ID')}</td>
                <td class="text-end">${actual.toLocaleString('id-ID')}</td>
                <td class="text-end">${persentase}%</td>
            </tr>
        `;
                    });

                    // Ringkasan di bawah tabel karyawan
                    html += `
            <tr class="table-light fw-bold">
                <td colspan="4">Ringkasan Kriteria</td>
                <td class="text-end">
                    ${totalTarget.toLocaleString('id-ID')}
                </td>
                <td class="text-end">
                    ${totalActual.toLocaleString('id-ID')}
                </td>
                <td class="text-end">
                    Rata-rata: ${avg.toFixed(2)}%<br/>
                    <small>Min–Max: ${min.toFixed(2)}% – ${max.toFixed(2)}%</small>
                </td>
            </tr>
        </tbody>
    </table>
                        </div>
                    </div>
                </div>
            </div>
    `;

                    // === PANEL 2: KOMPETENSI (UNIK, COLLAPSED BY DEFAULT) ===
                    html += `
            <div class="accordion-item mt-2">
                <h2 class="accordion-header" id="headingKompetensi">
                    <button class="accordion-button collapsed py-2" type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#collapseKompetensi"
                        aria-expanded="false"
                        aria-controls="collapseKompetensi">
                        Tabel Kompetensi (Aspek Pengembangan)
                    </button>
                </h2>
                <div id="collapseKompetensi" class="accordion-collapse collapse"
                    aria-labelledby="headingKompetensi">
                    <div class="accordion-body p-2">
    `;

                    // Kumpulkan NIK karyawan di kriteria ini
                    const nikSet = new Set(rows.map(r => r.nik));

                    // Filter aspek pengembangan untuk NIK tsb
                    const aspekFiltered = (aspekPengembangan || []).filter(item => nikSet.has(item.nik));

                    // Dedup kategori + kompetensi
                    const uniqueKompetensi = [];
                    const seenKey = new Set();

                    aspekFiltered.forEach(item => {
                        const kategori = item.kategori || '-';
                        const kompetensi = item.kompetensi || '-';
                        const key = kategori + '||' + kompetensi;

                        if (seenKey.has(key)) return;

                        seenKey.add(key);
                        uniqueKompetensi.push({
                            kategori,
                            kompetensi
                        });
                    });

                    if (!uniqueKompetensi.length) {
                        html += `
            <div class="alert alert-light border small mb-0">
                Tidak ada aspek pengembangan spesifik yang terdeteksi untuk karyawan pada kriteria ini.
            </div>
        `;
                    } else {
                        html += `
            <div class="table-responsive">
                <table class="table table-sm table-bordered align-middle mb-0">
                    <thead class="table-light">
                        <tr class="text-center">
                            <th style="width:50px;">No</th>
                            <th style="min-width:160px;">Kategori Kompetensi</th>
                            <th style="min-width:220px;">Nama Kompetensi</th>
                        </tr>
                    </thead>
                    <tbody>
        `;

                        uniqueKompetensi.forEach((item, index) => {
                            html += `
                <tr>
                    <td class="text-center">${index + 1}</td>
                    <td>${item.kategori}</td>
                    <td>${item.kompetensi}</td>
                </tr>
            `;
                        });

                        html += `
                    </tbody>
                </table>
            </div>
        `;
                    }

                    html += `
                    </div>
                </div>
            </div>
        </div> <!-- end .accordion -->
    `;

                    return html;
                }

                // ==== 4. HELPER: buka modal + filter data by kriteria ====
                function openDetailKriteria(kriteria) {
                    const titleEl = document.getElementById('detailKriteriaLabel');
                    const bodyEl = document.getElementById('detailKriteriaBody');

                    if (titleEl) {
                        titleEl.textContent = 'Detail Kriteria: ' + kriteria;
                    }

                    if (bodyEl) {
                        bodyEl.innerHTML = `
                        <div class="text-center py-4">
                            <div class="spinner-border" role="status"></div>
                            <p class="mt-2 mb-0">Memuat data...</p>
                        </div>
                    `;
                    }

                    const targetName = String(kriteria).toLowerCase();

                    // Filter data: pakai field kriteria kalau ada, fallback ke hitung dari persentase
                    const filtered = (kompetensiDetail || []).filter(row => {
                        const kat = row.kriteria ?
                            String(row.kriteria) :
                            getKategoriByPersentase(row.persentase);

                        return kat.toLowerCase() === targetName;
                    });

                    if (bodyEl) {
                        bodyEl.innerHTML = buildDetailTable(filtered, kriteria);
                    }

                    const modalEl = document.getElementById('detailKriteriaModal');
                    if (modalEl && typeof bootstrap !== 'undefined') {
                        const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
                        modal.show();
                    }
                }

                // ==== 5. EVENT: klik baris tabel kriteria ====
                document.addEventListener('click', function(e) {
                    const row = e.target.closest('.row-kriteria');
                    if (!row) return;

                    const kriteria = row.getAttribute('data-kriteria');
                    if (kriteria) {
                        openDetailKriteria(kriteria);
                    }
                });

                // ==== 6. PIE CHART: Kompetensi Seluruh Karyawan ====
                const pieChartDom = document.getElementById('pieChart');
                if (pieChartDom) {
                    const pieChart = echarts.init(pieChartDom);

                    pieChart.setOption({
                        tooltip: {
                            trigger: 'item',
                            formatter: function(params) {
                                return `
                                <b>${params.data.name}</b><br>
                                Persentase: ${params.percent.toFixed(2)}%
                            `;
                            }
                        },
                        series: [{
                            name: 'Kompetensi',
                            type: 'pie',
                            radius: '60%',
                            center: ['50%', '50%'],
                            avoidLabelOverlap: false,
                            data: {!! json_encode(
                                $kriteria_chart->map(function ($item, $key) {
                                        return [
                                            'value' => $item['jumlah'],
                                            'name' => $key,
                                            'percent' => $item['percentage'],
                                            'itemStyle' => ['color' => $item['color']],
                                        ];
                                    })->values()->toArray(),
                            ) !!},
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },
                            label: {
                                show: true,
                                position: 'outside',
                                formatter: '{b}:\n{d}%',
                                overflow: 'break',
                                textStyle: {
                                    fontSize: 10,
                                    color: '#000'
                                }
                            },
                            labelLine: {
                                show: true,
                                length: 7,
                                length2: 7
                            },
                            grid: {
                                top: '5%',
                            },
                            minShowLabelAngle: 0
                        }],
                    });

                    // Klik slice pie → buka detail kriteria
                    pieChart.on('click', function(params) {
                        if (params && params.name) {
                            openDetailKriteria(params.name);
                        }
                    });
                }

                // ==== 7. BAR CHART: Pemenuhan Kompetensi per Department ====
                const barChartDom = document.getElementById('barChart');
                if (barChartDom) {
                    const departemenData = @json($departemen_chart ?? []);
                    const allDepartments = @json($all_departments ?? []);

                    const departments = allDepartments.map(department => {
                        return {
                            name: department,
                            value: departemenData[department] ?
                                Number(Number(departemenData[department]).toFixed(2)) : 0
                        };
                    });

                    departments.sort((a, b) => b.value - a.value);

                    const colors = departments.map(dept =>
                        dept.value < 70 ? '#FF0000' : 'rgba(75, 192, 192, 0.7)'
                    );

                    const barChart = echarts.init(barChartDom);

                    barChart.setOption({
                        tooltip: {
                            trigger: 'item',
                            formatter: function(params) {
                                return `
                                <b>${params.name}</b><br>
                                Pemenuhan: ${params.value > 0 ? `${params.value}%` : 'Tidak ada data'}
                            `;
                            }
                        },
                        grid: {
                            top: '5%',
                            left: '3%',
                            right: '15%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value}%',
                                color: '#000'
                            }
                        },
                        yAxis: {
                            type: 'category',
                            data: departments.map(dept => dept.name).reverse(),
                            axisLabel: {
                                color: '#000'
                            }
                        },
                        series: [{
                            type: 'bar',
                            data: departments.map((dept, index) => ({
                                value: dept.value,
                                itemStyle: {
                                    color: colors[index]
                                }
                            })).reverse(),
                            label: {
                                show: true,
                                position: 'right',
                                formatter: '{c}%',
                                color: '#000'
                            }
                        }]
                    });
                }

                // ==== 8. CALENDAR: Training Schedule ====
                const calendarEl = document.getElementById('calendar');
                if (calendarEl) {
                    const calendar = new FullCalendar.Calendar(calendarEl, {
                        initialView: 'dayGridMonth',
                        headerToolbar: {
                            left: 'prev,next today',
                            center: 'title',
                            right: ''
                        },
                        events: function(info, successCallback, failureCallback) {
                            $.ajax({
                                url: '{{ route('dscldr.events') }}',
                                type: 'GET',
                                data: {
                                    start: info.startStr,
                                    end: info.endStr
                                },
                                success: function(data) {
                                    successCallback(data);
                                },
                                error: function() {
                                    failureCallback();
                                    if (typeof Swal !== 'undefined') {
                                        Swal.fire({
                                            icon: 'error',
                                            title: 'Error',
                                            text: 'Gagal memuat data kalender'
                                        });
                                    } else {
                                        alert('Gagal memuat data kalender');
                                    }
                                }
                            });
                        },
                        eventClick: function(info) {
                            showEventDetail(info.event.id);
                        },
                        eventContent: function(arg) {
                            return {
                                html: '<div class="fc-event-title fc-sticky" style="padding: 2px 4px;">' +
                                    arg.event.title + '</div>'
                            }
                        }
                    });
                    calendar.render();
                }

                // Show event detail
                function showEventDetail(eventId) {
                    $.ajax({
                        url: '{{ url('dscldr/event') }}/' + eventId,
                        type: 'GET',
                        success: function(response) {
                            if (response.success) {
                                const data = response.data;

                                // Fill modal with data
                                $('#detail_nama_trn').text(data.nama_trn || '-');
                                $('#detail_jadwal').text(formatDateCalendar(data.jadwal_trn));
                                $('#detail_ruangan').text(data.ruangan || '-');
                                $('#detail_jam').text(formatTimeRange(data.jam_mulai, data.jam_selesai));
                                const participantStatus = data.participant_status || '-';
                                const $statusBadge = $('#detail_status');
                                const normalizedStatus = participantStatus.toString().trim().toLowerCase();
                                let statusClass = 'bg-secondary';
                                let statusDisplay = participantStatus;

                                if (normalizedStatus === 'hadir') {
                                    statusClass = 'bg-success';
                                    statusDisplay = 'Hadir';
                                } else if (normalizedStatus === 'tidak hadir') {
                                    statusClass = 'bg-danger';
                                    statusDisplay = 'Tidak Hadir';
                                } else if (normalizedStatus === 'reschedule') {
                                    statusClass = 'bg-warning text-white';
                                    statusDisplay = 'Reschedule';
                                } else {
                                    statusClass = 'bg-secondary text-white';
                                    statusDisplay = 'Pending';
                                }

                                $statusBadge
                                    .text(statusDisplay)
                                    .removeClass('bg-success bg-warning text-white bg-secondary bg-danger')
                                    .addClass(statusClass);

                                // Button /trsuex hanya muncul jika status = "Hadir"
                                const $btnTrsuex = $('#btn_trsuex');
                                const status = (data.participant_status || '').toString().trim()
                                    .toLowerCase();
                                const attemptStatus = (data.attempt_status || '').toString().trim()
                                    .toLowerCase();
                                if (status === 'hadir' && attemptStatus !== 'submitted') {
                                    $btnTrsuex.removeClass('d-none');
                                } else {
                                    $btnTrsuex.addClass('d-none');
                                }

                                // Display trainer name
                                const trainerName = data.trainer_name || '-';
                                $('#detail_trainer').text(trainerName);

                                // detail nilai
                                $('#detail_nilai').text(
                                    data.is_reviewed && data.nilai !== null && data.nilai !==
                                    undefined ? data.nilai : '-'
                                );

                                // Show modal
                                $('#eventDetailModal').modal('show');
                            } else {
                                if (typeof Swal !== 'undefined') {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Error',
                                        text: response.message || 'Gagal memuat detail event'
                                    });
                                } else {
                                    alert(response.message || 'Gagal memuat detail event');
                                }
                            }
                        },
                        error: function() {
                            if (typeof Swal !== 'undefined') {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: 'Gagal memuat detail event'
                                });
                            } else {
                                alert('Gagal memuat detail event');
                            }
                        }
                    });
                }

                // Format date for calendar
                function formatDateCalendar(dateString) {
                    if (!dateString) return '-';
                    const date = new Date(dateString);
                    const options = {
                        day: '2-digit',
                        month: 'long',
                        year: 'numeric'
                    };
                    return date.toLocaleDateString('id-ID', options);
                }

                // Format time range for modal detail
                function formatTimeRange(jamMulai, jamSelesai) {
                    if (!jamMulai && !jamSelesai) return '-';

                    // Potong ke HH:MM saja (kolom time MySQL biasanya HH:MM:SS)
                    const mulai = jamMulai ? jamMulai.substring(0, 5) : null;
                    const selesai = jamSelesai ? jamSelesai.substring(0, 5) : null;

                    if (mulai && selesai) {
                        return mulai + ' - ' + selesai;
                    } else if (mulai) {
                        return mulai;
                    } else {
                        return '-';
                    }
                }

                // Make showEventDetail available globally for calendar
                window.showEventDetail = showEventDetail;
            });
        </script>
    @endpush