@extends('dashboard.dashboard_layouts.dashboard_master')

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


@section('admin_dashboard_css')
    <style>
        /*******************************
        * MODAL AS LEFT/RIGHT SIDEBAR
        * Add "left" or "right" in modal parent div, after class="modal".
        * Get free snippets on bootpen.com
        *******************************/
        .modal.right .modal-dialog {
            position: fixed;
            margin: auto;
            width: 320px;
            height: 100%;
            -webkit-transform: translate3d(0%, 0, 0);
            -ms-transform: translate3d(0%, 0, 0);
            -o-transform: translate3d(0%, 0, 0);
            transform: translate3d(0%, 0, 0);
        }

        .modal.right .modal-content {
            height: 100%;
            overflow-y: auto;
        }

        .modal.right .modal-body {
            padding: 15px 15px 80px;
        }

        /*Right*/
        .modal.right.fade .modal-dialog {
            right: -320px;
            -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
            -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
            -o-transition: opacity 0.3s linear, right 0.3s ease-out;
            transition: opacity 0.3s linear, right 0.3s ease-out;
        }

        .modal.right.fade.in .modal-dialog {
            right: 0;
        }

        /* ----- MODAL STYLE ----- */
        .modal-content {
            border-radius: 0;
            border: none;
        }

        .modal-header {
            border-bottom-color: #EEEEEE;
            background-color: #FAFAFA;
        }

        /* body {
            background: #ecf0fa;
        } */

        .choice:hover {
            cursor: pointer;
            background: #ecf0fa;
        }

        .checkbox-span {
            cursor: pointer;
        }

        select.dropdown {
            margin: 0px;
            border: 1px solid red;
            color: red;
            -webkit-appearance: none;
            -webkit-border-radius: 100px;
            -moz-appearance: none;
            appearance: none;
            background: white;
            font-size: 12px;
            cursor: pointer;
        }

        .dropdown>option {
            color: black;
        }

        select.dropdown1 {
            margin: 0px;
            border: 1px solid #f7f7f7;
            color: blue;
            -webkit-appearance: none;
            -webkit-border-radius: 0px;
            -moz-appearance: none;
            appearance: none;
            background: #f7f7f7;
            cursor: pointer;
            text-decoration: underline;
        }

        .dropdown1>option {
            color: black;
        }

        * {
            padding: 0;
            margin: 0;
        }

        .float {
            background: #0162e8;
            color: #FFF;
            border-radius: 6px;
            text-align: center;
            box-shadow: 2px 2px 3px #999;
        }

        .dragging {
            opacity: 0.7 !important;
        }

        .my-float {
            margin-top: 5px;
        }

        .floats {
            background: dodgerblue;
            color: #FFF;
            border-radius: 6px;
            text-align: center;
            margin-left: -5px;
            box-shadow: 2px 2px 3px #999;
        }

        .my-floats {
            margin-top: 5px;
        }

        .add-logic-section {
            padding-top: -12px !important;
        }

        .border-height {
            height: auto;
        }
    </style>

    <style>
        #myModal2 .modal-dialog-slideout {
            min-height: 100%;
            margin: 0 0 0 auto;
            background: #fff;
        }

        .modal.fade .modal-dialog.modal-dialog-slideout {
            -webkit-transform: translate(100%, 0)scale(1);
            transform: translate(100%, 0)scale(1);
        }

        .modal.fade.show .modal-dialog.modal-dialog-slideout {
            -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
            display: flex;
            align-items: stretch;
            -webkit-box-align: stretch;
            height: 100%;
        }

        .modal.fade.show .modal-dialog.modal-dialog-slideout .modal-body {
            overflow-y: auto;
            overflow-x: hidden;
        }

        .modal-dialog-slideout .modal-content {
            border: 0;
        }

        .modal-dialog-slideout .modal-header,
        .modal-dialog-slideout .modal-footer {
            height: 69px;
            display: block;
        }

        #myModal2 .modal-dialog-slideout .modal-header h5 {
            float: left;
        }

        .modal-dialog {
            max-width: 403px !important;
            margin: 1.75rem auto;
        }
    </style>

    <style>
        #editResponseModal .modal-dialog-slideout {
            min-height: 100%;
            margin: 0 0 0 auto;
            background: #fff;
        }

        .modal.fade .modal-dialog.modal-dialog-slideout {
            -webkit-transform: translate(100%, 0)scale(1);
            transform: translate(100%, 0)scale(1);
        }

        .modal.fade.show .modal-dialog.modal-dialog-slideout {
            -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
            display: flex;
            align-items: stretch;
            -webkit-box-align: stretch;
            height: 100%;
        }

        .modal.fade.show .modal-dialog.modal-dialog-slideout .modal-body {
            overflow-y: auto;
            overflow-x: hidden;
        }

        .modal-dialog-slideout .modal-content {
            border: 0;
        }

        .modal-dialog-slideout .modal-header,
        .modal-dialog-slideout .modal-footer {
            height: 69px;
            display: block;
        }

        #editResponseModal .modal-dialog-slideout .modal-header h5 {
            float: left;
        }

        .modal-dialog {
            max-width: 403px !important;
            margin: 1.75rem auto;
        }
    </style>
