<div class="panel"> 
    <div class="panel-body">
        <form role="form" class="form-horizontal" action="<?= base_url('registration'); ?>" method="POST">
            <h2 class="text-center">Employee Registration Form</h2>  
            <hr class="colorgraph">
            <div class="row">
                <div class="col-md-6 col-md-push-2">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-user fa-fw" aria-hidden="true"></i></span>
                            <input class="form-control" required name="full_name"type="text" placeholder="Full Name">
                        </div>                    
                    </div>
                </div>
            </div>           
            <div class="row">
                <div class="col-md-6 col-md-push-2">
                    <div class="form-group"> 
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-envelope fa-fw" aria-hidden="true"></i></span>
                            <input class="form-control" type="email" required name="email" placeholder="Email ID">
                        </div>                    
                    </div> 
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-md-push-2">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i aria-hidden="true">Gender</i></span>
                            <select name="gender" required class="form-control">
                                <option value="0" disabled="true" selected="true"> Select Gender</option>
                                <option value="1"> Male</option>
                                <option value="2"> Female</option>
                                <option value="3">Other</option>
                            </select>
                            <span class="input-group-addon"><i class="fa fa-level-down"aria-hidden="true"></i></span>
                        </div>                    
                    </div> 
                </div>

                <div class="col-md-4 col-md-push-2" style="margin-left: 10px">
                    <div class="form-group">
                        <div class="input-group date" id="date_birth" data-date-fromat="dd-mm-yyyy" style="color: white">
                            <span class="input-group-addon"><strong>DOB</strong></span>
                            <input class="form-control" type="text" name="dob" required placeholder="dd-mm-yyyy">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        </div>                    
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-md-push-2">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-sign-in fa-fw" aria-hidden="true"></i></span>
                            <input id="login-id" name="login_id" required class="form-control" type="text" placeholder="Choose Login ID">
                        </div>                    
                    </div> 


                </div>
                <div id="user-id-valid" class="col-md-4 col-md-push-2" style="display: none">
                    <span class="text-success">
                        <i class="fa fa-check fa-2x"></i>
                    </span>
                    <span class="text-success">
                        <strong>Available</strong>
                    </span>
                </div>
                <div id="user-id-invalid" class="col-md-4 col-md-push-2" style="display: none">
                    <span class="text-danger">
                        <i class="fa fa-remove fa-2x"></i>
                    </span>
                    <span class="text-danger">
                        <strong>OOPS! Already exist.</strong>
                    </span>

                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-md-push-2">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
                            <input class="form-control" type="password" name="password" required placeholder="Choose Password">
                        </div>                    
                    </div> 
                </div>
                <div class="col-md-4 col-md-push-2" style="margin-left: 10px">
                    <div class="form-group">
                        <div class="input-group">

                            <span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>

                            <input class="form-control" type="password" name="confirm_password" required placeholder="Confirm Password">
                        </div>                    
                    </div> 
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-md-push-2">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-phone-square fa-fw" aria-hidden="true"></i></span>
                            <span class="input-group-addon">+91</span>
                            <input class="form-control" type="text" name="mobile" placeholder="Mobile Number" maxlength="10" min="10">
                        </div>                    
                    </div>
                </div>

                <div class="col-md-4 col-md-push-2" style="margin-left: 10px">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i aria-hidden="true">User Level</i></span>
                            <select name="user_level" required class="form-control">
                                <option value="0" disabled="true" selected="true"> Select Level</option>
                                <?php for ($i = 0; $i < count($user_levels); $i++) { ?>
                                    <option value=<?= $user_levels[$i]['hierar_level_id'] ?>> <?= $user_levels[$i]['hierar_level_name'] ?></option>
                                <?php } ?>

                            </select>
                            <span class="input-group-addon"><i class="fa fa-level-down"aria-hidden="true"></i></span>
                        </div>                    
                    </div> 
                </div>
            </div>
            <div class="row">

            </div>
            <div class="row">
                <div class="col-md-4 col-md-push-2">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i aria-hidden="true"></i><stron>Country</stron></span>
                            <select id="country" name="country" required class="form-control">
                                <option value="0" disabled="true" selected="true"> Select Country</option>
                                <?php for ($i = 0; $i < count($country); $i++) { ?>
                                    <option value=<?= $country[$i]['country_id'] ?>> <?= $country[$i]['country_name'] ?></option>
                                <?php } ?>
                            </select>
                            <span class="input-group-addon"><i class="fa fa-level-down"aria-hidden="true"></i></span>
                        </div>                    
                    </div> 
                </div>
                <div class="col-md-4 col-md-push-2" style="margin-left: 10px">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i aria-hidden="true">State</i></span>
                            <select id="state" name="state" required class="form-control">
                                <option value="0" disabled="true" selected="true"> Select State</option>

                            </select>
                            <span class="input-group-addon"><i class="fa fa-level-down"aria-hidden="true"></i></span>
                        </div>                    
                    </div> 

                </div>
                <div class="col-md-1 col-md-push-2 spinner" id="state_spinner" style="display: none;margin-top: 5px">
                    <i class="fa fa-spinner fa-spin"></i>
                </div>

            </div>
            <div class="row">
                <div class="col-md-4 col-md-push-2">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i aria-hidden="true">District</i></span>
                            <select id="district" name="district" required class="form-control">
                                <option value="0" disabled="true" selected="true"> Select district</option>

                            </select>
                            <span class="input-group-addon"><i class="fa fa-level-down"aria-hidden="true"></i></span>
                        </div>                    
                    </div> 
                   
                </div>
                <div class="col-md-3 col-md-push-2" style="margin-left: 10px">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i aria-hidden="true">Pin Code</i></span>
                            <input class="form-control" type="text" required name="pincode" placeholder="PinCode" maxlength="6" min="6">
                        </div>                    
                    </div> 
                </div>

            </div>
            <div class="row">
                <div class="col-md-6 col-md-push-2">
                    <div class="form-group">
                        <textarea name="complete_address" required class="form-control" placeholder="Complete Address"></textarea>    
                    </div> 
                </div>
            </div>
            <hr class="colorgraph">
            <div class="row">
                <div class="col-xs-8 col-md-4 col-md-offset-4 col-xs-offset-2"><input type="submit" value="Register" class="btn btn-primary btn-lg btn-block"></div>            
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#login-id').change(function () {
            $.ajax({
                url: '<?= base_url('checkId') ?>',
                data: {
                    user_id: $(this).val()
                },
                type: "POST",
                success: function (json) {
                    var states = $.parseJSON(json);
                    if(states['check']){
                        $('#user-id-invalid').css('display', 'none');
                        $('#user-id-valid').css('display', 'block');
                        
                    }else{
                        $('#user-id-valid').css('display', 'none');
                        $('#user-id-invalid').css('display', 'block');
                        
                    }
                    
                    
               }
            });
            
        });
        $('#country').change(function () {
            $('#state').children('option:not(:first)').remove();
            $('#state_spinner').css('display', 'block');
            $.ajax({
                url: '<?= base_url('getState') ?>',
                data: {
                    country_code: $(this).val()
                },
                type: "POST",
                success: function (json) {
                    var states = $.parseJSON(json);
                    for (var i = 0; i < states['state'].length; i++) {
                        $("#state").append($("<option></option>").val(states['state'][i]['state_code']).html(states['state'][i]['state_name']));
                    }
                    $('#state_spinner').css('display', 'none');
                },
                error: function (xhr, status, errorThrown) {
                    $('#state_spinner').css('display', 'none');
                },
                complete: function (xhr, status) {
                    $('#state_spinner').css('display', 'none');
                }
            });

        });
        // This script get district.
        $('#state').change(function () {
            $('#district').children('option:not(:first)').remove();
             $('#state_spinner').css('display', 'block');
            $.ajax({
                url: '<?= base_url('getDistrict')?>',
                data: {
                    state_code: $(this).val()
                },
                type: "POST",
                success: function (json) {
                    var states = $.parseJSON(json);
                    for (var i = 0; i < states['district'].length; i++) {
                        $("#district").append($("<option></option>").val(states['district'][i]['district_code']).html(states['district'][i]['district_name']));
                    }
                     $('#state_spinner').css('display', 'none');
                },
                error: function (xhr, status, errorThrown) {
                     $('#state_spinner').css('display', 'none');
                },
                complete: function (xhr, status) {
                     $('#state_spinner').css('display', 'none');
                }
            });

        });
    });
</script>

