<div class="page-breadcrumbs">
    <ul class="breadcrumb">
        <li>
            <i class="fa fa-home"></i>
            <a href="#" style="color: #797979">主頁</a>
        </li>

        <li class='active' style='color:#ef4130'>學員</li>
    </ul>
</div>

<div class="page-header position-relative">
    <div class="header-title">
        <h1>
            學員
        </h1>
    </div>
    <!--Header Buttons-->
    <div class="header-buttons">
        <a class="sidebar-toggler" href="#">
            <i class="glyphicon glyphicon-resize-horizontal"></i>
        </a>
        <a class="refresh" id="refresh-toggler" href="#">
            <i class="glyphicon glyphicon-refresh"></i>
        </a>
        <a class="fullscreen" id="fullscreen-toggler" href="#">
            <i class="glyphicon glyphicon-fullscreen"></i>
        </a>
    </div>
    <!--Header Buttons End-->
</div>

<div class="long_content">
    <ul class="table-toolbar" style="text-align:left;">
        <table>
            <td><a class="toolbar-element btn btn-default btn-create"><i class="fas fa-plus" style="margin:8px;"></i>新增課程</a></td>
            <td><a class="toolbar-element btn btn-default btn-delete"><i class="fas fa-trash-alt" style="margin:8px;"></i>刪除課程</a></td>
            <td>
            <td><span>課程名稱</span></td>
            <td><input id='keyword_course_name' type="search" class="input-sm search" placeholder="" aria-controls="myTable"></td>
            </td>
            <td>
            <td><span>課程編號</span></td>
            <td><input id="keyword_course_id" type="search" class="input-sm search shorter_search" placeholder="" aria-controls="myTable"></td>
            </td>
            <td><span>每頁顯示<span>
                        <select id="page_length_controller" aria-controls="myTable" class="">
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                        <span>個結果(共<strong id="counter"></strong>個)</span>
            </td>
            <td>
                <a class="toolbar-element btn btn-default btn-pageup">上一頁</a>
                <select id="page_number">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <a class="toolbar-element btn btn-default btn-pagedown" 　>下一頁</a>
            </td>
        </table>
    </ul>
    <table id="myTable" class="display table table-bordered datatables" cellspacing="0" width="100%">
        <thead>
            <th>ID</th>
            <th>課程編號</th>
            <th>課程名稱</th>
            <th>課程時間</th>
            <th>課程模式</th>

            <th>啟用</th>
            <th>詳情</th>
            <th style="text-align:center;"><input type="checkbox" id="selectAll" /></th>
        </thead>
    </table>
</div>


<div class="background">
</div>

