<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 for="username">登入名稱</label></div>
            <div class="col-sm-10 text-center mas-title mas-box "><input id=username type="text" class="form-control mas-input" disabled name="username" value="<系統自動產生>" /></div>
        </div>
        <div class="form-group mas-col">
            <div class="col-sm-2 text-center mas-title"><label for="chi_name">中文姓名</label></div>
            <div class="col-sm-10 text-center mas-title mas-box "><input id=chi_name 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 for="eng_name">英文姓名</label></div>
            <div class="col-sm-10 text-center mas-title mas-box "><input id=eng_name type="text" class="form-control mas-input" name="eng_name" value="" /></div>
        </div>
        <div class="form-group mas-col">
            <div class="col-sm-2 text-center mas-title"><label for="mobile">聯絡電話</label></div>
            <div class="col-sm-10 text-center mas-title mas-box "><input id=mobile type="text" class="form-control mas-input" name="mobile" value="" /></div>
        </div>
        <div class="form-group mas-col">
            <div class="col-sm-2 text-center mas-title"><label for="email">電郵地址</label></div>
            <div class="col-sm-10 text-center mas-title mas-box "><input id=email type="text" class="form-control mas-input" name="email" value="" /></div>
        </div>
        <div class="form-group mas-col">
            <div class="col-sm-2 text-center mas-title"><label for="remark">備註</label></div>
            <div class="col-sm-10 mas-box"><textarea id="remark" class="form-control mas-textarea" rows="3" name="remark"></textarea></div>
        </div>
        <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='btnSubmit' name="submit">提交</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 validateEmail(email) {
        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(String(email).toLowerCase());
    }

    function validation() {
        var chi_name = $('INPUT[name="chi_name"]').val().trim();
        var email = $('INPUT[name="email"]').val().trim();
        if (!chi_name.toString().match(/[\u3400-\u9FBF]/)) {
            alert("中文姓名欄必須輸入中文");
            return false;
        }
        if (!validateEmail(email)) {
            alert("請輸入正確的電郵地址");
            return false;
        }
        return true;
    }

    function addParent() {
        getRemoteData(
            "/api/addparent", {
                'student_code': '<?= $student['student_no']; ?>',
                'chi_name': $('INPUT[name="chi_name"]').val(),
                'eng_name': $('INPUT[name="eng_name"]').val(),
                'mobile': $('INPUT[name="mobile"]').val(),
                'email': $('INPUT[name="email"]').val(),
                'remark': $('INPUT[name="remark"]').val()
            },
            addParentSuccess,
            addParentFail
        );
    }

    function addParentSuccess(data) {
        alert("家長已新增");
        goBack();
    }

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

    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();
        });

        $("#btnSubmit").on('click', function() {
            if (validation()) {
                addParent();
            }
        });
    });
</script>