@extends('dashboard.dashboard_layouts.dashboard_master')

@section('admin_dashboard_title')
    Generate polling question
@endsection


@section('admin_dashboard_css')
    <link href="{{ asset('assets/plugins/amazeui-datetimepicker/css/amazeui.datetimepicker.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/plugins/jquery-simple-datetimepicker/jquery.simple-dtpicker.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/plugins/pickerjs/picker.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/plugins/select2/css/select2.min.css') }}" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <style>
        label.form-check-label {
            font-style: normal;
            font-weight: 400;
            font-size: 18px;
            line-height: 20px;
            text-transform: capitalize;
            border-radius: 5px;
            padding: 15px 15px;
            margin-bottom: 18px;
            width: 100%;
            background: transparent;
            border: 1px solid #000000;
            color: #000;
        }
      
        input[type="radio"]:checked+label {
            background: #FFA53F;
            color: #fff;
            border-color: #FFA53F;
        }

        .draggable-item {
            cursor: move;
        }

        .quest-wrap label {
    display: flex;
    justify-content: space-between;
    max-width: 90%;
}
.quest-wrap label span.ans-type {
    color: #999999;
    font-size: 17px;
    text-transform: capitalize;
    font-style: italic;
}
    </style>
@endsection
@section('admin_dashboard_content')
    <input type="hidden" class="inputCounter">
    <input type="hidden" class="inputQuestionType">
    <input type="hidden" class="inputTypes">
    <div id="divFirstQuestion">
        <div class="col-lg-cust-12 col-lg-12 col-md-11 col-11">
            <div class="content dashboard-content h-100">
                <div class="breadcrumbs-wrap my-3 bg-white">
                    <a href="{{ url('client/dashboard') }}">dashboard</a> <i>&gt;</i>
                    <a href="{{ url('poll/index') }}">polling</a> <i>&gt;</i>
                    <span>generate new poll</span>
                </div>
                <div class="content-wrap generateNewPoll" style="display: none;">
                    <div class="polling-wrap">
                        <div class="gen-polling-wrap">
                            <div class="row">
                                <div class="col-12">
                                    <h1 class="text-center mb-2">generate new poll</h1>
                                    <p class="text-center mb-4">
                                        To start, you must select the type of question you
                                        would like to ask in your survey.
                                    </p>
                                    <div class="question-type-poll">
                                        <h3>question type</h3>
                                        <div class="form-check btnYesNo">
                                            <input class="form-check-input yes_no" type="radio" name="questiontype"
                                                id="yes_no" />
                                            <label class="form-check-label" for="yes_no">
                                                yes / no
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <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">
                                            <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">
                                            <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">
                                            <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">
                                            <input class="form-check-input" type="radio" name="questiontype"
                                                id="text_answer" />
                                            <label class="form-check-label" for="text_answer">
                                                text answer
                                            </label>
                                        </div>
                                        <div class="btn-wrap-poll">
                                            <a href="{{ url('poll/index') }}"
                                                class="btn btn-inverse btn-prim px-3">cancel</a>
                                            <a href="javascript:;"
                                                class="btn btn-prim px-3 clickToAddQuestion question-type">add
                                                question</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="content-wrap generatePoll " style="display: block;">
                    <div class="polling-wrap">
                        <div class="row">
                            <div class="col-12">
                                <h1>Generate poll</h1>
                            </div>
                            <!-- whole quest wrap start -->
                            <form id="addquestion">
                                <input type="hidden" name="draft_status" id="draft_status">
                                <div class="row mb-5">

                                    <div class="col-lg-3">
                                        <div class="quest-wrap ans-wrap">
                                            <label for="">Poll title</label>
                                            <input type="text" name="polling_name" placeholder="Enter poll title"
                                                required>
                                        </div>
                                    </div>


                                    <div class="col-lg-2">
                                        <div class="quest-wrap ans-wrap">
                                            <label for="">Poll starting date</label>
                                            <input type="text" id="poll_starting_date"
                                                value="{{ Carbon\Carbon::parse(Carbon\Carbon::now())->format('Y-m-d') }}"
                                                name="distributed_date" placeholder="Enter polling starting date" required>
                                        </div>
                                    </div>

                                    <div class="col-lg-2">
                                        <div class="quest-wrap ans-wrap">
                                            <label for="">Poll starting time</label>
                                            <input type="time" class="timepicker"
                                                value="{{ Carbon\Carbon::parse(Carbon\Carbon::now())->format('h:m') }}"
                                                name="distributed_time" placeholder="Enter polling starting time" required>
                                        </div>
                                    </div>

                                    <div class="col-lg-2">
                                        <div class="quest-wrap ans-wrap">
                                            <label for="">Poll closing date</label>
                                            <input type="text" id="poll_closing_date"
                                                value="{{ Carbon\Carbon::parse(Carbon\Carbon::now())->format('Y-m-d') }}"
                                                name="poll_closing_date" placeholder="Enter polling closing date" required>
                                        </div>
                                    </div>

                                    <div class="col-lg-2">
                                        <div class="quest-wrap ans-wrap">
                                            <label for="">Poll closing time</label>
                                            <input type="time" class="timepicker"
                                                value="{{ Carbon\Carbon::parse(Carbon\Carbon::now())->format('h:m') }}"
                                                name="poll_closing_time" placeholder="Enter polling closing time" required>
                                        </div>
                                    </div>

                                </div>
                                <div class="whole-quest-wrap" id="divQuestion">
                                </div>

                                <div class="new-btns-wrap-roll mt-5 pt-3">
                                    <div class="row justify-content-between">
                                        <div class="col-lg-3">
                                            <a class="btn btn-prim btn-inverse btn-add-quest px-5 w-100">add question</a>
                                            <div class="drp-bx">
                                                <div class="question-type-poll">
                                                    <h3>question type</h3>
                                                    <div class="form-check clickToYesNo">
                                                        <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 clickToRanking">
                                                        <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 clickToRating">
                                                        <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 clickToMultipleChoice">
                                                        <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 clickToTrueFalse">
                                                        <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">
                                                        <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 class="col-lg-6">
                                            <div class="btn-wrap-poll">
                                                <a href="javascript:;"
                                                    class="btn btn-warning btn-prim px-3 save_draft">save draft</a>
                                                <button type="submit" class="btn btn-prim px-3 ibtnDel" id="btnSubmit">
                                                    <i class="fa-spin fa fa-spinner fa-pulse fa-submit"
                                                        style="display:none"></i> generate
                                                    poll</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="content-wrap generatePollSuccess h-100" style="display: none;">
                    <div class="polling-wrap h-100">
                        <div class="row h-100">
                            <div class="col-12 my-auto">
                                <div class="success-wrap-poll">
                                    <img src="{{ asset('assets/images/icon-success.svg') }}" alt=""
                                        class="mb-4">
                                    <h1 class="mb-3">poll generated successfully!</h1>
                                    <p class="text-start">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
                                        pretium porta eros imperdiet posuere. Nulla sagittis blandit sodales. Donec lobortis
                                        dapibus nunc vel vehicula. Ut a efficitur purus. Duis id mollis massa. Curabitur
                                        consectetur quis tellus et egestas.</p>
                                    <div class="btn-wrap-poll mt-5 pt-3">
                                        <a href="/poll" class="btn btn-inverse btn-prim px-3 btn-poll-detail">view poll
                                            results</a>
                                        <a href="{{ url('poll/index') }}" class="btn btn-prim px-3">back to
                                            polls</a>
                                    </div>
                                </div>
                            </div>
                            <div class="social-btn text-center">
                                <h4>share poll results</h4>
                                <ul>
                                  <li><a href="#"><img src="{{asset('/images/x.svg')}}" alt=""></a></li>
                                  <li><a href="#"><img src="{{asset('/images/yt.svg')}}" alt=""></a></li>
                                  <li><a href="#"><img src="{{asset('/images/fb.svg')}}" alt=""></a></li>
                                  <li><a href="#"><img src="{{asset('/images/insta.svg')}}" alt=""></a></li>
                                </ul>
                              </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    <div class="container ">
        <div class="modal fade" id="Question" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog " style="max-width:1013px !important;">
                <div class="modal-content">

                    <div class="modal-header">

                        <h5 class="font-weight-bold text-center" id="QuestionLabel2">Predefined Questions</h5>

                    </div>

                    <div class="modal-body p-0">
                        <input type="hidden" id="parent" value="parent">
                        <input type="hidden" id="child" value="child">

                        <!-- <p class="mb-0 px-3 pt-3 fw-bold text-muted">Predefined Questions</p> -->
                        <div class="mt-2 px-3 py-3" id="pre_defined" style="height:600px; overflow-y: scroll;">
                        </div>

                    </div>

                </div>
            </div>
        </div>


        <div class="modal fade" id="myModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-slideout">
                <div class="modal-content">
                    <input type="hidden" class="current_counter">
                    <input type="hidden" class="question_logic_type">

                    <div class="modal-header">
                        <div class="row">
                            <div class="col-7">
                                <h5 class="font-weight-bold" id="myModalLabel2">Multiple choice responses</h5>
                            </div>
                            <div class="col-5 text-right">
                                <a role="button" class="text-info" data-bs-toggle="modal" data-bs-target="#myModal">+
                                    Responses</a>
                            </div>
                        </div>
                    </div>

                    <div class="modal-body p-0">
                        <p class="mb-0 px-3 pt-3 fw-bold text-muted">Multiple choice responses</p>
                        <div class="mt-2 px-3 py-3" id="divResponse">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal add response -->
        <div class="modal  fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog modal-dialog-slideout h-auto" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="row">
                            <div class="col-12 px-3">
                                <h5 class="font-weight-bold" id="myModalLabel2">Multiple choice responses</h5>
                                <p class="text-muted"> e.g. Yes, No, N/A</p>
                            </div>
                        </div>
                    </div>

                    <form id="addresponse">
                        <div class="modal-body">
                            <div class="row px-2">
                                <table id="myTable" class=" table order-list">
                                    <thead>
                                        <tr>
                                            <td>Response</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="col-12">
                                                <input type="text" name="response_title"
                                                    placeholder="Enter response name here" class="form-control mb-2"
                                                    required />
                                                <input type="text" name="response[]" placeholder="Enter response here"
                                                    class="form-control" required />

                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="form-group mt-3">
                                    <a role="button" class="text-info" id="addrow">+ Responses</a>
                                </div>
                                <div class="col-6 mr-2 mt-4">

                                    <button type="submit" class="form-control btn btn-info ibtnDel" id="btnSubmit"> <i
                                            class="fa-spin fa-spinner" style="display:none"></i> Save</button>
                                </div>
                                <div class="col-6 mt-4">
                                    <input type="button" class="form-control btn btn-info" data-bs-dismiss="modal"
                                        Value="Cancel">
                                </div>
                            </div>
                        </div>
                    </form>

                </div><!-- modal-content -->
            </div><!-- modal-dialog -->
        </div>
        <!-- modal -->

    </div>
    <input type="hidden" name="radioButtonId" id="radioButtonId">
    <div class="modal fade" id="editResponseModal" tabindex="-1" role="dialog"
        aria-labelledby="editResponseModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-slideout" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editResponseModalLabel">Multiple choice Response</h5>
                    <!-- </br> -->
                    <!-- <h6 class="form-text text-muted">e.g. Yes, No, N/A.</h6> -->
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <form id="updateresponse">
                    <input type="hidden" name="editResponseId" id="editResponseId">
                    <div class="modal-body">
                        <div class="form-group">
                            <p>Responses</p>
                            <table id="editResponseTable" class=" table edit-response-list">

                                <tbody>

                                </tbody>
                            </table>

                        </div>
                        <div class="form-group text-danger" style="display:none;" id="editResponseError">
                            Please add at least one response
                        </div>
                        <div class="form-group">
                            <a role="button" class="text-info" id="addEditResponse">+ Responses</a>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-info " id="btnSubmit"> <i
                                    class="fa fa-spinner fa-spin" style="display:none"></i> Update</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="ask_question" tabindex="-1" aria-labelledby="ask_questionLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ask_questionLabel">Question</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="modal-content">

                        <div class="">
                            <div class="row">

                                <div class="col-6 text-center">
                                    <button type="button" class="btn btn-success " data-dismiss="modal" id="No">
                                        <i class="fa fa-plus"></i> Add new
                                    </button>
                                </div>
                                <div class="col-6">
                                    <button type="button" class="btn btn-primary predefine_child" id="yes"
                                        data-bs-toggle="modal" data-bs-target="#Question">
                                        <i class="fa fa-plus"></i> Add pre defined
                                    </button>
                                </div>

                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
    <input type="hidden" class="hiddenCounterValue" value="">
