<?php
    class QRGenerator { 

        protected $size; 
        protected $data; 
        protected $encoding; 
        protected $errorCorrectionLevel; 
        protected $marginInRows; 
        protected $debug; 

        public function __construct($data='1334554 5454 545',$size='300',$encoding='UTF-8',$errorCorrectionLevel='L',$marginInRows=4,$debug=false) { 

            $this->data=urlencode($data); 
            $this->size=($size>100 && $size<800)? $size : 300; 
            $this->encoding=($encoding == 'Shift_JIS' || $encoding == 'ISO-8859-1' || $encoding == 'UTF-8') ? $encoding : 'UTF-8'; 
            $this->errorCorrectionLevel=($errorCorrectionLevel == 'L' || $errorCorrectionLevel == 'M' || $errorCorrectionLevel == 'Q' || $errorCorrectionLevel == 'H') ?  $errorCorrectionLevel : 'L';
            $this->marginInRows=($marginInRows>0 && $marginInRows<10) ? $marginInRows:4; 
            $this->debug = ($debug==true)? true:false;     
        }
        public function generate(){ 

            $QRLink = "https://chart.googleapis.com/chart?cht=qr&chs=".$this->size."x".$this->size. "&chl=" . $this->data .  
                "&choe=" . $this->encoding . 
                "&chld=" . $this->errorCorrectionLevel . "|" . $this->marginInRows; 
            if ($this->debug) echo   $QRLink;          
            return $QRLink; 
        }
    }
?>

<div class="row">
    <div class="col-xs-1 col-sm-1 col-md-1 box-arrow" ></div>
    <div class="col-xs-10 col-sm-10 col-md-10">
        <div data-toggle="modal" data-target="#defaultModal" style="text-align: center; cursor: pointer;">
            <img src="/img/core/img/connect-card-v3.png" class="img-responsive" id="img-upload" alt="Profile picture">                
        </div>
    </div>
    <div class="col-xs-1 col-sm-1 col-md-1 box-arrow" >
        <a>
            <?php echo $this->Html->link(
                '<i class = "fa fa-angle-right"></i>',
                ['controller' => 'UserCards', 'action' => 'viewCard', '_full' => true],['escape' => false]
            ); ?>
        </a>
    </div>
    <div style="clear: both"></div>
