@extends('layouts.master')

@section('title')
    {{isset($questionValue) ? "Update Question" : "Add Question"}}
@endsection

@section('pagetitle')
    Add Question for User survey for your clinic
@endsection


@section('content')

        <div class="container">
            <div class="card">
                <div class="card-header">
                    <h5 class="title">Add Question</h5>
                </div>

                <form action="{{isset($questionValue) ? "/updateQuestion" : "/addQuestion"}}" method="post">
                    {{csrf_field()}}

                <div class="container">
                    <div class="row">
                            <div class="col">
                                <label>Select Office</label>
                                <select id="office" name="offices[]" multiple >
                                    @for($i = 0; $i < count($officeDetails); $i++)
                                        <option value="{{$officeDetails[$i]['srno']}}">{{$officeDetails[$i]['office_name']}}</option>
                                    @endfor
                                </select>
                            </div>

                            <div class="col">
                                <label>Select Provider</label>
                                <select id="provider" name="providers[]" multiple >
                                    @for($i = 0; $i < count($providerDetails); $i++)
                                        <option value="{{$providerDetails[$i]['emp_id']}}">{{$providerDetails[$i]['provider_name']}}</option>
                                    @endfor
                                </select>
                            </div>

                            <div class="col">
                                <label>Select Procedure</label>
                                <select id="languages" name="languages[]" multiple >
                                    <option value="php">PHP</option>
                                    <option value="python">Python</option>
                                    <option value="javascript">JavaScript</option>
                                    <option value="java">Java</option>
                                    <option value="c">C</option>
                                    <option value="sql">SQL</option>
                                    <option value="ruby">Ruby</option>
                                    <option value=".net">.Net</option>
                                </select>
                            </div>

                    </div>
                </div>

                <div class="card-body">

                        <div class="row align-items-center">
                            <div class="col-9">
                                <div class="form-group">
                                    <label>Enter question</label>
                                    <input type="hidden" name="questionId" value="{{ isset($questionId) ?json_encode($questionId) : ''}}">
                                    <input type="text"
                                           class="form-control"
                                           placeholder="Add your question"
                                           name="questionfield"
                                           value="{{ isset($questionValue) ? $questionValue : trim('')  }} "
                                    >
                                </div>
                        </div>

                            <div class="col-3">
                                <div class="form-group">
                                    <label>Enter question sequence number</label>
                                    <input type="number" class="form-control" placeholder="Add question sequence number" name="sequenceNumber"
                                    value="{{ isset($sequenceNo) ? $sequenceNo : trim('')  }}"
                                    >
                                </div>
                            </div>
                </div>

                <div class="container row justify-content-center" style="padding-top: 50px">
                           <div class="col">
                               <label>Select question type</label>
                               <select name="questiontype" id="questionTypeId">
                                   @for($i = 0; $i < count($questionTypes); $i++)
                                      <option @if(isset($questionType) && $questionType == $i+1) {{ 'selected' }} @endif value="{{$i + 1}}">{{$questionTypes[$i]}}</option>
                                   @endfor
                               </select>
                           </div>

                    <div class="col">
                        <div id="questionTypeDesign">
                        </div>
                    </div>

                </div>

                    <div class="row justify-content-center" id="addQuestionButton">
                        <button type="submit" class="btn btn-info">{{isset($questionValue) ? "Update Question" : "Add Questtion"}}</button>
                    </div>
                </div>
                </form>
            </div>
        </div>

@endsection

@section('customScript')
    <script>
        var i=1;
        function setInitial(){
            var sites = {!! json_encode($questionValues ?? '') !!};
            var select2 = document.getElementById('questionTypeDesign');

            if(sites.length > 0){
                select2.innerHTML = "<div class=\"table-responsive\">\n" +
                    "<label>Enter options for mutlichoice questions </label>"+
                    "                            <table class=\"table\" id=\"dynamic_field\" style=" +
                "\"border: none\">\n" +
                    "                                <tr>\n" +
                    "                                    <td style=\"border: none\"><input type=\"text\" value=\"" +
                    `${sites !== '' ? sites[0].answer_value : ''}`+
                    "\" name=\"name[]\" placeholder=\"Enter option\" class=\"form-control name_list\" /></td>\n" +
                    "                                    <td style=\"border: none\"><button onclick=\"addNew()\" " +
                    "type=\"button\" name=\"add\" id=\"add\" class=\"btn btn-success\">Add More</button></td>\n" +
                    "                                </tr>\n" +
                    "                            </table>\n" +
                    "                        </div>"
                for (var j = 0; j < sites.length-1; j++) {
                    i++;
                    $add = '<tr id="row'+i+'"><td style="border: none"><input type="text" value="' +
                        `${sites !== '' ? sites[j+1].answer_value : ''}`+
                        '" name="name[]" placeholder="Enter option" class="form-control name_list" /></td><td style="border: none"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>';
                    $('#dynamic_field').append($add);

                }
            }
        }

        $(document).ready(function(){
            setInitial();
            $("#questionTypeId").change(function(){
                        var select2 = document.getElementById('questionTypeDesign');

                        $design = "                        <div class=\"table-responsive\">\n" +
                            "<label>Enter options for mutlichoice questions </label>"+
                            "                            <table class=\"table\" id=\"dynamic_field\" style=\"border: none\">\n" +
                            "                                <tr>\n" +
                            "                                    <td style=\"border: none\"><input type=\"text\" name=\"name[]\" placeholder=\"Enter option\" class=\"form-control name_list\" /></td>\n" +
                            "                                    <td style=\"border: none\"><button onclick=\"addNew()\" type=\"button\" name=\"add\" id=\"add\" class=\"btn btn-success\">Add More</button></td>\n" +
                            "                                </tr>\n" +
                            "                            </table>\n" +
                            "                        </div>";

                        switch (this.value) {
                            case '1':
                                select2.innerHTML =  "<div></div>";
                                break;
                            case '2':
                                select2.innerHTML =  $design;
                                break;
                            case '3':
                                select2.innerHTML =  $design;
                                break;
                            case '4':
                                select2.innerHTML =  $design;
                                break;
                            case '5':
                                select2.innerHTML =  "<div></div>";
                                break;
                        }
            });
        });

        function addNew(){
            i++;
            $('#dynamic_field').append('<tr id="row'+i+'"><td style="border: none"><input type="text" name="name[]" placeholder="Enter option" class="form-control name_list" /></td><td style="border: none"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
        }

        $(document).on('click', '.btn_remove', function(){
            var button_id = $(this).attr("id");
            $('#row'+button_id+'').remove();
        });
    </script>
@endsection