@extends('layouts.master')
@section('content')
<link href="{{ asset('css/admin_questionnaire.css') }}" rel="stylesheet">
<div class="setting_admin">
    <div class="heading">
        <img src="{{asset('images/settings_admin.png')}}" alt="" />
        <h1>Settings: Administation</h1>
    </div>
</div>
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3>Careers Website Questionnaire</h3>
                    </div>
                    <!-- /.card-header -->
                    @if ($error = Session::get('error'))
                    <div class="alert alert-danger">
                        <p>{{ $error }}</p>
                    </div>
                    @endif
                    @if ($message = Session::get('message'))
                    <div class="alert alert-success">
                        <p>{{ $message }}</p>
                    </div>
                    @endif
                    @if (count($errors) > 0)
                    <div class="alert alert-danger">
                        <strong>Whoops!</strong> There were some problems with your input.<br><br>
                        <ul>
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif
                    <form action="{{ route('questionnaire.update', $questionnaire->portal_questionnaire_id) }}" method="POST">
                        <div class="card-body">
                            @csrf
                            <div class="col-md-6 form-group">
                                <label for="inputTitle">Title (Internal)</label>
                                <input id="inputTitle" type="text" name="title" class="form-control" value="{{ $questionnaire->title }}" required>
                            </div>
                            <div class="col-md-6 form-group">
                                <label for="inputDescription">Description (Public)</label>
                                <textarea name="description" class="form-control" id="inputDescription">{{ $questionnaire->description }}</textarea>
                            </div>
                            <div class="col-md-6 form-group">
                                <label for="inputStatus">Status </label>
                                <select name="status" id="inputStatus" class="form-control">
                                    <option value="1" {{ $questionnaire->is_active == 1 ? 'selected' : '' }}>Active</option>
                                    <option value="0" {{ $questionnaire->is_active == 0 ? 'selected' : '' }}>In-active</option>
                                </select>
                            </div>
                            <label>Questions:</label>

                            <div id="newQuestionDiv">
                                @if(!empty($questionnaire->getQuestions))
                                    @foreach($questionnaire->getQuestions as $key => $question)
                                        <div class="savedquestionContainer{{ $key }} questionDiv">
                                            <div class="row col-md-12">
                                                <div class="col-md-1 form-group">
                                                    <label>Position</label>
                                                    <div>{{ $question->position }}</div>
                                                </div>
                                                <div class="col-md-2 form-group">
                                                    <label>Question</label>
                                                    <div>{{ $question->text }}</div>
                                                </div>
                                                <div class="col-md-2 form-group">
                                                    <label for="inputType">Question Type </label>
                                                    <div>{{ $question->type}}</div>
                                                </div>
                                                <div class="col-md-1 form-group">
                                                    <label>Required</label>
                                                    <div>{{$question->required == '1' ? 'True' : 'False'}}</div>
                                                </div>
                                                <div class="col-md-2 form-group">
                                                    <label>Action</label>
                                                    <div>
                                                    <a href="javascript:void(0)" class="editQuestion" data-id="{{ $key }}">Edit</a>&nbsp;
                                                    <a href="javascript:void(0)" class="deleteQuestion" data-id="{{ $question->portal_questionnaire_questions_id }}">Remove</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="questionContainer{{ $key }}" style="display:none">
                                            <input type="hidden" name="questions[{{$key}}][question_id]" value="{{ $question->portal_questionnaire_questions_id }}">
                                            <div class="row col-md-12">
                                                <div class="col-md-1 form-group">
                                                    <label>Position</label>
                                                    <input type="number" name="questions[{{$key}}][position]" class="form-control" value="{{ $question->position }}">
                                                </div>
                                                <div class="col-md-2 form-group">
                                                    <label>Question</label>
                                                    <input type="text" name="questions[{{$key}}][text]" class="form-control" value="{{ $question->text }}">
                                                </div>
                                                <div class="col-md-2 form-group">
                                                    <label for="inputType">Question Type </label>
                                                    <select name="questions[{{$key}}][type]" id="inputType" class="form-control">
                                                        <option value="text" {{ $question->type == 'text' ? 'selected' : '' }}>Text</option>
                                                        <option value="checkbox" {{ $question->type == 'checkbox' ? 'selected' : '' }}>Checkbox</option>
                                                        <option value="select" {{ $question->type == 'select' ? 'selected' : '' }}>Select</option>
                                                        <option value="radio" {{ $question->type == 'radio' ? 'selected' : '' }}>Radio</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-1 form-group">
                                                    <label>Required</label>
                                                    <input type="checkbox" class="required-box" name="questions[{{$key}}][required]" value="{{$question->required}}" {{$question->required == '1' ? 'checked' : '' }}>
                                                </div>
                                                <div class="col-md-2 form-group">
                                                    <label>Action</label>
                                                    <div>
                                                        <a href="javascript:void(0)" class="cancelQuesEdit" data-id="{{ $key }}">Cancel</a>&nbsp;
                                                        <a href="javascript:void(0)" class="deleteQuestion" data-id="{{ $question->portal_questionnaire_questions_id }}">Remove</a>
                                                    </div>
                                                </div>
                                            </div>
                                    
                                            @if(!empty($question->getAnswers))
                                                @foreach($question->getAnswers as $ak => $answer)
                                                    <div class="savedanswerContainer{{ $ak }} col-md-6 answerDiv">
                                                        <div class="row col-md-12">
                                                            <div class="col-md-4 form-group">
                                                                <label>Position</label>
                                                                <input type="number" class="form-control-plaintext" value="{{ $answer->position }}">
                                                            </div>
                                                            <div class="col-md-4 form-group">
                                                                <label>Answer</label>
                                                                <input type="text" class="form-control-plaintext" value="{{ $answer->text }}">
                                                            </div>
                                                            <div class="col-md-4 form-group">
                                                                <label>Action</label>
                                                                <div>    
                                                                    <a href="javascript:void(0)" class="editAnswer" data-id="{{ $ak }}">Edit</a>&nbsp;
                                                                    <a href="javascript:void(0)" class="deleteAnswer" data-id="{{ $answer->portal_questionnaire_answer_id }}">Remove</a>
                                                                </div> 
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="answerContainer{{ $ak }} col-md-6 answerEdit" style="display:none;">
                                                        <input type="hidden" name="questions[{{$key}}][answers][{{$ak}}][answer_id]" value="{{ $answer->portal_questionnaire_answer_id }}">
                                                        <div class="row col-md-12">
                                                            <div class="col-md-4 form-group">
                                                                <label>Position</label>
                                                                <input type="number" name="questions[{{$key}}][answers][{{$ak}}][position]" class="form-control" value="{{ $answer->position }}">
                                                            </div>
                                                            <div class="col-md-4 form-group">
                                                                <label>Answer</label>
                                                                <input type="text" name="questions[{{$key}}][answers][{{$ak}}][text]" class="form-control" value="{{ $answer->text }}">
                                                            </div>
                                                            <div class="col-md-4 form-group">
                                                                <label>Action</label>
                                                                <div>
                                                                    <a href="javascript:void(0)" class="cancelEditAnswer" data-id="{{ $ak }}">Cancel</a>
                                                                </div>
                                                            </div>
                                                
                                                            @php
                                                                $actionArr = [
                                                                    'action_source'=> $answer->action_source,
                                                                    'action_notes' => $answer->action_notes,
                                                                    'action_is_hot' => $answer->action_is_hot,
                                                                    'action_is_active' => $answer->action_is_active,
                                                                    'action_can_relocate' => $answer->action_can_relocate,
                                                                    'action_key_skills' => $answer->action_key_skills
                                                                ];
                                                            @endphp
                                                            @foreach($actionArr as $ackey => $val)
                                                                @if(!empty($val) && $val != 0)
                                                                    <div class="actionContainer">
                                                                        <div class="col-md-4 form-group">
                                                                            <label>Action  <a href="javascript:void(0)" class="deleteAction" data-id="{{ $answer->portal_questionnaire_answer_id }}" data-col="{{ $ackey }}">Remove</a> </label>
                                                                            <select name="questions[{{$key}}][answers][{{$ak}}][actions][{{$ackey}}][column]" class="form-control answerAction">
                                                                                <option value="action_source" {{ $answer->action_source == $val ? 'selected': '' }}>Add text to the candidate source</option>
                                                                                <option value='action_notes' {{ $answer->action_notes == $val ? 'selected': '' }}>Add text to the candidate's notes</option>
                                                                                <option value="action_is_hot" {{  $answer->action_is_hot == $val && $val == 1 ? 'selected': '' }}>Mark the candidate as hot</option>
                                                                                <option value="action_is_active" {{ $answer->action_is_active == $val && $val == 1 ? 'selected': '' }}>Mark the candidate as inactive and eliminate from searches</option>
                                                                                <option value="action_can_relocate" {{ $answer->action_can_relocate == $val && $val == 1 ? 'selected': '' }}>Mark that the candidate is able to relocate</option>
                                                                                <option value='action_key_skills' {{ $answer->action_key_skills == $val ? 'selected': '' }}>Add text to the candidate's key skills</option>
                                                                            </select>
                                                                        </div>
                                                                        <div class="col-md-4 form-group">
                                                                            @if($key == 'action_is_hot' || $key == 'action_is_active' || $key == 'action_can_relocate')
                                                                                @php $inputRead  = "readonly"; 
                                                                                    $value = '';
                                                                                @endphp
                                                                            @else
                                                                                @php $inputRead = "";
                                                                                    $value = $val;
                                                                                @endphp
                                                                            @endif
                                                                            <input type="text" name="questions[{{$key}}][answers][{{$ak}}][actions][{{$ackey}}][value]" class="form-control actionText" value="{{ $value }}" {{ $inputRead }}>
                                                                        </div>
                                                                    </div>
                                                                @endif
                                                            @endforeach
                                                            <div class="col-md-3 form-group">
                                                            <a href="javascript:void(0)" class="deleteAnswer" data-id="{{ $answer->portal_questionnaire_answer_id }}">Remove</a> 
                                                            </div>
                                                            <div class="col-md-3 form-group">
                                                            <a href="javascript:void(0)" class="addAction" data-itemNo="{{$key}}">Add Action</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @endif
                                            <a href="javascript:void(0)" class="addAnswer addAnswerLink{{ $question->portal_questionnaire_questions_id }}" data-quesno="{{ $key }}">Add answer</a>
                                        </div>
                                    @endforeach
                                @endif
                            </div>   
                            <div class="addQuestionDiv"><a href="javascript:void(0)" class="addQuestion">Add question</a></div>
                            <!-- /.card-body -->
                        </div>

                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary">Submit</button>
                            <a class="btn btn-secondary" href="{{ route('joborder.index') }}">Back</a>
                        </div>
                    </form>
                </div>
            </div>
        <!-- /.card -->
        </div>
    <!-- /.col -->
    </div>
    <!-- /.row -->