</div><!--/row-->
<br><br>

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12">
        <?php echo $this->Form->create('UserProfiles', ['id' => 'frmSignIn', 'type' => 'file','name' => 'frmSignIn','role' => 'form',  'onsubmit' => 'return validateForm()']); ?>
            <?php echo $this->Flash->render() ?>
            <div class="form-group has-feedback">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <h3> <?php echo __('user profile');?></h3>
                </div>
            </div>
            <div class="form-group has-feedback">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <?php echo $this->Form->hidden('Users.user_id', ['class' => 'form-control-reg border-bottom-from label-text-sub', 'value' => $responseUserProfile['id'], 'id' => 'userId', 'type' => 'text', 'label' => __('username'), 'placeholder' => 'USERNAME']); ?>
                    <?php echo $this->Form->input('Users.username', ['class' => 'form-control-reg border-bottom-from label-text-sub', 'value' => $username, 'id' => 'username', 'type' => 'text', 'label' => __('username'), 'placeholder' => 'USERNAME', 'readonly']); ?>
                    <?php // echo $this->Form->input('user_id', ['class' => 'form-control-reg border-bottom-from label-text-sub', 'value' => $userProfile->username, 'id' => 'userId', 'type' => 'text', 'label' => __('ชื่อผู้ใช้งาน'), 'placeholder' => 'USERNAME']); ?>
                </div>
            </div>
            <div class="form-group has-feedback">
                <div class="col-xs-12 col-sm-12 col-md-12">
                <?php echo __('firstname');?><em>* </em>
                    <?php echo $this->Form->input('UserPersonals.firstname_th', ['class' => 'form-control-reg border-bottom-from label-text-sub', 'value' => $responseUserPersonal['firstname_th'], 'id' => 'firstname_th', 'type' => 'text', 'label' => false, 'placeholder' => 'firstname']); ?>
                    <?php // echo $this->Form->input('fullname', ['class' => 'form-control-reg border-bottom-from label-text-sub', 'value' => $userProfiles->firstname_th . ' ' . $userProfiles->lastname_th, 'id' => 'fullName', 'type' => 'text', 'label' => __('ชื่อ - นามสกุล'), 'placeholder' => 'ชื่อ - นามสกุล']); ?>
                </div>
            </div>
            <div class="form-group has-feedback">
                <div class="col-xs-12 col-sm-12 col-md-12">
                <?php echo __('lastname');?><em>* </em>
                    <?php echo $this->Form->input('UserPersonals.lastname_th', ['class' => 'form-control-reg border-bottom-from label-text-sub', 'value' => $responseUserPersonal['lastname_th'], 'id' => 'lastname_th', 'type' => 'text', 'label' => false, 'placeholder' => 'lastname']); ?>
                    <?php // echo $this->Form->input('fullname', ['class' => 'form-control-reg border-bottom-from label-text-sub', 'value' => $userProfiles->firstname_th . ' ' . $userProfiles->lastname_th, 'id' => 'fullName', 'type' => 'text', 'label' => __('ชื่อ - นามสกุล'), 'placeholder' => 'ชื่อ - นามสกุล']); ?>
                </div>
            </div>
            <div class="form-group has-feedback">
                <div class="col-xs-12 col-sm-12 col-md-12">
                <?php echo __('birthdate');?><em>* </em>
                    <?php echo $this->Form->input('UserPersonals.birthdate', ['class' => 'form-control-reg border-bottom-from', 'value' => $dateNow, 'id' => 'datepicker', 'type' => 'text', 'label' => false, 'placeholder' => 'DD-MM-YYYY']); ?>
                    <span class="glyphicon glyphicon-calendar form-control-feedback datepicker"></span>
                </div>
            </div>
            <div class="form-group has-feedback">
                <div class="col-xs-12 col-sm-12 col-md-12">
                <!--<label class="label-text-sub">เพศ</label>-->
                    <?php echo __('gender'); ?>
                    <div class="radio-group">
                        <label class="radio-inline">
                            <input type="radio" name="UserPersonals[gender]" id="male" value="M" <?php echo ($responseUserPersonal['gender'] == 'M') ? 'checked="checked"' : null; ?>> <?php echo __('male'); ?>
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="UserPersonals[gender]" id="female" value="F" <?php echo ($responseUserPersonal['gender'] == 'F') ? 'checked="checked"' : null; ?>> <?php echo __('female'); ?>
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group has-feedback">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <?php echo __('blood group'); ?>
                    <div class="radio-group">
                        <label class="radio-inline">
                            <input type="radio" name="UserPersonals[blood_group]" id="blood-A" value="A" <?php echo ($responseUserPersonal['blood_group'] == 'A') ? 'checked="checked"' : null; ?>> <?php echo __('A'); ?>
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="UserPersonals[blood_group]" id="blood-B" value="B" <?php echo ($responseUserPersonal['blood_group'] == 'B') ? 'checked="checked"' : null; ?>> <?php echo __('B'); ?>
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="UserPersonals[blood_group]" id="blood-AB" value="AB" <?php echo ($responseUserPersonal['blood_group'] == 'AB') ? 'checked="checked"' : null; ?>> <?php echo __('AB'); ?>
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="UserPersonals[blood_group]" id="blood-O" value="O" <?php echo ($responseUserPersonal['blood_group'] == 'O') ? 'checked="checked"' : null; ?>> <?php echo __('O'); ?>
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group has-feedback">
                <div class="col-xs-12 col-sm-12 col-md-12">
                <?php echo __('mobile');?><em>* </em>
                    <?php echo $this->Form->input('UserPersonals.moblie_no', ['class' => 'form-control-reg border-bottom-from label-text-sub', 'value' => $responseUserPersonal['moblie_no'], 'id' => 'moblieNo', 'type' => 'text', 'label' => false, 'maxlength' => '10', 'placeholder' => 'mobile']); ?>
                    <?php // echo $this->Form->input('moblie_no', ['class' => 'form-control-reg border-bottom-from label-text-sub', 'value' => $userProfiles->moblie_no, 'id' => 'moblieNo', 'type' => 'text', 'label' => __('เบอร์โทรศัพท์'), 'placeholder' => '000-000-0000']); ?>
                </div>
            </div>
            <div class="form-group has-feedback">
                <div class="col-xs-12 col-sm-12 col-md-12">
                <?php echo __('email');?><em>* </em>
                    <!-- <?php echo $this->Form->input('UserPersonals.email', ['class' => 'form-control-reg border-bottom-from label-text-sub', 'value' => $responseUserPersonal['email'], 'id' => 'email', 'label' => false, 'placeholder' => 'mail@xxx.com']); ?> -->
                    <?php // echo $this->Form->input('email', ['class' => 'form-control-reg border-bottom-from label-text-sub', 'value' => $userProfiles->email, 'id' => 'email', 'type' => 'email', 'label' => __('Email'), 'placeholder' => 'mail@xxx.com']); ?>
                    <input type="text" name="email" id="email" value="<?php echo $responseUserPersonal['email'] ?>" placeholder="mail@xxx.com" class="form-control-reg border-bottom-from">
                </div>
            </div>
            <div class="form-group has-feedback">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <?php echo $this->Form->input('UserPersonals.address', ['class' => 'form-control-reg border-bottom-from label-text-sub', 'value' => $responseUserPersonal['address'], 'id' => 'address', 'type' => 'text', 'label' => __('address'), 'placeholder' => __('112/3 สุขุมวิท 22 ทองหล่อ กทม 10523')]); ?>
                    <?php // echo $this->Form->input('address', ['class' => 'form-control-reg border-bottom-from label-text-sub', 'value' => $userProfiles->address, 'id' => 'address', 'type' => 'text', 'label' => __('ที่อยู่อาศัย'), 'placeholder' => __('112/3 สุขุมวิท 22 ทองหล่อ กทม 10523')]); ?>
                </div>
            </div>
            <div class="form-group has-feedback">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <?php echo __('country'); ?><em>* </em>
                    <?php
                        echo $this->Form->input( 'master_country_id', array(
                        'id' => 'master_country_id',
                        'label' => false,
                        'type' => 'select',
                        'require'=>'require',
                        'options' => $Country,
                        'value' => $responseUserPersonal['master_country_id'],
                        'empty' => '---Select---',
                        'default' => !empty($responseUserPersonal['master_country_id'])? $responseUserPersonal['master_country_id']:'',
                        'class' => 'form-control border-bottom-from label-text-sub require',
                        'style' => 'width:100%'
                        )); 
                    ?>
                </div>
            </div>
            <div class="form-group has-feedback">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <?php echo __('province'); ?><em>* </em>
                    <?php 
                        echo $this->Form->input( 'master_province_id', array(
                        'id' => 'master_province_id',
                        'label' => false,
                        'type' => 'select',
                        'require'=>'require',
                        'options' => $Province,
                        'value' => $responseUserPersonal['master_province_id'],
                        'empty' => '---Select---',
                        'default' => !empty($responseUserPersonal['master_province_id'])? $responseUserPersonal['master_province_id']:'',
                        'class' => 'form-control border-bottom-from label-text-sub require',
                        'style' => 'width:100%'
                        )); 
                    ?>
                </div>
            </div>
        <div>
            <?php // echo $this->Form->submit(__('SAVE')) ?>
            <button type="submit" class="btn btn-quaternary mr-xs mb-sm button-text-profile">SAVE</button>
        </div>
        <?php echo $this->Form->end(); ?>
    </div>
