 <style type="text/css">
    .salin {
        cursor: pointer;
    }
    .copy-btn {
  color: #f44336;
  border-color: #f44336;
  background-color: white;
}

.copy-btn:hover {
  color: white;
  background-color: #f44336;
}
.table>tbody>tr>td {
  vertical-align: middle;
}
 </style>
                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <h1>
                        Manage Data Bidang Minat
                    </h1>
                        <ol class="breadcrumb">
                        <li><a href="<?=base_index();?>"><i class="fa fa-dashboard"></i> Home</a></li>
                        <li><a href="<?=base_index();?>data-bidang-minat">Data Bidang Minat</a></li>
                        <li class="active">Data Bidang Minat List</li>
                    </ol>
                </section>

                <!-- Main content -->
                <section class="content">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="box">
                                <div class="box-header">
                                <h3 class="box-title">List Data Bidang Minat</h3>
                                </div><!-- /.box-header -->
                                <div class="box-body table-responsive">
                                    <table id="dtb_data_dosen" class="table table-bordered table-striped">
                                   <thead>
                                     <tr>

                          <th>ID Bidang Minat</th>
													<th>Nama Bidang Minat</th>
													<th>Nama Prodi</th>
													<th>Semester dimulai bidang minat</th>
													<th>SK bidang minat</th>
													<th>Tamat SK bidang minat</th>
													
                         
                        </tr>
                                      </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div><!-- /.box-body -->
                            </div><!-- /.box -->
                        </div>
                    </div>
    <script type="text/javascript">
var dataTable = $("#dtb_data_dosen").DataTable({
    "lengthMenu": [[100], [100]],
    "bProcessing": true,
    "bServerSide": true,
    "ordering": false,
    "columnDefs": [{
        "targets": [0, -1],
        "orderable": false
    }],
    "ajax": {
        url: "<?=base_admin();?>modul/data_bidang_minat/data_bidang_minat_data.php",
        type: "post",
        error: function (xhr, error, thrown) {
            console.log(error);
            $("#dtb_akm_processing").css("display", "none");
        }
    },
    "initComplete": function () {
        var api = this.api();

        // Attach delegated event to the DataTable's parent container
        $('#dtb_data_dosen').on("click", ".salin", function () {
            var $btn = $(this); // Cache the clicked button

            // Find the value of the 'id_dosen' input field in the same row
             var $input = $btn.closest('.input-group').find('.id_dosen');
            var idDosenValue = $input.val();

            // Copy the value to the clipboard
            navigator.clipboard.writeText(idDosenValue)
                .then(function () {
                   // Select the input value
                    $input.select();

                    // Temporarily update the tooltip text
                    $btn.attr('title', 'Berhasil di Salin!').tooltip('show');

                    // Reset the tooltip text after 2 seconds
                    setTimeout(function () {
                        $btn.attr('title', 'Klik untuk Salin').tooltip('dispose').tooltip();
                    }, 2000);
                })
                .catch(function (error) {
                    console.error("Failed to copy: ", error);
                });
        });
    },
     "language": {
        searchPlaceholder: "Pencarian Nama Bidang Minat",
        "processing": "<i class=\"fa fa-spinner fa-spin\"></i> Loading data, please wait..."
    }
});
</script>  
            