<div class="panel"> 
    <div class="panel-body">
        <form role="form" class="form-horizontal" action="<?= base_url('addDistrict'); ?>" method="POST">
            <h2 class="text-center">Add District</h2>  
            <hr class="colorgraph">
            <div class="row">
                <div class="col-md-6 col-md-push-3">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i aria-hidden="true"></i><strong>Select Country</strong></span>
                            <select id="country_code" name="country_code" 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>
            <div class="row">
                <div class="col-md-6 col-md-push-3">
                    <div class="form-group">
                        <div class="input-group">
                            
                            <span class="input-group-addon"><i aria-hidden="true"></i><strong>Select State</strong></span>
                            <select id="state_code" name="state_code" 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-3 spinner" id="district_spinner" style="display: none;margin-top: 5px">
                    <i class="fa fa-spinner fa-spin"></i>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-push-3">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><strong>Enter District Name</strong></span>
                            <input name="district" class="form-control" type="text" placeholder="Enyer District Name">
                        </div>                    
                    </div>
                </div>
            </div>           
            <div class="row">
                <div class="col-md-6 col-md-push-3">
                    <div class="form-group"> 
                        <div class="input-group">
                            <span class="input-group-addon"><strong>Enter District Code</strong></span>
                            <input name="district_code" class="form-control" type="text" placeholder="Enter district code">
                        </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="ADD" class="btn btn-primary btn-lg btn-block"></div>            
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#login-id').change(function () {
            $('#user-id-valid').css('display', 'block');
        });

        $('#country_code').change(function () {
            $('#state_code').children('option:not(:first)').remove();
            $('#district_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_code").append($("<option></option>").val(states['state'][i]['state_code']).html(states['state'][i]['state_name']));
                    }
                    $('#district_spinner').css('display', 'none');
                },
                error: function (xhr, status, errorThrown) {
                    $('#state_spinner').css('display', 'none');
                },
                complete: function (xhr, status) {
                    $('#state_spinner').css('display', 'none');
                }
            });

        });
    });
</script>