</div>

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="modal fade" id="defaultModal" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel" aria-hidden="true">
            <div class="modal-dialog box-ads">
                <a class="close-modal" data-dismiss="modal">X </a>  
                <div class="container login-container">
                    <div class="owl-carousel owl-theme" data-plugin-options="{'items': 1}">
                        <div> 
                            <img src="/img/core/img/connect-card-v2.png" class="img-responsive" id="img-upload" alt="Profile picture">
                        </div>  
                        <div>
                            <div class="qrcode-profile"><br>
                                <?php echo __('Show QR Code to get permission');?>
                            </div>
                            <img src="/img/core/img/connect-card-back.png" class="img-responsive" id="img-upload" alt="Profile picture">
                            <div class="qrcode-name">
                                <?php
                                $ex1 = new QRGenerator(); 
                                echo "<img src=".$ex1->generate()." style='position: absolute;width: 150px;border: solid 1px #000;' class='qrcode-name'>";
                                ?>
                                <?php //echo $this->Html->image('/img/core/img/qr-code.jpg', array('div' => false, 'class' => 'qrcode-name','style' => 'position: absolute;width: 120px;')); ?>
                            </div>
                        </div>
                    </div>
                </div>    
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        $("#email").on('change',function(){
            var userId = document.getElementById("userId").value;
            var email = document.getElementById("email").value;
            $.post("/Checkemails/checkemail", {email: email,userId: userId}, 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;
                }
            });
        });
        $("#moblieNo").on('change',function(){
            var elem = document.getElementById('moblieNo').value;
            // console.log(elem);
            if(!elem.match(/^([A-Za-zก-๙])+$/i)){
                alert(<?php echo __('only numbers') ?>);
                return false;
            }
        })
    });

    function validateForm() {
        var firstname_th = document.getElementById("firstname_th").value;
        if (firstname_th == null || firstname_th == "") {
            alert(<?php echo __('Please enter your firstname.') ?>);
            return false;
        }
        var lastname_th = document.getElementById("lastname_th").value;
        if (lastname_th == null || lastname_th == "") {
            alert(<?php echo __('Please enter your lastname.') ?>);
            return false;
        }

        var birthdate = document.getElementById("datepicker").value;
        if (birthdate == null || birthdate == "") {
            alert(<?php echo __('Please enter your birthdate.') ?>);
            return false;
        }

        var moblieNo = document.getElementById("moblieNo").value;    
        if (moblieNo == null || moblieNo == "") {
            alert(<?php echo __('Please enter your mobile.') ?>);
            return false;
        }
        if(document.getElementById("moblieNo").value.length != 10)
        {
            alert(<?php echo __('Please enter a 10 digit mobile number.') ?>);
            return false;
        }

        var email = document.getElementById("email").value;
        if (email == null || email == "") {
            alert(<?php echo __('Please enter your email address.') ?>);
            return false;
        }
        
        var email = $("#email").val();
        if (/(.+)@(.+){2,}\.(.+){2,}/.test(email)) { } else {
            alert(<?php echo __('Email address format wrong, Please enter the correct number.') ?>);
            return false;
        }
        // var email = document.getElementById("email").value;
        // $.post("/Checkemails/checkemail", {email: email}, function(data) {
        //     data = jQuery.parseJSON(data);
        //     if(data['chk'] == 'false'){
        //         alert("อีเมลล์นี้มีในระบบแล้ว");
        //         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;
        }
        
        $("body").delegate(".is_active", "click", function () {
            $('.is_active').not(this).prop('checked', false);
            return true;
        });
    }

