<?php 
include('../include/header.php');
include('../themes/menu.php');
?> 
<br><br><br><br>
<div style="width:80%;margin:0 auto;">
<form id="fm_reading" name="fm_reading" method="post">
    <div class="form-group">
        <label class="control-label">How do you know about us?</label>
        <select class="form-control" name="type">
            <option value="mobile">เบอร์โทรศัพท์</option>
            <option value="idcard">บัตรประชาชน</option>
        </select>
    </div>

    <div class="form-group">
        <label class="control-label">Please specify it:</label>
        <input type="text" class="form-control" name="phonenumber" />
    </div>

    <div class="form-group">
        <button type="submit" class="btn btn-default">Submit</button>
    </div>
</form>
</div>
<br><br><br><br>
<?php 
include('../themes/footer.php');
include('../include/footer_js.php');
?>   
<script>
$(document).ready(function() {
	
    $('#fm_reading')
        .bootstrapValidator({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
				
                phonenumber: {
                    validators: {
                        callback: {
                            callback: function(value, validator, $field) {
                                var channel = $('#fm_reading').find('[name="type"]').val();
								
								 if (channel == 'mobile') {
									 if (value == '') {
										return {
											valid: false,
											message: 'กรุณากรอกเบอร์โทรศัพท์'
									   };
									}else if(value.length < 10){
										return {
											valid: false,
											message: 'กรุณากรอกเบอร์โทรศัพท์ 10 หลัก'
										};
									}else if(value.length > 10){
										return {
											valid: false,
											message: 'กรุณากรอกเบอร์โทรศัพท์ 10 หลัก'
										};
									}
								}
								if (channel == 'idcard') {
									    if (value == '') {
										return {
											valid: false,
											message: 'กรุณากรอกหมายเลขบัตรประชาชน'
									   };
									}else if(value.length < 13){
										return {
											valid: false,
											message: 'กรุณากรอกหมายเลขบัตรประชาชน 13 หลัก'
										};
									}else if(value.length > 13){
										return {
											valid: false,
											message: 'กรุณากรอกหมายเลขบัตรประชาชน 13 หลัก'
										};
									}
								}
								return true;
                            }
                        }
                    }
                }
            }
        })
        .on('change', '[name="type"]', function(e) {
            $('#fm_reading').bootstrapValidator('revalidateField', 'phonenumber');
        })
        .on('success.field.fv', function(e, data) {
			
            if (data.field === 'phonenumber') {
                var channel = $('#fm_reading').find('[name="type"]').val();
                if (channel !== 'other') {
                    data.element.closest('.form-group').removeClass('has-success');
                    data.element.data('fv.icon').hide();
                }
            }
			
       });
});
</script>