@endsection


@section('admin_dashboard_content')
    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
        <nav class="breadcrumb-4 p-2 px-3">
            <ol class="breadcrumb breadcrumb-style1">
                <li class="breadcrumb-item">
                    <a href="{{ route('dashboard') }}">Dashboard</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="{{ route('poll') }}">Polling list</a>
                </li>
                <li class="breadcrumb-item">
                    <a> Generate Poll</a>
                </li>
            </ol>

        </nav>
    </div>

    <input type="hidden" id="tempCount" value="0">
    <form id="addquestion">
        <div class="row">

            <div class="col-lg-6">
                <label for="" style="font-weight: 700;">Poll name</label>
                <input type="text" class="form-control p-2" name="polling_name" required placeholder="Enter polling name"
                    required>
            </div>

            <div class="col-lg-3">
                <label for="" style="font-weight: 700;">Poll closing date</label>
                <input type="text" id="poll_closing_date" class="form-control p-2 mb-2" name="poll_closing_date" required
                    placeholder="Enter polling close date" required>
            </div>

            <div class="col-lg-3">
                <label for="" style="font-weight: 700;">Poll closing time</label>
                <input type="text" class="form-control p-2 mb-2 timepicker" name="poll_closing_time" required
                    placeholder="Enter polling close time" required>
            </div>
        </div>

        <div id="divQuestion" class="row row-sm">
        </div>

        <div class="row">
            <div class="col-lg-2">
                <a href="javascript:;" class="float text-white btn btn-primary" id="append">

                    <i class="fa fa-plus my-float"> </i> Add Question

                </a>
            </div>
            <div class="col-lg-2">
                <a href="javascript:;" class="floats btn btn-info text-white predefine_questions" id="predefine_questions"
                    data-bs-toggle="modal" data-bs-target="#Question">

                    <i class="fa fa-plus my-floats"> </i> Buit in Question

                </a>
            </div>


            <div class="col-lg-7">
                <button type="submit" class=" mb-2 btn btn-success text-white" style=" font-size:16px;">
                    <i class="fa fa-plus"></i> Generate Poll
                </button>

            </div>
            <div class="col-lg-1"></div>
        </div>

    </form>

    <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">

                    <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[]" palceholder=""
                                                    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>

    <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>
