<!-- Large modal -->

<div class="modal fade bd-example-modal-lg " tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
    aria-hidden="true" id="copylist">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">複製報名員工</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="filterSearch">
                        <div class="row w-100 gaptop10">
                            <div class="col-md-8">
                                <div class="input-group">
                                    <div class="input-group-prepend"><span class="input-group-text">公司帳戶編號/名稱</span>
                                    </div>
                                    <select name="select" class="form-control">
                                        <option>全部</option>
                                        <option>Timberland</option>
                                        <option>可口可樂</option>
                                        <option>adidas</option>

                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="input-group">
                                    <div class="input-group-prepend"><span class="input-group-text">課程名稱</span>
                                    </div>
                                    <select name="select" class="form-control">
                                        <option>全部</option>
                                        <option>課程A(CSK23001)</option>


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

                        </div>
                        <button class="btn btn-secondary filterSubmitBtn"><i class="fas fa-search"></i> 搜尋</button>
                    </div>

                    <div class="table-responsive mb-2">
                        <table id="datatable" class="display table" style="width:100%">
                            <thead>
                                <tr>

                                    <th></th>
                                    <th>員工中文名稱</th>
                                    <th>員工英文名稱</th>
                                    <th>身份証號碼(英文字母頭四位數字)</th>
                                    <th>聯絡電話</th>

                                </tr>
                            </thead>

                        </table>
                    </div>
                  
                </form>
            </div>
            <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                            取 消
                        </button>
                        <button type="button" class="btn btn-primary saveBtn">加 入</button>
                    </div>
        </div>
    </div>

    <?php include 'inc/custom.php'; ?>
    <script>
    $(document).ready(function() {
        var columnDefs = [{
            data: "columnindex",
            'checkboxes': {
                'selectRow': true
            }
        }, {
            data: "column03",
            title: "員工中文名稱"
        }, {
            data: "column04",
            title: "員工英文名稱"
        }, {
            data: "column05",
            title: "身份証號碼(英文字母頭四位數字)"
        }, {
            data: "column06",
            title: "聯絡電話"
        }];




        var siteTable = $('#datatable').DataTable({
            scrollX: false,
            ajax: "../course_admin/assets/json/demo_data4.json",

            columns: columnDefs,

            searching: false,
            select: {
                style: 'multi'
            },
            responsive: true,
            lengthMenu: [
                [10, 25, 50, 100, -1],
                [10, 25, 50, 100, "All"]
            ],
            altEditor: true, // Enable altEditor
            pageLength: 10,

            order: []
        });

        // Handle form submission event 
        $('.saveBtn').on('submit', function(e) {
            var form = this;

            var rows_selected = table.column(0).checkboxes.selected();

            // Iterate over all selected checkboxes
            $.each(rows_selected, function(index, rowId) {
                // Create a hidden element 
                $(form).append(
                    $('<input>')
                    .attr('type', 'hidden')
                    .attr('name', 'id[]')
                    .val(rowId)
                );
            });
          /*   // Output form data to a console     
            $('#example-console-rows').text(rows_selected.join(","));

            // Output form data to a console     
            $('#example-console-form').text($(form).serialize());

            // Remove added elements
            $('input[name="id\[\]"]', form).remove();

            // Prevent actual form submission
            e.preventDefault(); */

        });
    });
    </script>