<style>

    .radioBtn .notActive{
        color: #3276b1;
        background-color: #fff;
    }



    .form-group input[type="checkbox"] {
        display: none;
    }

    .form-group input[type="checkbox"] + .btn-group > label span {
        width: 20px;
    }

    .form-group input[type="checkbox"] + .btn-group > label span:first-child {
        display: none;
    }
    .form-group input[type="checkbox"] + .btn-group > label span:last-child {
        display: inline-block;   
    }

    .form-group input[type="checkbox"]:checked + .btn-group > label span:first-child {
        display: inline-block;
    }
    .form-group input[type="checkbox"]:checked + .btn-group > label span:last-child {
        display: none;   
    }
    #mira-application-region{
        border: 2px solid #dddddd;
    }
    #mira-application-region > thead > tr > th,
    #mira-application-region > tbody > tr > th,
    #mira-application-region > tfoot > tr > th,
    #mira-application-region > thead > tr > td,
    #mira-application-region > tbody > tr > td,
    #mira-application-region > tfoot > tr > td {
        border: 2px solid #dddddd;

    }
    #mira-application-region{
        width: 100%;
        overflow-x: scroll;
    }



    #mira-user-detail{
        border: 2px solid #dddddd;
    }
    #mira-user-detail > thead > tr > th,
    #mira-user-detail > tbody > tr > th,
    #mira-user-detail > tfoot > tr > th,
    #mira-user-detail > thead > tr > td,
    #mira-user-detail > tbody > tr > td,
    #mira-user-detail > tfoot > tr > td {
        border: 2px solid #dddddd;

    }
    #mira-user-detail{
        width: 100%;
        overflow-x: scroll;
    }


    #admin-user-right{
        border: 2px solid #dddddd;
    }
    #admin-user-right > thead > tr > th,
    #admin-user-right > tbody > tr > th,
    #admin-user-right > tfoot > tr > th,
    #admin-user-right > thead > tr > td,
    #admin-user-right > tbody > tr > td,
    #admin-user-right > tfoot > tr > td {
        border: 2px solid #dddddd;

    }
    #admin-user-right{
        width: 100%;
        overflow-x: scroll;
    }

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

            <div class="panel">
                <div class="panel-body">

                    <table id="mira-application-region" class="table table-bordred table-striped">
                        <thead>
                            <tr>
                                <th colspan="8">
                        <div class="row" style="margin-top: 20px">
                            <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>Select Pregnant Women</span>
                                        <select id="pregnant_id" name="pregnant_id" required class="form-control">
                                            <option value="0" disabled="true" selected> Select Women</option>
                                            <?php
                                            if (isset($pregnant_list) and $pregnant_list) {
                                                for ($i = 0; $i < count($pregnant_list); $i++) {
                                                    ?>
                                                    <option value=<?= $pregnant_list[$i]['pregnant_id'] ?>> <?= $pregnant_list[$i]['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-1 col-md-push-3 spinner" id="pregnant_spinner" style="display: none;margin-top: 5px">
                                <i class="fa fa-spinner fa-spin"></i>
                            </div>
                        </div>
                        </th>
                        </tr>
                        <tr>
                            <th class="text-center text-success" colspan="2" id="women_name"><strong>Women Name:</strong></th>
                            <th class="text-center text-success" colspan="2" id="lpm_date"><strong>LPM Date:</strong></th>
                            <th class="text-center text-success current_week_submit_status" colspan="2" id="current_week_submit_status"><strong>Submit Status:</strong></th>
                            <th class="text-center text-success" colspan="2" id="current_week"><strong>Running Week:</strong></th>
                            <input type="hidden" name="week_id" id="week_id" value="">
                            <input type="hidden" name="submited_status" id="submited_status" value="">
                        </tr>
                        <tr>
                            <th colspan="6">Question List</th>
                            <th class="text-center" colspan="2">Answer</th>
                        </tr>
                        </thead>
                        <tbody>
                            <?php if (isset($question) and $question) { ?>
                            <input type="hidden" name="question_count" id="question_count" value="<?= count($question) ?>">
                            <?php for ($i = 0; $i < count($question); $i++) {
                                ?>
                                <tr>
                                    <td  colspan="6" style="margin-left: 20px"><strong><?= ($i + 1) . ': ' ?></strong><?= $question[$i]['question'] ?></td>
                                    <td class="text-center" colspan="2">
                                        <div  class="btn-group radioBtn">
                                            <a id="<?= 'radioBtnY' . $i ?>" class="btn btn-primary btn-sm notActive" data-toggle="happy" data-title="Y">YES</a>
                                            <a id="<?= 'radioBtnN' . $i ?>" class="btn btn-primary btn-sm active" data-toggle="happy" data-title="N">NO</a>
                                        </div>
                                        <input type="hidden" name=<?= 'question_ans' . $i ?> id=<?= 'question_ans' . $i ?> value="1">
                                        <input type="hidden" name=<?= 'question_id' . $i ?> id=<?= 'question_id' . $i ?> value="<?= $question[$i]['qus_id'] ?>">
                                    </td>

                                </tr>
                                <?php
                            }
                        }
                        ?>
                        </tbody>
                    </table>


                </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="Update Immunization" class="btn btn-primary btn-block"></div>            
            </div>
        </form>
    </div>
</div>





<script type="text/javascript">
    $(document).ready(function () {
        $('#pregnant_id').change(function () {
            $('#pregnant_spinner').css('display', 'block');



            $.ajax({
                url: '<?= base_url('get_current_week') ?>',
                data: {
                    pregnant_id: $(this).val()
                },
                type: "POST",
                success: function (json) {
                    var data = $.parseJSON(json);
                    if (data['status']) {
                        $('#week_id').val(parseInt(data['current_week']));
                        $("#women_name").text("Women Name: " + $("#pregnant_id option:selected").text());
                        $("#lpm_date").text("LPM Date: " + data['lpm_date']);
                        $("#current_week").text("Running Week: " + data['current_week']);
                        if(data['submit_status']){
                          $('.current_week_submit_status').removeClass('text-warning').addClass('text-success');  
                          $("#current_week_submit_status").text("Submit Status: Submited");
                          $('#submited_status').val(1);
                        }else{
                           $('.current_week_submit_status').removeClass('text-success').addClass('text-warning');  
                           $("#current_week_submit_status").text("Submit Status: Pending...");
                           $('#submited_status').val(0);
                        }
                       
                        
                        
                    }
                },
                error: function (xhr, status, errorThrown) {

                    $('#pregnant_spinner').css('display', 'none');
                },
                complete: function (xhr, status) {
                    $('#pregnant_spinner').css('display', 'none');
                }
            });
        });




        $('#radioBtnY0').on('click', function () {
            $('#question_ans0').val(parseInt(2));
            $('#radioBtnN0').removeClass('active').addClass('notActive');
            $('#radioBtnY0').removeClass('notActive').addClass('active');
        });
        $('#radioBtnN0').on('click', function () {
            $('#question_ans0').val(parseInt(1));
            $('#radioBtnY0').removeClass('active').addClass('notActive');
            $('#radioBtnN0').removeClass('notActive').addClass('active');

        });




        $('#radioBtnY1').on('click', function () {
            $('#question_ans1').val(parseInt(2));
            $('#radioBtnN1').removeClass('active').addClass('notActive');
            $('#radioBtnY1').removeClass('notActive').addClass('active');
        });
        $('#radioBtnN1').on('click', function () {
            $('#question_ans1').val(parseInt(1));
            $('#radioBtnY1').removeClass('active').addClass('notActive');
            $('#radioBtnN1').removeClass('notActive').addClass('active');

        });





        $('#radioBtnY2').on('click', function () {
            $('#question_ans2').val(parseInt(2));
            $('#radioBtnN2').removeClass('active').addClass('notActive');
            $('#radioBtnY2').removeClass('notActive').addClass('active');
        });
        $('#radioBtnN2').on('click', function () {
            $('#question_ans2').val(parseInt(1));
            $('#radioBtnY2').removeClass('active').addClass('notActive');
            $('#radioBtnN2').removeClass('notActive').addClass('active');

        });



        $('#radioBtnY3').on('click', function () {
            $('#question_ans3').val(parseInt(2));
            $('#radioBtnN3').removeClass('active').addClass('notActive');
            $('#radioBtnY3').removeClass('notActive').addClass('active');
        });
        $('#radioBtnN3').on('click', function () {
            $('#question_ans3').val(parseInt(1));
            $('#radioBtnY3').removeClass('active').addClass('notActive');
            $('#radioBtnN3').removeClass('notActive').addClass('active');

        });



        $('#radioBtnY4').on('click', function () {
            $('#question_ans4').val(parseInt(2));
            $('#radioBtnN4').removeClass('active').addClass('notActive');
            $('#radioBtnY4').removeClass('notActive').addClass('active');
        });
        $('#radioBtnN4').on('click', function () {
            $('#question_ans4').val(parseInt(1));
            $('#radioBtnY4').removeClass('active').addClass('notActive');
            $('#radioBtnN4').removeClass('notActive').addClass('active');

        });


    });
</script>