@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>
        $(document).ready(function(e) {

            $("#poll_closing_date").datepicker({
                dateFormat: "yy-mm-dd"
            });

            $('.timepicker').timepicker({
                timeFormat: 'h:mm p',
                dynamic: false,
                dropdown: true,
                scrollbar: true
            });

            var counter = 0;
            var currTrigger = 0;
            var childquestion = 0;

            $("#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()

                $.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,
                    },
                    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);
                    }
                });
            }

            //Add question
            $("#addquestion").on('submit', (function(e) {
                e.preventDefault();
                var question_counter = $("input[name='counter[]']").map(function() {
                    return $(this).val();
                }).get();
                var formError = false
                $.each(question_counter, (i, v) => {
                    if ($("#question_responses" + v).val() == '') {
                        let value = $("#input" + v).val().trim();
                        if (type.includes(value)) {
                            $("#question_response_error_html" + v).css('display', 'none')
                        } else {
                            $("#question_response_error_html" + v).css('display', 'block')
                            formError = true
                        }

                    } else {
                        $("#question_response_error_html" + v).css('display', 'none')
                    }
                })
                // console.log(value, type);

                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;
                }

                // return;
                if (formError) {
                    //alert("Please fill all required values")
                } else {
                    $.ajax({
                        url: "/api/poll/question/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) {
                            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 = "{{ route('poll') }}"
                            }
                        },
                        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');
                // alert(responseId);

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

                $("#myModal2").modal('hide');
                $("#add-logic" + counter).addClass('add-logic');

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

                    },
                    complete: function() {

                    },
                    success: function(response) {

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


                        } else if (response["status"] == "success") {
                            $(".question_response_html" + questionId).html(response["html"])
                            $(".question_response_option" + questionId).html(response[
                                "htmltwo"])
                            $("#myModal2").modal('hide');
                            $("#div-add-logic" + questionId).css('display', 'block')
                            $("#question_response_error_html" + questionId).css('display',
                                'none')
                        }
                    },
                    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();
                // console.log(questionType);
                let type = ["text", "true / false", "rating"];
                let questionListArea = element.closest(".question-list");
                questionListArea.querySelector(".response-area").querySelector("div").innerHTML = "";
                let counter = questionListArea.dataset.counter;
                removeRanking(questionListArea);
                if (type.includes(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") {
                    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="response-list-item my-1 d-flex justify-content-between draggable-item" draggable="true">
                                    <span class="serial-no py-3" style="padding-left: 30px;">${count}</span>
                                    <input type="text" name="createdResponse[${counter}][]" placeholder="Please Write Response" class="created-response px-2" style="width: 80%; height:45px">
                                    <button type="button" class="btn bg-danger text-white deleteResponse"><i class="fa fa-minus" aria-hidden="true"></i></button>
                            </div>`;
                    questionListArea.querySelector(".response-holder").insertAdjacentHTML('beforeend',
                    html);
                    questionListArea.querySelector(".btn-choose-response").setAttribute('disabled', true);
                    // 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;
                invalidLogic.includes(question) ? questionSection.querySelector(".add-logic-section").classList.add(
                    "d-none") : questionSection.querySelector(".add-logic-section").classList.remove("d-none");
            }

            $(document).on("click", ".addResponseBtn", function(e) {
                let element = this;
                let responseSection = element.closest(".response-section");
                let counter = element.closest(".question-list").dataset.counter;
                let listItem = responseSection.querySelectorAll('.response-list-item');
                let count = listItem == null ? 1 : (listItem.length + 1);
                let html = `<div class="response-list-item my-1 d-flex justify-content-between draggable-item" draggable="true">
                                    <span class="serial-no py-3" style="padding-left: 30px;">${count}</span>
                                    <input type="text" name="createdResponse[${counter}][]" placeholder="Please Write Response" class="created-response px-2" style="width: 80%; height:45px;">
                                    <button type="button" class="btn bg-danger text-white deleteResponse"><i class="fa fa-minus" aria-hidden="true"></i></button>
                            </div>`;
                responseSection.querySelector(".response-holder").insertAdjacentHTML('beforeend', html);

            })

            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("response-holder")) {
                    const afterElement = dragAfterElement(element, e.clientY)
                    let dragging = document.querySelector(".dragging");
                    afterElement == null ? element.append(dragging) : element.insertBefore(dragging,
                        afterElement);
                }

            })

            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;
                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
            });

        });
    </script>
@endsection