<div class="row">
    <div class="center">
        <div class="title_header"><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 __('Register');?></div>
    </div>
    <div class="col-md-12">
	<?php echo $this->Form->create(null, ['url' => ['controller' => 'Users','action' => 'createAccount'],'class' => 'form-horizontal','id' => '','name' => 'createAccount','role' => 'form', 'onsubmit' => 'return validateForm()']);?>
        <div style="padding: 5px;">
            <?php echo $this->Flash->render(); ?>
        </div>
            <div>
                <div class="form-group has-feedback">
                    <div class="col-md-12">
                        <label class="label-text-sub"><?php echo __('Firstname');?><em>* </em></label>
                        <input type="text" name="firstname" id="firstname" value="" placeholder="FIRSTNAME" class="form-control-reg border-bottom-from">

                    </div>
                </div>
            </div>
            <div>
                <div class="form-group has-feedback">
                    <div class="col-md-12">
                        <label class="label-text-sub"><?php echo __('Lastname');?><em>* </em></label>
                        <input type="text" name="lastname" id="lastname" value="" placeholder="LASTNAME" class="form-control-reg border-bottom-from">

                    </div>
                </div>
            </div>
            <div>
                <div class="form-group has-feedback">
                    <div class="col-md-12">
                        <label class="label-text-sub"><?php echo __('Username');?><em>* </em></label>
                        <input type="text" name="username" id="username" value="" placeholder="USERNAME" class="form-control-reg border-bottom-from">

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

        
            <div>
                <div class="form-group has-feedback">
                    <div class="col-md-12">
                        <label class="label-text-sub"><?php echo __('Country');?><em>* </em></label>
                        <?php 
                            echo $this->Form->input( 'master_country_id', array(
                            'name'=>'master_country_id',
                            'id'=>'master_country_id',
                            'label' => false,
                            'type' => 'select',
                            'options' => $countries,
                            'empty' => '---Select---',
                            'default' => '',
                            'class' => 'form-control border-bottom-from label-text-sub required',
                            'style' => 'width:100%'
                            )); 
                        ?>
                    </div>
                </div>
            </div>

            <div>
                <div class="form-group has-feedback">
                    <div class="col-md-12">
                        <label class="label-text-sub"><?php echo __('Province');?><em>* </em></label>
                        <?php 
                            echo $this->Form->input( 'master_province_id', [
                            'name'=>'master_province_id',
                            'id'=>'master_province_id',
                            'label' => false,
                            'type' => 'select',
                            // 'options' => $provinces,
                            'empty' => '---Select---',
                            'default' => '',
                            'class' => 'form-control border-bottom-from label-text-sub required',
                            'style' => 'width:100%'
                            ]); 
                        ?>
                    </div>
                </div>
            </div>

            <div>
                <div class="form-group has-feedback bootstrap-iso">
                    <div class="col-md-12">
                        <label class="label-text-sub"><?php echo __('Birthdate');?></label>
                        <input type="text" name="birthdate" id="date"  placeholder="กรุณาระบุวันเดือนปีเกิด" value="" placeholder="DD-MM-YYYY" data-date-format="mm/dd/yyyy" class="form-control-reg border-bottom-from" readonly>
                        <span class="glyphicon glyphicon-calendar form-control-feedback"></span>
                    </div>
                </div>
            </div>

            <div>
                <div class="form-group has-feedback">
                    <div class="col-md-12">
                        <label class="label-text-sub"><?php echo __('Phone Number (Mobile)');?><em>* </em></label>
                        <input type="text" name="moblie_no" id="moblie_no" onkeypress="check_phone();" value="" maxlength="10"  placeholder="000-000-0000" class="mask form-control-reg border-bottom-from">
                    </div>
                </div>
            </div>
            <div>
                <div class="form-group has-feedback">
                    <div class="col-md-12">
                        <label class="label-text-sub"><?php echo __('Email');?><em>* </em></label>
                        <input type="text" name="email" id="fremail" value="" placeholder="mail@xxx.com" class="form-control-reg border-bottom-from">

                    </div>
                </div>
            </div>
            <div>
                <div class="form-group has-feedback">
                    <div class="col-md-12">
                        <label class="label-text-sub"><?php echo __('Password');?><em>* </em></label>
                        <input data-toggle="password" data-placement="before" type="password" name="password" id="password" value=""  placeholder="********" class="form-control input-lg color-button-border border-bottom-from" style="padding:0px 0px !important;">
                        <!--<input type="password" name="data[password]" id="password" value="" placeholder="********" class="form-control-reg border-bottom-from" onkeyup='check();'>-->
                        <!--<span class="glyphicon glyphicon-eye-close form-control-feedback"></span>-->
                    </div>
                </div>
            </div>
            <div>
                <div class="form-group has-feedback">
                    <div class="col-md-12">
                        <label class="label-text-sub"><?php echo __('Confirm password');?><em>* </em></label>
                        <input data-toggle="password" data-placement="before" 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;">
                        <!--<input type="password" id="confirm_password" name="data[confirm_password]" value="" placeholder="********" class="form-control-reg border-bottom-from" onkeyup='check();'>-->
                        <!--<span class="glyphicon glyphicon-eye-close form-control-feedback" id='message'></span>-->
                        <span id='message'></span>
                    </div>
                </div>
            </div>
            <!------------------Model---------------------->
            <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                    <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><?php echo __('x');?></button>
                                            <!--<h3 class="modal-title" id="largeModalLabel">ข้อตกลงและเงื่อนไข</h3>-->
                                    </div>
                                    <div class="modal-body">
                                        <!--<h4>ข้อสงวนสิทธิ์และข้อจำกัดความรับผิดชอบ</h4>-->
                                        <p>
                                           <?php echo $this->element('agreement') ?>
                                        </p>     
                                        
                                    </div>
                                    <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal"><?php echo __('Close');?></button>
                                    </div>
                            </div>
                    </div>
            </div>
            <!------------------Exit Model---------------------->
            <div class="switch switch-lg switch-warning" style="padding: 10px 0px 30px 0px;">
                    <input type="checkbox" id="accept" name="accept" data-plugin-ios-switch data-toggle="modal" data-target="#largeModal"/>
                    <span style="font-size: 17px;"><?php echo __('Please accept the <b> Terms of Use </ b>.');?></span>
            </div>
            
            <div>
                <?php
                    echo $this->Form->submit('Register', 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>

    $(document).ready(function() {

        $("#username").on('change',function(){
            var elem = document.getElementById('username').value;
            // console.log(elem);
            if(!elem.match(/^([A-Za-z0-9])+$/i)){
                alert("<?php echo __('Please enter only text in English or numbers.');?>");
                return false;
            }
        })

        $("#firstname").on('change',function(){
            var elem = document.getElementById('firstname').value;
            // console.log(elem);
            if(!elem.match(/^([A-Za-z0-9ก-๙])+$/i)){
                alert("<?php echo __('Please enter text in English, Thai or only.');?>");
                return false;
            }
        })

        $("#lastname").on('change',function(){
            var elem = document.getElementById('lastname').value;
            // console.log(elem);
            if(!elem.match(/^([A-Za-z0-9ก-๙])+$/i)){
                alert("<?php echo __('Please enter text in English, Thai or only.');?>");
                return false;
            }
        })

        $("#password").on('change',function(){
            var elem = document.getElementById('password').value;
            // console.log(elem);
            if(!elem.match(/^([A-Za-z0-9])+$/i)){
                alert("<?php echo __('Please enter only text in English or numbers.');?>");
                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("<?php echo __('Please enter only text in English or numbers.');?>");
                return false;
            }
        })
        
        $("#fremail").on('change',function(){
            var email = document.getElementById("fremail").value;
            $.post("/Checkemails/checkemail", {email: email}, function(data) {
                // console.log(data);
                data = jQuery.parseJSON(data);
                if(data['chk'] == 'false'){
                    alert("<?php echo __('This email is already in the system.');?>");
                    return false;
                }
            });
        });
    });
    function check_phone() {
        
        e_k=event.keyCode
        // if (((e_k < 48) || (e_k > 57)) && e_k != 46 ) {
        if (e_k = 10 && (e_k < 48) || (e_k > 59)) {
        event.returnValue = false;
        alert("<?php echo __('Please enter the phone number. Only numbers.');?>");
        }
    }
    function check_notnum() {
        var letters = /^[A-Za-zก-๙]+$/;
        if(letters.test( event.key )==false){

            alert("<?php echo __('Please enter the correct Thai or English text.');?>");
            return false;
        }
       
    }

	function checkeng()
	{
        e_k=event.keyCode
        if ((e_k >= 48 && e_k<=57) || (e_k>=97 && e_k<=122) || ((e_k>=65 && e_k<=90))) {
            e_k = true;
        }else{
            e_k = false;
            alert("<?php echo __('Please enter only English letters and numbers.');?>");
        }
    } 

    function validateForm() {
        var firstname = document.getElementById("firstname").value;
        if (firstname == null || firstname == "") {
            alert("<?php echo __('Please enter your firstname.');?>");
            return false;
        }
        var lastname = document.getElementById("lastname").value;
        if (lastname == null || lastname == "") {
            alert("<?php echo __('Please enter your lastname.');?>");
            return false;
        }
        var username = document.getElementById("username").value;
        if (username == null || username == "") {
            alert("<?php echo __('Please enter your username.');?>");
            return false;           
        }
        if(document.getElementById("username").value.length < 4 || document.getElementById("username").value.length > 10)
	    {
		    alert("<?php echo __('Please enter a 4-10 character username.');?>");
            return false;
        }
        var master_country_id = document.getElementById("master_country_id").value;
        if (master_country_id == null || master_country_id == "") {
            alert("<?php echo __('Please specify country');?>");
            return false;
        }
        var master_province_id = document.getElementById("master_province_id").value;
        if (master_province_id == null || master_province_id == "") {
            alert("<?php echo __('Please specify province');?>");
            return false;
        }


        var birthdate = document.getElementById("date").value;
        if (birthdate == null || birthdate == "") {
            alert("<?php echo __('Please enter the date of your birth.');?>");
            return false;
        }
        
        var moblie_no = document.getElementById("moblie_no").value;
        if (moblie_no == null || moblie_no == "") {
            alert("<?php echo __('Please enter your phone number.');?>");
            return false;
        }
        if(document.getElementById("moblie_no").value.length != 10)
        {
            alert("<?php echo __('Please enter a 10 digit phone number.');?>");
            return false;
        }

        var email = document.getElementById("fremail").value;
        if (email == null || email == "") {
            alert("<?php echo __('Please enter your email.');?>");
            return false;
        }
        // Validate Email
        var email = $("#fremail").val();
        if (/(.+)@(.+){2,}\.(.+){2,}/.test(email)) { } else {
            alert("<?php echo __('Wrong email address format Please enter the correct number.');?>");
            return false;
        }

        var password = document.getElementById("password").value;
        if (password == null || password == "") {
            alert("<?php echo __('Please enter your password.');?>");
            return false;
        }
            if(document.forms["createAccount"]["password"].value.length < 8)
                {
                       alert("<?php echo __('Please enter at least 8 characters.');?>");
                       return false;
                }
        var confirm_password = document.getElementById("confirm_password").value;
        if (confirm_password == null || confirm_password == "") {
            alert("<?php echo __('Please verify your password.');?>");
            return false;
        }
        
       if(confirm_password = document.getElementById("password").value != document.getElementById("confirm_password").value){
        alert("<?php echo __('Please provide your password.');?>");
        //document.createAccount.confirm_password.focus();     
        return false;
        }

        if($("#accept:checked").length==0){
            alert("<?php echo __('Please accept the Terms of Use.');?>");  
            return false;     
        }

        $("body").delegate(".is_active", "click", function () {
            $('.is_active').not(this).prop('checked', false);
            return true;
            // var id = $(this).closest('td').find('#idAddresses').val();
            // var id_card13 = $(this).closest('td').find('#idCard13Addresses').val();
            // console.log(id);
            // $.post("/Addresses/currentAddress", {id: id, id_card13 : id_card13}, function(data) {
            //     location.reload();
            // });
        });
    }

</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;
    }
    .form-control-reg {
            padding: 5px;
    vertical-align: middle;
    font-family: 'cordia new' !important;

    }
    
    select {
    font-family: 'cordia new' !important;
    }
