<div class="title">連結家長</div>
<ul class="table-toolbar" style="text-align: left;">
    <li><a class="toolbar-element btn btn-default btn-create lnkBack"><i style="margin-right: 8px;"><span class="iconify" data-icon="typcn-arrow-back" data-inline="false"></span></i>返回</a></li>
</ul>
<div class="form-container">
    <form class="form-horizontal" role="form" method="post" action="/student">
        <fieldset>
            <div class="form-group">
                <div class="col-sm-2 text-center mas-group-title">
                    <label>學生資料</label>
                </div>
            </div>
            <div class="form-group mas-col">
                <div class="col-sm-2 text-center mas-title">
                    <label>學生號碼</label>
                </div>
                <div class="col-sm-10 mas-box">
                    <input type="text" class="form-control mas-input" disabled="disabled" value="<?= $student['student_no']; ?>" />
                </div>
            </div>
            <div class="form-group mas-col">
                <div class="col-sm-2 text-center mas-title">
                    <label>中文名稱</label>
                </div>
                <div class="col-sm-10 mas-box">
                    <input type="text" class="form-control mas-input" disabled="disabled" value="<?= $student['chi_name']; ?>" />
                </div>
            </div>
            <div class="form-group mas-col">
                <div class="col-sm-2 text-center mas-title">
                    <label>英文姓名</label>
                </div>
                <div class="col-sm-10 mas-box">
                    <input type="text" class="form-control mas-input" disabled="disabled" value="<?= $student['eng_name']; ?>" />
                </div>
            </div>
            <div class="form-group mas-col">
                <div class="col-sm-2 text-center mas-title">
                    <label>性別</label>
                </div>
                <div class="col-sm-10 mas-box">
                    <input type="text" class="form-control mas-input" disabled="disabled" value="<?= $gender[$student['gender']] ?? null; ?>" />
                </div>
            </div>
        </fieldset>
        <div class="form-group mas-col">
            <div class="col-sm-2 text-center mas-title">
                <label>登入名稱</label>
            </div>
            <div class="col-sm-4 mas-box">
                <input type="text" class="form-control mas-input" name="username" value="" />
            </div>
            <div class="col-sm-2 text-center mas-title">
                <label>中文姓名</label>
            </div>
            <div class="col-sm-4 mas-box">
                <input type="text" class="form-control mas-input" name="chi_name" value="" />
            </div>
        </div>
        <div class="form-group mas-col">
            <div class="col-sm-2 text-center mas-title">
                <label>英文姓名</label>
            </div>
            <div class="col-sm-4 mas-box">
                <input type="text" class="form-control mas-input" name="eng_name" value="" />
            </div>
            <div class="col-sm-2 text-center mas-title">
                <label>電話號碼</label>
            </div>
            <div class="col-sm-4 mas-box">
                <input type="text" class="form-control mas-input" name="mobile" value="" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2">
                <button class="btn btn-footer submit" type="button" id='btnSearch'>搜尋</button>
            </div>
            <div class="col-sm-10">
            </div>
        </div>
        <br />
        <div class="title align-left">家長資料</div>
        <table class="table table-bordered" id="parentTable">
            <thead class="thead-light">
                <tr>
                    <th></th>
                    <th>登入名稱</th>
                    <th>中文姓名</th>
                    <th>英文姓名</th>
                    <th>聯絡電話</th>
                    <th>電郵</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <div class="form-footer">
            <a class="btn btn-footer reset" href="javascript:window.location.reload(true)">重設</a>
            <button class="btn btn-footer submit" type="button" id='btnAttach'>連結</button>
        </div>
    </form>
</div>
<script>
    function getRemoteData(remote_url, data, callback, callbackFail) {
        $.ajax({
            //async: false,
            //timeout: 30000, //最長等候回應時間
            type: "GET", //提交類型
            url: remote_url, //提交地址
            data: data, //提交內容
            dataType: 'json', //返回數據類型
            success: function(data) { //請求完成並成功
                if (data.success) {
                    callback(data.data);
                } else {
                    callbackFail();
                }
            },
            error: function(data) { //請求返回錯誤信息
                callbackFail();
            },
            beforeSend: function(XHR) { //请求開始前执行
            },
            complete: function(XHR, status) { //请求完成后最终执行
            }
        });
    }

    function getRemoteDataFail() {
        alert("發生錯誤");
    }

    function searchParent() {
        if ($('INPUT[name="username"]').val() + $('INPUT[name="chi_name"]').val() + $('INPUT[name="eng_name"]').val() + $('INPUT[name="mobile"]').val() == "") {
            alert("未有輸入搜索資料");
            return;
        }

        getRemoteData(
            "/api/searchparent", {
                'student_code': "<?= $student['student_no']; ?>",
                'username': $('INPUT[name="username"]').val(),
                'chi_name': $('INPUT[name="chi_name"]').val(),
                'eng_name': $('INPUT[name="eng_name"]').val(),
                'mobile': $('INPUT[name="mobile"]').val(),
            },
            searchParentSuccess,
            getRemoteDataFail
        );
    }

    function searchParentSuccess(data) {
        var row;
        if ((data.error == 1) || (data.result.length == 0)) {
            alert("找不到紀錄 !!");
        }
        data.result.forEach(function(record) {
            row = '<tr>';
            row += '<td><input class="radio-fix" type="radio" name="code" value="' + record.username + '" /></td>';
            row += '<td><span>' + record.username + '</span></td>';
            row += '<td><span>' + record.chi_name + '</span></td>';
            row += '<td><span>' + record.eng_name + '</span></td>';
            row += '<td><span>' + record.mobile + '</span></td>';
            row += '<td><span>' + record.email + '</span></td>';
            row += '</tr>';
            //            alert (JSON.stringify(record));
            $('#parentTable tbody').append(row);
        });
    }

    function attachParent() {
        var username = $('input[name="code"]:checked').val();
        if (!username) {
            alert("請先選擇一位家長");
            return;
        }
        getRemoteData(
            "/api/attachparent", {
                'student_code': '<?= $student['student_no']; ?>',
                'username': username,
            },
            attachParentSuccess,
            getRemoteDataFail
        );
    }

    function attachParentSuccess(data) {
        alert("家長已連結");
        goBack();
    }

    function goBack() {
        var newForm = $('<form>', {
            'action': '/student/edit',
            'method': 'post',
        }).append($('<input>', {
            'name': 'id',
            'value': <?= $student['id']; ?>,
            'type': 'hidden'
        }));
        $(document.body).append(newForm);
        newForm.submit();
    }

    $(document).ready(function() {
        var li = $('#sidebar-menu li').filter(function(i) {
            return $(this).find('.menu-dropdown').find('.menu-text').text() === '學生';
        });
        li.addClass('active open');
        $('.lnkBack').on('click', function() {
            goBack();
        });

        $("#btnSearch").on('click', function() {
            $('#parentTable tbody').empty();
            searchParent();
        });

        $("#btnAttach").on('click', function() {
            attachParent();
        });

    });
</script>