@if ($page == 'add' || $page == 'edit')
    <script>
        $(document).ready(function() {
            $('#tableModal1').DataTable({
                "order": [
                    [1, 'asc']
                ],
                "responsive": true,
                "language": {
                    "sEmptyTable": "Tidak ada data yang tersedia pada tabel ini",
                    "sProcessing": "Sedang memproses...",
                    "sLengthMenu": "Tampilkan _MENU_ Data",
                    "sZeroRecords": "Tidak ditemukan data yang sesuai",
                    "sInfo": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                    "sInfoEmpty": "Menampilkan 0 sampai 0 dari 0 data",
                    "sInfoFiltered": "(disaring dari _MAX_ total data)",
                    "sSearch": "Cari:",
                    "oPaginate": {
                        "sFirst": "Pertama",
                        "sPrevious": "Sebelumnya",
                        "sNext": "Selanjutnya",
                        "sLast": "Terakhir"
                    },
                    "oAria": {
                        "sSortAscending": ": aktifkan untuk mengurutkan kolom secara ascending",
                        "sSortDescending": ": aktifkan untuk mengurutkan kolom secara descending"
                    }
                }
            })
            $('#tableModal2').DataTable({
                "order": [
                    [1, 'asc']
                ],
                "responsive": true,
                "language": {
                    "sEmptyTable": "Tidak ada data yang tersedia pada tabel ini",
                    "sProcessing": "Sedang memproses...",
                    "sLengthMenu": "Tampilkan _MENU_ Data",
                    "sZeroRecords": "Tidak ditemukan data yang sesuai",
                    "sInfo": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                    "sInfoEmpty": "Menampilkan 0 sampai 0 dari 0 data",
                    "sInfoFiltered": "(disaring dari _MAX_ total data)",
                    "sSearch": "Cari:",
                    "oPaginate": {
                        "sFirst": "Pertama",
                        "sPrevious": "Sebelumnya",
                        "sNext": "Selanjutnya",
                        "sLast": "Terakhir"
                    },
                    "oAria": {
                        "sSortAscending": ": aktifkan untuk mengurutkan kolom secara ascending",
                        "sSortDescending": ": aktifkan untuk mengurutkan kolom secara descending"
                    }
                }
            })
        })

        document.addEventListener("DOMContentLoaded", function() {
            document.querySelectorAll("input.form-control").forEach(inputField => {
                if (inputField.parentElement.classList.contains("input-group")) {
                    return; // Cegah penambahan ganda jika sudah ada input-group
                }

                let wrapper = document.createElement("div");
                wrapper.className = "input-group";

                // Dapatkan nama input untuk menentukan modal yang akan dibuka
                let inputName = inputField.getAttribute("name");
                let modalTarget = "";

                if (inputName === "nik_karyawan") {
                    modalTarget = "searchModalkary"; // Modal untuk karyawan
                } else if (inputName === "nik_mengetahui") {
                    modalTarget = "searchModalmengetahui"; // Modal untuk supervisor
                } else {
                    return; // Jika bukan input yang kita cari, abaikan
                }

                // Sisipkan input ke dalam wrapper
                inputField.parentNode.insertBefore(wrapper, inputField);
                wrapper.appendChild(inputField);

                // Buat tombol search
                let searchButton = document.createElement("button");
                searchButton.className = "btn btn-primary";
                searchButton.type = "button";
                searchButton.innerHTML = '<i class="fas fa-search"></i>';
                searchButton.setAttribute("data-bs-toggle", "modal");
                searchButton.setAttribute("data-bs-target", `#${modalTarget}`);

                // Sisipkan tombol setelah input
                wrapper.appendChild(searchButton);
            });

            // Event listener untuk tombol pilih di modal
            document.querySelectorAll(".select-karyawan").forEach(button => {
                button.addEventListener("click", function() {
                    let nik = this.getAttribute("data-nik");
                    let nama = this.getAttribute("data-nama");

                    // Cari modal terdekat yang sedang terbuka
                    let modalElement = this.closest(".modal");
                    if (!modalElement) return;

                    let targetInputName = modalElement.getAttribute("data-input-target");
                    let inputField = document.querySelector(`input[name='${targetInputName}']`);

                    if (inputField) {
                        inputField.value = nik; // Isi input dengan NIK yang dipilih
                    }

                    // Tutup modal setelah memilih
                    let modalInstance = bootstrap.Modal.getInstance(modalElement);
                    modalInstance.hide();
                });
            });
        });

        function selectKaryawanspv(nik, nama) {
            let inputField = document.querySelector("input[name='nik_mengetahui']");
            if (inputField) {
                inputField.value = nik; // Isi input dengan nama karyawan
                $('#searchModalmengetahui').modal('hide'); // Tutup modal setelah memilih
            }
        }

        function selectKaryawan(nik, nama) {
            let inputField = document.querySelector("input[name='nik_karyawan']");
            if (inputField) {
                inputField.value = nik; // Isi input dengan nama karyawan
                $('#searchModalkary').modal('hide'); // Tutup modal setelah memilih
            }
        }
    </script>
    <style>
        .input-group {
            display: flex;
            align-items: center;
            width: 100%;
            position: relative;
        }

        .input-group input {
            flex: 1;
            height: 44px;
            /* Tinggi input */
            padding: 10px 12px;
            border: 1px solid #ccc;
            border-right: none;
            border-radius: 8px 0 0 8px;
            outline: none;
            font-size: 16px;
        }

        /* Styling tombol search */
        .input-group button {
            height: 42px;
            /* Sesuaikan dengan input */
            width: 44px;
            /* Lebar tombol */
            margin-top: 0.1px;
            margin-bottom: 0.1px;
            border: none;
            background-color: #008080;
            /* Warna teal sesuai gambar */
            color: white;
            border-radius: 0 8px 8px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.3s ease;
            position: relative;
            top: 0;
            /* Pastikan sejajar */
        }

        /* Efek hover pada tombol */
        .input-group button:hover {
            background-color: #006666;
            /* Warna lebih gelap saat hover */
        }

        /* Ukuran ikon search agar presisi */
        .input-group button i {
            font-size: 18px;
        }
    </style>
@endif