@extends('master')

@section('title')
    <title>Question - {{$questions->id}}</title>
@endsection

@section('content')
    @if (session('status'))
        <div class="alert alert-success">
            {{ session('status') }}
        </div>
    @endif

    @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">Update 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">Question #{{$questions->id}}</h6>
                </div>
                <div class="card-body">

                    <form role="form" method="post" enctype="multipart/form-data" id="reseller_form" name="reseller_form" action='{{url("/admin/questions/{$questions->id}")}}'>
                        @method('PUT')
                        <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 ="{{$questions->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 ="{{$questions->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 ="{{$questions->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" {{ ($questions->question_bm == "multi")? "selected" : ""}}>Multiple Choice</option>
                                    <option value="text" {{ ($questions->question_bm == "text")? "selected" : ""}}>Text Input</option>
                                    <option value="dropdown" {{ ($questions->question_bm == "dropdown")? "selected" : ""}}>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 ="{{$questions->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 ="{{$questions->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 ="{{$questions->choice_bm }}" required>
                            </div>
                        </div>
                        <hr>

                        <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>
                                @can('update_question')
                                    <button type="submit" class="btn btn-primary">
                                        Save Changes
                                    </button>
                                @endcan
                            </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