<div class="partial_form">
    <div class="red_tag">新增課程</div>
    <div>
        <table class="partial_form_table">
            <form method="post" action="/backend/course/insert">
                <tr>
                    <td class="partial_form_label">
                        <label>表格模式</label>
                    </td>
                    <td>
                        <!-- <input type="text" class="form-control" id="location" placeholder="請填寫授課地點"> -->
                        <select id="form_mode" name="form_mode">
                            <option selected value="0">請選擇表格模式</option>
                            <option value="1">長表格 (6steps)</option>
                            <option value="2">短表格 (3steps)</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="partial_form_label">
                        <label>課程名稱</label>
                    </td>
                    <td colspan="2">
                        <input type="text" class="form-control" id="course_name" name="course_name" placeholder="請填寫課程名稱">
                    </td>
                </tr>
                <tr>
                    <td class="partial_form_label">
                        <label>課程簡述</label>
                    </td>
                    <td colspan="2">
                        <input type="text" class="form-control" id="course_detail" name="course_detail" placeholder="請填寫課程簡述">
                    </td>
                </tr>
                <tr>
                    <td class="partial_form_label">
                        <label>課程編號</label>
                    </td>
                    <td colspan="2">
                        <input type="text" class="form-control" id="course_id" name="course_id" placeholder="請填寫課程編號">
                    </td>
                </tr>
                <tr>
                    <td class="partial_form_label">
                        <label>課程模式</label>
                    </td>
                    <td colspan="2">
                        <select id="course_mode" name="course_mode">
                            <option selected value="">請選擇課程模式</option>
                            <option value="1">恆常課程</option>
                            <option value="2">暑期課程</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="partial_form_label">
                        <label>課程時間</label>
                    </td>
                    <td colspan="2">
                        <input type="text" class="form-control" id="course_time" name="course_time" placeholder="請填寫課程時間">
                    </td>
                </tr>
                <tr>
                    <td class="partial_form_label">
                        <label>授課地點</label>
                    </td>
                    <td colspan="2">
                        <input type="text" class="form-control" id="course_location" name="course_location" placeholder="請填寫授課地點">
                    </td>
                </tr>
                <tr>
                    <td class="partial_form_label">
                        <label>課程價格</label>
                    </td>
                    <td colspan="2">
                        <input type="text" class="form-control" id="price" name="price" placeholder="請填寫課程價格">
                    </td>
                </tr>
                <tr class="discount" style="display:none;">
                    <td class="partial_form_label" style="vertical-align:top;">
                        <label>報名優惠</label>
                    </td>
                    <td>
                        <p><input type="checkbox" id="recommand_checkbox">舊生推薦<i class="fas fa-pen"></i></p>
                        <input type="hidden" id="recommand" name="recommand" value="0">
                        <input type="text" class="form-control" id="recommand_discount_amount" name="recommand_discount_amount" placeholder="請輸入優惠的數值" style="display:none;">
                        <input type="text" class="form-control" id="recommand_discount_detail" name="recommand_discount_detail" placeholder="請填寫舊生推薦優惠內容" style="display:none;">
                        <p><input type='checkbox' id="double_checkbox" name="double">二人同行<i class="fas fa-pen"></i></p>
                        <input type="hidden" id="double" name="double" value="0">
                        <input type="text" class="form-control" id="double_discount_amount" name="double_discount_amount" placeholder="請輸入優惠的數值" style="display:none;">
                        <input type="text" class="form-control" id="double_discount_detail" name="double_discount_detail" placeholder="請填寫二人同行優惠內容" style="display:none;">
                    </td>
                </tr>

                <tr>
                    <td class="partial_form_label">
                        <label>備註</label>
                    </td>
                    <td>
                        <input type="text" class="form-control" id="ps" name="ps" placeholder="請填寫備註">
                    </td>
                </tr>

                <tr>
                    <td>

                    </td>
                    <td>
                        <button type="submit" class="btn btn-default" value="確定">確定</button>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <button type="button" class="btn btn-default" value="重設">重設</button>
                    </td>
                </tr>

            </form>
        </table>
    </div>
</div>


<script>
    var table, data = [],
        coursecode = [],
        coursecategory = [];
    $(document).ready(function() {
        table = $('#myTable').DataTable({
            "processing": true,
            "serverSide": true,
            "dom":'Bfrtip',
            "ajax": "/api/course/listing",
            "columns": [{
                    "data": "id"
                },
                {
                    "data": "code",
                    "name": "課程編號"
                },
                {
                    "data": "name",
                    "name": "課程名稱"
                },
                {
                    "data": "duration",
                    "name": "課程時間"
                },
                {
                    "data": "category",
                    "name": "課程模式"
                },
                {
                    "data": "status",
                    "name": "啟用"
                },
                {
                    "data": "details",
                    "name": "詳情",
                    "class": "control-details"
                },
                {
                    "data": "delete",
                    "name": "刪除",
                    "class": "control-delete"
                },
            ],
            "order": [0, "desc"],
            "columnDefs": [{
                    "targets": [0],
                    "visible": false,
                    "searchable": false,
                },
                {
                    "targets": [1, 4],
                    "visible": true,
                    "searchable": true,
                    "orderable": true,
                },
                {
                    "targets": [2, 3],
                    "visible": true,
                    "searchable": true,
                    "orderable": false,
                },
                {
                    "targets": [5, 6],
                    "visible": true,
                    "searchable": false,
                    "orderable": false,
                },


            ],
            "drawCallback": function(data) {
                $('#counter').text(table.page.info().recordsDisplay);
                $("#page_number option").remove();
                for (var i = 0; i < table.page.info().recordsDisplay / $('#page_length_controller').val(); i++) {
                    $("#page_number").append(new Option(i + 1, i + 1));
                }
                $("#page_number").val(table.page.info()['page'] + 1);
            }

        });

    });
