<?php
use Cake\I18n\Time;

    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="owl-carousel owl-theme" data-plugin-options="{'items': 1}">
        <div class="row">
            <div class="col-xs-1 col-sm-1 col-md-1 box-arrow left">              
            </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 right">
                <i class="fa fa-angle-right next"></i>
            </div>
            <div style="clear: both"></div>
            <br><br>
            <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','readonly'=>'readonly']); ?>
                        <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">
                        <?php echo __('SAVE');?>
                    </button>
                </div>
                <?php echo $this->Form->end(); ?>
            </div>
        </div>
        <!--/.row profile-->  

        <!-- ************ user card ************ -->
        <?php 
		$i=0; 
		foreach ($UserCards as $value) { 
        ?>
            <div class="row">
                <div class="col-xs-1 col-sm-1 col-md-1 box-arrow left">
                    <i class="fa fa-angle-left prev"> </i>
                </div>
                <div class="col-xs-10 col-sm-10 col-md-10">
                    <div class="box-card">
                        <div data-toggle="modal" data-target="#card_<?php echo $i;?>"  style="cursor: pointer; padding-right: 10px; padding-left: 10px;">
                            <div class="row">  
                                <div class="col-xs-8">
                                    <div style="font-size: 17px">
                                        <br>
                                        <label>id<label>
                                    </div>
                                    <div>
                                        <?php echo $value['card_code'] ?>
                                    </div>
                                    <div>
                                        <label style="font-size: 17px"><?php echo __('Firstname') ?></label>
                                        <?php echo $value['prefix_name_th'].$value['firstname_th'].' '.$value['lastname_th'] ?>
                                    </div>
                                </div>
                                <div class="col-xs-4">
                                    <img src="/img/core/img/user-profile@3x.png" class="img-responsive">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-10">
                                    <label style="font-size: 17px"><?php echo __('Position') ?></label>
                                    <?php echo $value['position_name'] ?>
                                </div>
                            </div>
                            <div class="row text-center">
                                <br>
                                <div class="col-xs-6">
                                    <?php 
	                        $now = new Time($value['date_issued']);
	                        $dateIssued = $now->i18nFormat('yyyy-MM-dd');
	                        echo $this->DateFormat->formatDateThai($dateIssued);                  
	                    ?>
                                </div>
                                <div class="col-xs-6">
                                    <?php 
	                        $now = new Time($value['date_expiry']);
	                        $dateExpiry = $now->i18nFormat('yyyy-MM-dd');
	                        echo $this->DateFormat->formatDateThai($dateExpiry);                  
	                    ?>
                                </div>
                            </div>
                            <div class="row text-center">
                                <div class="col-xs-6">
                                    <label style="font-size: 17px"><?php echo __('Card issue') ?></label>
                                </div>
                                <div class="col-xs-6">
                                    <label style="font-size: 17px"><?php echo __('Old age') ?></label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--/.box-card -->
                <div class="col-xs-1 col-sm-1 col-md-1 box-arrow right">
                    <i class="fa fa-angle-right next"></i>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group has-feedback">
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <h4><?php echo __('Company Information') ?></h4>
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <label style="font-size: 17px" class="col-xs-4 col-sm-4 col-md-4"><?php echo __('Firstname') ?></label>
                            <?php echo $value['prefix_name_th'].$value['firstname_th'] ?>
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <label style="font-size: 17px" class="col-xs-4 col-sm-4 col-md-4"><?php echo __('Lastname') ?></label>
                            <?php echo $value['lastname_th'] ?>
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <label style="font-size: 17px" class="col-xs-4 col-sm-4 col-md-4"><?php echo __('Company Name') ?></label>
                            <?php echo $value['morg']['org_name_th'] ?>
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <label style="font-size: 17px" class="col-xs-4 col-sm-4 col-md-4"><?php echo __('Department') ?></label>
                            <?php echo $value['section_name'] ?>
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <label style="font-size: 17px" class="col-xs-4 col-sm-4 col-md-4"><?php echo __('Position') ?></label>
                            <?php echo $value['position_name'] ?>
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <label style="font-size: 17px" class="col-xs-4 col-sm-4 col-md-4"><?php echo __('Card issue') ?></label>
                            <?php 
	                        $now = new Time($value['date_issued']);
	                        $dateIssued = $now->i18nFormat('yyyy-MM-dd');
	                        echo $this->DateFormat->formatDateThai($dateIssued);                  
	                    ?>
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <label style="font-size: 17px" class="col-xs-4 col-sm-4 col-md-4"><?php echo __('Old age') ?></label>
                            <?php 
	                        $now = new Time($value['date_expiry']);
	                        $dateExpiry = $now->i18nFormat('yyyy-MM-dd');
	                        echo $this->DateFormat->formatDateThai($dateExpiry);                  
	                    ?>
                        </div>
                    </div>
                </div>
				<!--/.col-xs-12 -->
			
            </div>
			<!--/.row -->

        <?php
		    $i++; 
		} 
		?>
        <!-- ************ end user card ************ -->
        <!--- *************** add card ******************* -->

        <?php  echo $this->element('card_from/from_add_card'); ?>

        <!--- *************** end card ******************* -->
    </div>
	<!--/.owl-carousel -->