</section>
@section('pagejs')
<script>
    var questionNo = $('.questionDiv').length;
    var answer = $('.answerDiv').length;
    var action = $('.actionContainer').length;
    var deleteQuestionUrl = "{{ route('questionnaire.deleteQuestion')}}"; 
    var deleteAnswerUrl = "{{ route('questionnaire.deleteAnswer')}}"; 
    var deleteActionUrl = "{{ route('questionnaire.deleteAction')}}"; 

    $(document).ready(function(){   
        
        $(document).on('click', '.editQuestion', function(){
            var quesId = $(this).data('id');
            $('.savedquestionContainer'+quesId).hide();
            $('.questionContainer'+quesId).show();
            $('.addAnswerLink'+quesId).show();
        });      

        $(document).on('click', '.editAnswer', function(){
            var ansId = $(this).data('id');
            $('.savedanswerContainer'+ansId).hide();
            $('.answerContainer'+ansId).show();
        });      

        $(document).on('click', '.cancelQuesEdit', function(){
            var quesId = $(this).data('id');
            $('.questionContainer'+quesId).hide();
            $('.savedquestionContainer'+quesId).show();
           
        });

        $(document).on('click', '.cancelEditAnswer', function(){
            var ansId = $(this).data('id');
            $('.answerContainer'+ansId).hide();
            $('.savedanswerContainer'+ansId).show();
        });    

        $(document).on('click', '.deleteQuestion', function(){
            var id = $(this).data('id');
            Swal.fire({
                title: 'Are you sure to delete?',
                icon: 'info',
                confirmButtonText: 'Delete',
                showCancelButton: true,
            }).then((result) => {
                if (result['isConfirmed']){
                    $.ajax({
                        type:'POST',
                        url: deleteQuestionUrl,
                        data: {id:id, _token: csrfToken},
                        dataType: 'json',
                        success: function(response){
                            window.location.reload();
                        },
                        error: function(response){
                        
                        }
                    });
                }
            })
        });    

        $(document).on('click', '.deleteAnswer', function(){
            var id = $(this).data('id');
            Swal.fire({
                title: 'Are you sure to delete?',
                icon: 'info',
                confirmButtonText: 'Delete',
                showCancelButton: true,
            }).then((result) => {
                if (result['isConfirmed']){
                    $.ajax({
                        type:'POST',
                        url: deleteAnswerUrl,
                        data: {id:id, _token: csrfToken},
                        dataType: 'json',
                        success: function(response){
                            window.location.reload();
                        },
                        error: function(response){
                        
                        }
                    });
                }
            })
        });    

        $(document).on('click', '.deleteAction', function(){
            var id = $(this).data('id');
            var col =  $(this).data('col');
            Swal.fire({
                title: 'Are you sure to delete?',
                icon: 'info',
                confirmButtonText: 'Delete',
                showCancelButton: true,
            }).then((result) => {
                if (result['isConfirmed']){
                    $.ajax({
                        type:'POST',
                        url: deleteActionUrl,
                        data: {answer_id:id, column: col, _token: csrfToken},
                        dataType: 'json',
                        success: function(response){
                            window.location.reload();
                        },
                        error: function(response){
                        
                        }
                    });
                }
            })
        });    
        
        $('.addQuestion').click(function(){
           var quesHtml = '';
           quesHtml += '<div class="questionContainer'+questionNo+'">';
           quesHtml += '<div class="row col-md-12">';
           quesHtml += '<div class="col-md-1 form-group">';
           quesHtml += '<label>Position</label>';
           quesHtml += '<input type="number" name="questions['+questionNo+'][position]" class="form-control" value="1">   ';
           quesHtml += '</div>';
           quesHtml += '<div class="col-md-2 form-group">';
           quesHtml += '<label>Question</label>';
           quesHtml +=  '<input type="text" name="questions['+questionNo+'][text]" class="form-control">';                       
           quesHtml +=  '</div>';                                       
           quesHtml += '<div class="col-md-2 form-group">';
           quesHtml += '<label for="inputType">Question Type </label>';
           quesHtml += '<select name="questions['+questionNo+'][type]" id="inputType" class="form-control">';
           quesHtml += '<option value="text">Text</option>';
           quesHtml += '<option value="checkbox">Checkbox</option>';
           quesHtml += '<option value="select">Select</option>';
           quesHtml += '<option value="radio">Radio</option>';
           quesHtml += '</select>';
           quesHtml += '</div>';
           quesHtml += '<div class="col-md-1 form-group">';
           quesHtml += '<label>Required</label>';
           quesHtml +=  '<input type="checkbox" name="questions['+questionNo+'][required]" class="required-box" onclick="toggleCheckboxValue(this)" value="0">';                       
           quesHtml +=  '</div>';                                       
           quesHtml += '<div class="col-md-2 form-group">';
           quesHtml += '<label>Action</label>';
           quesHtml += '<a href="javascript:void(0)" class="removeQuestion" data-quesno="'+questionNo+'">Remove</a>';
           quesHtml += '</div>';
           quesHtml += '</div>';
           quesHtml += '<a href="javascript:void(0)" class="addAnswer" data-quesno="'+questionNo+'">Add answer</a>';
           quesHtml += '</div>';
           if($('#newQuestionDiv').append(quesHtml)){
                questionNo++;
           }
        });

        $(document).on('click', '.removeQuestion', function(){
            var quesNo = $(this).attr('data-quesno');
            $(this).parents('.questionContainer'+quesNo).remove();
        });      

        $(document).on('click', '.removeAnswer', function(){
            $(this).parents('.answerContainer').remove();
        });  

        $(document).on('click', '.removeAction', function(){
            $(this).parents('.actionContainer').remove();
        });  

        $(document).on('click', '.addAnswer', function(){
            var quesNo = $(this).attr('data-quesno');
            var ansHtml = '';
            ansHtml += '<div class="answerContainer col-md-6">';
            ansHtml += '<div class="row col-md-12">';
            ansHtml += '<div class="col-md-6 form-group">';
            ansHtml += '<label>Position</label>';
            ansHtml += '<input type="number" name="questions['+quesNo+'][answers]['+answer+'][position]" class="form-control" value="1">   ';
            ansHtml += ' </div>';
            ansHtml += '<div class="col-md-6 form-group">';
            ansHtml += '<label>Answer</label>';
            ansHtml += '<input type="text" name="questions['+quesNo+'][answers]['+answer+'][text]" class="form-control">';
            ansHtml += '</div>';
            ansHtml += '<div class="col-md-3 form-group">';
            ansHtml += '<a href="javascript:void(0)" class="removeAnswer">Remove</a>';
            ansHtml += '</div>';
            ansHtml += '<div class="col-md-3 form-group">';
            ansHtml += '<a href="javascript:void(0)" class="addAction" data-itemNo="'+quesNo+'">Add Action</a>';
            ansHtml += '</div>';
            ansHtml += '</div>';
            ansHtml += '</div>';

            // if($('.questionContainer'+quesNo).append(ansHtml)){
            //     answer++;
            // };
            if($(this).before(ansHtml)){
                answer++;
            };
        });

        $(document).on('click', '.addAction', function(){
            var quesNo = $(this).attr('data-itemNo');
            var answerKey = $('questionContainer'+quesNo+' .answerDiv').length;
            var actionHtml = '';
           
            actionHtml += '<div class="actionContainer">';
            actionHtml += '<div class="col-md-6 form-group">';
            actionHtml += '<label>Add Action</label>';
            actionHtml += '<select name="questions['+quesNo+'][answers]['+answerKey+'][actions]['+action+'][column]" class="form-control answerAction">';
            actionHtml += '<option value="action_source">Add text to the candidate source</option>';
            actionHtml += "<option value='action_notes'>Add text to the candidate's notes</option>";
            actionHtml += '<option value="action_is_hot">Mark the candidate as hot</option>';
            actionHtml += '<option value="action_is_active">Mark the candidate as inactive and eliminate from searches</option>';
            actionHtml += '<option value="action_can_relocate">Mark that the candidate is able to relocate</option>';
            actionHtml += "<option value='action_key_skills'>Add text to the candidate's key skills</option>";
            actionHtml += '</select>';
            actionHtml += '</div>';
            actionHtml += '<div class="col-md-6 form-group">';
            actionHtml += '<input type="text" name="questions['+quesNo+'][answers]['+answerKey+'][actions]['+action+'][value]" class="form-control actionText">';
            actionHtml += '</div>';
            actionHtml += '<a href="javascript:void(0)" class="removeAction">Remove</a>';
            actionHtml += '</div>';
            actionHtml += '</div>';
            actionHtml += '</div>';
            console.log(answerKey);

            $(this).closest('.answerEdit').append(actionHtml);
            action++;
        });
        
        $(document).on('change', '.answerAction', function(){
            var actionArr = ['actionIsHot', 'actionIsActive', 'actionCanRelocate'];
            if($.inArray($(this).val(), actionArr) !== -1){
                $(this).parents('.actionContainer, tr').find('.actionText').attr('readonly', true);
            } else {
                $(this).parents('.actionContainer, tr').find('.actionText').attr('readonly', false);
            }
        });
    });
    function toggleCheckboxValue(checkbox) {
      // Toggle the checkbox value between 1 and 0
      if (checkbox.checked) {
        checkbox.value = 1;
      } else {
        checkbox.value = 0;
      }
    }
</script>
@endsection
@endsection