@extends('layouts.master')
@section('title', $title)
@section('content')
<link href="{{ asset('css/admin_questionnaire.css') }}" rel="stylesheet">

<div class="setting_admin" style="padding:20px;">
    <div class="heading">
        <img src="{{asset('images/settings_admin.png')}}" alt="" style="width: 50px "/>
        <h1 style="
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
">Settings: Administation</h1>
    </div>
</div>
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-8">
                <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.store') }}" method="POST" class="question-block">
                        <div class="card-body">
                            @csrf
                            <div class="col-md-8 form-group">
                                <label for="inputTitle">Title (Internal)</label>
                                <input id="inputTitle" type="text" name="title" class="form-control" value="{{ old('title') }}" required>
                            </div>
                            <div class="col-md-8 form-group">
                                <label for="inputDescription">Description (Public)</label>
                                <textarea name="description" class="form-control" id="inputDescription">{{ old('description') }}</textarea>
                            </div>
                            <div class="col-md-8 form-group">
                                <label for="inputStatus">Status </label>
                                <select name="status" id="inputStatus" class="form-control">
                                    <option value="1">Active</option>
                                    <option value="0">In-active</option>
                                </select>
                            </div>
                            <label>Questions:</label>

                            <div id="newQuestionDiv">
                              
                            </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 = 0;
    var answer = 0;
    var action = 0;
    $(document).ready(function(){
        $('.addQuestion').click(function(){
           var quesHtml = '';
           quesHtml += '<div class="questionContainer'+questionNo+'">';
           quesHtml += '<div class="row col-md-12">';
           quesHtml += '<div class="col-md-2 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-3 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>Remove</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', '.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', '.removeAnswer', function(){
            $(this).parents('.answerContainer').remove();
        });  

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

        $(document).on('click', '.addAction', function(){
            var quesNo = $(this).attr('data-itemNo');
            var actionHtml = '';
            var answerKey =  answer-1;
            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>';
            
            $(this).closest('.answerContainer').append(actionHtml);
            action++;
        });
        
        $(document).on('change', '.answerAction', function(){
            var actionArr = ['actionIsHot', 'actionIsActive', 'actionCanRelocate'];
            if($.inArray($(this).val(), actionArr) !== -1){
                $(this).parents('.actionContainer').find('.actionText').attr('readonly', true);
            } else {
                $(this).parents('.actionContainer').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