<div class="row">
    <div class="center">
        <div class="title_header" style="padding-top: 20px;"><a href="javascript:history.go(-1)"><?php echo $this->Html->image('/img/core/img/back-icon@3x.png', ['style' => 'float: left;padding-left: 15px;padding-top: 5px;']); ?></a><?php echo __('เปลี่ยนรหัสผ่าน');?></div>
    </div>
    <div class="col-md-12">
<!--        <div class="alert alert-warning" role="alert" style="margin: 10px 0px 10px 0px;font-size: 17px;text-align: center;">
            <strong><?php echo __('กรุณา! ตรวจสอบอีเมลล์ของท่าน');?></strong>
        </div>-->
	<?php echo $this->Form->create(null, ['url' => ['controller' => 'Users','action' => 'changePassword/'],'class' => 'form-horizontal','id' => '','name' => 'changePressword','role' => 'form', 'onsubmit' => 'return validateForm()']);?>
        <?php echo $this->Flash->render(); ?>
            <div>
                <div class="form-group has-feedback">
                    <div class="col-md-12">
                        <label class="label-text-sub"><?php echo __('รหัสผ่านเก่า');?></label>
                        <input data-toggle="password" data-placement="before" onkeyup="check();" type="password" name="oldpassword" id="oldpassword" value=""  placeholder="********" class="form-control input-lg color-button-border border-bottom-from" style="padding:0px 0px !important;">
                    </div>
                </div>
            </div>
            <div>
                <div class="form-group has-feedback">
                    <div class="col-md-12">
                        <label class="label-text-sub"><?php echo __('รหัสผ่านใหม่');?></label>
                        <input data-toggle="password" data-placement="before" onkeyup="check();" type="password" name="password" id="password" value=""  placeholder="********" class="form-control input-lg color-button-border border-bottom-from" style="padding:0px 0px !important;">
                    </div>
                </div>
            </div>
            <div>
                <div class="form-group has-feedback">
                    <div class="col-md-12">
                        <label class="label-text-sub"><?php echo __('ยืนยันรหัสผ่าน');?></label>
                        <input data-toggle="password" data-placement="before" onkeyup="check();" type="password" name="confirm_password" id="confirm_password" value=""  placeholder="********" class="form-control input-lg color-button-border border-bottom-from" style="padding:0px 0px !important;">
                    </div>
                </div>
            </div>

            
            
            <div>
                <?php
                    echo $this->Form->submit('ตรวจสอบ', array('div' => false, 'class' => 'btn btn-quaternary mr-xs mb-sm button-text',
                    'name' => 'btn', 'id' => '', 'title' => 'Title'));
                ?>
            </div>
           
        <?php echo $this->Form->end(); ?>
    </div>
</div>


<!-- ------------------------------- popup ----------------------------------- -->
<script>

        $("#oldpassword").on('change',function(){
            var elem = document.getElementById('oldpassword').value;
            // console.log(elem);
            if(!elem.match(/^([A-Za-z0-9])+$/i)){
                alert("กรุณาใส่ข้อมูลที่เป็นตัวอักษรภาษาอังกฤษและตัวเลขเท่านั้น");
                return false;
            }
        })

        $("#password").on('change',function(){
            var elem = document.getElementById('password').value;
            // console.log(elem);
            if(!elem.match(/^([A-Za-z0-9])+$/i)){
                alert("กรุณาใส่ข้อมูลที่เป็นตัวอักษรภาษาอังกฤษและตัวเลขเท่านั้น");
                return false;
            }
        })

        $("#confirm_password").on('change',function(){
            var elem = document.getElementById('confirm_password').value;
            // console.log(elem);
            if(!elem.match(/^([A-Za-z0-9])+$/i)){
                alert("กรุณาใส่ข้อมูลที่เป็นตัวอักษรภาษาอังกฤษและตัวเลขเท่านั้น");
                return false;
            }
        })

    function validateForm() {

        var password = document.forms["changePressword"]["oldpassword"].value;
        if (password == null || password == "") {
            alert("กรุณากรอก รหัสผ่านเก่า");
            return false;
        }
            if(document.forms["changePressword"]["oldpassword"].value.length < 8)
                {
                       alert('กรุณาระบุรหัสผ่านเก่าอย่างน้อย 8 ตัวอักษร');
                       return false;
                }
        var password = document.forms["changePressword"]["password"].value;
        if (password == null || password == "") {
            alert("กรุณากรอก รหัสผ่านใหม่");
            return false;
        }
            if(document.forms["changePressword"]["password"].value.length < 8)
                {
                       alert('กรุณาระบุรหัสผ่านใหม่อย่างน้อย 8 ตัวอักษร');
                       return false;
                }
        var confirm_password = document.forms["changePressword"][["confirm_password"]].value;
        if (confirm_password == null || confirm_password == "") {
            alert("กรุณากรอก ยืนยันรหัสผ่าน");
            return false;
        }
            if(document.forms["changePressword"]["confirm_password"].value.length < 8)
                {
                       alert('กรุณาระบุยืนยันรหัสผ่านอย่างน้อย 8 ตัวอักษร');
                       return false;
                }
            if(document.forms["changePressword"]["password"].value != document.forms["changePressword"]["confirm_password"].value){
                alert('กรุณาระบุรหัสผ่านให้ตรงกัน');
                //document.createAccount.confirm_password.focus();     
                return false;
            }

    }
