<?php
use Cake\I18n\Time;
?>
<div class="owl-carousel owl-theme" data-plugin-options="{'items': 1}">	
	<?php foreach ($UserCards as $value) { #pr($value);die;?>
		<div class="row">
		    <div class="col-xs-1 col-sm-1 col-md-1 box-arrow">
			    <div>
		            <i class = "fa fa-angle-left prev" > </i>
	        	</div>
		    </div>
		    <div class="col-xs-9 col-sm-9 col-md-9 box-card">
			<div data-toggle="modal" data-target="#defaultModal" style="cursor: pointer; padding-right: 10px; padding-left: 10px;">
		    	<div class="row">
		    		<!-- <div class="col-xs-1">
		    		</div> -->
		    		<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">ชื่อ</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-1">
		    		</div>		    		 -->
		    		<div class="col-xs-10">
		    			<label style="font-size: 17px">ตำแหน่ง</label> <?php echo $value['position_name'] ?>
		    		</div>
		    	</div>
		    	<div class="row text-center">
		    		<!-- <div class="col-xs-1">
					</div> -->
					<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-1">
		    		</div> -->
		    		<div class="col-xs-6">
		    			<label style="font-size: 17px">วันออกบัตร</label>
		    		</div>
		    		<div class="col-xs-6">
		    			<label style="font-size: 17px">วันหมดออายุ</label>
		    		</div>		    		
		    	</div>
			</div>
		    </div>
			<!--/.box-card -->
		    <div class="col-xs-1 col-sm-1 col-md-1 box-arrow">
			    <div>
		            <i class = "fa fa-angle-right next" ></i>
	        	</div>
		    </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>ข้อมูลบริษัท</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">ชื่อ</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">นามสกุล</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">ชื่อบริษัท</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">แผนก</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">ตำแหน่ง</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">วันที่ออกบัตร</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">วันที่หมดอายุ</label>
		            	<?php 
	                        $now = new Time($value['date_expiry']);
	                        $dateExpiry = $now->i18nFormat('yyyy-MM-dd');
	                        echo $this->DateFormat->formatDateThai($dateExpiry);                  
	                    ?>
		            </div>
		        </div>
		    </div>
		</div>
	<?php } ?>
	<div class="row">
		<div class="col-xs-1 col-sm-1 col-md-1 box-arrow">
		    <i class = "fa fa-angle-left prev" > </i>
		</div>
		<div class="col-xs-9 col-sm-9 col-md-9">
			<img src="/img/core/img/bloc-plus@3x.png" class="img-responsive" style="width: 100%">
		</div>
		<div class="col-xs-1 col-sm-1 col-md-1 box-arrow"></div>
		<div class="row">
		    <div class="col-xs-12 col-sm-12 col-md-12">
		        <?php echo $this->Form->create('UserCards', ['id' => 'frmSignIn', 'type' => 'file', 'onsubmit' => 'return check();']); ?>
		        <div class="form-group has-feedback">
		            <div class="col-xs-12 col-sm-12 col-md-12">
		                <?php echo $this->Form->hidden('UserCards.user_id', ['class' => 'form-control-reg border-bottom-from label-text-sub required', 'id' => 'userId', 'type' => 'text', 'placeholder' => 'USERNAME']); ?>
		                <?php echo $this->Form->hidden('UserCards.organize_id', ['class' => 'form-control-reg border-bottom-from label-text-sub required', 'id' => 'organize_id', 'type' => 'text', 'label' => __('ไอดีใช้งาน'), 'placeholder' => 'USERNAME', 'required']); ?>
		                <?php echo $this->Form->input('UserCards.organize_code', ['class' => 'form-control-reg border-bottom-from label-text-sub required', 'id' => 'organize_code', 'type' => 'text', 'label' => __('Company Code'), 'placeholder' => 'Company Code', 'required']); ?>
		                <label id = "nameorg_th" style="color: green"></label>
		                <label id = "noorg_th" style="color: red"></label>
		            </div>
		        </div>
		        <div class="form-group has-feedback">
		            <div class="col-xs-12 col-sm-12 col-md-12">
		                <?php echo $this->Form->input('UserCards.employee', ['class' => 'form-control-reg border-bottom-from label-text-sub required', 'id' => 'employee', 'type' => 'text', 'label' => __('Ref 1'), 'placeholder' => 'Ref 1', 'disabled']); ?>
		            	<label id = "nameemp_th" style="color: green"></label>
		                <label id = "noepm_th" style="color: red"></label>
		            </div>
		        </div>
		        <div class="form-group has-feedback bootstrap-iso">
		            <div class="col-xs-12 col-sm-12 col-md-12">
		                <label class="label-text-sub"><?php echo __('Ref 2');?></label>
		                <input type="text" name="UserCards[birthdate]" id="date" placeholder="Ref 2" value="" readonly placeholder="DD-MM-YYYY" data-date-format="mm/dd/yyyy" class="form-control-reg border-bottom-from" disabled>
		                <span class="glyphicon glyphicon-calendar form-control-feedback"></span>
		            </div>
		        </div>
		        <div>
		            <button type="submit" class="btn btn-quaternary mr-xs mb-sm button-text-profile" id="checkbutton">ตรวจสอบ</button>
		        </div>
		        <?php echo $this->Form->end(); ?>
		    </div>
		</div>
	</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 = "">
						<div class="owl-carousel owl-theme" data-plugin-options="{'items': 1}">
							<div class = "row rotate270 form_1">
								<?php echo $this->Html->image('/img/core/img/card-bg-front@3x.png', array('div' => false, 'class' => 'img-responsive img-rounded','style' => 'position: absolute;')); ?>
								<div class="row date-name">
									<!-- <div class="col-xs-1">
									</div> -->
									<div class="col-xs-8 ">
										<br>
										<div>
											<label>id</label>
										</div>
										<div>
											<?php echo $value['card_code'] ?>
										</div>
										<div>
											<labe>ชื่อ</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 date-position">
									<!-- <div class="col-xs-1">
									</div>		    		 -->
									<div class="col-xs-12">
										<label>ตำแหน่ง</label> <?php echo $value['position_name'] ?>
									</div>
								</div>
								<div class="row text-center date-time">
									<!-- <div class="col-xs-1">
									</div> -->
									<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 date-label">
									<!-- <div class="col-xs-1">
									</div> -->
									<div class="col-xs-6">
										<label>วันออกบัตร</label>
									</div>
									<div class="col-xs-6">
										<label>วันหมดออายุ</label>
									</div>		    		
								</div>
							</div>
							<!--/ .font-card-->
							<div>
								<?php  echo $this->Html->image('/img/core/img/card-bg-back@3x.png', array('div' => false, 'class' => 'img-responsive img-rounded','style' => '3position: absolute;')); ?>
							</div>
							<!--/ .back-card-->
						</div>
						<!--/.owl-carousel-->
					</div>
				</div>
		    </div>
		</div>
	</div>
