@extends('layouts.app')

@section('style')
    <style>
        .clo_se {
            background-image: url({{ asset('public/bac2.png') }});
            background-repeat: no-repeat;
            background-size: cover;
            height: 100vh;
        }

        .w_m {
            width: 50%;
            height: 40px;
            margin: 5px;
        }

        .b_te {
            color: #333;
            padding-bottom: 15px;
            font-size: 16px;
            font-weight: 600;
        }

        .file_ul {
            width: 200px;
        }

        .co_de {
            width: 25%;
            padding: 5px;
        }

        .mo_bq {
            width: 43%;
            height: 36px;
        }

        .ra_io {
            margin-right: 5px;
            margin-top: 6px;
        }

        .bxe {
            float: left;
            margin-bottom: 15px;
            padding-top: 15px;
            background: #fff;
            padding: 8px;
            height: 56px;
            margin-left: 1%;
            width: 32%;
            border-radius: 8px;
        }

        .main_b {
            padding-top: 250px;
        }

        .p_e {
            text-align: center;
            line-height: 41px;
            font-size: 18px;
            font-weight: 600;
            color: #6d6d6d;
        }

        .b_tn {
            color: #fff;
            font-weight: 600;
            border-radius: 0px;
            background: #4042e2;
            width: 150px;
        }

        .di_sp {
            background: #fff;
            margin-top: -149px;
            border-radius: 8px;
            padding: 10px;
            height: 400px;
        }

        .s_p {
            color: #484848;
            text-shadow: 2px 5px 8px #00000026;
            text-align: center;
            font-size: 17px;
        }
        .si_fd{width: 100%: height:33px; border: 1px dotted #f90;}

        @media screen and (min-width: 320px) and (max-width: 767px) {
            .bxe {
                margin-left: 0%;
                width: 100%;
            }

            .main_b {
                padding-top: 135px;
                margin-top: 0px;
            }
        }

    </style>
@endsection


@section('contect')


    <div class="container">

        <div class="col-md-12 ">


            @if (Session::has('flash_message'))
                <br/>
                <div class="alert alert-danger alert-dismissable">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    <strong>{{ Session::get('flash_message' ) }}</strong>
                </div>
            @endif


            <form name="frmQuestion" id="save_question_form" action="{{ url('save_role_question') }}"
                  enctype="multipart/form-data" method="post"
                  onsubmit="return validate_answer();">


                <div class="di_sp">
                    <div class="form-group" style="margin-top:100px;margin-left:250px;">
                        <div id="optionError"></div>
                        @if(isset($questionInfo[0]))
                            <div class="col-md-25">
                                <div class="b_te">{{ $questionInfo[0]->question }}</div>
                            </div>
                            <input type="hidden" id="question_type" value="{{ $questionInfo[0]->question_type }}">
                            @if($questionInfo[0]->question_type=='radio')
                                <div class="col-md-25 input-group">
                                    <input type="radio" class="ra_io" class="ra_io" name="options"
                                           id="options_{{ $questionInfo[0]->option1 }}"
                                           value="{{ $questionInfo[0]->option1 }}">{{ $questionInfo[0]->option1 }}
                                    &nbsp;&nbsp;
                                    <input type="radio" class="ra_io" name="options"
                                           id="options_{{ $questionInfo[0]->option2 }}"
                                           value="{{ $questionInfo[0]->option2 }}">{{ $questionInfo[0]->option2 }}
                                    &nbsp;&nbsp;

                                    <div id="optionText" style="color:red;"></div>
                                </div>
                            @else
                                <div class="col-md-25">
                                    <input type="text" name="options" class="options si_fd" style=""
                                           value="">
                                </div>
                            @endif
                        @endif

                        <div class="col-md-12 bt_ng">@csrf
                            <input type="hidden" name="ques_id" id="ques_id"
                                   value="{{ isset( $questionInfo[0]) ?  $questionInfo[0]->id : '' }}">
                            <input type="hidden" name="user_id" id="user_id"
                                   value="{{ $user_id }}">
                            <input type="hidden" name="email" id="email" value="{{ $email }}">
                            <button type="submit" id="save_question"
                                    class="btn btn-primary b_tn pull-right">Next
                            </button>
                        </div>
                    </div>
                </div>

            </form>

        </div>
    </div>

@endsection
@section('scripts')
    <script src="{{ URL::asset('frontend/js/jquery.validate.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function () {

        });

        function validate_answer() {
            if ($('#question_type').val() == 'radio') {
                var options = $('input[name="options"]:checked').val();
                if (options == "" && options != 'undefined') {
                    $("#optionText").text("Please select at least one option.");
                    return false;
                }
            } else {
                if ($('#options').val() == '') {
                    $("#optionText").text("Please enter your answer.");
                    return false;
                }
            }

            return true;
        }


    </script>

@endsection

