@php
    $currentIndex++;
    $autoMargin = 0;
    $counter = $index;
    $questionCounter = $counter;
    // dd($question);
@endphp


<div class="question-section">
    <div class="quest-wrap-main">
        <div class="polls-quest-new">
            <div class="row">
                <div class="col-lg-9">
                    <div class="quest-wrap">
                        <label class="label_question_number" for="">
                            @if ($question->parent_question == null)
                                Question {{ $index + 1 }}
                            @endif
                        </label>
                        
                        <input type="hidden" name="counter[]" value="{{ $counter }}" class="counter">
                        <input type="hidden" class="form-control" name="response_id[]"
                            id="question_responses{{ $counter }}" value="{{ $question->response_id }}">
                        <input type="hidden" class="form-control" name="input[]" id="input{{ $counter }}"
                            value="{{ $question->input }}">
                            @if ($question->parent_question == null)
                          
                            <input type="hidden" name="question_id[]" value="{{ $question->id }}">
                        <input type="text"  name="question[]" placeholder="Enter question"
                            required="" value="{{ $question->question }}">
                            @endif
                    </div>
                </div>
                @if ($question->parent_question == null)
                <div class="col-lg-3">
                    <div class="ques-btn-wrap">
                        @if ($index != 0)
                            <a href="javascript:;" id="Delete_Question{{ $counter }}"
                                class="btn btn-prim btn-delete w-100 d-flex align-items-center justify-content-center text-center btn-delete"
                                title="Delete Question">delete question</a>
                        @endif
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
    <div class="quest-wrap-main">
        @if ($question->parent_question == null)
            <div class="row">
            
                @if ($question->input == 'yes_no')
                        <div class="col-lg-9">
                            <div class="row">
                                <div class="col-10">
                                    <div class="quest-wrap ans-wrap response-area">
                                        <label for="">Answer</label>
                                        <div class="rad-ans pollingYesNo{{ $counter }} ">
                                            @if ($question->questionResponse)
                                                @php
                                                    $responses = json_decode($question->questionResponse->response);
                                                @endphp
                                                @foreach ($responses as $key => $response)
                                                    @php
                                                        $pollingAnswer = App\Models\PollingAnswer::where(
                                                            'question_id',
                                                            $question->id,
                                                        )->first();
                                                        $jsonDecodeData = json_decode($pollingAnswer->is_answer_true, true);
                                                    @endphp
                                                    <div class="form-check p-2">
                                                        <input class="form-check-input" type="radio"
                                                            name="yesNoAnswer[{{ $counter }}]"
                                                            id="checkbox_{{ $counter }}" value="{{ $response }}"
                                                            {{ $jsonDecodeData == $response ? 'checked' : '' }} />
                                                        <label class="form-check-label" for="checkbox_{{ $counter }}">
                                                            {{ $response }}
                                                        </label>
                                                    </div>
                                                @endforeach
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="ques-btn-wrap">
                                <a href="javascript:;"
                                    class="btn btn-prim btn-inverse w-100 d-flex align-items-center justify-content-center btn-add-logic text-center"
                                    data-id="{{ $counter }}" type="yes_no">add logic</a>
                            </div>
                        </div>
                    

                @elseif ($question->input == 'ranking')
                    <div class="col-lg-9">
                        <div class="row">
                            <div class="col-10">
                                <div class="quest-wrap ans-wrap response-area">
                                    <label for="">Option</label>
                                    @if ($question->questionResponse)

                                        @php
                                            // dd($question->questionResponse->id);
                                            $questionResponse = $question->questionResponse;
                                            $responses = json_decode($question->questionResponse->response);
                                        @endphp
                                        @foreach ($responses as $responseIndex => $response)
                                            @php
                                                $responseIndexs = $responseIndex + 1;
                                            @endphp
                                            <div class="multiple d-g ranking-options-1-{{ $responseIndexs }}{{ $question->id }} ui-sortable pollingRankingCounter counterGet"
                                                counter="{{ $counter }}" data-counter="{{ $responseIndexs }}">
                                                <div class="mult-ques-ans closest_to_option response-list-items draggable-item ui-sortable-handle"
                                                    draggable="true">
                                                    <img src="http://127.0.0.1:8000/assets/images/icon-drag-poll.svg"
                                                        alt="">
                                                    <div class="mult-inpt">
                                                        <span>{{ $responseIndexs }}</span>
                                                        <input type="text" class="created-response"
                                                            name="createdResponseRanking[{{ $counter }}][]"
                                                            placeholder="" value="{{ $response }}">
                                                        <a href="javascript:;"
                                                            class="btnDeleteOption{{ $responseIndexs }}"
                                                            id="{{ $question->response_id }}"><img
                                                                src="http://127.0.0.1:8000/assets/images/icon-remove-ques.svg"
                                                                alt=""></a>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                            <div class="col-2 mt-4">
                                <div class="response-btn-section @if ($question->input != 'ranking')  @endif">
                                    <div class="add-mult-ans addResponseBtns addResponseBtns{{ $counter }}"
                                        data-counter="{{ $counter }}" data-id="{{ $question->id }}">
                                        <img src="{{ asset('assets/images/icon-add-poll.svg') }}" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                @elseif ($question->input == 'rating')
                    <div class="col-lg-9">
                        <div class="row">
                            <div class="col-10">
                                <div class="quest-wrap ans-wrap response-area">
                                    <label for="">Option</label>
                                    @if ($question->questionResponse)

                                        @php
                                            $questionResponse = $question->questionResponse;
                                            $responses = json_decode($question->questionResponse->response);
                                        @endphp
                                        @foreach ($responses as $responseIndex => $response)
                                            <div class="multiple d-g rating-options-1 ui-sortable pollingRating{{ $counter }}"
                                                data-counter="{{ $responseIndex + 1 }}">
                                                <div class="mult-ques-ans closest_to_option response-list-items draggable-item ui-sortable-handle"
                                                    draggable="true">
                                                    <img src="http://127.0.0.1:8000/assets/images/icon-drag-poll.svg"
                                                        alt="">
                                                    <div class="mult-inpt">
                                                        <span>{{ $responseIndex + 1 }}</span>
                                                        <input type="text" class="created-response"
                                                            name="createdResponseRating[{{ $counter }}][]"
                                                            placeholder="" value="{{ $response }}">
                                                        <a href="javascript:;"
                                                            class="btnDeleteOption{{ $responseIndex }}"
                                                            id="{{ $question->response_id }}"><img
                                                                src="http://127.0.0.1:8000/assets/images/icon-remove-ques.svg"
                                                                alt=""></a>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                            <div class="col-2 mt-4">
                                <div class="response-btn-section @if ($question->input != 'ranking')  @endif">
                                    <div class="add-mult-ans addResponseBtns addResponseBtns{{ $counter }}"
                                        data-counter="{{ $counter }}">
                                        <img src="{{ asset('assets/images/icon-add-poll.svg') }}" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-3">
                        <div class="ques-btn-wrap">
                            <a href="javascript:;"
                                class="btn btn-prim btn-inverse w-100 d-flex align-items-center justify-content-center btn-add-logic text-center"
                                data-id="{{ $counter }}" type="rating">add
                                logic</a>
                        </div>
                    </div>
                @elseif ($question->input == 'multiple_choice')
                    <div class="col-lg-9">
                        <div class="row">
                            <div class="col-10">
                                <div class="quest-wrap ans-wrap response-area">
                                    <label for="">Option</label>
                                    @if ($question->questionResponse)

                                        @php
                                            $questionResponse = $question->questionResponse;
                                            $responses = json_decode($question->questionResponse->response);
                                        @endphp
                                        @foreach ($responses as $responseIndex => $response)
                                            <div class="multiple d-g multiple-choice-options-1 ui-sortable pollingMultipleChoice{{ $counter }}"
                                                data-counter="{{ $responseIndex + 1 }}">
                                                <div class="mult-ques-ans closest_to_option response-list-items draggable-item ui-sortable-handle"
                                                    draggable="true">
                                                    <img src="http://127.0.0.1:8000/assets/images/icon-drag-poll.svg"
                                                        alt="">
                                                    <div class="mult-inpt">
                                                        <span>{{ $responseIndex + 1 }}</span>
                                                        <input type="text" class="created-response"
                                                            name="createdResponseMultipleChoice[{{ $counter }}][]"
                                                            placeholder="" value="{{ $response }}">
                                                        <a href="javascript:;"
                                                            class="btnDeleteOption{{ $responseIndex }}"
                                                            id="{{ $question->response_id }}"><img
                                                                src="http://127.0.0.1:8000/assets/images/icon-remove-ques.svg"
                                                                alt=""></a>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                            <div class="col-2 mt-4">
                                <div class="response-btn-section @if ($question->input != 'ranking')  @endif">
                                    <div class="add-mult-ans addResponseBtns addResponseBtns{{ $counter }}"
                                        data-counter="{{ $counter }}">
                                        <img src="{{ asset('assets/images/icon-add-poll.svg') }}" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-3">
                        <div class="ques-btn-wrap">
                            <a href="javascript:;"
                                class="btn btn-prim btn-inverse w-100 d-flex align-items-center justify-content-center btn-add-logic text-center"
                                data-id="{{ $index }}" type="multiple">add
                                logic</a>
                        </div>
                    </div>
                @elseif ($question->input == 'true_false')
                    <div class="col-lg-9">
                        <div class="row">
                            <div class="col-10">
                                <div class="quest-wrap ans-wrap response-area">
                                    <label for="">Answer</label>
                                    <div class="rad-ans pollingTrueFalse{{ $counter }}">
                                        @if ($question->questionResponse)
                                            @php
                                                $responses = json_decode($question->questionResponse->response);
                                                // dd($responses);
                                            @endphp
                                            @foreach ($responses as $key => $response)
                                                @php
                                                    $pollingAnswer = App\Models\PollingAnswer::where(
                                                        'question_id',
                                                        $question->id,
                                                    )->first();
                                                    $jsonDecodeData = json_decode($pollingAnswer->is_answer_true, true);

                                                @endphp
                                                <div class="form-check p-2">
                                                    <input class="form-check-input" type="radio"
                                                        name="trueFalse[{{ $counter }}]"
                                                        id="checkbox_true_{{ $key }}"
                                                        value="{{ $response }}"
                                                        {{ $jsonDecodeData == $response ? 'checked' : '' }} />

                                                    <label class="form-check-label"
                                                        for="checkbox_true_{{ $key }}">
                                                        {{ $response }}
                                                    </label>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                    <div class="col-lg-3">
                        <div class="ques-btn-wrap d-none true_false_question{{$question->id}}">
                            <a href="javascript:;"
                                class="btn btn-prim btn-inverse w-100 d-flex align-items-center justify-content-center btn-add-logic text-center"
                                data-id="{{ $counter }}" type="true_false" id="{{$question->id}}">add
                                logic</a>
                        </div>
                    </div>
                @elseif ($question->input == 'text_answer')
                    <div class="col-lg-9">
                        <div class="row">
                            <div class="col-10">
                                <div class="quest-wrap ans-wrap response-area">
                                    <label for="">Answer</label>
                                    <div class="pollingTextAnswer{{ $counter }}">
                                        @if ($question->questionResponse)

                                            @php
                                                $responses = json_decode($question->questionResponse->response);
                                            @endphp
                                            @foreach ($responses as $response)
                                                <input type="text" name="createdTextResponse[{{ $counter }}][]"
                                                    value="{{ $response }}">
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                @endif
            

            </div>
            <input type="hidden" class="hideCounter" value="{{ $counter }}">
            
            <div class="row logic-section logicHide{{ $counter }} {{ $question->logic_trigger == Null ? 'd-none' : '' }}">
                <div class="col-lg-9">
                    <div class="quest-wrap ans-wrap">
                        <hr>
                        <div class="logic-sec-wrap">
                            <span>If answer is</span>
                            <input type="hidden" class="triggerCounter" value="{{ $counter }}">
                            <select name="logic_trigger[{{ $counter }}]" id="logic_trigger" class="logic_trigger">
                                <option value="{{ $question->input == 'true_false' ? 'true' : 'yes' }}">
                                    {{ $question->input == 'true_false' ? 'True' : 'Yes' }}</option>
                                <option value="{{ $question->input == 'true_false' ? 'false' : 'no' }}">
                                    {{ $question->input == 'true_false' ? 'False' : 'No' }}</option>
                            </select>
                            <span>then</span>
                            <input type="hidden" name="is_required_array[]" value=""
                                class="is_required_hidden{{ $counter }}" value="">
                                <input type="hidden" name="trigger_required_action[{{ $counter }}]" class="trigger_required_action{{ $counter }} getTriggerValue{{ $counter }}" value="1{{ $counter }}" />
                                <a class="btn btn-prim  {{$question->is_action_required == 1 || $question->is_action_required == true  ? 'btn-warning' : 'btn-inverse'}} w_25 px-3 d-flex align-items-center justify-content-center text-center  mx-2 clickToTriggerAction" id="{{ $counter }}">Trigger required action</a>
                            
                            <span>or</span>
                            <input type="hidden" class="hidden_child_counter" value="{{ $counter }}">
                            <a class="btn btn-prim btn-inverse w-25 d-flex align-items-center justify-content-center text-center btn-update-child mx-2 "
                                id="{{ $counter }}">Ask Question</a>
                            <div class="drp_boxes drp-bxs{{ $counter }} d-none">
                                <div class="question-type-poll">
                                    <h3>question type</h3>
                                    <div class="form-check clickToYesNoChild" counter = "{{ $counter }}">
                                        <input class="form-check-input" type="radio" name="questiontype"
                                            id="yes_no" />
                                        <label class="form-check-label" for="yes_no">
                                            yes / no
                                        </label>
                                    </div>
                                    <div class="form-check clickToRankingChild"  counter = "{{ $counter }}">
                                        <input class="form-check-input" type="radio" name="questiontype"
                                            id="ranking" />
                                        <label class="form-check-label" for="ranking">
                                            ranking
                                        </label>
                                    </div>
                                    <div class="form-check clickToRatingChild"  counter = "{{ $counter }}">
                                        <input class="form-check-input" type="radio" name="questiontype"
                                            id="rating" />
                                        <label class="form-check-label" for="rating">
                                            rating
                                        </label>
                                    </div>
                                    <div class="form-check clickToMultipleChoiceChild"  counter = "{{ $counter }}">
                                        <input class="form-check-input" type="radio" name="questiontype"
                                            id="multiple_choice" />
                                        <label class="form-check-label" for="multiple_choice">
                                            multiple choice
                                        </label>
                                    </div>
                                    <div class="form-check clickToTrueFalseChild"  counter = "{{ $counter }}">
                                        <input class="form-check-input" type="radio" name="questiontype"
                                            id="true_false" />
                                        <label class="form-check-label" for="true_false">
                                            true false
                                        </label>
                                    </div>
                                    <div class="form-check clickToTextAnswer"  counter = "{{ $counter }}">
                                        <input class="form-check-input clickToTextAnswer" type="radio"
                                            name="questiontype" id="text_answer" />
                                        <label class="form-check-label" for="text_answer">
                                            text answer
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="ques-btn-wrap two-btns">
                        <a
                            class="btn btn-prim btn-delete w-50 d-flex align-items-center justify-content-center btn-remove-logic text-center" id="{{$question->id}}">remove</a>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12" id="divLogic{{ $counter }}"></div>
            </div>
        @endif

         {{-- Child Questions  --}}

        <div class="row mt-5">