</div>

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

<style>
.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-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;
    }

.rotate270 .row{
 	-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
	position: absolute;
	font-size: 30px;
}



.form_1 .date-name{
	width: 500px;
	margin: 55% 0% 0% -40%;
	border-bottom:0px solid red;
}

.date-name div div{
	height:35px;
}

.form_1 .date-position{
	width: 500px;
	margin: 70% 0% 0% -15%;
	border-bottom:0px solid #000;
}

.form_1 .date-time{
	width: 500px;
	margin: 70% 0% 0% 10%;
	border-bottom:0px solid #000;
}

.form_1 .date-label{
	width: 500px;
	margin: 70% 0% 0% 20%;
	border-bottom:0px solid #000;
}
</style>

<?php $this->append('scriptBottom'); ?>
<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">
	$('.owl-carousel').owlCarousel({
		loop:false,
	    items:1,
		rewindNav : false,
		onTranslated:callBack
	});
	owl = $('.owl-carousel').owlCarousel();
	$(".prev").click(function () {
	    owl.trigger('prev.owl.carousel');
	});

	$(".next").click(function () {
	    owl.trigger('next.owl.carousel');
	});

	function callBack(){
	    if($('.owl-carousel .owl-item').last().hasClass('active')){
	        $('.next').hide();
	        $('.prev').show(); 
	        
	    }else if($('.owl-carousel .owl-item').first().hasClass('active')){
	        $('.prev').hide(); 
	        $('.next').show();    
	    }
	}

	var organize_id = $("#organize_id");
    var employee = $("#employee");
    var date = $("#date");
    $(document).ready(function() {
        $("#organize_code").on('change',function(){
        	// alert(moment("05/22/2012", 'MM/DD/YYYY',true).isValid()); //true
            var organize_code = $("#organize_code").val();
            $('#employee').attr("disabled",true);
            $('#date').attr("disabled",true);
            $('#checkbutton').attr("disabled",true);
            organize_id.val('');
            employee.val('');
            date.val('');
            $.post("/UserCards/checkOrg", {organize_code: organize_code}, function(data) {
                if(data!='false'){
                	data = jQuery.parseJSON(data);
                    if(data['chkuser'] == true){
                        $("#noorg_th").text('ลงทะเบียนกับ '+data[0]['org_name_th']+' แล้ว');
                        $("#nameorg_th").text('');
                        $('#employee').attr("disabled",true);
                        organize_id.val('');
                        employee.val('');
                    }else if(data['chkuser'] == false){
                        $("#nameorg_th").text(data[0]['org_name_th']);
                        $("#noorg_th").text('');
                        $("#checkbutton").removeAttr("disabled");
                        $("#employee").removeAttr("disabled");
                        organize_id.val(data[0]['id']);
                    }
                }else{
                    $("#noorg_th").text('ไม่พบข้อมูล');
                    $("#nameorg_th").text('');
                    $('#employee').attr("disabled",true);
                    organize_id.val('');
                    employee.val('');
                }
            });
        });
        $("#employee").on('change',function(){
            var employee_val = employee.val();
            var organize_code = $("#organize_code").val();
            $('#date').attr("disabled",true);
            date.val('');
            $.post("/UserCards/checkEmp", {employee_val: employee_val,organize_code: organize_code}, function(data) {
                if(data!='false'){
                	data = jQuery.parseJSON(data);
                    if(data['chkuser'] == true){
                        $("#noepm_th").text('ลงทะเบียนแล้ว');
                        $("#nameemp_th").text('');
                        $('#date').attr("disabled",true);
                        date.val('');
                    }else if(data['chkuser'] == false){
                        $("#nameemp_th").text(data['prefix_name_th']+data['firstname_th']+' '+data['lastname_th']);
                        $("#noepm_th").text('');
                        $("#date").removeAttr("disabled");
                    }
                }else{
                    $("#noepm_th").text('"ไม่พบข้อมูลที่ต้องการ" กรุณากรอกรหัสข้อมูลที่ถูกต้องและกดตรวจสอบ');
                    $("#nameemp_th").text('');
                    $('#date').attr("disabled",true);
                    date.val('');
                }
            });
        });
    });
    function check() {
        if (employee.val() == '') {
        	alert('กรุณากรอก Ref1');
            employee.focus();
            return false;
        }
        if (date.val() == '') {
        	alert('กรุณากรอก Ref2');
            date.focus();
            return false;
        }
    }
    $(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>
<?php $this->end();?>