</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>


<script type="text/javascript">   
     $(document).ready(function () {           
        $("#master_country_id").on('change', function () {
            var id = $(this).val();
            if (id) {
                var dataString = 'id=' + id;
                $("#master_province_id").html('');
                $.ajax({
                    type: "POST",
                    url: '/provinces/getProvince',
                    data: dataString,
                    cache: false,
                    success: function (html) {
                        $("#master_province_id").html(html);
                    }
                });
            }
        });
    });
</script>

<!--------------------------------- confirm password ------------------------------ -->

<script>
    
    // function check_phone() {
    //     e_k=event.keyCode
    //     //if (((e_k < 48) || (e_k > 57)) && e_k != 46 ) {
    //     if (e_k = 10 && (e_k < 48) || (e_k > 57)) {
    //     event.returnValue = false;
    //     alert("ขออภัยหมายเลขโทรศัพท์ ต้องเป็นตัวเลขเท่านั้น");
    //     }
    // }
    /*var check = function() {
    if (document.getElementById('password').value ==
      document.getElementById('confirm_password').value) {
      document.getElementById('message').style.color = 'green';
      document.getElementById('message').innerHTML = '';
    } else {
      document.getElementById('message').style.color = 'red';
      document.getElementById('message').innerHTML = '';
    }
    }*/
</script>
<!--------------------------------- date ------------------------------------->
<script>
    $(document).ready(function(){
      var date_input=$('input[id="date"]'); //our date input has the name "date"
      var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
      var options={
        format: 'dd/mm/yyyy',
        container: container,
        todayHighlight: true,
        autoclose: true,
      };
      date_input.datepicker(options);
    })
</script>