<div class="panel"> 
    <div class="panel-body">
        <form role="form" class="form-horizontal" action="<?= base_url('assign_vaccine_planner_submit'); ?>" method="POST">
            <h2 class="text-center">Assign&nbsp;Vaccine&nbsp;Planner&nbsp;Form</h2>  
            <hr class="colorgraph">
           
            <div class="row">
                <div class="col-md-8 col-md-push-2">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i aria-hidden="true">Select&nbsp;Application</i></span>
                            <select name="applicationId" required class="form-control">
                                <option value="0" disabled="true" selected="true"> Select&nbsp;Application</option>
                                <?php for($i=0;$i<count($application);$i++){ ?>
                                    <option value="<?=$application[$i]['appId']?>"> <?=$application[$i]['appName']?></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 class="col-md-8 col-md-push-2">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i aria-hidden="true">Select&nbsp;Planner</i></span>
                            <select name="plannerId" required class="form-control">
                                <option value="0" disabled="true" selected="true"> Select&nbsp;Planner</option>
                               <?php for($j=0;$j<count($planner);$j++){ ?>
                                    <option value="<?=$planner[$j]['plannerId']?>"> <?=$planner[$j]['plannerName']?></option>
                               <?php }?>
                              
                            </select>
                            <span class="input-group-addon"><i class="fa fa-level-down"aria-hidden="true"></i></span>
                        </div>                    
                    </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="Assign Planner" 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>