</script>

<script>
    $('.btn-create').on('click', function() {
        $('.background').show();
        $('.partial_form').show();

    });

    $('.background').on('click', function() {
        $('.background').hide();
        $('.partial_form').hide();
    });

    $('#form_mode').on('change', function() {
        if ($('#form_mode').val() == "1") {
            $('.discount').show();
        }
        if ($('#form_mode').val() == "2") {
            $('.discount').hide();

        }
    });

    $('#recommand_checkbox').on('change', function() {
        if ($('#recommand_checkbox').prop("checked")) {
            $("#recommand_discount_detail").show();
            $("#recommand_discount_amount").show();
            $("#recommand").val("1");
        } else {
            $("#recommand_discount_detail").hide();
            $("#recommand_discount_amount").hide();
            $("#recommand").val("0");
        }
    });

    $('#double_checkbox').on('change', function() {
        if ($('#double_checkbox').prop("checked")) {
            $("#double_discount_detail").show();
            $("#double_discount_amount").show();
            $("#double").val("1");
        } else {
            $("#double_discount_detail").hide();
            $("#double_discount_amount").hide();
            $("#double").val("0");
        }
    });

    var ids = [];

    $(document).on('click', '.btn-delete', function() {
        if (ids.length > 0) {
            if (confirm('確定要刪除這(些)項目?')) {
                ids = ids.join();
                //                console.log('ids:', ids);
                //                return false;
                var newForm = $('<form>', {
                    'action': '/backend/course/delete',
                    'method': 'post',
                }).append($('<input>', {
                    'name': 'ids',
                    'value': ids,
                    'type': 'hidden'
                }));
                $(document.body).append(newForm);
                newForm.submit();
            }
        } else {
            alert('請選擇要刪除的項目。');
        }
    });

    $(document).on('change', '.checkbox-delete', function() {
        var id = $(this).attr('id');
        if (this.checked && ids.indexOf(id) === -1) {
            ids.push(id);
        } else {
            var idx = ids.indexOf(id);
            if (idx > -1) {
                ids.splice(idx, 1);
            }
            checkall = false;
            $('.checkbox-delete-all').prop('checked', false);
        }
        if (ids.length > 0) {
            $.each(ids, function(i, e) {
                if (e === id) {
                    $(this).prop('checked', true);
                }
            });
        }
    });


    var checkall = false;
    $(document).on('change', '.checkbox-delete-all', function() {
        if (this.checked) {
            $('.checkbox-delete').each(function(i, e) {
                if (!e.disabled) {
                    ids.push(e.id);
                }
            });
        } else {
            ids = [];
        }
        checkall = this.checked;
        $('.checkbox-delete').each(function(i, e) {
            if (!e.disabled) {
                $(this).prop('checked', checkall);
            }
        });
    });

    $("#keyword_course_id").on("input", function() {
        $("#keyword_course_name").val(null);
        $("#myTable").DataTable().columns(1).search(this.value).draw();
    })

    $('#keyword_course_name').on("input", function() {
        $('#keyword_course_id').val(null);
        $("#myTable").DataTable().columns(2).search(this.value).draw();
    });

    $('#page_length_controller').on("change", function() {
        $('#myTable').DataTable().page.len($("#page_length_controller").val()).draw();
    })

    $(".btn-pageup").on("click", function() {
        $('#myTable').DataTable().page('previous').draw('page');
    });
    $('.btn-pagedown').on("click", function() {
        $('#myTable').DataTable().page("next").draw('page');

    });
    $('#page_number').on('change', function() {
        console.log(this.value - 1);
        $('#myTable').DataTable().page(parseInt(this.value - 1)).draw(false);

    });
</script>