@endsection
@section('admin_dashboard_script')
    <script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
    {{-- <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script> --}}
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>

    <script>
        $(document).ready(function(e) {

            $("#poll_closing_date").datepicker({
                dateFormat: "yy-mm-dd",
                minDate: 0
            });
            $("#poll_starting_date").datepicker({
                dateFormat: "yy-mm-dd",
                minDate: 0
            });
            
            $('.timepicker').timepicker({
                timeFormat: 'h:mm p',
                dynamic: false,
                dropdown: true,
                scrollbar: true
            });

            var counter = 0;
            var currTrigger = 0;
            var childquestion = 0;
            let type = ['yes_no', 'ranking', 'rating', 'multiple_choice', 'true_false', 'text_answer'];

            $("#append").on('click', function(e) {
                // alert(1);
                question('parent', 0, counter)
            });



            // question('parent', 0, counter)

            //Get Question
            function question(type, question, counter) {
                var counter = $("#tempCount").val()
                var radioButtonId = $("#radioButtonId").val()

                $.ajax({
                    url: '/api/poll/question/get',
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}",
                        "Content-Type": "application/json"
                    },
                    type: "get",
                    dataType: "JSON",
                    data: {
                        counter: counter,
                        type: type,
                        radioButtonId: radioButtonId
                    },
                    beforeSend: function() {},
                    complete: function() {},
                    success: function(response) {

                        if (response["status"] == "fail") {

                        } else if (response["status"] == "success") {
                            if (type == 'parent') {

                                $("#divQuestion").append((response["html"]));

                                if (counter == 0) {
                                    $("#Delete_Question" + counter).css("display", 'none');
                                }

                                if (counter > 0) {
                                    //delelte Question
                                    $(document).on('click', '#Delete_Question' + counter, function(e) {
                                        var id = $(this).attr('id');
                                        Swal.fire({
                                                title: "Are you sure?",
                                                text: "You will not be able to recover this Question!",
                                                type: "warning",
                                                buttons: true,
                                                confirmButtonColor: "#ff5e5e",
                                                confirmButtonText: "Yes, delete it!",
                                                closeOnConfirm: false,
                                                dangerMode: true,
                                                showCancelButton: true
                                            })
                                            .then((deleteThis) => {
                                                if (deleteThis.isConfirmed) {

                                                    console.log("#ParentQuestion" +
                                                        counter--)

                                                    $("#ParentQuestion" + counter).remove()

                                                    // counter = parseFloat($("#tempCount")
                                                    //     .val()) - 1
                                                    counter = parseInt(document
                                                        .querySelectorAll(
                                                            ".question-list").length);
                                                    $("#tempCount").val(counter)


                                                    Swal.fire("Deleted!",
                                                        "Question has been deleted.",
                                                        "success");

                                                } else {
                                                    Swal.close();
                                                }
                                            });
                                    });
                                }

                            } else if (type == 'child') {
                                $("#logic_question" + question).append((response["html"]));
                                // document.querySelectorAll(".question-list")[question].insertAdjacentHTML("afterend", response["html"])

                                $("#logic_question" + question).css('display', 'block')
                                $("#parent_question" + counter).val(question)



                                $(document).on('click', '#Delete_Question' + counter, function(e) {
                                    var id = $(this).attr('id');
                                    let element = this;
                                    Swal.fire({
                                            title: "Are you sure?",
                                            text: "You will not be able to recover this Question!",
                                            type: "warning",
                                            buttons: true,
                                            confirmButtonColor: "#ff5e5e",
                                            confirmButtonText: "Yes, delete it!",
                                            closeOnConfirm: false,
                                            dangerMode: true,
                                            showCancelButton: true
                                        })
                                        .then((deleteThis) => {
                                            if (deleteThis.isConfirmed) {
                                                console.log("#ParentQuestion" + counter--)
                                                $("#logic_question" + question).remove();

                                                counter = parseFloat($("#tempCount")
                                                    .val()) - 1
                                                $("#tempCount").val(counter)

                                                Swal.fire("Deleted!",
                                                    "Question has been deleted.",
                                                    "success");

                                            } else {
                                                Swal.close();
                                            }
                                        });
                                });

                                $(document).on('change', '.trigger', function(e) {

                                    currTrigger = $(this).attr('id')

                                    console.log(questionId)

                                    if ($("#trigger" + question).val() == 'required_action') {

                                        console.log(question)
                                        console.log(counter)

                                        console.log($("#trigger" + question).val())

                                        $("#logic_question" + question).remove();

                                        counter = parseFloat($("#tempCount").val()) - 1
                                        $("#tempCount").val(counter)
                                    }

                                })

                            }

                            counter = parseFloat($("#tempCount").val()) + 1
                            $("#tempCount").val(counter)
                        }
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            }

            $(".save_draft").on('click', function(e) {
                var draft_status = 2;
                $("#draft_status").val(draft_status);
                // If no errors, submit the form
                $("#addquestion").submit();
            });

            //Add question
            $("#addquestion").on('submit', (function(e) {
                e.preventDefault();
                var question_counter = $("input[name='counter[]']").map(function() {
                    return $(this).val();
                }).get();


                var formError = false

                let rankingResponses = Array.from(document.querySelectorAll(".created-response"));
                let check = [undefined, null, ""];
                let emptyResponse = false;
                rankingResponses.forEach(response => {
                    if (check.includes(response.value)) {
                        toastr.error('Please Enter Response');
                        emptyResponse = true;
                    }
                })

                if (emptyResponse == true) return;


                let questionType = document.querySelectorAll(".question-type");
                let checkEmpty = false;
                questionType.forEach(selectType => {
                    if (selectType.value == "") checkEmpty = true;
                })

                if (checkEmpty == true) {
                    toastr.error('Please Select Question Type')
                    return;
                }

                formData = new FormData(this);
                var hiddenCounter = $(".hiddenCounter").val();
                var values = [];
                $(".hiddenCounter").each(function() {
                    var counterValue = $(this).val();
                    var yesValue = $(".get-value" + counterValue + "[value='yes']").val();

                    var noValue = $(".get-value" + counterValue + "[value='no']").val();


                    var mergedValues = [];
                    if (yesValue !== '') {
                        mergedValues.push(yesValue);
                    }
                    if (noValue !== '') {
                        mergedValues.push(noValue);
                    }

                    values.push({
                        counter: counterValue,
                        mergedValues: mergedValues,
                    });
                });


                var getValue = $("input[name='yesNoAnswer" + hiddenCounter + "']:checked")
                    .val();

                // True False
                var counterTrueFalse = $(".counterTrueFalse").val();
                // var getValue = $("input[name='yesNoAnswer" + hiddenCounter + "']:checked").val();
                var valuesTrueFalse = [];
                $(".counterTrueFalse").each(function() {
                    var counterValue = $(this).val();
                    var TrueValue = $(".yes_ans" + counterValue + "[value='true']").val();
                    var FalseValue = $(".yes_ans" + counterValue + "[value='false']").val();


                    var mergedValue = [];
                    if (TrueValue !== '') {
                        mergedValue.push(TrueValue);
                    }
                    if (FalseValue !== '') {
                        mergedValue.push(FalseValue);
                    }

                    valuesTrueFalse.push({
                        counter: counterValue,
                        mergedValue: mergedValue,
                    });
                });

                var getTrueFalseValue = $("input[name='answerTrueFalse" + counterTrueFalse +
                        "']:checked")
                    .val();

                // var current_counter = $(".current_counter").val();
                // var logic_trigger = $('.logic_trigger' + current_counter).val();
                // var triggerValue = $('.trigger_required_action' + current_counter).val();


                formData.append('values', JSON.stringify(values));
                formData.append('valuesTrueFalse', JSON.stringify(valuesTrueFalse));
                formData.append('getValue', getValue);
                formData.append('getTrueFalseValue', getTrueFalseValue);
                formData.append('draft_status', $("#draft_status").val());
                // formData.append('logic_trigger', logic_trigger);
                // formData.append('triggerValue', triggerValue);
                // return;
                console.log(formError);
                if (formError == true) {
                    //alert("Please fill all required values")
                } else {
                    $.ajax({
                        url: "/api/poll/question/add",
                        type: "post",
                        data: formData,
                        dataType: "JSON",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        processData: false,
                        contentType: false,
                        cache: false,
                        beforeSend: function() {
                            $("#btnSubmit").attr('disabled', true);
                            $(".fa-submit").css('display', 'inline-block');
                        },
                        complete: function() {
                            $("#btnSubmit").attr('disabled', false);
                            $(".fa-submit").css('display', 'none');
                        },
                        success: function(response) {
                            console.log(response)
                            if (response["status"] == "fail") {
                                toastr.error('Failed', response["msg"])

                            } else if (response["status"] == "success") {

                                // toastr.success('Success', response["msg"])
                                $("#addquestion")[0].reset();
                                // window.location.href = "{{ url('/success/poll') }}"
                                $('.generatePoll').css('display', 'none')
                                $('.generatePollSuccess').css('display', 'block')
                                $(".btn-poll-detail").attr('href',
                                    '../poll/detail/' +
                                    response
                                    .id)
                            }
                        },
                        error: function(error) {
                            console.log(error);
                        }
                    });
                }

            }));

            var questionId = 0;

            //Choose Response
            $(document).on('click', '.btn-choose-response', function(e) {
                questionId = $(this).attr('choose-id');
                // alert(questionId);
            })

            //Question Response

            $(document).on('click', '.question-response', function(e) {

                responseId = $(this).attr('id');

                var current_counter = $(".current_counter").val();
                var question_logic_type = $(".question_logic_type").val();


                $("#question_responses" + current_counter).val(responseId)

                $("#myModal2").modal('hide');

                $.ajax({
                    url: '/api/poll/response/question/' + responseId,
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}",
                        "Content-Type": "application/json"
                    },
                    type: "get",
                    dataType: "JSON",
                    data: {
                        responseId: responseId,
                        current_counter: current_counter,
                        question_logic_type: question_logic_type
                    },
                    cache: false,
                    beforeSend: function() {

                    },
                    complete: function() {

                    },
                    success: function(response) {

                        if (response["status"] == "fail") {


                        } else if (response["status"] == "success") {
                            $(".question_response_html" + current_counter).html(response[
                                "html"])
                            $(".question_response_option" + current_counter).html(response[
                                "htmltwo"])
                            $("#myModal2").modal('hide');
                            $("#div-add-logic" + current_counter).css('display', 'block')
                            $("#question_response_error_html" + current_counter).css('display',
                                'none')
                            $(".addResponseBtn" + current_counter).removeClass('d-none')


                        }
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            })

            $(document).on('change', '.get_responses', function(e) {

                var current_counter = $(this).attr('data-counter');
                var id = $(".responses_id" + current_counter).find("option:selected").val();
                $("#question_responses" + current_counter).val(id)
                var question_logic_type = $(this).attr('type');
               
                $.ajax({
                    url: '/api/poll/predefined_question_response',
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}",
                        "Content-Type": "application/json"
                    },
                    type: "get",
                    dataType: "JSON",
                    data: {
                        id: id,
                        current_counter: current_counter,
                        question_logic_type: question_logic_type,
                    },
                    cache: false,
                    beforeSend: function() {

                    },
                    complete: function() {

                    },
                    success: function(response) {


                        if (response["status"] == "fail") {


                        } else if (response["status"] == "success") {

                                console.log(response.total_responses,current_counter)

                            $(".hidden_respones"+current_counter).val(response["html"])

                            $('.reslogic-'+current_counter).attr('total_responses',response.total_responses);
                            
                            console.log(response["htmltwo"])
                            $(".question_response_html" + current_counter).html(response[
                                "html"])

                            $(".question_response_option" + current_counter).html(response[
                                "htmltwo"])
                        }
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            })

            //add input as response
            $(document).on('click', '.btn-choose-input', function(e) {
                counter = $(this).attr('id');
                // console.log(counter);
                // console.log(this);
                if ($(".btn-choose-input").is(":checked")) {

                    $("#input" + counter).val('input')
                    $("#add-logic" + counter).removeClass('add-logic');
                    $("#div-add-logic" + counter).css('display', 'none');
                    $("#choose" + counter).attr('disabled', true);

                    $.ajax({
                        url: '/api/poll/input/response/' + counter,
                        headers: {
                            "X-CSRF-TOKEN": "{{ csrf_token() }}",
                            "Content-Type": "application/json"
                        },
                        type: "get",
                        dataType: "JSON",
                        data: {
                            counter: counter
                        },
                        cache: false,
                        beforeSend: function() {

                        },
                        complete: function() {

                        },
                        success: function(response) {

                            if (response["status"] == "fail") {

                            } else if (response["status"] == "success") {
                                $(".question_response_option" + counter).html(response[
                                    "html"])

                                //   $("#div-add-logic"+questionId).css('display','block')
                                $("#question_response_error_html" + counter).css('display',
                                    'none')

                            }
                        },
                        error: function(error) {
                            console.log(error);
                        }
                    });

                } else {

                    $("#choose" + counter).attr('disabled', false);
                    $(".question_response_option" + counter).html('')
                    $("#add-logic" + counter).addClass('add-logic');
                }
            })

            // $(document).on("change", ".question-type", function(e) {
            //     let element = this;
            //     // let questionType = element.options[element.selectedIndex].innerText.trim();
            //     let questionType = $(this).siblings('label').text().trim();

            //     // console.log(questionType);
            //     let type = ["text", "true / false", "rating"];
            //     let questionListArea = element.closest(".question-list");
            //     // console.log(questionListArea);
            //     questionListArea.querySelector(".response-area").querySelector("div").innerHTML = "";
            //     let counter = questionListArea.dataset.counter;
            //     removeRanking(questionListArea);
            //     if (type.includes(questionType)) {
            //         // console.log(questionType);
            //         $.ajax({
            //             type: 'POST',
            //             datatype: 'JSON',
            //             url: '{{ route('hidden_response') }}',
            //             data: {
            //                 _token: '{{ csrf_token() }}',
            //                 responseTitle: questionType
            //             },
            //             success: function(res) {
            //                 $(".question_response_html" + counter).html(res.html)
            //                 $(".question_response_option" + counter).html(res.htmltwo)
            //             }
            //         })
            //         questionListArea.querySelector(".btn-choose-response").setAttribute('disabled', true);
            //         questionListArea.querySelector("#input" + counter).value = questionType;
            //     } else if (questionType == "ranking") {
            //         console.log(questionType);
            //         questionListArea.querySelector(".response-btn-section").classList.remove("d-none");
            //         questionListArea.querySelector("#input" + counter).value = 'ranking';
            //         let listItem = questionListArea.querySelectorAll(".response-list-item");
            //         let count = listItem == null ? 1 : (listItem.length + 1);
            //         let html = `<div class="quest-wrap ans-wrap mt-3">
        //                 <div class="multiple">
        //                     <label for="">Answer</label>
        //                     <div class="mult-ques-ans">
        //                     <img src="{{ asset('assets/images/icon-drag-poll.svg') }}" alt="">
        //                     <div class="mult-inpt">
        //                         <span>${count}</span>
        //                         <input type="text" class="created-response" name="createdResponse[${counter}][]" placeholder="Please Write Response" value="">
        //                         <img class="deleteResponse" src="{{ asset('assets/images/icon-remove-ques.svg') }}" alt="">
        //                     </div>

        //                     </div>
        //                 </div>
        //                 </div>
        //                 `;
            //         questionListArea.querySelector(".response-holder").insertAdjacentHTML('beforeend',
            //             html);
            //         questionListArea.querySelector(".btn-choose-response").setAttribute('disabled',
            //             true);
            //     } else if (questionType == "radio") {

            //         questionListArea.querySelector("#input" + counter).value = 'radio';
            //         let html = `<div class="quest-wrap-main">
        //                         <div class="quest-wrap ans-wrap">
        //                             <label for="">Answer</label>
        //                             <div class="form-check mb-3">
        //                                 <input class="form-check-input question_response_option${counter}" type="radio" name="questiontypes" id="option1" />
        //                                 <label class="form-check-label question_response_option${counter}" for="option1">
        //                                 </label>
        //                             </div>
        //                         </div>
        //                     </div>
        //                 `;
            //         $(".showAddLogic").html('');
            //         questionListArea.querySelector(".response-holder").insertAdjacentHTML('beforeend',
            //             html);
            //         // questionListArea.querySelector(".btn-choose-response").removeAttribute('disabled');
            //         // questionListArea.querySelector(".add-logic-section").classList.add('d-none');
            //     } else {
            //         questionListArea.querySelector(".btn-choose-response").removeAttribute('disabled');
            //         questionListArea.querySelector("#input" + counter).value = questionType;
            //     }
            // })

            function removeRanking(questionSection) {
                questionSection.querySelector(".response-btn-section").classList.add('d-none');
                questionSection.querySelector(".response-holder").innerHTML = "";
                questionSection.querySelector(".add-logic-section").classList.remove('d-none');
                let invalidLogic = ['rating', 'text'];
                let questionType = questionSection.querySelector(".question-type");
                // let question = questionType.options[questionType.selectedIndex].innerText;
                let question;
                if (questionType.length > 0) {
                    questionType.forEach(function(input) {
                        if (input.checked) {
                            question = input.value;
                        }
                    });
                }
                invalidLogic.includes(question) ? questionSection.querySelector(".add-logic-section")
                    .classList.add(
                        "d-none") : questionSection.querySelector(".add-logic-section").classList.remove(
                        "d-none");
            }
            // click to ranking
            $(document).on("click", ".addResponseBtn", function(e) {
                // console.log('sdf');
                let element = this;
                let counter = $(this).attr("data-counter");
                let responseSection = $('.ranking-options-' + counter);
                let listItem = responseSection.find('.response-list-item');
                let count = listItem.length + 1; // Increment count by 1 for the new item
                let html = ` 
                    <div class="mult-ques-ans closest_to_option response-list-item draggable-item" draggable="true">
                        <img src="{{ asset('assets/images/icon-drag-poll.svg') }}" alt="">
                        <div class="mult-inpt">
                            <span>${count}</span> <!-- Use the count variable directly -->
                            <input type="text" name="createdResponse[${counter}][]" placeholder="Enter option">
                            <a href="javascript:;" class="btnRemoveOption"><img src="{{ asset('assets/images/icon-remove-ques.svg') }}"alt=""></a>
                        </div>
                    </div>
                `;
                $(responseSection).append(html);
            });
            // click to ranking

            document.addEventListener('click', function(e) {
                let element = e.target;
                if (element.classList.contains("deleteResponse")) {
                    element.closest(".response-list-item").remove();
                }
            })

            // document.addEventListener('dragstart', function(e) {
            //     let element = e.target;
            //     if (element.classList.contains("draggable-item")) {
            //         element.classList.add("dragging");
            //     }
            // })

            // document.addEventListener('dragend', function(e) {
            //     let element = e.target;
            //     if (element.classList.contains("draggable-item")) {
            //         element.classList.remove("dragging");
            //     }
            // })

            // document.addEventListener('dragover', function(e) {
            //     e.preventDefault();
            //     let element = e.target;
            //     if (element.classList.contains("multiple")) {
            //         const afterElement = dragAfterElement(element, e.clientY);
            //         let dragging = document.querySelector(".dragging");
            //         if (afterElement && afterElement.nodeType === Node
            //             .ELEMENT_NODE) { // Check if afterElement is a valid Element node
            //             element.insertBefore(dragging, afterElement.nextSibling);
            //         } else {
            //             element.appendChild(dragging);
            //         }
            //     }
            // });

            function dragAfterElement(container, y) {
                // console.log(container , y)
                let draggableElements = [...container.querySelectorAll(".draggable-item:not(.dragging)")];

                return draggableElements.reduce((closest, child) => {
                    let box = child.getBoundingClientRect();
                    let offset = y - box.top - box.height / 2;
                    if (offset < 0 && offset > closest.offset) {
                        return {
                            offset: offset,
                            element: child
                        }
                    } else {
                        return closest;
                    }
                }, {
                    offset: Number.NEGATIVE_INFINITY
                }).element
            }
            //dragging code ends here

            //Show Predefined Question in Modal
            $(document).on('click', '.predefine_questions', function(e) {

                var type = $("#parent").val()

                $.ajax({
                    url: '/api/poll/question/builtin',
                    type: "GET",
                    dataType: "JSON",
                    data: {
                        counter: counter,
                        type: type
                    },
                    success: function(response) {
                        if (response["status"] == "fail") {
                            Swal.fire("Failed!", response["msg"], "error");
                        } else if (response["status"] == "success") {


                            var type = response.type;
                            $("#pre_defined").html(response["html"])
                        }
                    },
                    error: function(error) {
                        console.log(error);
                    },
                    async: false
                });
            });

            $(document).on('click', '.predefine_child', function(e) {

                var type = $("#child").val()

                $.ajax({
                    url: '/api/question/builtin',
                    type: "GET",
                    dataType: "JSON",
                    data: {
                        counter: counter,
                        type: type
                    },
                    success: function(response) {
                        if (response["status"] == "fail") {
                            Swal.fire("Failed!", response["msg"], "error");
                        } else if (response["status"] == "success") {

                            var type = response.type;
                            $("#pre_defined").html(response["html"])
                        }
                    },
                    error: function(error) {
                        console.log(error);
                    },
                    async: false
                });
            });

            //Add Predefined Question
            $(document).on('click', '.add_question', function(e) {
                var counter = $("#tempCount").val();
                Question_id = $(this).attr('id')
                var question_type = $(this).attr('questionType');

                $.ajax({
                    url: '/api/poll/question/predefined/' + Question_id,
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}",
                        "Content-Type": "application/json"
                    },
                    type: "get",
                    dataType: "JSON",
                    data: {
                        counter: counter
                    },
                    cache: false,
                    beforeSend: function() {

                    },
                    complete: function() {

                    },
                    success: function(response) {

                        if (response["status"] == "fail") {

                        } else if (response["status"] == "success") {

                            if (question_type == "parent") {

                                $("#divQuestion").append(response["html"]);

                                $(document).on('click', '#Delete_Question' + counter,
                                    function(
                                        e) {
                                        var id = $(this).attr('id');
                                        Swal.fire({
                                                title: "Are you sure?",
                                                text: "You will not be able to recover this Question!",
                                                type: "warning",
                                                buttons: true,
                                                confirmButtonColor: "#ff5e5e",
                                                confirmButtonText: "Yes, delete it!",
                                                closeOnConfirm: false,
                                                dangerMode: true,
                                                showCancelButton: true
                                            })
                                            .then((deleteThis) => {
                                                if (deleteThis.isConfirmed) {

                                                    console.log("#ParentQuestion" +
                                                        counter--)

                                                    $("#ParentQuestion" + counter)
                                                        .remove()

                                                    counter = parseFloat($(
                                                            "#tempCount")
                                                        .val()) - 1
                                                    $("#tempCount").val(counter)

                                                    Swal.fire("Deleted!",
                                                        "Question has been deleted.",
                                                        "success");

                                                } else {
                                                    Swal.close();
                                                }
                                            });
                                    });

                            } else {

                                $("#logic_question" + currTrigger.split('trigger')[1])
                                    .append((
                                        response["html"]));
                                $("#logic_question" + currTrigger.split('trigger')[1]).css(
                                    'display', 'block')
                                $("#parent_question" + counter).val(currTrigger.split(
                                    'trigger')[1])

                                $(document).on('click', '#Delete_Question' + counter,
                                    function(
                                        e) {
                                        var id = $(this).attr('id');
                                        Swal.fire({
                                                title: "Are you sure?",
                                                text: "You will not be able to recover this Question!",
                                                type: "warning",
                                                buttons: true,
                                                confirmButtonColor: "#ff5e5e",
                                                confirmButtonText: "Yes, delete it!",
                                                closeOnConfirm: false,
                                                dangerMode: true,
                                                showCancelButton: true
                                            })
                                            .then((deleteThis) => {
                                                if (deleteThis.isConfirmed) {

                                                    $("#logic_question" +
                                                            currTrigger
                                                            .split(
                                                                'trigger')[1])
                                                        .remove()

                                                    counter = parseFloat($(
                                                            "#tempCount")
                                                        .val()) - 1
                                                    $("#tempCount").val(counter)

                                                    Swal.fire("Deleted!",
                                                        "Question has been deleted.",
                                                        "success");

                                                } else {
                                                    Swal.close();
                                                }
                                            });
                                    });
                            }

                            $("#Question").modal('hide');
                            counter = response.counter;

                            $("#tempCount").val(response.counter)

                            counter = parseFloat($("#tempCount").val()) + 1
                            $("#tempCount").val(counter)
                        }
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            })

            responses();

            // Get All Responses in Modal
            function responses() {

                $.ajax({
                    url: '/api/poll/response/get',
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}",
                        "Content-Type": "application/json"
                    },
                    type: "get",
                    dataType: "JSON",
                    cache: false,
                    beforeSend: function() {

                    },
                    complete: function() {

                    },
                    success: function(response) {

                        if (response["status"] == "fail") {

                        } else if (response["status"] == "success") {

                            $("#divResponse").html((response["html"]));

                        }
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            }

            var counterEditResponse = 0;

            // Edit Response
            $("#addEditResponse").on("click", function() {
                addEditResponse('')
            });

            $("table.edit-response-list").on("click", ".ibtnDelEditResponse", function(event) {
                $(this).closest("tr").remove();
                counterEditResponse -= 1
            });

            function addEditResponse(val) {
                var newRow = $("<tr>");
                var cols = "";

                cols += '<td><input type="text" class="form-control" value="' + val +
                    '" name="edit_response[]" id="response' + counterEditResponse + '" required/></td>';

                cols +=
                    '<td><i class="fas fa-trash-alt ibtnDelEditResponse btn btn-md btn-danger" ></i></td>';
                newRow.append(cols);
                $("table.edit-response-list").append(newRow);
                counterEditResponse++;
            }
            var counterResponse = 0;

            //Add response
            $("#addresponse").on('submit', (function(e) {
                e.preventDefault();

                $.ajax({
                    url: "/api/poll/response/add",
                    type: "post",
                    data: new FormData(this),
                    dataType: "JSON",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    processData: false,
                    contentType: false,
                    cache: false,
                    beforeSend: function() {
                        $("#btnSubmit").attr('disabled', true);
                        $(".fa-spin").css('display', 'inline-block');
                    },
                    complete: function() {
                        $("#btnSubmit").attr('disabled', false);
                        $(".fa-spin").css('display', 'none');
                    },
                    success: function(response) {
                        if (response["status"] == "fail") {
                            toastr.error('Failed', response["msg"])

                        } else if (response["status"] == "success") {

                            toastr.success('Success', response["msg"])
                            $("#addresponse")[0].reset();
                            $("#myModal").modal("hide");
                            responses()
                        }
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            }));

            //edit company
            $(document).on('click', '.editBtn', function() {
                let id = $(this).attr('id');
                $("table.edit-response-list").empty();
                $.ajax({
                    type: 'get',
                    url: '{{ url('poll/response/edit') }}/' + id,
                    success: function(data) {
                        if (data.status == "fail") {
                            Swal.fire("Failed!", data.msg, "error");
                        } else if (data.status == "success") {
                            $("#editResponseId").val(data.data.id)
                            $.each(data.responses, (i, v) => {
                                addEditResponse(v)
                            })
                        }
                    },
                });
            });

            // Update Response
            $("#updateresponse").on('submit', (function(e) {
                e.preventDefault();
                $("#editResponseError").css('display', 'none')
                var edit_responses = $("input[name='edit_response[]']").map(function() {
                    return $(this).val();
                }).get();

                // console.log(edit_responses);
                // return false;

                if (edit_responses.length > 0) {
                    $.ajax({
                        url: "/api/poll/response/update/",
                        type: "post",
                        data: new FormData(this),
                        dataType: "JSON",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        processData: false,
                        contentType: false,
                        cache: false,
                        beforeSend: function() {
                            $("#btnSubmit").attr('disabled', true);
                            $(".fa-spin").css('display', 'inline-block');
                        },
                        complete: function() {
                            $("#btnSubmit").attr('disabled', false);
                            $(".fa-spin").css('display', 'none');
                        },
                        success: function(response) {
                            console.log(response)
                            if (response["status"] == "fail") {
                                toastr.error('Failed', response["msg"])

                            } else if (response["status"] == "success") {

                                toastr.success('Success', response["msg"])
                                $("#editResponseModal").modal("hide")
                                responses()

                            }
                        },
                        error: function(error) {
                            console.log(error);
                        }
                    });
                } else {
                    $("#editResponseError").css('display', 'block')
                }

            }));

            //delete Response
            $(document).on('click', '.add-logic', function(e) {

                element = this;
                let questionList = element.closest(".question-list");
                let select = questionList.querySelector(".question-type");
                let type = ['text', 'rating']
                // if (type.includes(select.options[select.selectedIndex].innerText.trim())) return;
                if (type.includes($(element).siblings('label').text().trim()));

                $(this).siblings('label').text().trim();
                var id = $(this).attr('id').split('add-logic')
                var trigrerCount = id[1]

                $(".checkbox-span").removeClass('text-danger')
                $(this).addClass('text-primary')
                $('#div-add-logic' + trigrerCount).toggle();
            })

            //Trigger New Question
            $(document).on('change', '.trigger', function(e) {

                currTrigger = $(this).attr('id')

                console.log(questionId)

                if ($(this).val() == 'ask_question') {

                    $("#ask_question").modal('show');
                }
            })

            $("#yes").on("click", function() {

                $("#question_type").val('child')
                $("#ask_question").modal('hide');
                $("#Question").modal('show');
            })

            $("#No").on("click", function() {
                $("#ask_question").modal('hide');
                var id = currTrigger.split('trigger')
                var questionCount = id[1]
                question('child', questionCount, counter)
            })

            // Add/Remove Row Response Html
            var counterResponse = 0;
            $("#addrow").on("click", function() {
                var newRow = $("<tr>");
                var cols = "";
                cols +=
                    '<td><input type="text" class="form-control" name="response[]"  required name="response' +
                    counterResponse + '"/></td>';
                cols += '<td><i class="fas fa-trash-alt ibtnDel btn btn-md btn-danger" ></i></td>';
                newRow.append(cols);
                $("table.order-list").append(newRow);
                counterResponse++;
            });

            $("table.order-list").on("click", ".ibtnDel", function(event) {
                $(this).closest("tr").remove();
                counterResponse -= 1
            });

            $(document).on('click', '.btn-add-quest', function() {
                drop_box()
            });

            $(document).on('click', '.btn-add-child', function() {
                var id = $(this).attr('id');
                drop_boxs(id)
            });


            $('.question-type').on('click', function() {
                $('#addQuestionModal').modal('hide');
            });

            $(".dropdown1").change(function() {
                var selectedOption = $(this).find("option:selected").text().trim();

                if (selectedOption === "Required action") {
                    $("#inputValue").val("trigger required action");
                    $("#inputValue2").val("");
                } else if (selectedOption === "Ask a question") {
                    $("#inputValue").val("");
                    $("#inputValue2").val("ask questions");
                } else {
                    $("#inputValue").val("");
                    $("#inputValue2").val("");
                }
            });

            // $(document).on('click', '.clickToAddQuestion', function() {
            //     $(".generateNewPoll").addClass('d-none');
            //     $(".generatePoll").css('display', 'block');
            // })

            $(document).on('click', '.open_response_modal', function() {
                var current_counter = $(this).data('id');
                $(".current_counter").val(current_counter);
                $("#myModal2").modal('show');
            })

            $('.clickToAddQuestion').on('click', function() {

                if ($(this).closest('.question-type-poll').find('.form-check-input:checked').length) {
                    var radioButtonId = $(this).closest('.question-type-poll').find(
                        '.form-check-input:checked').attr('id');
                    $("#radioButtonId").val(radioButtonId);
                    radioButtonId = 'text_answer'
                    if (radioButtonId == 'yes_no') {
                        $('.clickToYesNo').click()
                    } else if (radioButtonId == 'ranking') {
                        $('.clickToRanking').click()
                    } else if (radioButtonId == 'rating') {
                        $('.clickToRating').click()
                    } else if (radioButtonId == 'multiple_choice') {
                        $('.clickToMultipleChoice').click()
                    } else if (radioButtonId == 'true_false') {
                        $('.clickToTrueFalse').click()
                    } else if (radioButtonId == 'text_answer') {
                        $('.clickToTextAnswer').click()
                    }
                }

            });

            var textAnswerCounter = 1;
            $('.clickToTextAnswer').click()

            $(document).on('click', '.clickToTextAnswer', function() {
                $('#divQuestion').append(`
                    <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">
                                            <input type="hidden" name="counter[]" value="${counter}">
                                            <input type="hidden" name="parent_question${counter}" id="parent_question${counter}" value="">
                                            <label class="" for=""><span class="label_question_number"> Question ${textAnswerCounter} </span> <span class="ans-type">answer type: Text Answer</span></label>

                                            <input type="text" name="question[]" placeholder="Enter question" required />
                                            <input type="hidden" class="form-control" name="response_id[]"  id="question_responses${counter}" >
                                            <input type="hidden" class="form-control" name="input[]"  id="input${counter}" value="text_answer">
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="ques-btn-wrap">
                                            <a class="btn btn-prim btn-delete w-100 d-flex align-items-center justify-content-center text-center">delete question</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="quest-wrap-main">
                            <div class="row">
                                <div class="col-lg-9">
                                    <div class="quest-wrap ans-wrap">
                                        <label for="">Answer</label>
                                        <input type="text" name="textAnswer[${counter}]" value="" />
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="ques-btn-wrap">
                                        <!-- <a class="btn btn-prim btn-inverse w-100 d-flex align-items-center justify-content-center text-center d-none">add logic</a> !-->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12" id="append_child${counter}"></div>
                    </div>
                `);
                textAnswerCounter++;
                counter++;
                update_label_question()
            });

            var trueFalseCounter = 1;

            $(document).on('click', '.clickToTrueFalse', function() {
             
                $(".hidden_child_counter").val(counter);
                $('#divQuestion').append(`
                    <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">
                                            <input type="hidden" name="counter[]" value="${counter}">
                                            <input type="hidden" name="parent_question${counter}" id="parent_question${counter}" value="">
                                            <input type="hidden" class="hidden_child_counter" value="${counter}">
                                            <label class="" for=""><span class="label_question_number"> Question ${trueFalseCounter} </span> <span class="ans-type">answer type: true false</span></label>
                                            <input type="text" name="question[]" placeholder="Enter question" required />
                                            <input type="hidden" class="form-control" name="response_id[]"  id="question_responses${counter}" >
                                            <input type="hidden" class="form-control" name="input[]"  id="input${counter}" value="true_false">
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="ques-btn-wrap">
                                            <a
                                                class="btn btn-prim btn-delete w-100 d-flex align-items-center justify-content-center text-center">delete
                                                question</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="quest-wrap-main">
                            <div class="row">
                                <div class="col-lg-9">
                                    <div class="quest-wrap ans-wrap">
                                        <label for="">Answer</label>
                                        <div class="col-sm-12 text-danger" style="display:none;" id="question_response_error_html${counter}">
                                                * Please choose response for the question
                                        </div>
                                        <input type="hidden" class="counterTrueFalse" value="${counter}"/>
                                        <div class="rad-ans question_response_option${counter}">
                                            <div class="form-check p-2">
                                                <input class="form-check-input yes_ans${counter}" type="radio"
                                                    name="yesNoAnswer[${counter}]" id="yes_ans${counter}" value="true"/>
                                                <label class="form-check-label" for="yes_ans${counter}">
                                                    True
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input yes_ans${counter}" type="radio"
                                                    name="yesNoAnswer[${counter}]" id="no_ans${counter}" value="false"/>
                                                <label class="form-check-label" for="no_ans${counter}">
                                                    False
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                   
                                </div>
                                
                               
                                <div class="col-lg-3">
                                    <div class="ques-btn-wrap">
                                        <a
                                            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" total_responses="2">add
                                            logic</a>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12" id="divLogic${counter}"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12" id="append_child${counter}"></div>
                    </div>
                `);
                trueFalseCounter++;
                counter++;
                update_label_question()
            });

            var multipleChoiceCounter = 1;

            $(document).on('click', '.clickToMultipleChoice', function() {
                $(".hidden_child_counter").val(counter);

                $('#divQuestion').append(`
                    <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">
                                            <input type="hidden" name="counter[]" value="${counter}">
                                            <input type="hidden" class="hidden_respones${counter}">
                                            <input type="hidden" class="hidden_child_counter" value="${counter}">
                                            <input type="hidden" name="parent_question${counter}" id="parent_question${counter}" value="">
                                            <label class="" for=""><span class="label_question_number"> Question ${multipleChoiceCounter} </span> <span class="ans-type">answer type: Multiple Selection</span></label>
                                            <input type="text" name="question[]" placeholder="Enter question" required />
                                            <input type="hidden" class="form-control" name="response_id[]"  id="question_responses${counter}" >
                                            <input type="hidden" class="form-control" name="input[]"  id="input${counter}" value="multiple_choice">
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="ques-btn-wrap">
                                            <a
                                                class="btn btn-prim btn-delete w-100 d-flex align-items-center justify-content-center text-center">delete
                                                question</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="quest-wrap-main">
                            <div class="row">
                                <div class="col-lg-9">  
                                    <div class="row">
                                        <div class="col-10">
                                            <div class="quest-wrap ans-wrap">
                                                <label for="">Options</label>
                                                <div class="col-sm-12 text-danger" style="display:none;" id="question_response_error_html${counter}">
                                                        * Please choose response for the question
                                                </div>
                                                <div> <h6> Select From Predefined Responses <select class="sform-control get_responses responses_id${counter}" data-counter ="${counter}" type="multiple" style="display: inline-block;width: 20%;"><option selected disabled>Select Response</option>@foreach ($question_responses as $response)<option value="{{ $response->id }}">{{ $response->response_title }}</option>@endforeach</select> </h6>  </div>
                                                <!-- drag list -->
                                                <div class="multiple d-g ranking-options-${counter} question_response_option${counter}" data-counter="${counter}">
                                                    <!-- drag item -->
                                                    <div class="mult-ques-ans closest_to_option response-list-item draggable-item" draggable="true">
                                                        <img src="{{ asset('assets/images/icon-drag-poll.svg') }}"
                                                            alt="">
                                                        <div class="mult-inpt">
                                                            <span>1</span>
                                                            <input type="text" name="createdResponse[${counter}][]" placeholder="Enter option">
                                                            <a href="javascript:;" class="btnRemoveOption"><img src="{{ asset('assets/images/icon-remove-ques.svg') }}"alt=""></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-2 mt-4">                    
                                            <div class="add-mult-ans addResponseBtn addResponseBtn${counter}" data-counter="${counter}">
                                                <img src="{{ asset('assets/images/icon-add-poll.svg') }}"
                                                    alt="">
                                            </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 reslogic-${counter}" data-id="${counter}" type="multiple"  >add
                                            logic</a>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12" id="divLogic${counter}"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12" id="append_child${counter}"></div>
                    </div>
                `);
                multipleChoiceCounter++;
                counter++;


                update_label_question()

                $(".d-g").sortable({
                    axis: "y", // Allow sorting only along the vertical axis
                    containment: "parent", // Constrain the dragging within the container
                    cursor: 'move',
                    opacity: 0.7,
                    zIndex: 1000,
                    revert: true, // Item will animate back to its original position if not dropped in a valid location
                });
            });

            var ratingCounter = 1;

            $(document).on('click', '.clickToRating', function() {
                $(".hidden_child_counter").val(counter);

                $('#divQuestion').append(`
                    <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">
                                            <input type="hidden" name="counter[]" value="${counter}">
                                            <input type="hidden" class="hidden_respones${counter}">
                                            <input type="hidden" class="hidden_child_counter" value="${counter}">

                                            <label class="" for=""><span class="label_question_number"> Question ${ratingCounter} </span> <span class="ans-type">answer type: Rating</span></label>
                                            <input type="hidden" name="parent_question${counter}" id="parent_question${counter}" value="">
                                            <input type="text" name="question[]" placeholder="Enter question" required />
                                            <input type="hidden" class="form-control" name="response_id[]"  id="question_responses${counter}" >
                                            <input type="hidden" class="form-control" name="input[]"  id="input${counter}" value="rating">
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="ques-btn-wrap">
                                            <a
                                                class="btn btn-prim btn-delete w-100 d-flex align-items-center justify-content-center text-center">delete
                                                question</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="quest-wrap-main">
                            <div class="row">
                                <div class="col-lg-9">  
                                    <div class="row">
                                        <div class="col-10">
                                            <div class="quest-wrap ans-wrap">
                                                <label for="">Options</label>
                                                <div class="rad-ans">
                                                    <div class="form-check p-2">
                                                        <input class="form-check-input get-value${counter}" type="text"
                                                            name="createdResponse[${counter}][]" id="poor${counter}" value="poor"/>
                                                        <label class="form-check-label poor${counter}" for="poor${counter}">
                                                            Poor
                                                        </label>
                                                    </div>
                                                    <div class="form-check p-2">
                                                        <input class="form-check-input get-value${counter}" type="text"
                                                            name="createdResponse[${counter}][]" id="satisfactory${counter}" value="satisfactory"/>
                                                        <label class="form-check-label satisfactory${counter}" for="satisfactory${counter}">
                                                            Satisfactory
                                                        </label>
                                                    </div>
                                                    <div class="form-check p-2">
                                                        <input class="form-check-input get-value${counter}" type="text"
                                                            name="createdResponse[${counter}][]" id="good${counter}" value="good"/>
                                                        <label class="form-check-label good${counter}" for="good${counter}">
                                                            Good
                                                        </label>
                                                    </div>
                                                    <div class="form-check p-2">
                                                        <input class="form-check-input get-value${counter}" type="text"
                                                            name="createdResponse[${counter}][]" id="Above_avg${counter}" value="Above avg" />
                                                        <label class="form-check-label Above_avg${counter}" for="Above_avg${counter}">
                                                            Above avg
                                                        </label>
                                                    </div>
                                                    <div class="form-check p-2">
                                                        <input class="form-check-input get-value${counter}" type="text"
                                                            name="createdResponse[${counter}][]" id="Excellent${counter}" value="Excellent" />
                                                        <label class="form-check-label Excellent${counter}" for="Excellent${counter}">
                                                            Excellent
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>                              
                                </div>
                              
                            </div>
                            <div class="row">
                                <div class="col-lg-12" id="divLogic${counter}"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12" id="append_child${counter}"></div>
                    </div>
                `);
                ratingCounter++;
                counter++;
                update_label_question();

                $(".d-g").sortable({
                    axis: "y", // Allow sorting only along the vertical axis
                    containment: "parent", // Constrain the dragging within the container
                    cursor: 'move',
                    opacity: 0.7,
                    zIndex: 1000,
                    revert: true, // Item will animate back to its original position if not dropped in a valid location
                });
            });

            var rankingCounter = 1;

            $(document).on('click', '.clickToRanking', function() {
                $(".hidden_child_counter").val(counter);

                $('#divQuestion').append(`
                    <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">
                                            <input type="hidden" name="counter[]" value="${counter}">
                                            <input type="hidden" class="hidden_respones${counter}">
                                            
                                            <input type="hidden" class="hidden_child_counter" value="${counter}">
                                            <label class="" for=""><span class="label_question_number"> Question ${rankingCounter} </span> <span class="ans-type">answer type: Ranking</span></label>
                                            <input type="hidden" name="parent_question${counter}" id="parent_question${counter}" value="">
                                            <input type="text" name="question[]" placeholder="Enter question" required />
                                            <input type="hidden" class="form-control" name="response_id[]"  id="question_responses${counter}" >
                                            <input type="hidden" class="form-control" name="input[]"  id="input${counter}" value="ranking">
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="ques-btn-wrap">
                                            <a
                                                class="btn btn-prim btn-delete w-100 d-flex align-items-center justify-content-center text-center">delete
                                                question</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="quest-wrap-main">
                            <div class="row">
                                <div class="col-lg-9">  
                                    <div class="row">
                                        <div class="col-10">
                                            <div class="quest-wrap ans-wrap">
                                                <label for="">Options</label>
                                                <div class="col-sm-12 text-danger" style="display:none;" id="question_response_error_html${counter}">
                                                        * Please choose response for the question
                                                </div>
                                                <div> <h6> Select From Predefined Responses <select class="sform-control get_responses responses_id${counter}" data-counter ="${counter}" type="ranking" style="display: inline-block;width: 20%;"><option selected disabled>Select Response</option>@foreach ($question_responses as $response)<option value="{{ $response->id }}">{{ $response->response_title }}</option>@endforeach</select> </h6>  </div>
                                                <!-- drag list -->
                                                <div class="multiple d-g ranking-options-${counter} question_response_option${counter}" data-counter="${counter}">
                                                    <!-- drag item -->
                                                    <div class="mult-ques-ans closest_to_option response-list-item draggable-item" draggable="true">
                                                        <img src="{{ asset('assets/images/icon-drag-poll.svg') }}"
                                                            alt="">
                                                        <div class="mult-inpt">
                                                            <span>1</span>
                                                            <input type="text" name="createdResponse[${counter}][]" placeholder="Enter option">
                                                            <a href="javascript:;" class="btnRemoveOption"><img src="{{ asset('assets/images/icon-remove-ques.svg') }}"alt=""></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-2 mt-4">                    
                                            <div class="add-mult-ans addResponseBtn addResponseBtn${counter}" data-counter="${counter}">
                                                <img src="{{ asset('assets/images/icon-add-poll.svg') }}"
                                                    alt="">
                                            </div>
                                        </div>
                                    </div>                              
                                    
                                </div>
                                
                            </div>
                            <div class="row">
                                <div class="col-lg-12" id="divLogic${counter}"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12" id="append_child${counter}"></div>
                    </div>
                `);

                rankingCounter++;
                counter++;
                update_label_question();

                $(".d-g").sortable({
                    axis: "y", // Allow sorting only along the vertical axis
                    containment: "parent", // Constrain the dragging within the container
                    cursor: 'move',
                    opacity: 0.7,
                    zIndex: 1000,
                    revert: true, // Item will animate back to its original position if not dropped in a valid location
                });

            });

            var yesNoCounter = 1;

            $(document).on('click', '.clickToYesNo', function() {
                // $(".hidden_child_counter").val(counter);                
                $('#divQuestion').append(getYesNoHtml(counter,'',1));
                yesNoCounter++;
                counter++;

                // yesno_count++;
                update_label_question();
            });

            function getYesNoHtml(counter,parent,question_number){
                return `
                    <div class="question-section `+(parent == '' ? '' : 'sub_question')+`">
                        
                        <div class="quest-wrap-main">
                            <div class="polls-quest-new">
                                <div class="row">
                                    <div class="col-lg-9">
                                        <div class="quest-wrap">
                                            <input type="hidden" name="counter[]" value="${counter}">
                                            <input type="hidden" class="hidden_child_counter" value="${counter}">
                                            <input type="hidden" name="parent_question${counter}" id="parent_question${counter}" value="${parent}">
                                           
                                            <label class="" for=""><span class="label_question_number"> Question ${question_number} </span> <span class="ans-type">answer type: Yes No</span></label>
                                           
                                            <input type="text" name="question[]" placeholder="Enter question" required />
                                            <input type="hidden" class="form-control" name="response_id[]"  id="question_responses${counter}" >
                                            <input type="hidden" class="form-control" name="input[]"  id="input${counter}" value="yes_no">
                                           
                                        </div>
                                      
                                    </div>
                                    <div class="col-lg-3">
                                        
                                        <div class="ques-btn-wrap">
                                            <a class="btn btn-prim btn-delete w-100 d-flex align-items-center justify-content-center text-center">delete
                                                question</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="quest-wrap-main">
                            <div class="row">
                                <div class="col-lg-9">
                                    <div class="quest-wrap ans-wrap">
                                        <label for="">Answer</label>
                                        <div class="col-sm-12 text-danger" style="display:none;" id="question_response_error_html${counter}">
                                            * Please choose response for the question
                                        </div>
                                        <input type="hidden" class="hiddenCounter" value="${counter}"/>
                                       
                                        <div class="rad-ans question_response_option${counter}">
                                            <div class="form-check p-2">
                                                <input class="form-check-input get-value${counter}" type="radio"
                                                    name="yesNoAnswer[${counter}]" id="yes_ans${counter}" value="yes" />
                                                <label class="form-check-label yes_ans${counter}" for="yes_ans${counter}">
                                                    Yes
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input get-value${counter}" type="radio"
                                                    name="yesNoAnswer[${counter}]" id="no_ans${counter}" value="no" />
                                                <label class="form-check-label" for="no_ans${counter}">
                                                    No
                                                </label>
                                            </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" count="1" total_responses="2">add
                                            logic</a>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12" id="divLogic${counter}"></div>
                            </div>
                            
                        </div>
                    </div>

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

                `
            }

            
            $(document).on('click', '.btn-add-logic', function() {
                var logiccounter = logiccounter;
                var current_counter = $(this).data('id');
                var total_responses = $(this).attr('total_responses');
                var type = $(this).attr('type');
                $(".question_logic_type").val(type);
                if(type != 'true_false' || type != 'yes_no')
                {
                    var options = $('.hidden_respones'+current_counter).val();
                }

                var logicSectionCount = $('#divLogic' + current_counter + ' .logic-section').length;
                console.log(logicSectionCount,total_responses)
                // if (logicSectionCount > total_responses) {
                if (logicSectionCount <= 0) {
                    $('#divLogic' + current_counter).append(`
                        <div class="row logic-section">
                            <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="current_counter" value="${current_counter}" />
                                        <select name="logic_triggers[${current_counter}]" id="" class="logic_trigger${current_counter} question_response_html${current_counter}">
                                            ${type != 'true_false' && type != 'yes_no' ? options : `
                                                <option value="${type == 'true_false' ? 'true' : 'yes'}">${type == 'true_false' ? 'True' : 'Yes'}</option>
                                                <option value="${type == 'true_false' ? 'false' : 'no'}">${type == 'true_false' ? 'False' : 'No'}</option>
                                            `}
                                        </select>
                                        <span>then</span>
                                        <input type="hidden" name="trigger_required_action[${current_counter}]" class="trigger_required_action${current_counter} getTriggerValue${current_counter}" value="1${current_counter}" />
                                        <a class="btn btn-prim btn-inverse w_25 px-3 d-flex align-items-center justify-content-center text-center  mx-2 clickToTriggerAction" id="${current_counter}">Trigger required action</a>
                                        <span>or</span>
                                        <a class="btn btn-prim btn-inverse w_25 px-3 d-flex align-items-center justify-content-center text-center btn-add-child mx-2" id="${current_counter}">Ask Question  </a>
                                        <div class="drp_boxes drp-bxs${current_counter} d-none">
                                            <div class="question-type-poll">
                                                <h3>question type</h3>
                                                <div class="form-check clickToYesNoChild" data-id="${current_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" data-id="${current_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" data-id="${current_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" data-id="${current_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" data-id="${current_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 clickToTextAnswerChild" data-id="${current_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">remove</a>
                                    
                                </div>
                            </div>
                        </div>
                    `);
                }
            });

            $(document).on('click', '.clickToTriggerAction', function(e) {
                var counter = $(this).attr("id");
                var trigger_required_action = 1;
                
                // Set the value of the hidden input field
                var dd = $(".trigger_required_action" + counter).val(trigger_required_action);
                $(this).addClass("btn btn-warning btn-prim");
                $(this).removeClass("btn-inverse");
            })

            //  All Child Questions 

            var childcounter = 0;
            var yesno_child = 1;
            var yesno_count = 0;
            $(document).on('click', '.clickToYesNoChild', function() {
                var parent_counter = $(this).attr('data-id');
                var hidden_child_counter = $(".hidden_child_counter").val();
                $(".drp-bxs" + hidden_child_counter).addClass('d-none')

                $('#append_child'+parent_counter).append(getYesNoHtml(counter,parent_counter,1));
                // $('#append_child'+parent_counter).append(`
                //     <div class="question-section sub_question">
                //         <div class="quest-wrap-main">
                //             <div class="polls-quest-new">
                //                 <div class="row">
                //                     <div class="col-lg-9">
                //                         <div class="quest-wrap">
                //                             <input type="hidden" name="counter[]" value="${counter}">
                //                             <input type="hidden" name="parent_question${counter}" id="parent_question${counter}" value="${parent_counter}">
                //                             <label class="" for=""><span class="label_question_numbers"> sub-question ${yesno_child} </span> <span class="ans-type">answer type: Yes No</span></label>

                //                             <input type="text" name="question[]" placeholder="Enter question" required />
                //                             <input type="hidden" class="form-control" name="response_id[]"  id="question_responses${counter}" >
                //                             <input type="hidden" class="form-control" name="input[]"  id="input${counter}" value="yes_no">
                //                         </div>
                //                     </div>
                //                     <div class="col-lg-3">
                //                         <div class="ques-btn-wrap">
                //                             <a class="btn btn-prim btn-delete w-100 d-flex align-items-center justify-content-center text-center">delete
                //                                 question</a>
                //                         </div>
                //                     </div>
                //                 </div>
                //             </div>
                //         </div>
                //         <div class="quest-wrap-main">
                //             <div class="row">
                //                 <div class="col-lg-9">
                //                     <div class="quest-wrap ans-wrap">
                //                         <label for="">Answer</label>
                //                         <div class="col-sm-12 text-danger" style="display:none;" id="question_response_error_html${counter}">
                //                             * Please choose response for the question
                //                         </div>
                //                         <input type="hidden" class="hiddenCounter" value="${counter}"/>
                                       
                //                         <div class="rad-ans question_response_option${counter}">
                //                             <div class="form-check p-2">
                //                                 <input class="form-check-input get-value${counter}${counter}" type="radio"
                //                                     name="yesNoAnswer[${counter}][${counter}]" id="yes_ans${counter}${counter}" value="yes" />
                //                                 <label class="form-check-label yes_ans${counter}" for="yes_ans${counter}${counter}">
                //                                     Yes
                //                                 </label>
                //                             </div>
                //                             <div class="form-check">
                //                                 <input class="form-check-input get-value${counter}${counter}" type="radio"
                //                                     name="yesNoAnswer[${counter}][${counter}]" id="no_ans${counter}${counter}" value="no" />
                //                                 <label class="form-check-label" for="no_ans${counter}${counter}">
                //                                     No
                //                                 </label>
                //                             </div>
                //                         </div>
                                        

                //                     </div>
                //                 </div>
                               
                //             </div>
                //             <div class="row">
                //                 <div class="col-lg-12" id="divLogic${counter}${counter}"></div>
                //             </div>
                //         </div>
                //     </div>
                // `);
                yesno_child++;
                hidden_child_counter++;
                counter++;

                update_label_question_child();
            });

            var true_false_counter = 1;

            $(document).on('click', '.clickToTrueFalseChild', function() {
                var parent_counter = $(this).attr('data-id');
                var hidden_child_counter = $(".hidden_child_counter").val();
                $(".drp-bxs" + hidden_child_counter).addClass('d-none');

                $('#append_child'+parent_counter).append(`
                    <div class="question-section sub_question" >
                        <div class="quest-wrap-main">
                            <div class="polls-quest-new">
                                <div class="row">
                                    <div class="col-lg-9">
                                        <div class="quest-wrap">
                                            <input type="hidden" name="counter[]" value="${counter}">
                                            <input type="hidden" name="parent_question${counter}" id="parent_question${counter}" value="${parent_counter}">
                                            <label class="" for=""><span class="label_question_numbers"> sub-question ${true_false_counter} </span> <span class="ans-type">answer type: True False</span></label>

                                            <input type="text" name="question[]" placeholder="Enter question" required />
                                            <input type="hidden" class="form-control" name="response_id[]"  id="question_responses${counter}" >
                                            <input type="hidden" class="form-control" name="input[]"  id="input${counter}" value="true_false">
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="ques-btn-wrap">
                                            <a
                                                class="btn btn-prim btn-delete w-100 d-flex align-items-center justify-content-center text-center">delete
                                                question</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="quest-wrap-main">
                            <div class="row">
                                <div class="col-lg-9">
                                    <div class="quest-wrap ans-wrap">
                                        <label for="">Answer</label>
                                        <div class="col-sm-12 text-danger" style="display:none;" id="question_response_error_html${counter}">
                                                * Please choose response for the question
                                        </div>
                                        <input type="hidden" class="counterTrueFalse" value="${counter}"/>
                                        <div class="rad-ans question_response_option${counter}">
                                            <div class="form-check p-2">
                                                <input class="form-check-input yes_ans${counter}${counter}" type="radio"
                                                    name="yesNoAnswer[${counter}][${counter}]" id="yes_ans${counter}${counter}" value="true"/>
                                                <label class="form-check-label" for="yes_ans${counter}${counter}">
                                                    True
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input yes_ans${counter}${counter}" type="radio"
                                                    name="yesNoAnswer[${counter}][${counter}]" id="no_ans${counter}${counter}" value="false"/>
                                                <label class="form-check-label" for="no_ans${counter}${counter}">
                                                    False
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                
                                </div>
                                
                            </div>
                            <div class="row">
                                <div class="col-lg-12" id="divLogic${counter}${counter}"></div>
                            </div>
                        </div>
                    </div>
                `);

                true_false_counter++;
                counter++;

                update_label_question_child()
            });

            var multiple_choice_counter_child = 1;

            $(document).on('click', '.clickToMultipleChoiceChild', function() {
                var parent_counter = $(this).attr('data-id');
                var hidden_child_counter = $(".hidden_child_counter").val();
                $(".drp-bxs" + hidden_child_counter).addClass('d-none');

                $('#append_child'+parent_counter).append(`
                    <div class="question-section sub_question">
                        <div class="quest-wrap-main">
                            <div class="polls-quest-new">
                                <div class="row">
                                    <div class="col-lg-9">
                                        <div class="quest-wrap">
                                            <input type="hidden" name="counter[]" value="${counter}">
                                            <input type="hidden" name="parent_question${counter}" id="parent_question${counter}" value="${parent_counter}">
                                            <label class="" for=""><span class="label_question_numbers"> sub-question ${multiple_choice_counter_child} </span> <span class="ans-type">answer type: Multiple Selection</span></label>

                                            <input type="text" name="question[]" placeholder="Enter question" required />
                                            <input type="hidden" class="form-control" name="response_id[]"  id="question_responses${counter}" >
                                            <input type="hidden" class="form-control" name="input[]"  id="input${counter}" value="multiple_choice">
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="ques-btn-wrap">
                                            <a
                                                class="btn btn-prim btn-delete w-100 d-flex align-items-center justify-content-center text-center">delete
                                                question</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="quest-wrap-main">
                            <div class="row">
                                <div class="col-lg-9">  
                                    <div class="row">
                                        <div class="col-10">
                                            <div class="quest-wrap ans-wrap">
                                                <label for="">Options</label>
                                                <div class="col-sm-12 text-danger" style="display:none;" id="question_response_error_html${counter}">
                                                        * Please choose response for the question
                                                </div>
                                                <div> <h6> Select From Predefined Responses <select class="sform-control get_responses responses_id${counter}" data-counter ="${counter}" type="multiple" style="display: inline-block;width: 20%;"><option selected disabled>Select Response</option>@foreach ($question_responses as $response)<option value="{{ $response->id }}">{{ $response->response_title }}</option>@endforeach</select> </h6>  </div>
                                                <!-- drag list -->
                                                <div class="multiple d-g ranking-options-${counter} question_response_option${counter}" data-counter="${counter}">
                                                    <!-- drag item -->
                                                    <div class="mult-ques-ans closest_to_option response-list-item draggable-item" draggable="true">
                                                        <img src="{{ asset('assets/images/icon-drag-poll.svg') }}"
                                                            alt="">
                                                        <div class="mult-inpt">
                                                            <span>1</span>
                                                            <input type="text" name="createdResponse[${counter}][]" placeholder="Enter option ">
                                                            <a href="javascript:;" class="btnRemoveOption"><img src="{{ asset('assets/images/icon-remove-ques.svg') }}"alt=""></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-2 mt-4">                    
                                            <div class="add-mult-ans addResponseBtn addResponseBtn${counter}" data-counter="${counter}">
                                                <img src="{{ asset('assets/images/icon-add-poll.svg') }}"
                                                    alt="">
                                            </div>
                                        </div>
                                    </div>                              
                                    
                                </div>
                               
                            </div>
                            <div class="row">
                                <div class="col-lg-12" id="divLogic${counter}${counter}"></div>
                            </div>
                        </div>
                    </div>
                `);
                multiple_choice_counter_child++;
                counter++;


                update_label_question_child()

                $(".d-g").sortable({
                    axis: "y", // Allow sorting only along the vertical axis
                    containment: "parent", // Constrain the dragging within the container
                    cursor: 'move',
                    opacity: 0.7,
                    zIndex: 1000,
                    revert: true, // Item will animate back to its original position if not dropped in a valid location
                });
            });

            var rating_counter = 1;

            $(document).on('click', '.clickToRatingChild', function() {
                var parent_counter = $(this).attr('data-id');
                var hidden_child_counter = $(".hidden_child_counter").val();
                $(".drp-bxs" + hidden_child_counter).addClass('d-none');

                $('#append_child'+parent_counter).append(`
                    <div class="question-section sub_question">
                        <div class="quest-wrap-main">
                            <div class="polls-quest-new">
                                <div class="row">
                                    <div class="col-lg-9">
                                        <div class="quest-wrap">
                                            <input type="hidden" name="counter[]" value="${counter}">
                                            <input type="hidden" name="parent_question${counter}" id="parent_question${counter}" value="${parent_counter}">
                                            <label class="" for=""><span class="label_question_numbers"> sub-question ${rating_counter} </span> <span class="ans-type">answer type: Rating</span></label>
                                            <input type="text" name="question[]" placeholder="Enter question" required />
                                            <input type="hidden" class="form-control" name="response_id[]"  id="question_responses${counter}" >
                                            <input type="hidden" class="form-control" name="input[]"  id="input${counter}" value="rating">
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="ques-btn-wrap">
                                            <a class="btn btn-prim btn-delete w-100 d-flex align-items-center justify-content-center text-center">delete
                                                question</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="quest-wrap-main">
                            <div class="row">
                                <div class="col-lg-9">  
                                    <div class="row">
                                        <div class="col-10">
                                            <div class="quest-wrap ans-wrap">
                                                <label for="">Options</label>
                                                 
                                                <div class="rad-ans">
                                                    <div class="form-check p-2">
                                                        <input class="form-check-input get-value${counter}" type="text"
                                                            name="createdResponse[${counter}][]" id="poor${counter}" value="poor"/>
                                                        <label class="form-check-label poor${counter}" for="poor${counter}">
                                                            Poor
                                                        </label>
                                                    </div>
                                                    <div class="form-check p-2">
                                                        <input class="form-check-input get-value${counter}" type="text"
                                                            name="createdResponse[${counter}][]" id="satisfactory${counter}" value="satisfactory"/>
                                                        <label class="form-check-label satisfactory${counter}" for="satisfactory${counter}">
                                                            Satisfactory
                                                        </label>
                                                    </div>
                                                    <div class="form-check p-2">
                                                        <input class="form-check-input get-value${counter}" type="text"
                                                            name="createdResponse[${counter}][]" id="good${counter}" value="good"/>
                                                        <label class="form-check-label good${counter}" for="good${counter}">
                                                            Good
                                                        </label>
                                                    </div>
                                                    <div class="form-check p-2">
                                                        <input class="form-check-input get-value${counter}" type="text"
                                                            name="createdResponse[${counter}][]" id="Above_avg${counter}" value="Above avg" />
                                                        <label class="form-check-label Above_avg${counter}" for="Above_avg${counter}">
                                                            Above avg
                                                        </label>
                                                    </div>
                                                    <div class="form-check p-2">
                                                        <input class="form-check-input get-value${counter}" type="text"
                                                            name="createdResponse[${counter}][]" id="Excellent${counter}" value="Excellent" />
                                                        <label class="form-check-label Excellent${counter}" for="Excellent${counter}">
                                                            Excellent
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-2 mt-4">                    
                                            <div class="add-mult-ans addResponseBtn addResponseBtn${counter}" data-counter="${counter}">
                                                <img src="{{ asset('assets/images/icon-add-poll.svg') }}"
                                                    alt="">
                                            </div>
                                        </div>
                                    </div>                              
                                    
                                </div>
                                
                            </div>
                            <div class="row">
                                <div class="col-lg-12" id="divLogic${counter}${counter}"></div>
                            </div>
                        </div>
                    </div>
                `);
                rating_counter++;
                counter++;
                update_label_question_child();

                $(".d-g").sortable({
                    axis: "y", // Allow sorting only along the vertical axis
                    containment: "parent", // Constrain the dragging within the container
                    cursor: 'move',
                    opacity: 0.7,
                    zIndex: 1000,
                    revert: true, // Item will animate back to its original position if not dropped in a valid location
                });
            });

            var ranking_counter = 1;

            $(document).on('click', '.clickToRankingChild', function() {
                var parent_counter = $(this).attr('data-id');

                var hidden_child_counter = $(".hidden_child_counter").val();
                $(".drp-bxs" + hidden_child_counter).addClass('d-none');

                $('#append_child'+parent_counter).append(`
                    <div class="question-section sub_question">
                        <div class="quest-wrap-main">
                            <div class="polls-quest-new">
                                <div class="row">
                                    <div class="col-lg-9">
                                        <div class="quest-wrap">
                                            <input type="hidden" name="counter[]" value="${counter}">
                                            <input type="hidden" name="parent_question${counter}" id="parent_question${counter}" value="${parent_counter}">
                                            <label class="" for=""><span class="label_question_numbers"> sub-question ${ranking_counter} </span> <span class="ans-type">answer type: Ranking</span></label>

                                            <input type="text" name="question[]" placeholder="Enter question" required />
                                            <input type="hidden" class="form-control" name="response_id[]"  id="question_responses${counter}" >
                                            <input type="hidden" class="form-control" name="input[]"  id="input${counter}" value="ranking">
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="ques-btn-wrap">
                                            <a
                                                class="btn btn-prim btn-delete w-100 d-flex align-items-center justify-content-center text-center">delete
                                                question</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="quest-wrap-main">
                            <div class="row">
                                <div class="col-lg-9">  
                                    <div class="row">
                                        <div class="col-10">
                                            <div class="quest-wrap ans-wrap">
                                                <label for="">Options</label>
                                                <div class="col-sm-12 text-danger" style="display:none;" id="question_response_error_html${counter}">
                                                        * Please choose response for the question
                                                </div>
                                                <div> <h6> Select From Predefined Responses <select class="sform-control get_responses responses_id${counter}" data-counter ="${counter}" type="ranking" style="display: inline-block;width: 20%;"><option selected disabled>Select Response</option>@foreach ($question_responses as $response)<option value="{{ $response->id }}">{{ $response->response_title }}</option>@endforeach</select> </h6>  </div>
                                                <!-- drag list -->
                                                <div class="multiple d-g ranking-options-${counter} question_response_option${counter}" data-counter="${counter}">
                                                    <!-- drag item -->
                                                    <div class="mult-ques-ans closest_to_option response-list-item draggable-item" draggable="true">
                                                        <img src="{{ asset('assets/images/icon-drag-poll.svg') }}"
                                                            alt="">
                                                        <div class="mult-inpt">
                                                            <span>1</span>
                                                            <input type="text" name="createdResponse[${counter}][]" placeholder="Enter option">
                                                            <a href="javascript:;" class="btnRemoveOption"><img src="{{ asset('assets/images/icon-remove-ques.svg') }}"alt=""></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-2 mt-4">                    
                                            <div class="add-mult-ans addResponseBtn addResponseBtn${counter}" data-counter="${counter}">
                                                <img src="{{ asset('assets/images/icon-add-poll.svg') }}"
                                                    alt="">
                                            </div>
                                        </div>
                                    </div>                              
                                    
                                </div>
                              
                            </div>
                            <div class="row">
                                <div class="col-lg-12" id="divLogic${counter}${counter}"></div>
                            </div>
                        </div>
                    </div>
                `);

                ranking_counter++;
                counter++;
                update_label_question_child();

                $(".d-g").sortable({
                    axis: "y", // Allow sorting only along the vertical axis
                    containment: "parent", // Constrain the dragging within the container
                    cursor: 'move',
                    opacity: 0.7,
                    zIndex: 1000,
                    revert: true, // Item will animate back to its original position if not dropped in a valid location
                });

            });
            var text_answer_child = 1;

            $(document).on('click', '.clickToTextAnswerChild', function() {
                var parent_counter = $(this).attr('data-id');
                var hidden_child_counter = $(".hidden_child_counter").val();
                $(".drp-bxs" + hidden_child_counter).addClass('d-none');

                $('#divQuestion').append(`
                    <div class="question-section sub_question">
                        <div class="quest-wrap-main">
                            <div class="polls-quest-new">
                                <div class="row">
                                    <div class="col-lg-9">
                                        <div class="quest-wrap">
                                            <input type="hidden" name="counter[]" value="${counter}">
                                            <label class="" for=""><span class="label_question_numbers"> sub-question ${text_answer_child} </span> <span class="ans-type">answer type: Text Answer</span></label>
                                            <input type="hidden" name="parent_question${counter}" id="parent_question${counter}" value="${parent_counter}">
                                            <input type="text" name="question[]" placeholder="Enter question" required />
                                            <input type="hidden" class="form-control" name="response_id[]"  id="question_responses${counter}" >
                                            <input type="hidden" class="form-control" name="input[]"  id="input${counter}" value="text_answer">
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="ques-btn-wrap">
                                            <a class="btn btn-prim btn-delete w-100 d-flex align-items-center justify-content-center text-center">delete question</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="quest-wrap-main">
                            <div class="row">
                                <div class="col-lg-9">
                                    <div class="quest-wrap ans-wrap">
                                        <label for="">Answer</label>
                                        <input type="text" name="textAnswer[${counter}]" value="" />
                                    </div>
                                </div>
                             
                            </div>
                        </div>
                    </div>
                    
                `);
                text_answer_child++;
                counter++;
                update_label_question()
            });


            function update_label_question() {
                $('.label_question_number').each(function(index) {
                    console.log($(this).html());
                    $(this).html('Question ' + (index + 1));
                });
                drop_box()
            }

            function update_label_question_child() {
                // $('.label_question_numbers').each(function(index) {
                //     console.log($(this).html());
                //     $(this).html('Sub-question ' + (index + 1));
                // });
                drop_boxs()
            }



            $(document).on('click', '.btn-delete', function(e) {
                Swal.fire({
                    title: 'Confirmation',
                    text: 'Are you sure you want to delete this question?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'No, keep it'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $(this).closest('.question-section').remove();
                        counter--
                    }
                });

            })

            $(document).on('click', '.btn-remove-logic', function(e) {
                $(this).closest('.logic-section').remove();
            })

            $(document).on('click', '.btnRemoveOption', function(e) {
                $(this).closest('.closest_to_option').remove();
            });

            function drop_box() {
                var $drpBx = $(".drp-bx");
                if ($drpBx.hasClass('active')) {
                    $drpBx.removeClass('active');
                } else {
                    $drpBx.addClass('active');
                }
            }

            function drop_boxs(id) {
                var $drpBx = $(".drp-bxs" + id);
                if ($drpBx.hasClass('d-none')) {
                    $drpBx.removeClass('d-none');
                } else {
                    $drpBx.addClass('d-none');
                }
            }

        })
    </script>
    <script>
        document.addEventListener('click', function(event) {
            var drpBoxes = document.querySelector('.drp_boxes');
            var btnAddChild = document.querySelector('.btn-add-child');

            if (!drpBoxes.contains(event.target) && !btnAddChild.contains(event.target)) {
                drpBoxes.classList.add('d-none');
            }
        });

        document.querySelector('.drp_boxes').addEventListener('click', function(event) {
            if (event.target.classList.contains('form-check')) {
                var drpBoxes = document.querySelector('.drp_boxes');
                drpBoxes.classList.add('d-none');
            }
        });
    </script>
@endsection