<!--- *************** model list ******************* -->

    <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>
    <!--/.row modal card-->
    <?php
        if(!empty($UserCards)){ 
            $i=0; 
            foreach ($UserCards as $value) {  
                echo $this->element('card_from/from_0',array('value' => $value,'i'=> $i));
                $i++; 
            } 
        }
    ?>

<!--- ***************  end model list ******************* -->

</div>
<!--/.row top-->
<script type="text/javascript">
    

</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;
    }

	 .box-card {
	     border: 1px solid #ccc;
	     height: 200px;
	     margin-top: 10px;
	     border-radius: 20px;
	     box-shadow: 2px 2px 4px #ccc;
	     margin-bottom: 10px;
	 }

	 .box-arrow {
	     font-size: 36px;
	     height: 200px;
	     padding-top: 20%;
	     cursor: pointer;
	 }

	 .box-arrow.left {
	     padding-right: 0px;
	     text-align: right;
	 }

	 .box-arrow.right {
	     padding-left: 0px;
	 }

	 .box-ads {
	    
	     margin: auto;
	     padding: 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;
	 }

	 .rotate270 .row {
	     -webkit-transform: rotate(270deg);
	     -moz-transform: rotate(270deg);
	     -o-transform: rotate(270deg);
	     writing-mode: rl-tb;
	     position: absolute;
	     font-size: 30px;
	    display:block;  
	    z-index:3999;
	 }
     @media screen and (min-width: 1024px) {
        .box-ads .close-modal {
            margin-right: 100px;
        }
     }

</style>

 <?php $this->append('scriptBottom'); ?>
    <script type="text/javascript">

    var ALERT_TITLE = "";
    var ALERT_BUTTON_TEXT = "Ok";

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

        //==================================================
        //        CHANGE Province According Country
        //==================================================
        $("#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);
                    }
                });
            }
        });

    });

    $('.owl-carousel').owlCarousel({
        loop: false,
        items: 1,
        rewindNav: false,     
        
        startPosition: 'URLHash', 
    });
    owl = $('.owl-carousel').owlCarousel();
    $(".prev").click(function () {
        owl.trigger('prev.owl.carousel');
    });
    $(".next").click(function () {
         owl.trigger('next.owl.carousel');
    });

    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 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;
        });
    } 
    
    $(function () {
        //==================================================
        //        CHANGE Date Times
        //==================================================
        $('#datepicker').datepicker({
            format: 'dd/mm/yyyy'
        });
    });
        
    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"));
    }


</script>
<?php $this->end();?>
