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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card mx-4 shadow-lg">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-md-12">
                    <div class="nav-wrapper">
                        <button type="button" class="btn btn-secondary mb-0" onclick="window.location='{{ url($url_menu) }}'">
                            <i class="fas fa-arrow-left"></i> Kembali
                        </button>
                        <button type="button" id="btn-pdf" class="btn btn-danger mb-0">
                            <i class="fas fa-file-pdf me-1"></i>
                            Export PDF
                        </button>
                        <button type="button" id="btn-excel" class="btn btn-success mb-0">
                            <i class="fas fa-file-excel me-1"></i>
                            Export Excel
                        </button>
                        @if ($users_rules[0] == 'head')
                            @if ($alreadyApproved)
                                <span class="badge bg-success mb-0" style="padding: 10px 15px; font-size: 14px;">
                                    <i class="fas fa-check-circle me-1"></i>
                                    Sudah disetujui
                                </span>
                            @else
                                <button type="button" id="btn-verif" class="btn btn-primary mb-0">
                                    <i class="fas fa-check me-1"></i>
                                    Setujui Laporan
                                </button>
                            @endif
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">{{ $title_menu }} - {{ $report_title }}</h5>
                            </div>
                            <div class="col">
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">

                        <!-- Results Table -->

                        <!-- Results Table -->
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body p-0">
                                        <div class="table-container">
                                            {{-- <div class="table-wrapper"> --}}
                                            <table
                                                class="table-bordered align-items-center table-hover @if (!isset($filters['period']) || $filters['period'] == 'all') table-wide @endif table"
                                                id="pa-summary-table">
                                                <thead class="thead-light" style="background-color:#00b7bd4f;">
                                                    <tr>
                                                        <th rowspan="2" class="sticky-col sticky-col-1 text-center"
                                                            style="vertical-align: middle;">No</th>
                                                        <th rowspan="2" class="sticky-col sticky-col-2 text-center"
                                                            style="vertical-align: middle;">NIK</th>
                                                        <th rowspan="2" class="sticky-col sticky-col-3 text-center"
                                                            style="vertical-align: middle;">Nama</th>

                                                        @if (!isset($filters['period']) || $filters['period'] == 'all' || $filters['period'] == 1)
                                                            <th colspan="3" class="data-col text-center">Periode 1
                                                            </th>
                                                        @endif
                                                        @if (!isset($filters['period']) || $filters['period'] == 'all' || $filters['period'] == 2)
                                                            <th colspan="3" class="data-col text-center">Periode 2
                                                            </th>
                                                        @endif
                                                        @if (!isset($filters['period']) || $filters['period'] == 'all' || $filters['period'] == 3)
                                                            <th colspan="3" class="data-col text-center">Periode 3
                                                            </th>
                                                        @endif
                                                        @if (!isset($filters['period']) || $filters['period'] == 'all' || $filters['period'] == 4)
                                                            <th colspan="3" class="data-col text-center">Periode 4
                                                            </th>
                                                        @endif

                                                        @if (!isset($filters['period']) || $filters['period'] == 'all')
                                                            <th rowspan="2" class="data-col text-center"
                                                                style="vertical-align: middle">Rata2</th>
                                                            <th rowspan="2" class="data-col text-center"
                                                                style="vertical-align: middle">SP</th>
                                                            <th colspan="2" class="data-col text-center">Final</th>
                                                            <th colspan="2" class="data-col text-center">Grand Final
                                                            </th>
                                                            <th rowspan="2" class="data-col text-center"
                                                                style="vertical-align: middle">Nilai</th>
                                                            <th rowspan="2" class="data-col text-center"
                                                                style="vertical-align: middle">Grade</th>
                                                        @endif
                                                    </tr>
                                                    <tr>
                                                        @if (!isset($filters['period']) || $filters['period'] == 'all' || $filters['period'] == 1)
                                                            <th class="data-col text-center">Des {{ $prevYear }}
                                                            </th>
                                                            <th class="data-col text-center">Jan {{ $currentYear }}
                                                            </th>
                                                            <th class="data-col text-center">Feb {{ $currentYear }}
                                                            </th>
                                                        @endif
                                                        @if (!isset($filters['period']) || $filters['period'] == 'all' || $filters['period'] == 2)
                                                            <th class="data-col text-center">Mar {{ $currentYear }}
                                                            </th>
                                                            <th class="data-col text-center">Apr {{ $currentYear }}
                                                            </th>
                                                            <th class="data-col text-center">Mei {{ $currentYear }}
                                                            </th>
                                                        @endif
                                                        @if (!isset($filters['period']) || $filters['period'] == 'all' || $filters['period'] == 3)
                                                            <th class="data-col text-center">Jun {{ $currentYear }}
                                                            </th>
                                                            <th class="data-col text-center">Jul {{ $currentYear }}
                                                            </th>
                                                            <th class="data-col text-center">Ags {{ $currentYear }}
                                                            </th>
                                                        @endif
                                                        @if (!isset($filters['period']) || $filters['period'] == 'all' || $filters['period'] == 4)
                                                            <th class="data-col text-center">Sep {{ $currentYear }}
                                                            </th>
                                                            <th class="data-col text-center">Okt {{ $currentYear }}
                                                            </th>
                                                            <th class="data-col text-center">Nov {{ $currentYear }}
                                                            </th>
                                                        @endif

                                                        @if (!isset($filters['period']) || $filters['period'] == 'all')
                                                            <th class="data-col text-center">PA</th>
                                                            <th class="data-col text-center">ACD</th>
                                                            <th class="data-col text-center">PA</th>
                                                            <th class="data-col text-center">ACD</th>
                                                        @endif
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @php
                                                        $counter = 1;
                                                        $isAllPeriod =
                                                            $filters['period'] === 'all' || !isset($filters['period']);
                                                        $visibleMonths = $isAllPeriod ? 12 : 3;
                                                        $visibleAggregates = $isAllPeriod ? 8 : 0;
                                                        $totalVisibleCols = 3 + $visibleMonths + $visibleAggregates;
                                                        $lastDepartmentName = '';
                                                    @endphp

                                                    @forelse($reportData as $group)
                                                        @if (($group['department_name'] ?? '') !== $lastDepartmentName)
                                                            <tr class="department-header">
                                                                <td colspan="3" class="text-left department-header-text">
                                                                    <i class="fas fa-building me-2"></i> DEPARTEMEN:
                                                                    {{ $group['department_name'] ?? 'No Department' }}
                                                                </td>
                                                                <td colspan="{{ $totalVisibleCols - 3 }}" class="department-header-fill"></td>
                                                            </tr>
                                                            @php
                                                                $lastDepartmentName = $group['department_name'] ?? '';
                                                                $currentPosition = null;
                                                            @endphp
                                                        @endif

                                                        @php
                                                            $currentPosition = null;
                                                        @endphp

                                                        @foreach ($group['employees'] as $employee)
                                                            @php
                                                                $employeePosition =
                                                                    $employee['position_name_timeline'] ??
                                                                    ($employee['position_name'] ?? 'No Position');
                                                            @endphp

                                                            @if ($currentPosition !== $employeePosition)
                                                                @php
                                                                    $currentPosition = $employeePosition;
                                                                @endphp

                                                                <tr class="position-header">
                                                                    <td colspan="3" class="text-left position-header-text">
                                                                        <i class="fas fa-user-tie me-2"></i> POSISI:
                                                                        {{ $currentPosition }}
                                                                    </td>
                                                                    <td colspan="{{ $totalVisibleCols - 3 }}" class="position-header-fill"></td>
                                                                </tr>
                                                            @endif

                                                            <tr>
                                                                {{-- Kolom statis (3 kolom) --}}
                                                                <td
                                                                    class="sticky-col sticky-col-1 font-weight-normal text-center text-sm">
                                                                    {{ $counter++ }}
                                                                </td>
                                                                <td
                                                                    class="sticky-col sticky-col-2 font-weight-normal text-sm">
                                                                    {{ $employee['nik'] ?? '-' }}
                                                                </td>
                                                                <td
                                                                    class="sticky-col sticky-col-3 font-weight-normal text-sm">
                                                                    {{ $employee['employee_name'] }}
                                                                </td>

                                                                @if ($isAllPeriod || $filters['period'] == 1)
                                                                    <td
                                                                        class="data-col font-weight-normal score-cell text-center text-sm">
                                                                        {{ ($employee['dec_' . $prevYear] ?? 0) > 0 ? number_format($employee['dec_' . $prevYear], 1) : '-' }}
                                                                    </td>
                                                                    <td
                                                                        class="data-col font-weight-normal score-cell text-center text-sm">
                                                                        {{ ($employee['jan_' . $currentYear] ?? 0) > 0 ? number_format($employee['jan_' . $currentYear], 1) : '-' }}
                                                                    </td>
                                                                    <td
                                                                        class="data-col font-weight-normal score-cell text-center text-sm">
                                                                        {{ ($employee['feb_' . $currentYear] ?? 0) > 0 ? number_format($employee['feb_' . $currentYear], 1) : '-' }}
                                                                    </td>
                                                                @endif

                                                                @if ($isAllPeriod || $filters['period'] == 2)
                                                                    <td
                                                                        class="data-col font-weight-normal score-cell text-center text-sm">
                                                                        {{ ($employee['mar_' . $currentYear] ?? 0) > 0 ? number_format($employee['mar_' . $currentYear], 1) : '-' }}
                                                                    </td>
                                                                    <td
                                                                        class="data-col font-weight-normal score-cell text-center text-sm">
                                                                        {{ ($employee['apr_' . $currentYear] ?? 0) > 0 ? number_format($employee['apr_' . $currentYear], 1) : '-' }}
                                                                    </td>
                                                                    <td
                                                                        class="data-col font-weight-normal score-cell text-center text-sm">
                                                                        {{ ($employee['may_' . $currentYear] ?? 0) > 0 ? number_format($employee['may_' . $currentYear], 1) : '-' }}
                                                                    </td>
                                                                @endif
                                                                @if ($isAllPeriod || $filters['period'] == 3)
                                                                    <td
                                                                        class="data-col font-weight-normal score-cell text-center text-sm">
                                                                        {{ ($employee['jun_' . $currentYear] ?? 0) > 0 ? number_format($employee['jun_' . $currentYear], 1) : '-' }}
                                                                    </td>
                                                                    <td
                                                                        class="data-col font-weight-normal score-cell text-center text-sm">
                                                                        {{ ($employee['jul_' . $currentYear] ?? 0) > 0 ? number_format($employee['jul_' . $currentYear], 1) : '-' }}
                                                                    </td>
                                                                    <td
                                                                        class="data-col font-weight-normal score-cell text-center text-sm">
                                                                        {{ ($employee['aug_' . $currentYear] ?? 0) > 0 ? number_format($employee['aug_' . $currentYear], 1) : '-' }}
                                                                    </td>
                                                                @endif
                                                                @if ($isAllPeriod || $filters['period'] == 4)
                                                                    <td
                                                                        class="data-col font-weight-normal score-cell text-center text-sm">
                                                                        {{ ($employee['sep_' . $currentYear] ?? 0) > 0 ? number_format($employee['sep_' . $currentYear], 1) : '-' }}
                                                                    </td>
                                                                    <td
                                                                        class="data-col font-weight-normal score-cell text-center text-sm">
                                                                        {{ ($employee['oct_' . $currentYear] ?? 0) > 0 ? number_format($employee['oct_' . $currentYear], 1) : '-' }}
                                                                    </td>
                                                                    <td
                                                                        class="data-col font-weight-normal score-cell text-center text-sm">
                                                                        {{ ($employee['nov_' . $currentYear] ?? 0) > 0 ? number_format($employee['nov_' . $currentYear], 1) : '-' }}
                                                                    </td>
                                                                @endif

                                                                {{-- Kolom agregat (8 kolom) --}}
                                                                @if ($isAllPeriod)
                                                                    <td
                                                                        class="data-col font-weight-bold score-cell text-center text-sm">
                                                                        {{ $employee['average'] > 0 ? number_format($employee['average'], 2) : '-' }}
                                                                    </td>
                                                                    <td
                                                                        class="data-col font-weight-normal text-center text-sm">
                                                                        {{ $employee['sp'] ?? '' }}</td>
                                                                    <td
                                                                        class="data col font-weight-normal text-center text-sm">
                                                                        {{ $employee['final_pa'] > 0 ? number_format($employee['final_pa'], 2) : '-' }}
                                                                    </td>
                                                                    <td
                                                                        class="data-col font-weight-normal text-center text-sm">
                                                                        {{ (float) $employee['final_acd'] > 0 ? number_format($employee['final_acd'], 2) : '-' }}
                                                                    </td>
                                                                    <td
                                                                        class="data-col font-weight-normal text-center text-sm">
                                                                        @php
                                                                            $hasAcademy =
                                                                                (float) $employee['final_acd'] > 0;
                                                                            $paPercentage = $hasAcademy
                                                                                ? '70%'
                                                                                : '100%';
                                                                            $acdPercentage = $hasAcademy ? '30%' : '0%';
                                                                        @endphp
                                                                        {{ $employee['grand_pa'] > 0 ? number_format($employee['grand_pa'], 2) : '-' }}
                                                                    </td>
                                                                    <td
                                                                        class="data-col font-weight-normal text-center text-sm">
                                                                        {{ (float) $employee['grand_acd'] > 0 ? number_format($employee['grand_acd'], 2) : '-' }}
                                                                    </td>
                                                                    <td
                                                                        class="data-col font-weight-bold text-center text-sm">
                                                                        {{ $employee['nilai'] > 0 ? number_format($employee['nilai'], 2) : '-' }}
                                                                    </td>
                                                                    <td
                                                                        class="data-col font-weight-bold text-center text-sm">
                                                                        {{ $employee['grade'] ?? '' }}</td>
                                                                @endif
                                                            </tr>
                                                        @endforeach

                                                    @empty
                                                        <tr>
                                                            <td colspan="{{ $totalVisibleCols }}"
                                                                class="py-4 text-center">
                                                                <div class="text-muted">
                                                                    <i class="ni ni-folder-17 me-2 text-lg"></i>
                                                                    Tidak ada data
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    @endforelse
                                                </tbody>
                                            </table>
                                            {{-- </div> --}}
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Summary Statistics -->
                        @if (!empty($reportData))
                            @php
                                $allEmployees = collect($reportData)->flatMap(function ($group) {
                                    return $group['employees'];
                                });
                                $totalEmployees = $allEmployees->count();
                                $avgDec = $allEmployees->where('dec_2024', '>', 0)->avg('dec_2024');
                                $avgJan = $allEmployees->where('jan_2025', '>', 0)->avg('jan_2025');
                                $avgTotal = $allEmployees->where('average', '>', 0)->avg('average');
                            @endphp
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const btn = document.getElementById('btn-verif');
            if (!btn) return;

            btn.addEventListener('click', async function() {
                // SweetAlert2 confirmation flow
                const useSwal = (typeof Swal !== 'undefined');
                if (useSwal) {
                    const step1 = await Swal.fire({
                        title: 'Setujui Laporan Tahunan?',
                        html: 'tidak dapat dibatalkan.',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Lanjut',
                        cancelButtonText: 'Batal'
                    });
                    if (!step1.isConfirmed) return;
                } else {
                    if (!confirm(
                            'Setujui laporan tahunan untuk filter saat ini? Semua evaluasi berstatus "ready_for_approval" di tahun ini akan di-approve.'
                        )) return;
                }

                const buttonHtml = btn.innerHTML;
                btn.disabled = true;
                btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Memproses...';

                try {
                    const formData = new FormData();
                    formData.append('_token', '{{ csrf_token() }}');
                    formData.append('department', '{{ request('department') }}');
                    formData.append('year',
                        '{{ request('year') ?: (isset($currentYear) ? $currentYear : date('Y')) }}'
                    );

                    const res = await fetch('{{ route('rptsum.approve-annual') }}', {
                        method: 'POST',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        body: formData
                    });
                    const data = await res.json();
                    if (typeof Swal !== 'undefined') {
                        if (data.success) {
                            const countMessage = data.count > 0 ? ` (${data.count} evaluasi)` : '';
                            await Swal.fire({
                                icon: 'success',
                                title: 'Berhasil',
                                text: data.message ||
                                    `Laporan tahunan disetujui${countMessage}.`,
                                confirmButtonText: 'OK'
                            });
                            window.location.reload();
                        } else {
                            await Swal.fire({
                                icon: 'error',
                                title: 'Gagal',
                                html: data.message || 'Gagal menyetujui laporan tahunan.',
                                confirmButtonText: 'OK'
                            });
                        }
                    } else {
                        if (data.success) {
                            const countMessage = data.count > 0 ? ` (${data.count} evaluasi)` : '';
                            alert(data.message ||
                                `Berhasil menyetujui laporan tahunan${countMessage}.`);
                            window.location.reload();
                        } else {
                            alert(data.message || 'Gagal menyetujui laporan tahunan.');
                        }
                    }
                } catch (e) {
                    console.error(e);
                    if (typeof Swal !== 'undefined') {
                        await Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: e.message
                        });
                    } else {
                        alert('Terjadi kesalahan: ' + e.message);
                    }
                } finally {
                    btn.disabled = false;
                    btn.innerHTML = buttonHtml;
                }
            });
        });

        const filters = @json($filters);

        $(document).ready(function() {
            if ($.fn.DataTable) {
                if ($.fn.DataTable.isDataTable('#pa-summary-table')) {
                    $('#pa-summary-table').DataTable().destroy();
                }
            }

            $('#btn-pdf').click(function() {
                generatePDF();
            });

            $('#btn-excel').click(function() {
                generateExcel();
            });

            // Fix total column display in Position Header row - removed to allow sticky positioning
            // Department and position headers should only span sticky columns, not all columns
        });

        function generatePDF() {
            try {
                const button = $('#btn-pdf');
                const originalText = button.html();
                button.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Generating...');

                // Create form with current filter parameters
                const form = $('<form>', {
                    method: 'GET',
                    action: '{{ route('rptsum.export-pdf') }}',
                    style: 'display: none;',
                    target: '_blank'
                });

                form.append($('<input>', {
                    name: 'department',
                    value: '{{ request('department') }}'
                }));
                form.append($('<input>', {
                    name: 'year',
                    value: '{{ request('year') }}'
                }));
                form.append($('<input>', {
                    name: 'period',
                    value: '{{ request('period') }}'
                }));
                form.append($('<input>', {
                    name: 'status',
                    value: '{{ request('status') }}'
                }));

                $('body').append(form);
                form.submit();
                form.remove();

                setTimeout(() => {
                    button.prop('disabled', false).html(originalText);
                }, 2000);

            } catch (e) {
                console.error('PDF export failed:', e);
                alert('PDF export failed: ' + e.message);

                const button = $('#btn-pdf');
                button.prop('disabled', false).html('<i class="fas fa-file-pdf me-1"></i>Export PDF');
            }
        }


        function generateExcel() {
            try {
                const button = $('#btn-excel');
                const originalText = button.html();
                button.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Generating...');

                // Create form with current filter parameters
                const form = $('<form>', {
                    method: 'GET',
                    action: '{{ route('rptsum.export-excel') }}',
                    style: 'display: none;'
                });

                form.append($('<input>', {
                    name: 'department',
                    value: '{{ request('department') }}'
                }));
                form.append($('<input>', {
                    name: 'year',
                    value: '{{ request('year') }}'
                }));
                form.append($('<input>', {
                    name: 'period',
                    value: '{{ request('period') }}'
                }));
                form.append($('<input>', {
                    name: 'status',
                    value: '{{ request('status') }}'
                }));

                $('body').append(form);
                form.submit();
                form.remove();

                setTimeout(() => {
                    button.prop('disabled', false).html(originalText);
                }, 2000);

            } catch (e) {
                console.error('Excel export failed:', e);
                alert('Excel export failed: ' + e.message);

                const button = $('#btn-excel');
                button.prop('disabled', false).html('<i class="fas fa-file-excel me-1"></i>Export Excel');
            }
        }
    </script>

    <style>
        /* Contaienr dan Scrolling*/
        .table-container {
            position: relative;
            overflow-x: auto;
            overflow-y: auto;
            max-height: calc(100vh - 320px);
            min-height: 400px;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            max-width: 100%;
            background-color: #ffffff;
        }

        /* .table-wrapper {
                                        max-width: 100%;
                                        max-height: calc(100vh - 250px);
                                        border: 1px solid #ddd;
                                        background-color: #ffffff;
                                    } */

        /* Table Base Style*/
        #pa-summary-table {
            border-collapse: separate;
            border-spacing: 0;
            width: 100%;
        }

        #pa-summary-table th,
        #pa-summary-table td {
            border: 1px solid #000;
            color: #000;
            padding: 8px;
            vertical-align: middle;
            font-size: 12px;
            word-wrap: break-word;
            word-break: break-word;
            white-space: normal;
        }

        /* .table-wide {
                                min-width: 1800px !important;
                            } */

        /* Sticky Header */
        #pa-summary-table thead th {
            position: sticky;
            background-color: #b0e9eb !important;
            z-index: 10;
            border: 1px solid #000;
        }

        #pa-summary-table thead tr:first-child th {
            top: 0;
            height: 45px;
        }

        #pa-summary-table thead tr:nth-child(2) th {
            top: 45px;
            height: 45px;
        }

        /* Sticky Column */

        /* Kolom No */
        .sticky-col-1 {
            position: sticky;
            left: 0;
            background-color: #fff;
            z-index: 5;
            min-width: 60px;
            width: 60px;
        }

        /* Kolom NIK */
        .sticky-col-2 {
            position: sticky;
            left: 60px;
            background-color: #fff;
            z-index: 5;
            min-width: 130px;
            width: 130px;
        }

        /* Kolom Nama */
        .sticky-col-3 {
            position: sticky;
            left: 190px;
            /* 60 + 130 */
            background-color: #fff;
            z-index: 5;
            min-width: 220px;
            width: 220px;
            border-right: 2px solid #000 !important;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.15);
        }

        /* Header sticky columns - z-index lebih tinggi */
        #pa-summary-table thead .sticky-col {
            z-index: 15 !important;
            background-color: #b0e9eb !important;
        }

        /* Data Column */

        /* Semua kolom data (bulan & agregat) - LEBAR SERAGAM */
        .data-col {
            min-width: 80px;
            width: 80px;
            max-width: 80px;
            text-align: center;
        }


        /* Header periode dengan colspan */
        #pa-summary-table thead th.data-col[colspan="3"] {
            min-width: 270px !important;
            /* 90px * 3 */
            width: 270px !important;
        }

        #pa-summary-table thead th.data-col[colspan="2"] {
            min-width: 180px !important;
            /* 90px * 2 */
            width: 180px !important;
        }

        /* Department dna Position Header */

        /* Department header - text cell (sticky) */
        #pa-summary-table .department-header-text {
            position: sticky !important;
            left: 0 !important;
            z-index: 6 !important;
            background-color: #f5b716 !important;
            padding: 12px !important;
            font-size: 13px !important;
            font-weight: bold !important;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            border: none !important;
        }

        /* Department header - fill cell (scrollable) */
        #pa-summary-table .department-header-fill {
            background-color: #f5b716 !important;
            padding: 12px !important;
            border: none !important;
        }

        /* Position header - text cell (sticky) */
        #pa-summary-table .position-header-text {
            position: sticky !important;
            left: 0 !important;
            z-index: 6 !important;
            background-color: #ffd700 !important;
            padding: 12px !important;
            font-weight: bold !important;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            border: none !important;
        }

        /* Position header - fill cell (scrollable) */
        #pa-summary-table .position-header-fill {
            background-color: #ffd700 !important;
            padding: 12px !important;
            border: none !important;
        }

        /* Data Rows */

        #pa-summary-table tbody tr:not(.department-header):not(.position-header) td {
            background-color: #fff;
        }

        #pa-summary-table tbody tr:not(.department-header):not(.position-header):hover td {
            background-color: #f8f9fa;
        }

        /* Sticky columns tetap konsisten saat hover */
        #pa-summary-table tbody tr:not(.department-header):not(.position-header):hover .sticky-col {
            background-color: #f8f9fa !important;
        }

        /* Scrollbar */

        .table-container::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        .table-container::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 5px;
        }

        .table-container::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 5px;
        }

        .table-container::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    </style>
@endpush