@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 !important;
        }

        .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;
        }

        @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">
        @if(isset($_GET['error']) && ($_GET['error']==1))
            <div style="color:red;">OTP did not match. Please try again</div>
        @endif
        <div class="col-md-12 ">

            <?php
            //                dd($questionInfo);
            ?>



            @if(isset($questionInfo[0]) && $questionInfo[0]->flag==8)
                    @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="upload_resume" action="{{ url('upload_resume') }}"
                      enctype="multipart/form-data"
                      method="post">
                    @elseif(isset($questionInfo[0]) && $questionInfo[0]->flag==10)
                        <form name="frmQuestion" id="save_mobile_number" action="{{ url('save_mobile_number') }}"
                              enctype="multipart/form-data"
                              method="post">
                            @else
                                <form name="frmQuestion" id="save_question_form" action="{{ url('save_question') }}"
                                      enctype="multipart/form-data" method="post"
                                      onsubmit="return validate_answer();">
                                    @endif

                                    <div class="di_sp">
                                        <div class="form-group" style="margin-top:100px;margin-left:250px;">
                                            <div  id="optionError"></div>
                                            @if(isset($questionInfo[0]) && $questionInfo[0]->flag==1)
                                                <div class="col-md-25">
                                                    <div class="b_te">{{ $questionInfo[0]->question }}</div>
                                                </div>
                                                <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;
                                                    @if($questionInfo[0]->option3)
                                                        <input type="radio" name="options"  id="options_{{ $questionInfo[0]->option3 }}"
                                                               value="{{ $questionInfo[0]->option3 }}">{{ $questionInfo[0]->option3 }}
                                                        &nbsp;&nbsp;
                                                    @endif
                                                    @if($questionInfo[0]->option4)
                                                        <input type="radio" name="options"  id="options_{{ $questionInfo[0]->option4 }}"
                                                               value="{{ $questionInfo[0]->option4 }}">{{ $questionInfo[0]->option4 }}
                                                    @endif
                                                    <div id="optionText" style="color:red;"></div>
                                                </div>
                                            @endif

                                            @if(isset($questionInfo[0]) &&  $questionInfo[0]->flag==9 || $questionInfo[0]->flag==2 || $questionInfo[0]->flag==3 || $questionInfo[0]->flag==6)
                                                <div class="col-md-25">
                                                    <div class="b_te">{{ $questionInfo[0]->question }}</div>
                                                </div>
                                                <div class="col-md-25">
                                                    <select name="options" id="options_{{ $questionInfo[0]->id }}"  class="w_m">
                                                        <option value="">-Select-</option>
                                                        @foreach($educationInfo as $eduInfo)
                                                            @if($questionInfo[0]->flag==3)
                                                                <option
                                                                    value="{{ $eduInfo->id }}">{{ $eduInfo->qualification}}</option>
                                                            @else
                                                                <option
                                                                    value="{{ $eduInfo->id }}">{{ $eduInfo->city}}</option>
                                                            @endif

                                                        @endforeach
                                                    </select>
                                                    <div id="optionText" style="color:red;"></div>
                                                </div>
                                            @endif

                                            @if(isset($questionInfo[0]) && $questionInfo[0]->flag==10)
                                                <div class="col-md-25">
                                                    <div class="b_te">{{ $questionInfo[0]->question }}</div>
                                                </div>
                                                <div class="col-md-25">
                                                    <select name="country_code" id="country_code" class="co_de"
                                                            onchange="sendcountrycode(this.value)">
                                                        <option value="">Select Country Code</option>
                                                        @foreach(Dropdowns('phonePrefixCodes') as $codekey=>$codes)
                                                            <option value="{{ $codekey }}">{{ $codes }}</option>
                                                        @endforeach
                                                    </select>
                                                    <input type="text" name="mobile_number" id="mobile_number"
                                                           onkeyup="sendotp(this.value);" class="mo_bq"
                                                           style="" value="">
                                                    <div id="strOtp"></div>
                                                    <div id="mobileError" style="color:red;"></div>
                                                    <div id="countrycodeError" style="color:red;"></div>
                                                </div>
                                            @endif

                                            @if(isset($questionInfo[0]) &&  $questionInfo[0]->flag==8)
                                                <div class="col-md-25">
                                                    <div class="b_te">{{ $questionInfo[0]->question }}</div>
                                                </div>
                                                <div class="col-md-25">
                                                    <input type="file" name="file" class="file_ul" style=""
                                                           value="">
                                                </div>
                                            @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 () {

            $('#upload_resume').validate({
                ignore: [],
                errorClass: 'text-danger', // You can change the animation class for a different entrance animation - check animations page
                errorElement: 'div',
                errorPlacement: function (error, e) {
                    e.parents('.form-group').append(error);
                },
                highlight: function (e) {
                    $(e).closest('.form-group').removeClass('has-success has-error').addClass('has-error');
                    $(e).closest('.text-danger').remove();
                },
                success: function (e) {
                    // You can use the following if you would like to highlight with green color the input after successful validation!
                    e.closest('.form-group').removeClass('has-success has-error'); // e.closest('.form-group').removeClass('has-success has-error').addClass('has-success');
                    e.closest('.text-danger').remove();
                },
                rules: {
                    file: {
                        required: true
                    }
                },
                messages: {

                    file: {
                        required: 'Please select resume'
                    }
                },
            });


            $('#save_mobile_number').validate({
                ignore: [],
                errorClass: 'text-danger', // You can change the animation class for a different entrance animation - check animations page
                errorElement: 'div',
                errorPlacement: function (error, e) {
                    e.parents('.form-group').append(error);
                },
                highlight: function (e) {
                    $(e).closest('.form-group').removeClass('has-success has-error').addClass('has-error');
                    $(e).closest('.text-danger').remove();
                },
                success: function (e) {
                    // You can use the following if you would like to highlight with green color the input after successful validation!
                    e.closest('.form-group').removeClass('has-success has-error'); // e.closest('.form-group').removeClass('has-success has-error').addClass('has-success');
                    e.closest('.text-danger').remove();
                },
                rules: {
                    country_code: {
                        required: true
                    },
                    mobile_number: {
                        required: true
                    }
                },
                messages: {

                    country_code: {
                        required: 'Please select country code'
                    },
                    mobile_number: {
                        required: 'Please enter mobile number'
                    }
                },
            });


            $('#save_question_form').validate({
                ignore: [],
                errorClass: 'text-danger', // You can change the animation class for a different entrance animation - check animations page
                errorElement: 'div',
                errorPlacement: function (error, e) {
                    e.parents('.form-group').append(error);
                },
                highlight: function (e) {
                    $(e).closest('.form-group').removeClass('has-success has-error').addClass('has-error');
                    $(e).closest('.text-danger').remove();
                },
                success: function (e) {
                    // You can use the following if you would like to highlight with green color the input after successful validation!
                    e.closest('.form-group').removeClass('has-success has-error'); // e.closest('.form-group').removeClass('has-success has-error').addClass('has-success');
                    e.closest('.text-danger').remove();
                },
                rules: {
                    options: {
                        required: true
                    }
                },
                messages: {

                    options: {
                        required: 'Please select any option'
                    }
                },
            });


            $("#save_question").on('click', function () {
                var options = $("input[name='options']:checked").val();
                if (options != undefined) {
                    if (options == "No") {

                    } else {
                        var user_id = $('#user_id').val();
                        var ques_id = $('#ques_id').val();
                        $.ajax({
                            type: "POST",
                            url: "{{ url('save_question') }}",
                            data: {
                                'options': options,
                                'ques_id': ques_id,
                                'user_id': user_id,
                                "_token": "{{ csrf_token() }}"
                            },
                            cache: false,
                            success: function (data) {
                                console.log(data[0].question);
                                var stringInfo = `<div class="form-group" style="margin-top:100px;margin-left:250px;">
						<div class="col-md-25">
							<div class="b_te">` + data[0].question + `</div>
						</div>
						<div class="col-md-25 input-group">
							<input type="radio" class="ra_io" name="options_` + data[0].option1 +`" id="options" value="` + data[0].option1 + `">` + data[0].option1 + `&nbsp;&nbsp;
							<input type="radio" class="ra_io" name="options_` + data[0].option2 +`" id="options" value="` + data[0].option2 + `">` + data[0].option2 + `&nbsp;&nbsp;
							<input type="radio" class="ra_io" name="options_` + data[0].option3 +`" id="options" value="` + data[0].option3 + `">` + data[0].option3 + `&nbsp;&nbsp;
							<input type="radio" class="ra_io" name="options_` + data[0].option4 +`" id="options" value="` + data[0].option4 + `">` + data[0].option4 + `
						</div>
						<div class="col-md-12 bt_ng">@csrf
                                <input type="hidden" name="ques_id" id="ques_id" value="` + data[0].id + `">
							<input type="hidden" name="user_id" id="user_id" value="{{ $user_id }}">
							<button type="button" id="save_question" class="btn btn-primary b_tn pull-right">Next</button>
						</div>
						</div>`;
                                $('.di_sp').html(stringInfo);
                            }
                        });
                    }
                }
            });
        });

        function validate_answer() {

            var options_chk = $('input[name="options"]:checked').val();
            if (options_chk == "Non-English") {
                $("#optionError").html("sorry ! Your details are not matching criteria. Unfortunately we are not accepting your applications.<br><br>Wish You Good Luck !<br>");
                $("#optionText").text("");
                return false;
            }


            var options =$('input[name="options"]:checked').val();
            if (options == "" && options != 'undefined' ) {
                $("#optionText").text("Please select at least one option.");
                return false;
            }
            // if (options == "9") {
            //     $("#optionError").html("sorry ! Your details are not matching criteria. Unfortunately we are not accepting your applications.<br><br>Wish You Good Luck !<br>");
            //     $("#optionText").text("");
            //     return false;
            // }
            // if (options == "102") {
            //     $("#optionError").html("sorry ! Your details are not matching criteria. Unfortunately we are not accepting your applications.<br><br>Wish You Good Luck !<br>");
            //     $("#optionText").text("");
            //     return false;
            // }

            var mobile_number = $("#mobile_number").val();
            if (mobile_number == "") {
                $("#mobileError").text("Please enter mobile number.");
                return false;
            }
            var country_code = $("#country_code").val();
            if (country_code == "") {
                $("#countrycodeError").text("Please select country code.");
                return false;
            }

            return true;
        }

        function sendcountrycode(countrycode) {
            if (countrycode != '') {
                var mobile_number = $("#mobile_number").val();
                sendotp(mobile_number);
            }
        }

        function sendotp(mobile_number) {
            var country_code = $("#country_code").val();
            if (mobile_number.length == 10 && country_code != "") {
                $.ajax({
                    type: "POST",
                    url: "{{ url('send_otp') }}",
                    data: {'mobile_number': mobile_number, "_token": "{{ csrf_token() }}"},
                    cache: false,
                    success: function (data) {
                        console.log(data[0].question);

                        $("#strOtp").html('<input type="text" name="mobile_otp" placeholder="Enter Otp" value="">');
                    }
                });
            }
        }
    </script>

@endsection