</script>
<style>
    #alertBox {
        position:relative;
        width:300px;
        min-height:100px;
        /*margin-top:50px;*/
        border:1px solid #666;
        background-color:#fff;
        background-repeat:no-repeat;
        background-position:20px 30px;
        left: 0;
        right: 0;
        top: 100px;
        z-index: 2;
    }

    #modalContainer > #alertBox {
        position:fixed;
    }

    #alertBox h1 {
        margin:0;
        font:bold 0.9em verdana,arial;
        background-color:#000;
        color:#FFF;
        border-bottom:1px solid #000;
        padding:2px 0 2px 5px;
    }

    #alertBox p {
        font-size: 14px;
        height: 30px;
        padding: 10px;
        /* margin-left: 55px; */
        text-align: center;
    }

    #alertBox #closeBtn {
        display:block;
        position:relative;
        margin:5px auto;
        padding:7px;
        border:0 none;
        width:70px;
        font:0.7em verdana,arial;
        text-transform:uppercase;
        text-align:center;
        color:#FFF;
        background-color:#000;
        border-radius: 3px;
        text-decoration:none;
    }

    /* unrelated styles */

    #mContainer {
        position:relative;
        width:600px;
        margin:auto;
        padding:5px;
        border-top:2px solid #000;
        border-bottom:2px solid #000;
        font:0.7em verdana,arial;
    }

    h1,h2 {
        margin:0;
        padding:4px;
        font:bold 1.5em verdana;
        border-bottom:1px solid #000;
        text-align: center;
    }

    code {
        font-size:1.2em;
        color:#069;
    }

    #credits {
        position:relative;
        margin:25px auto 0px auto;
        width:350px; 
        font:0.7em verdana;
        border-top:1px solid #000;
        border-bottom:1px solid #000;
        height:90px;
        padding-top:4px;
    }

    #credits img {
        float:left;
        margin:5px 10px 5px 0px;
        border:1px solid #000000;
        width:80px;
        height:79px;
    }

    .important {
        background-color:#F5FCC8;
        padding:2px;
    }

    code span {
        color:green;
    }
    .from-control-reg {
        height:50px;
    }
</style>
<script>
    var ALERT_TITLE = "";
    var ALERT_BUTTON_TEXT = "Ok";

    if (document.getElementById) {
        window.alert = function (txt) {
            createCustomAlert(txt);
        }
    }
    function createCustomAlert(txt) {
        d = document;

        if (d.getElementById("modalContainer"))
            return;

        mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
        mObj.id = "modalContainer";
        mObj.style.height = d.documentElement.scrollHeight + "px";

        alertObj = mObj.appendChild(d.createElement("div"));
        alertObj.id = "alertBox";
        if (d.all && !window.opera)
            alertObj.style.top = document.documentElement.scrollTop + "px";
        alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth) / 2 + "px";
        alertObj.style.visiblity = "visible";

        h1 = alertObj.appendChild(d.createElement("h1"));
        h1.appendChild(d.createTextNode(ALERT_TITLE));

        msg = alertObj.appendChild(d.createElement("p"));
        //msg.appendChild(d.createTextNode(txt));
        msg.innerHTML = txt;

        btn = alertObj.appendChild(d.createElement("a"));
        btn.id = "closeBtn";
        btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
        btn.href = "#";
        btn.focus();
        btn.onclick = function () {
            removeCustomAlert();
            return false;
        }

        alertObj.style.display = "block";

    }

    function removeCustomAlert() {
        document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
    }
    function ful() {
        alert('Alert this pages');
    }
</script>
