<div class="col-xs-12" data-hash="box-add-card" id="box-add-card">
    <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">
        <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 right"></div>

    <div class="">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <?php echo $this->Form->create('UserCards', [
                        'id' => 'frmSignIn', 
                        'type' => 'file', 
                        'onsubmit' => 'return check();',
                        'url' => ['controller' => 'user-cards', 'action' => 'view-card']
                        ]); ?>
            <div class="form-group has-feedback">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <?php echo $this->Flash->render(); ?>
                    <?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']); ?>
                    <?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']); ?>
                    <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"><?php echo __('Check') ?></button>
            </div>
            <?php echo $this->Form->end(); ?>
        </div>
        <!--/.col-xs-12 -->
    </div>
    <!--/.row -->
</div>
<!--/.col-xs-12 -->




<?php $this->append('scriptBottom'); ?>
<script type="text/javascript">
    var organize_id = $("#organize_id");
    var employee = $("#employee");
    var date = $("#date");
    $(document).ready(function () {

        $("#organize_code").on('change', function () {
            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('');
                        $("#noorg_th").text("<?php echo __('Register with') ?>" + data[0]['org_name_th'] + "<?php echo __('already') ?>");
                        $("#nameorg_th").text('');
                        $('#employee').attr("disabled", true);
                        organize_id.val('');
                        employee.val('');
                    } else if (data['chkuser'] == false) {
                        $("#nameorg_th").text('');
                        $("#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('');
                    $("#noorg_th").text("<?php echo __('Data not found') ?>");
                    $("#nameorg_th").text('');
                    $("#noepm_th").text('');
                    $("#nameemp_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('');
                        $("#noepm_th").text("<?php echo __('Registered') ?>");
                        $("#nameemp_th").text('');
                        $('#date').attr("disabled", true);
                        date.val('');
                    } else if (data['chkuser'] == false) {
                        $("#nameemp_th").text('');
                        $("#nameemp_th").text(data['prefix_name_th'] + data['firstname_th'] + ' ' + data['lastname_th']);
                        $("#noepm_th").text('');
                        $("#date").removeAttr("disabled");
                    }
                } else {
                    $("#noepm_th").text('');
                    $("#noepm_th").text('<?php echo __('"Did not find the information you need", Please enter the correct information and press the check.') ?>');
                    $("#nameemp_th").text('');
                    $('#date').attr("disabled", true);
                    date.val('');
                }
            });
        });

        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);

    });

    function check() {
        if ($("#organize_code").val() == '') {
            alert("<?php echo __('Please enter Company Code') ?>");
            organize_id.focus();
            return false;
        }
        if (employee.val() == '') {
            alert("<?php echo __('Please enter Ref1') ?>");
            employee.focus();
            return false;
        }
        if (date.val() == '') {
            alert("<?php echo __('Please enter Ref2') ?>");
            date.focus();
            return false;
        }
    }
</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;
        }


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