</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{
        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>



 <?php $this->append('scriptBottom'); ?>
    <script type="text/javascript">
    $(function () {
        //==================================================
        //        CHANGE Date Times
        //==================================================
        $('#datepicker').datepicker({
            format: 'dd/mm/yyyy'
        });
    });
        //==================================================
        //        CHANGE Province According Country
        //==================================================
    $(document).ready(function () {
        $("#master_country_id").on('change', function () {
            var id = $(this).val();
            if (id) {
                var dataString = 'id=' + id;
                $.ajax({
                    type: "POST",
                    url: '/provinces/getProvince',
                    data: dataString,
                    cache: false,
                    success: function (html) {
                        $("#master_province_id").html(html);
                    }
                });
            }
        });
    });

</script>
<?php $this->end();?>
<style>
    .box-arrow{
        font-size:36px; 
        height: 200px; 
        padding-top:20%;
        cursor: pointer;
    }
    .box-ads{
        width: 1%;
        display: table;
        margin: auto;
        position: relative;
        padding-top: 10px;
        margin-top: 5px;
    } 
    .box-ads .close-modal{
        position:absolute;
        top:0;
        right: 0;
        width: 40px;
        height: 40px;
        background-color: #000;
        color: #fff;
        cursor: pointer; 
        font-size: 20px;
        border-radius: 20px;
        padding-top: 10px;
        margin-right: 10px;
       text-align: center;
       z-index: 9999;
    }
    .box-ads .close-modal:hover{
        text-decoration: none;
    }
</style>