@extends('master')

@section('title')
    <title>Create Question</title>
@endsection

@section('content')

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <!-- Page Heading -->
    <h1 class="h3 mb-1 text-gray-800">Add Question</h1>
    <br>

    <!-- Content Row -->
    <div class="row">

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

            <!-- Overflow Hidden -->
            <div class="card mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Add New Question</h6>
                </div>
                <div class="card-body">

                    <form role="form" enctype="multipart/form-data" method="post" id="surveyor_form" name="surveyor_form" action="/admin/questions">
                        <input type="hidden" name="_token" value="{{ csrf_token()}}"/>
                        <h6>Question Info</h6>
                        <br>
                        <div class="form-group row">
                            <div class="col-sm-3 mb-3 mb-sm-0 text-right">
                                <label for="">Question EN<span style="color:red">*</span></label>
                            </div>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="question_en" name="question_en" placeholder="Question EN" value ="{{old('question_en') }}" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-3 mb-3 mb-sm-0 text-right">
                                <label for="">Question CN<span style="color:red">*</span></label>
                            </div>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="question_cn" name="question_cn" placeholder="Question CN" value ="{{old('question_cn') }}" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-3 mb-3 mb-sm-0 text-right">
                                <label for="">Question BM<span style="color:red">*</span></label>
                            </div>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="question_bm" name="question_bm" placeholder="Question BM" value ="{{old('question_bm') }}" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-3 mb-3 mb-sm-0 text-right">
                                <label for="">Type<span style="color:red">*</span></label>
                            </div>
                            <div class="col-sm-9">
                                <select class="form-control"  id="type" name="type" onchange="typeChange(this.value)">
                                    <option value="multi">Multiple Choice</option>
                                    <option value="text">Text Input</option>
                                    <option value="dropdown">Dropdown</option>
                                </select>
                            </div>
                            <div class="col-sm-3 mb-3 mb-sm-0 text-right choices">

                            </div>
                            <div class="col-sm-9 choices" style="color:#8815b7;">
                                <small>Input Format : Value-Display|Value2-Display2</small><br>
                                <small>eg. yes-Yes|no-No</small>
                            </div>
                        </div>
                        <div class="form-group row choices">
                            <div class="col-sm-3 mb-3 mb-sm-0 text-right">
                                <label for="">Choice EN<span style="color:red">*</span></label>
                            </div>
                            <div class="col-sm-9">
                                <input type="text" class="form-control choices_input" id="choice_en" name="choice_en" placeholder="Choice EN" value ="{{old('choice_en') }}" required>
                            </div>
                        </div>

                        <div class="form-group row choices">
                            <div class="col-sm-3 mb-3 mb-sm-0 text-right">
                                <label for="">Choice CN<span style="color:red">*</span></label>
                            </div>
                            <div class="col-sm-9">
                                <input type="text" class="form-control choices_input" id="choice_cn" name="choice_cn" placeholder="Choice CN" value ="{{old('choice_cn') }}" required>
                            </div>
                        </div>

                        <div class="form-group row choices">
                            <div class="col-sm-3 mb-3 mb-sm-0 text-right">
                                <label for="">Choice BM<span style="color:red">*</span></label>
                            </div>
                            <div class="col-sm-9">
                                <input type="text" class="form-control choices_input" id="choice_bm" name="choice_bm" placeholder="Choice BM" value ="{{old('choice_bm') }}" required>
                            </div>
                        </div>
                        <hr>
                        <div class="form-group row">
                            <div class="col-sm-3 mb-3 mb-sm-0 text-right"></div>
                            <div class="col-sm-9">
                                <a href="{{ url('/admin/questions') }}" class="btn btn-info">
                                    <span class="text">Back</span>
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    Create
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
<script>

    function typeChange(selected_type){
        if(selected_type == 'text'){
            $(".choices").hide();
            $(".choices_input").removeAttr('required');  //turns required off
        }else{
            $(".choices").show();
            $(".choices_input").attr('required', '');    //turns required on
        }
    }
</script>
@endsection