<style>
    #radioBtn .notActive{
        color: #3276b1;
        background-color: #fff;
    }
</style>


<div class="panel"> 
    <div class="panel-body">
        <form role="form" class="form-horizontal" action="<?= base_url('women_submit'); ?>" method="POST">
            <h2 class="text-center">Women Registration Form</h2>  
            <hr class="colorgraph">

            <div class="row">
                <div class="col-md-5 col-md-offset-3">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i aria-hidden="true"></i><strong>House Number</strong></span>
                            <select name="house_number" required class="form-control">
                                <option value="0" disabled="true" selected="true"> Select house number</option>
                               <?php if(isset($house_list) and $house_list){
                                   for($i=0;$i<count($house_list);$i++){?>
                                <option value=<?= $house_list[$i]['auto_id']?>><strong><?= $house_list[$i]['house_number']?></strong></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-offset-3">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><strong>Women Name</strong></span>
                            <input class="form-control" required name="women_name"type="text" placeholder="Please enter  women full name">

                        </div>                    
                    </div>
                </div>
            </div> 
            <div class="row"> 
                <div class="col-md-4 col-md-push-3">
                    <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>Women DOB</strong></span>
                            <input class="form-control" type="text" name="women_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-6 col-md-push-3">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><strong>Husband Name</strong></span>
                            <input class="form-control" required name="husband_name"type="text" placeholder="Please enter husband name">

                        </div>                    
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    
                    <div class="col-sm-7 col-md-7 col-md-push-3" style="margin-left: -5px">
                        <div class="input-group">
                            
                            <div id="radioBtn" class="btn-group">
                                <p class="btn btn-primary notActive" ><strong>Are you Pregnant ?</strong></p>
                                <a class="btn btn-primary active" data-toggle="happy" data-title="Y">YES</a>
                                <a class="btn btn-primary notActive" data-toggle="happy" data-title="N">NO</a>
                            </div>
                            <input type="hidden" name="pregnant_status" id="pregnant_status" value="1">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" id="lpm_date_div" style="display: block"> 
                <div class="col-md-4 col-md-push-3">
                    <div class="form-group">
                        <div class="input-group date" id="lpm_date_input_div" data-date-fromat="dd-mm-yyyy" style="color: white">
                            <span class="input-group-addon"><strong>LPM Date</strong></span>
                            <input class="form-control" type="text" name="lpm_date_input" id="lpm_date_input" 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-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
                    <?php $this->load->view('mira_alert_message'); ?>
                </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="Women Registration" class="btn btn-primary btn-lg btn-block"></div>            
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#radioBtn a').on('click', function () {
            var sel = $(this).data('title');
            var tog = $(this).data('toggle');
            $('#' + tog).prop('value', sel);
            if(sel=='Y'){
                
           
                $('#lpm_date_input').attr('required',true);
                $('#lpm_date_div').css('display','block');
                $('#pregnant_status').val(1);
            }else{
                
                $("#lpm_date_input").prop('required',false);
                $('#lpm_date_div').css('display','none');
                $('#pregnant_status').val(0);
            }
            $('a[data-toggle="' + tog + '"]').not('[data-title="' + sel + '"]').removeClass('active').addClass('notActive');
            $('a[data-toggle="' + tog + '"][data-title="' + sel + '"]').removeClass('notActive').addClass('active');
        });
        $('#lpm_date_input_div').datepicker({autoclose: true,format: 'dd-mm-yyyy'});
    });

</script>

