@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])
<div class="container-fluid">
    <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">List {{ $title_menu }}</h5>
                        </div>
                        <div class="col">
                            {{-- alert --}}
                            @include('components.alert')
                        </div>
                    </div>
                    <hr class="horizontal dark mt-0">
                    <div class="row px-4 py-2">
                        <div class="col-lg">
                            <div class="row nav-wrapper">
                                {{-- Filters --}}
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="d-flex gap-2">
                                                <form method="GET" action="{{ url($url_menu) }}" class="m-0">
                                                    {{-- keep other filters --}}
                                                    <input type="hidden" name="search" value="{{ request('search') }}">
                                                    <input type="hidden" name="positioned"
                                                        value="{{ request('positioned') }}">
                                                    <input type="hidden" name="kriteria"
                                                        value="{{ request('kriteria') }}">

                                                    <select name="dept" class="form-select form-select-sm"
                                                        onchange="this.form.submit()" style="min-width: 180px;">
                                                        <option value="all" {{ request('dept')==='all' ||
                                                            !request('dept') ? 'selected' : '' }}>
                                                            Semua Departemen
                                                        </option>
                                                        @if (!empty($departments))
                                                        @foreach ($departments as $dept)
                                                        <option value="{{ $dept->id }}" {{ (string)
                                                            request('dept')===(string) $dept->id ? 'selected' : '' }}>
                                                            {{ $dept->nama }}
                                                        </option>
                                                        @endforeach
                                                        @endif
                                                    </select>
                                                </form>

                                                <form method="GET" action="{{ url($url_menu) }}" class="m-0">
                                                    {{-- keep other filters --}}
                                                    <input type="hidden" name="search" value="{{ request('search') }}">
                                                    <input type="hidden" name="positioned"
                                                        value="{{ request('positioned') }}">
                                                    <input type="hidden" name="dept" value="{{ request('dept') }}">

                                                    <select name="kriteria" class="form-select form-select-sm"
                                                        onchange="this.form.submit()" style="min-width: 180px;">
                                                        <option value="all" {{ request('kriteria')==='all' ||
                                                            !request('kriteria') ? 'selected' : '' }}>
                                                            Semua Status Kriteria
                                                        </option>
                                                        <option value="filled" {{ request('kriteria')==='filled'
                                                            ? 'selected' : '' }}>Sudah Isi Kriteria</option>
                                                        <option value="empty" {{ request('kriteria')==='empty'
                                                            ? 'selected' : '' }}>Belum Isi Kriteria</option>
                                                    </select>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row px-4 py-2">
                        <div class="table-responsive">
                            <table class="display table" id="list_empmaster">
                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th>No</th>
                                        <th>NIK</th>
                                        <th>Nama Karyawan</th>
                                        <th>Departemen</th>
                                        <th>Jabatan</th>
                                        <th>Posisi</th>
                                        <th width="170" class="text-center">Kriteria</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($employees as $employee)
                                    @php
                                    $primary = $employee->employee_nik;
                                    $vcount = $loop->iteration;
                                    @endphp
                                    <tr {{ $employee->emp_active == '0' ? 'class=not style=background-color:#ffe9ed;' :
                                        '' }}>
                                        <td>{{ $employees->firstItem() + $loop->index }}</td>
                                        <td class="font-weight-bold text-dark text-sm">
                                            {{ $employee->employee_nik }}
                                        </td>
                                        <td class="font-weight-bold text-dark text-sm">
                                            {{ $employee->full_name }}
                                        </td>
                                        <td class="font-weight-normal text-sm">
                                            {{ $employee->department_name ?? '-' }}
                                        </td>
                                        <td class="font-weight-normal text-sm">
                                            {{ $employee->job_title_name ?? '-' }}
                                        </td>
                                        @php
                                        $jobTitleId = (int) ($employee->job_title_id ?? 0);
                                        $showJobTitle = $jobTitleId >= 5;
                                        @endphp
                                        @if (empty($employee->position_name))
                                        @if ($showJobTitle)
                                        <td class="font-weight-normal text-sm">
                                            {{ $employee->job_title_name ?? '-' }} -
                                            {{ $employee->department_name ?? '-' }}
                                        </td>
                                        @else
                                        <td class="font-weight-normal text-sm">
                                            <button type="button" class="btn btn-warning mb-0"
                                                title="Tambah Penugasan Baru"
                                                onclick="window.location='{{ url('empas/add?employee_nik=' . $employee->employee_nik) }}'">
                                                <i class="fas fa-plus"></i>
                                                <span class="font-weight-bold">Tambah</span>
                                            </button>
                                        </td>
                                        @endif
                                        @else
                                        <td class="">{{ $employee->position_name }}
                                        </td>
                                        @endif

                                        {{-- menyiapkan data posisi ke modal --}}
                                        @php
                                        $jobTitleId = (int) ($employee->job_title_id ?? 0);
                                        $showJobTitle = $jobTitleId >= 5;
                                        $posisiText = $employee->position_name;
                                        if (empty($employee->position_name)) {
                                        $posisiText = $showJobTitle ? ($employee->job_title_name ?? '-') . ' - ' .
                                        ($employee->department_name ?? '-') : 'Belum ada posisi';
                                        }
                                        @endphp
                                        <td class="font-weight-normal text-sm">
                                            @php
                                            $kriteriaType = $employee->kriteria_type ?? null;
                                            $kriteriaText = $kriteriaType ? ($kriteriaOptions[$kriteriaType] ??
                                            'Kriteria ' . $kriteriaType) : 'Pilih Kriteria';
                                            @endphp

                                            @if($kriteriaType)
                                            <span class="btnKriteria d-block text-center font-weight-bold text-dark"
                                                style="cursor: pointer; font-weight: bold;" title="Ubah Kriteria"
                                                data-nik="{{ $employee->employee_nik }}"
                                                data-nama="{{ $employee->full_name }}"
                                                data-dept="{{ $employee->department_name ?? '-' }}"
                                                data-jabatan="{{ $employee->job_title_name ?? '-' }}"
                                                data-posisi="{{ $posisiText }}" data-kriteria="{{ $kriteriaType }}">
                                                {{ $kriteriaText }}
                                            </span>
                                            @else
                                            <button type="button"
                                                class="btn btn-primary btn-sm mb-0 btnKriteria d-block mx-auto"
                                                title="Pilih Kriteria" data-nik="{{ $employee->employee_nik }}"
                                                data-nama="{{ $employee->full_name }}"
                                                data-dept="{{ $employee->department_name ?? '-' }}"
                                                data-jabatan="{{ $employee->job_title_name ?? '-' }}"
                                                data-posisi="{{ $posisiText }}" data-kriteria="{{ $kriteriaType }}">
                                                <span class="font-weight-bold">{{ $kriteriaText }}</span>
                                            </button>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>

                            {{-- modal --}}
                            <div id="modalKriteria" class="modal"
                                style="display: none; background-color: rgba(0,0,0,0.5); z-index: 1050; position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; outline: 0;">
                                <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header border-bottom pb-3">
                                            <h5 class="modal-title" id="modalKriteriaLabel">Informasi Penilaian</h5>
                                            <button type="button" class="close" id="closeModal" aria-label="Close"
                                                style="border: none; background: transparent; font-size: 1.5rem; outline: none;">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body py-4">
                                            {{-- Section 1: Box Informasi Karyawan --}}
                                            <div class="p-3 mb-4 rounded"
                                                style="background-color: #f8f9fa; border: 1px solid #e9ecef;">
                                                <table class="table table-sm table-borderless mb-0">
                                                    <tbody>
                                                        <tr>
                                                            <td width="110"
                                                                class="font-weight-bold text-sm text-dark pb-1">NIK</td>
                                                            <td width="10" class="pb-1">:</td>
                                                            <td class="text-sm text-dark pb-1"><span
                                                                    id="modalParamNik"></span></td>
                                                        </tr>
                                                        <tr>
                                                            <td class="font-weight-bold text-sm text-dark pb-1">Nama
                                                            </td>
                                                            <td class="pb-1">:</td>
                                                            <td class="text-sm text-dark pb-1"><span
                                                                    id="modalParamNama"></span></td>
                                                        </tr>
                                                        <tr>
                                                            <td class="font-weight-bold text-sm text-dark pb-1">
                                                                Departemen</td>
                                                            <td class="pb-1">:</td>
                                                            <td class="text-sm text-dark pb-1"><span
                                                                    id="modalParamDept"></span></td>
                                                        </tr>
                                                        <tr>
                                                            <td class="font-weight-bold text-sm text-dark pb-1">Jabatan
                                                            </td>
                                                            <td class="pb-1">:</td>
                                                            <td class="text-sm text-dark pb-1"><span
                                                                    id="modalParamJabatan"></span></td>
                                                        </tr>
                                                        <tr>
                                                            <td class="font-weight-bold text-sm text-dark pb-0">Posisi
                                                            </td>
                                                            <td class="pb-0">:</td>
                                                            <td class="text-sm text-dark pb-0"><span
                                                                    id="modalParamPosisi"></span></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>

                                            {{-- Section 2: Form Input --}}
                                            <form id="formKriteria" method="POST" action="{{ url('/kriteria/save') }}">
                                                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                                <input type="hidden" name="employee_nik" id="modalInputNik">

                                                <div class="form-group mb-0">
                                                    <label
                                                        class="form-control-label font-weight-bold text-dark text-sm">Pilihan
                                                        Kriteria</label>
                                                    <select class="form-select form-select-md" name="kriteria_type"
                                                        id="modalInputOption">
                                                        <option selected disabled>-- Pilih Kriteria Penilaian --
                                                        </option>
                                                        @foreach($kriteriaOptions as $value => $name)
                                                        <option value="{{ $value }}">{{ $name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                                {{-- Kotak Informasi Kriteria (Muncul otomatis) --}}
                                                <div id="kriteriaInfoContainer" class="mt-3 p-3 rounded shadow-sm"
                                                    style="bg-susses; border-left: 4px solid; display: none;">
                                                    <div class="d-flex align-items-start">
                                                        <i class="fas fa-info-circle mt-1 me-2"
                                                            style=" font-size: 1.1rem;"></i>
                                                        <span id="kriteriaInfo" class="text-dark text-sm mb-0"
                                                            style="font-weight: 500;"></span>
                                                    </div>
                                                    {{-- Container khusus kriteria 4 yang dikontrol via JavaScript --}}
                                                    <div id="infoBawahanContainer" class="mt-3 w-100"
                                                        style="display: none;">
                                                        <hr class="horizontal dark my-3">

                                                        <div
                                                            class="d-flex justify-content-between align-items-center mb-2">
                                                            <span class="text-dark text-sm mb-0 font-weight-bold"
                                                                id="titleListBawahan">
                                                                <i class="fas fa-users me-1 text-info"></i> Daftar
                                                                Bawahan Yang Dinilai (0/0)
                                                            </span>
                                                            <button type="button" id="btnShowListBawahan"
                                                                class="btn btn-info btn-sm mb-0 px-3 py-1 shadow-none">
                                                                List Bawahan</button>
                                                        </div>

                                                        {{-- Modal List Bawahan --}}
                                                        <div id="modalListBawahan" class="modal"
                                                            style="display: none; background-color: rgba(0,0,0,0.6); z-index: 1060; position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; outline: 0;">
                                                            <div class="modal-dialog modal-dialog-centered modal-lg"
                                                                role="document"> {{-- Menggunakan modal-lg agar tabel
                                                                lebih leluasa --}}
                                                                <div class="modal-content">
                                                                    <div class="modal-header border-bottom pb-3">
                                                                        <h5 class="modal-title">List Bawahan
                                                                        </h5>
                                                                        <button type="button" class="close"
                                                                            id="closeModalBawahan" aria-label="Close"
                                                                            style="border: none; background: transparent; font-size: 1.5rem; outline: none;">
                                                                            <span aria-hidden="true">&times;</span>
                                                                        </button>
                                                                    </div>
                                                                    <div class="modal-body py-4">
                                                                        {{-- Pindahkan tabel ke sini --}}
                                                                        <div class="table-responsive border rounded"
                                                                            style="max-height: 350px; overflow-y: auto;">
                                                                            <table id="tableBawahan"
                                                                                class="table table-hover table-sm align-items-center mb-0 w-100">
                                                                                <thead class="bg-gray-100"
                                                                                    style="position: sticky; top: 0; z-index: 1;">
                                                                                    <tr>
                                                                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
                                                                                            width="10%">No</th>
                                                                                        <th
                                                                                            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                                                            Nama Bawahan</th>
                                                                                        <th
                                                                                            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                                                            Posisi</th>
                                                                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
                                                                                            width="20%"
                                                                                            id="thAksiBawahan">Aksi</th>
                                                                                    </tr>
                                                                                </thead>
                                                                                <tbody>
                                                                                    {{-- <tr>
                                                                                        <td
                                                                                            class="align-middle text-center">
                                                                                            <span
                                                                                                class="text-secondary text-xs font-weight-bold">1</span>
                                                                                        </td>
                                                                                        <td class="align-middle"><span
                                                                                                class="text-dark text-xs font-weight-bold">John
                                                                                                Doe</span></td>
                                                                                        <td class="align-middle"><span
                                                                                                class="text-secondary text-xs">Staff</span>
                                                                                        </td>
                                                                                        <td
                                                                                            class="align-middle text-center">
                                                                                            <div
                                                                                                class="form-check d-flex justify-content-center mb-0">
                                                                                                <input
                                                                                                    class="form-check-input shadow-none"
                                                                                                    type="checkbox"
                                                                                                    name="bawahan_terpilih[]"
                                                                                                    value="1" checked
                                                                                                    style="cursor: pointer;">
                                                                                            </div>
                                                                                        </td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td
                                                                                            class="align-middle text-center">
                                                                                            <span
                                                                                                class="text-secondary text-xs font-weight-bold">2</span>
                                                                                        </td>
                                                                                        <td class="align-middle"><span
                                                                                                class="text-dark text-xs font-weight-bold">Jane
                                                                                                Smith</span></td>
                                                                                        <td class="align-middle"><span
                                                                                                class="text-secondary text-xs">Admin
                                                                                                Support</span></td>
                                                                                        <td
                                                                                            class="align-middle text-center">
                                                                                            <div
                                                                                                class="form-check d-flex justify-content-center mb-0">
                                                                                                <input
                                                                                                    class="form-check-input shadow-none"
                                                                                                    type="checkbox"
                                                                                                    name="bawahan_terpilih[]"
                                                                                                    value="2" checked
                                                                                                    style="cursor: pointer;">
                                                                                            </div>
                                                                                        </td>
                                                                                    </tr> --}}
                                                                                </tbody>
                                                                            </table>
                                                                        </div>
                                                                    </div>
                                                                    <div class="modal-footer border-top pt-3">
                                                                        <button type="button"
                                                                            class="btn btn-secondary btn-sm mb-0"
                                                                            id="closeModalBawahanFooter">Kembali</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                        <div class=" modal-footer border-top pt-3">
                                            <button type="button" class="btn btn-danger btn-sm mb-0"
                                                id="closeModalFooter">Batal</button>
                                            <button type="button" class="btn btn-success btn-sm mb-0 px-4"
                                                id="btnSaveKriteria">Simpan</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between align-items-center mt-3">
                                <div>
                                    Data {{ $employees->firstItem() }} - {{ $employees->lastItem() }}
                                    dari {{ $employees->total() }} data.
                                </div>
                                <div>
                                    {{ $employees->appends(request()->query())->links('pagination::bootstrap-4') }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row px-4 py-2">
                        <div class="col-lg">
                            <div class="nav-wrapper" id="noted">
                                <code>Catatan : <i aria-hidden="true" style="color: #ffe9ed;" class="fas fa-circle"></i> Data tidak aktif</code>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>
    let columnAbjad = '';
    $(document).ready(function() {
        let numColumns = $('#list_empmaster').DataTable().columns().count();
        let columnNames = '';
        for (let index = 0; index < numColumns; index++) {
            columnNames = $('#list_empmaster').DataTable().columns(index).header()[0].textContent;
            if (columnNames == 'Status' || columnNames == 'status') {
                columnAbjad = String.fromCharCode(65 + index);
            }
        }
    });

    //set table into datatables
    $('#list_empmaster').DataTable({
        paging: false,
        info: false,
        searching: true,
        responsive: true,
        language: {
            search: "Cari :",
            lengthMenu: "Tampilkan _MENU_ baris",
            zeroRecords: "Maaf - Data tidak ada",
            info: "Data _START_ - _END_ dari _TOTAL_",
            infoEmpty: "Tidak ada data",
            infoFiltered: "(pencarian dari _MAX_ data)"
        },
        dom: '<"row d-flex justify-content-between align-items-center"<"col-lg-12 d-flex justify-content-between align-items-center"Bf>>rtip',
        buttons: [{
                extend: 'excelHtml5',
                text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
                action: function() {
                    const params = new URLSearchParams(window.location.search);
                    params.set('export', 'excel');
                    window.location.href = "{{ url($url_menu) }}" + '?' + params.toString();
                }
            },
            {
                extend: 'pdfHtml5',
                text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF</span>',
                action: function() {
                    const params = new URLSearchParams(window.location.search);
                    params.set('export', 'pdf');
                    window.location.href = "{{ url($url_menu) }}" + '?' + params.toString();
                }
            },
        ],
        initComplete: function() {
            var searchBarHtml = `
                <div class="dataTables_filter d-flex justify-content-end">
                    <form method="GET" action="{{ url($url_menu) }}" class="d-flex">
                        <input type="text" name="search" class="form-control me-2" placeholder="Search..." value="{{ request('search') }}">
                        <input type="hidden" name="dept" value="{{ request('dept') }}">
                        <input type="hidden" name="positioned" value="{{ request('positioned') }}">
                        <input type="hidden" name="kriteria" value="{{ request('kriteria') }}">
                    </form>
                </div>
            `;
            $('.dataTables_filter').remove(); 
            $(searchBarHtml).insertAfter('.dt-buttons'); 
        }
    });

    //set color button datatables
    $('.dt-button').addClass('btn btn-secondary');
    $('.dt-button').removeClass('dt-button');

    //check authorize button datatables
    @if ($authorize)
        @if (isset($authorize->excel) && $authorize->excel == '0')
            $('.buttons-excel').remove();
        @endif
        @if (isset($authorize->pdf) && $authorize->pdf == '0')
            $('.buttons-pdf').remove();
        @endif
        @if (isset($authorize->print) && $authorize->print == '0')
            $('.buttons-print').remove();
        @endif
    @endif

    //function delete
    function deleteData(event, name, msg) {
        event.preventDefault(); 
        Swal.fire({
            title: 'Konfirmasi',
            text: `Apakah Anda Yakin ${msg} Data ${name} ini?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: `Ya, ${msg}`,
            cancelButtonText: 'Batal',
            confirmButtonColor: '#028284'
        }).then((result) => {
            if (result.isConfirmed) {
                event.target.closest('form').submit();
            }
        });
    }

    //variabel modal
    const btnKriteria = document.querySelectorAll('.btnKriteria');
    const modalKriteria = document.getElementById('modalKriteria');
    const btnTutup = document.getElementById('closeModal');
    const btnTutupFooter = document.getElementById('closeModalFooter');

    // event modal ketika di tekan
    btnKriteria.forEach(btn => {
        btn.addEventListener("click", function() {
            const nik = this.getAttribute('data-nik');
            const nama = this.getAttribute('data-nama');
            const dept = this.getAttribute('data-dept');
            const jabatan = this.getAttribute('data-jabatan');
            const posisi = this.getAttribute('data-posisi');
            const kriteria = this.getAttribute('data-kriteria');

            document.getElementById('modalParamNik').innerText = nik;
            document.getElementById('modalParamNama').innerText = nama;
            document.getElementById('modalParamDept').innerText = dept;
            document.getElementById('modalParamJabatan').innerText = jabatan;
            document.getElementById('modalParamPosisi').innerText = posisi;
            document.getElementById('modalInputNik').value = nik;

            const modalInputOptionEl = document.getElementById('modalInputOption');
            const kriteriaInfoEl = document.getElementById('kriteriaInfo');
            const kriteriaInfoContainer = document.getElementById('kriteriaInfoContainer');
            const infoBawahanContainer = document.getElementById('infoBawahanContainer');

            function updateKriteriaInfo(val) {
                if (!kriteriaInfoEl || !kriteriaInfoContainer) return;
                
                let msg = '';
                if (val === '1') msg = 'Dinilai berdasarkan semua rata-rata Supervisor dalam 1 departemen.';
                else if (val === '2') msg = 'Dinilai berdasarkan seluruh nilai rata-rata karyawan dalam 1 departemen.';
                else if (val === '3') msg = 'Standard PA (Penilaian Manual).';
                else if (val === '4') msg = 'Rata-rata Subordinate Langsung.';
                else if (val === '5') msg = 'Rata-rata Subordinate Tertentu (Custom).';

                if (msg !== '') {
                    kriteriaInfoEl.textContent = msg;
                    kriteriaInfoContainer.style.display = 'block';
                } else {
                    kriteriaInfoContainer.style.display = 'none';
                }

                // Logika otomatis mengambil data jika val === '4' atau val === '5'
                if (infoBawahanContainer) {
                    if (val === '4' || val === '5') {
                        infoBawahanContainer.style.display = 'block'; // Tampilkan container
                        
                        // 1. Ambil Elemen yang dibutuhkan
                        const supervisorNik = document.getElementById('modalInputNik').value;
                        const titleEl = document.getElementById('titleListBawahan');
                        const tbody = document.querySelector('#modalListBawahan tbody');
                        
                        // Hancurkan instance DataTables lama jika ada (mencegah error Cannot reinitialise DataTable)
                        if ($.fn.DataTable.isDataTable('#tableBawahan')) {
                            $('#tableBawahan').DataTable().clear().destroy();
                        }

                        // 2. Tampilkan teks "Memuat..." sementara data diambil
                        if(titleEl) titleEl.innerHTML = `<i class="fas fa-users me-1 text-info"></i> Daftar Bawahan Yang Dinilai (Memuat...)`;
                        tbody.innerHTML = '<tr><td colspan="4" class="text-center py-4"><i class="fas fa-spinner fa-spin text-info me-2"></i> Sedang memuat data...</td></tr>';
                        
                        // 3. Tarik data secara background menggunakan Fetch API
                        fetch(`{{ route('mskrit.get-bawahan') }}?supervisor_nik=${supervisorNik}&type=${val}`)
                            .then(response => response.json())
                            .then(res => {
                                tbody.innerHTML = ''; // Kosongkan tabel loading
                                
                                // Kita tidak lagi menyembunyikan 'thAksi' agar struktur DataTables tetap stabil (tidak error column mismatch)

                                if (res.success && res.data.length > 0) {
                                    let totalBawahan = res.data.length;
                                    let savedSubordinates = res.saved || [];
                                    let checkedBawahan = val === '5' ? savedSubordinates.length : totalBawahan;

                                    // Update langsung jumlah data (misal: 6/6)
                                    if(titleEl) {
                                        titleEl.innerHTML = `<i class="fas fa-users me-1 text-info"></i> Daftar Bawahan Yang Dinilai (<span id="countBawahan">${checkedBawahan}/${totalBawahan}</span>)`;
                                    }

                                    // Pre-render data ke tabel (agar jika tombol list diklik, data sudah ada)
                                    res.data.forEach((item, index) => {
                                        // Perbaikan: td Aksi selalu dirender agar thead & tbody sama jumlah kolomnya
                                        let aksiHtml = `<td class="align-middle text-center aksi-col">`;
                                        if (val === '5') {
                                            const isChecked = savedSubordinates.includes(item.employee_nik) ? 'checked' : '';
                                            aksiHtml += `
                                                <div class="form-check d-flex justify-content-center mb-0">
                                                    <input class="form-check-input shadow-none chk-bawahan" type="checkbox" value="${item.employee_nik}" ${isChecked} style="cursor: pointer;">
                                                </div>`;
                                        } else {
                                            // Jika bukan opsi 5, tampilkan strip agar tabel tetap rapi
                                            aksiHtml += `<span class="text-xs text-secondary">-</span>`;
                                        }
                                        aksiHtml += `</td>`;

                                        const row = `
                                            <tr>
                                                <td class="align-middle text-center">
                                                    <span class="text-secondary text-xs font-weight-bold">${index + 1}</span>
                                                </td>
                                                <td class="align-middle">
                                                    <span class="text-dark text-xs font-weight-bold">${item.employee_name}</span><br>
                                                    <span class="text-secondary text-xs">${item.employee_nik}</span>
                                                </td>
                                                <td class="align-middle">
                                                    <span class="text-secondary text-xs">${item.position_name || '-'}</span>
                                                </td>
                                                ${aksiHtml}
                                            </tr>
                                        `;
                                        tbody.insertAdjacentHTML('beforeend', row);
                                    });

                                    // Custom sort plugin untuk DataTables membaca nilai Live Checkbox
                                    if (!$.fn.dataTable.ext.order['dom-checkbox']) {
                                        $.fn.dataTable.ext.order['dom-checkbox'] = function(settings, col) {
                                            return this.api().column(col, {order: 'index'}).nodes().map(function(td, i) {
                                                return $('input', td).prop('checked') ? '1' : '0';
                                            });
                                        };
                                    }

                                    // Inisialisasi DataTables KHUSUS Modal
                                    $('#tableBawahan').DataTable({
                                        destroy: true,
                                        paging: true,
                                        pageLength: 5, // Dibatasi 5 agar modal tidak terlalu panjang ke bawah
                                        lengthMenu: [5, 10, 25, 50],
                                        info: true,
                                        searching: true,
                                        responsive: true,
                                        columnDefs: [
                                            { targets: 3, visible: (val === '5'), orderDataType: 'dom-checkbox' } // Sembunyikan kolom Aksi jika bukan opsi 5, aktifkan custom sort Checkbox
                                        ],
                                        language: {
                                            search: "Cari Bawahan :",
                                            lengthMenu: "Tampil _MENU_ baris",
                                            zeroRecords: "Bawahan tidak ditemukan",
                                            info: "Menampilkan _START_ - _END_ dari _TOTAL_ data",
                                            infoEmpty: "Tidak ada data",
                                        }
                                    });

                                    // Event Listener hitungan agar berubah jika checklist dihilangkan (Delegated untuk Datatables)
                                    if(val === '5') {
                                        $('#tableBawahan tbody').on('change', '.chk-bawahan', function() {
                                            // Gunakan API DataTable untuk menghitung SEMUA checkbox termasuk di halaman lain
                                            let currentChecked = $('#tableBawahan').DataTable().$('.chk-bawahan:checked').length;
                                            document.getElementById('countBawahan').innerText = `${currentChecked}/${totalBawahan}`;
                                        });
                                    }
                                    
                                } else {
                                    // Re-init DataTable kosong agar style tetap rapi
                                    $('#tableBawahan').DataTable({
                                        destroy: true,
                                        columnDefs: [
                                            { targets: 3, visible: (val === '5'), orderable: false, searchable: false } // Sembunyikan kolom Aksi jika bukan opsi 5, matikan sort & search
                                        ],
                                        language: { emptyTable: "Tidak ada data bawahan yang ditemukan." }
                                    });
                                    if(titleEl) titleEl.innerHTML = `<i class="fas fa-users me-1 text-info"></i> Daftar Bawahan Yang Dinilai (0/0)`;
                                }
                            })
                            .catch(error => {
                                console.error('Error fetching data:', error);
                                tbody.innerHTML = '<tr><td colspan="4" class="text-center text-danger text-sm py-4">Terjadi kesalahan saat memuat data.</td></tr>';
                                if(titleEl) titleEl.innerHTML = `<i class="fas fa-users me-1 text-info"></i> Daftar Bawahan Yang Dinilai (Error)`;
                            });

                    } else {
                        infoBawahanContainer.style.display = 'none'; // Sembunyikan jika bukan opsi 4
                    }
                }
            }

            if (modalInputOptionEl) {
                if (kriteria) {
                    modalInputOptionEl.value = kriteria;
                } else {
                    modalInputOptionEl.selectedIndex = 0;
                }
                
                updateKriteriaInfo(modalInputOptionEl.value);
                
                modalInputOptionEl.addEventListener('change', function() {
                    updateKriteriaInfo(this.value);
                });
            }

            modalKriteria.style.display = "block";
        });
    });

    // Variabel Modal Bawahan
    const btnShowListBawahan = document.getElementById('btnShowListBawahan');
    const modalListBawahan = document.getElementById('modalListBawahan');
    const btnTutupBawahan = document.getElementById('closeModalBawahan');
    const btnTutupBawahanFooter = document.getElementById('closeModalBawahanFooter');

    if (btnShowListBawahan) {
        btnShowListBawahan.addEventListener('click', function(e) {
            e.preventDefault();
            
            // HANYA tampilkan modalnya saja. 
            // TIDAK PERLU fetch lagi karena datanya sudah di-render otomatis oleh updateKriteriaInfo()
            modalListBawahan.style.display = "block";
        });
    }

    const funcTutupModalBawahan = () => {
        modalListBawahan.style.display = "none";
    };

    if (btnTutupBawahan) {
        btnTutupBawahan.addEventListener('click', funcTutupModalBawahan);
    }
    if (btnTutupBawahanFooter) {
        btnTutupBawahanFooter.addEventListener('click', funcTutupModalBawahan);
    }

    // Update event klik di luar modal agar bisa menutup kedua modal
    window.addEventListener("click", (event) => {
        // Tutup modal utama jika diklik di area gelapnya
        if (event.target === modalKriteria) {
            modalKriteria.style.display = "none";
        }
        // Tutup modal bawahan jika diklik di area gelapnya
        if (event.target === modalListBawahan) {
            modalListBawahan.style.display = "none";
        }
    });

    // event menutup modal utama
    const funcTutupModal = () => { 
        modalKriteria.style.display = "none";
    };
    
    btnTutup.addEventListener("click", funcTutupModal);
    btnTutupFooter.addEventListener("click", funcTutupModal);

    // Event untuk tombol simpan
    const btnSaveKriteria = document.getElementById('btnSaveKriteria');
    const formKriteria = document.getElementById('formKriteria');
    
    if (btnSaveKriteria && formKriteria) {
        btnSaveKriteria.addEventListener('click', function() {
            const selectedKriteria = document.getElementById('modalInputOption').value;

            // Bersihkan input hidden bawahan sebelumnya (jika ada)
            document.querySelectorAll('.hidden-bawahan').forEach(el => el.remove());

            // Tangkap bawahan yang dicentang HANYA jika opsi 4 atau 5
            if (selectedKriteria === '4' || selectedKriteria === '5') {
                let checkedBawahanValues = [];
                
                // Gunakan API bawaan DataTable untuk mengambil nilai Checkbox dari SEMUA halaman (bukan cuma yang dirender di layar saat ini)
                if ($.fn.DataTable.isDataTable('#tableBawahan')) {
                    $('#tableBawahan').DataTable().$('.chk-bawahan:checked').each(function() {
                        checkedBawahanValues.push(this.value);
                    });
                } else {
                    document.querySelectorAll('.chk-bawahan:checked').forEach(chk => {
                        checkedBawahanValues.push(chk.value);
                    });
                }
                
                // Validasi khusus opsi 5: harus ada minimal 1 yang dicentang
                if (selectedKriteria === '5' && checkedBawahanValues.length === 0) {
                    Swal.fire({
                        title: 'Peringatan',
                        text: 'Silakan pilih minimal 1 karyawan pada List Bawahan!',
                        icon: 'warning',
                        confirmButtonText: 'Tutup',
                        confirmButtonColor: '#028284'
                    });
                    return; // Hentikan proses simpan
                }
                
                // Append sebagai hidden input agar terkirim ke backend
                checkedBawahanValues.forEach(val => {
                    const hiddenInput = document.createElement('input');
                    hiddenInput.type = 'hidden';
                    hiddenInput.name = 'bawahan_terpilih[]'; 
                    hiddenInput.value = val;
                    hiddenInput.className = 'hidden-bawahan';
                    formKriteria.appendChild(hiddenInput);
                });
            }

            // Submit form setelah data disisipkan
            formKriteria.submit();
        });
    }
</script>
@endpush