@extends('dashboard.dashboard_layouts.dashboard_master')

@section('admin_dashboard_title')
Edit 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;
    }

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

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

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

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

    #myModal .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;}
    #myModal .modal-dialog-slideout .modal-header h5 {float:left;}

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

    #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 active">Update Polling question</li>
            </ol>

        </nav>
    </div>
    <!-- breadcrumb -->

    <input type="hidden" id="tempCount" value="{{$question_id}}">
    <form id="updatequestion">

        <input type="hidden" name="polling_id" id="polling_id" value="{{$poll_list->id}}">
        <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" value="{{$poll_list->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" value="{{$poll_list->poll_closing_date}}" 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" value="{{$poll_list->poll_closing_time}}" required placeholder="Enter polling time" required>
            </div>

        </div>

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

        <div class="row">

            <div class="col-lg-3">

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

        </div>

    </form>

    <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">
                        <input type="hidden" name="parent_question" id="parentQuestion">

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

                                <div class="col-6 text-center">
                                    <button type="button" class="btn btn-success " data-dismiss="modal" id="child-question"> <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" name="choosen_response_btn" id="choose-response">

    <div class="container">
        <!-- modal start -->
        <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
            <div class="modal-dialog modal-dialog-slideout" role="document">
                <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">
                            <!-- here comes the response area -->
                            @foreach($responses as $response)
                                @php
                                    $responseItem = json_decode($response->response);
                                @endphp

                            <div class="row border-bottom p-2">

                                <div class="col-sm-10">
                                    <a href="javascript:;" style="text-decoration:none;" class="question-response" data-response-id="{{$response->id}}" id="{{$response->id}}">
                                        <div class="w-100">
                                        @foreach($responseItem as $index => $item)
                                        <span class="badge rounded-pill bg-success">{{$item}}</span>&nbsp;&nbsp;
                                        @endforeach
                                        </div>
                                    </a>
                                </div>

                                <div class="col-sm-2">
                                    <span style="float:right">
                                        <a href="javascript:;" id="22" role="button" title="Update Response" class="editBtn" data-bs-toggle="modal" data-bs-target="#editResponseModal">
                                            <i class="fas fa-pencil-alt"></i>
                                        </a>
                                    </span>
                                </div>
                            </div>

                            @endforeach

                            <!-- response area ends here -->

                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- modal end -->

        <!-- Modal add response -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog modal-dialog-slideout" 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" 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>

    <input type="hidden" id="question_id" value="{{$question_id}}">
    <!-- Polling question starts here -->
    <div class="polling-question-section">
        @php
        $currentIndex = -1;
        $invalidLogic = ['rating' , 'text'];
        @endphp
        @foreach($pollingQuestions as $index => $question)
            @include('poll.components.polling-question')
        @endforeach
    </div>
    <!-- polling question ends here -->
    <div class="row">

        <div class="col-lg-2">
            <a href="javascript:;" class="float btn btn-info text-white" id="append">
            <i class="fa fa-plus my-float"> </i> Add Question
            </a>
        </div>
        <div class="col-lg-2">
            <button type="submit" class=" mb-2 btn btn-success text-white" id="btnSubmitpoll" style="font-size:16px;">
                <i class="fa fa-spinner fa-spin fa-pulse spin-poll" style="display:none"></i> Update Poll
            </button>

        </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 src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>

<script>

    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
    }

    document.addEventListener('change' , function(e){
        let element = e.target;
        if(element.classList.contains('question-type'))
        {
            let value = element.options[element.selectedIndex].innerText.trim();
            let questionArea = element.closest('.polling-question-area');
            questionArea.querySelector('.response-area').querySelector('div').innerHTML = "";
            value != 'radio' ?  questionArea.querySelector(".btn-choose-response").setAttribute('disabled' , true) : questionArea.querySelector(".btn-choose-response").removeAttribute('disabled');
            let type = ["text" , "true / false" , "rating" ];
            removeSection(questionArea);
            if(type.includes(value))
            {
                $.ajax({
                type : 'POST',
                datatype : 'JSON',
                url : '{{route("hidden_response")}}',
                data : {
                    _token : '{{csrf_token()}}',
                    responseTitle: value
                },
                success : function(res) {
                    questionArea.querySelector(".question_response_html").innerHTML = res.html;
                    questionArea.querySelector(".question_response_option").innerHTML = res.htmltwo;
                    questionArea.querySelector("input[name='input[]']").value = value;
                }
                })

            } else if(value == "ranking" ) {
                questionArea.querySelector(".response-btn-section").classList.remove("d-none");
                questionArea.querySelector("input[name='input[]']").value = 'ranking';
                let listItem = questionArea.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[][]" 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>`;
                questionArea.querySelector(".response-holder").insertAdjacentHTML('beforeend' , html);
                questionArea.querySelector(".add-logic-section").classList.add('d-none');
            } else {
                console.log(questionArea.querySelector(".response-area"));
                questionArea.querySelector(".response-area").querySelector("div").innerHTML = "";
                questionArea.querySelector("input[name='input[]']").value = value;
            }

        }
    })

    function removeSection(questionSection)
    {
        questionSection.querySelector(".response-btn-section").classList.add('d-none');
        questionSection.querySelector(".response-holder").innerHTML = "";
        questionSection.querySelector(".add-logic-section").classList.remove('d-none');
        //check logic section
        let questionType =  questionSection.querySelector(".question-type");
        let question = questionType.options[questionType.selectedIndex].innerText;
        let invalidQuestion = ['text' , 'rating'];
        invalidQuestion.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 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[][]" 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).ready(function(e){
        var counter = 0;

        //Get Poll Question
        $(document).on('click', '.add-logic', function(e) {
            element = this;
            let questionList = element.closest(".polling-question-area");
            let select = questionList.querySelector(".question-type");
            let type = ['text' , 'rating']
            if(type.includes(select.options[select.selectedIndex].innerText.trim())) return;

            $(".checkbox-span").removeClass('text-danger')
            $(this).addClass('text-primary')
            // $('#div-add-logic' + trigrerCount).toggle();
            questionList.querySelector(".add-logic-card").style.display = "block";
            // $(questionList.querySelector(".add-logic")).toggle()
        })

        editquestion()

        //Edit Poll Question
        function editquestion() {

            var polling_id = $("#polling_id").val()

            $.ajax({
                url: '/api/poll/questionare/edit/'+polling_id,
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}",
                    "Content-Type": "application/json"
                },
                type: "get",
                dataType: "JSON",
                beforeSend: function() {
                },
                complete: function() {
                },
                success: function(response) {
                    if (response["status"] == "fail") {
                    }  else if (response["status"] == "success") {
                        $("#divQuestion").append((response["html"]));

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

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

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

        }

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

            var id = $(this).attr('db-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) {
                    let nextElement = element.closest(".polling-question-area").nextElementSibling;
                    let check = ["" , undefined , null];
                    for(let i=0; i>-1; i++)
                    {
                        if(!check.includes(nextElement) && nextElement.classList.contains("childquestion"))
                        {
                            previousElement = nextElement;
                            nextElement = previousElement.nextElementSibling;
                            previousElement.remove();
                        }else{
                            break;
                        }
                    }
                    element.closest(".polling-question-area").remove();
                    setParentIndex()


                } else {

                    Swal.close();

                }

            });

        });

        function setParentIndex()
        {
           let pollingQuestion =[ ...document.querySelectorAll(".polling-question-area")];
           pollingQuestion.forEach((question , index)=>{
                if(question.classList.contains("childquestion"))
                {
                    question.querySelector(".parent_question").value = (index-1)
                }
           })

        }

        $("#append").on('click', function(e) {
            e.preventDefault();
            question('parent');
        });

        $("#child-question").on('click' , function(e){
            e.preventDefault();
            let parentQuestion = parseInt(document.getElementById("parentQuestion").value)
            let margin = 40;
            let parent = document.querySelectorAll(".polling-question-area")[parentQuestion];

            for(let i=0; i>-1; i++ )
            {
                if(parent.classList.contains("childquestion"))
                {
                  margin += 40;
                  parent = parent.previousElementSibling;
                }else{
                    break;
                }
            }
            let html = question('child' , parentQuestion , margin);

        })

        function question( type , parentQuestion , margin)
        {
            let appendType = type;
            console.log(margin);
            $.ajax({
                type: "POST",
                url: '{{route("poll-append-question")}}',
                dataType: "JSON",
                data: {
                    _token  : '{{csrf_token()}}',
                    type : appendType,
                    parentQuestion : parentQuestion,
                    margin : margin
                },
                success: function(response) {
                    if(type == 'parent')
                    {
                        document.querySelector('.polling-question-section').insertAdjacentHTML('beforeend' , response.html);
                    }
                    else
                    {
                        document.querySelectorAll(".polling-question-area")[parentQuestion].insertAdjacentHTML('afterend' , response.html);
                        document.querySelectorAll(".polling-question-area")[parentQuestion].querySelector(".loggic_trigger").value = "1";
                    }
                }
            });
        }

        $(document).on('click', '.add-logic', function(e) {
            element = this;
            let questionList = element.closest(".polling-question-area");
            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();
        })

        //Update Poll question
        $("#updatequestion").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() == '')
                {

                    if(($("#input"+v).val() == 'input'))
                    {
                        $("#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');
                }
            })
            var question = $('input[name="question[]"]').map(function(){return $(this).val();}).get();

            if(formError){
                //alert("Please fill all required values")
            }else{
                $.ajax({
                    url: "/api/poll/questions/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() {
                        $("#btnSubmitpoll").attr('disabled', true);
                        $(".spin-poll").css('display', 'inline-block');
                    },
                    complete: function() {
                        $("#btnSubmitpoll").attr('disabled', false);
                        $(".spin-poll").css('display', 'none');
                    },
                    success: function(response) {
                        console.log(response)
                        if (response["status"] == "fail") {
                            toastr.error('Failed', response["msg"])

                        } else if (response["status"] == "success") {
                            console.log(response)
                            toastr.success('Success', response["msg"])
                            // $("#addquestion")[0].reset();
                        }
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            }

        }));

        function disableAlert(alr) {
            $("#" + alr).css("display", "none");
        }

        var questionId = 0;

        // Choose Response
        $(document).on('click','.btn-choose-response',function(e){
            questionId = $(this).attr('id')
            let responseIndex = $('.btn-choose-response').index(this);
            document.getElementById('choose-response').value = responseIndex;

        })

        $(document).on('click' , ".question-response" ,  function(e){
            element = this;
            let responseId = element.dataset.responseId;
            let badges = element.querySelectorAll(".badge");
            let badgeHTML = "";
            let optionList = "";
            for(let i=0 ;i < badges.length; i++)
            {
                badgeHTML += badges[i].outerHTML+"&nbsp;&nbsp;";
                optionList += `<option value='${badges[i].innerText}'>${badges[i].innerText}</option>`;
            }
            let responseIndex = parseInt(document.getElementById("choose-response").value)
            let question = document.querySelectorAll('.polling-question-area')[responseIndex];
            question.querySelector(".question_response_html").innerHTML = optionList;
            question.querySelector(".response-area").querySelector("div").innerHTML = badgeHTML;
            question.querySelector("input[name='response_id[]']").value = responseId;

        })

        //Chooose Response for Question
        $(document).on('click','.question-response',function(e){
            $("#myModal2").modal('hide');
            responseId = $(this).attr('id')
            $("#question_responses"+questionId).val(responseId)
            $("#add-logic"+counter).addClass('add-logic');

            $.ajax({
                url: '/api/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") {
                            $("#myModal2").modal('hide');
                            $(".question_response_html"+questionId).html(response["html"])
                            $(".question_response_option"+questionId).html(response["htmltwo"])
                            $("#div-add-logic"+questionId).css('display','block')
                            $("#question_response_error_html"+questionId).css('display','none')
                        }
                },
                error: function(error) {
                    console.log(error);
                }
            });
        })

        $(document).on('click','.btn-choose-input',function(e){

            counter = $(this).attr('id');
            $("#input"+counter).val('input')
            $("#add-logic"+counter).removeClass('add-logic');
            $("#div-add-logic"+counter).css('display','none');
            $("#question_responses"+counter).val('');

            $.ajax({
                url: '/api/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() {
                    $(".btn-choose-response").attr('disabled', true);
                },
                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);
                }
            });
        })

        responses();

        // Get Responses
        function responses() {

            $.ajax({
                url: '/api/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"] == "success")
                    {
                        $("#divResponse").html((response["html"]));
                    }
                    else if(response["status"] == "fail")
                    {

                    }
                },
                error: function(error) {
                    console.log(error);
                }
            });
        }
        var counterEditResponse = 0;

        //Add or Remove tr from Responses
        $("#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++;
        }

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

            $.ajax({
                url: "/api/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"])
                        $("#myModal").modal("hide");
                        responses()
                    }
                },
                error: function(error) {
                    console.log(error);
                }
            });
        }));

        //edit Response
        $(document).on('click', '.editBtn', function (e) {
            var id = $(this).attr('id');
            $("table.edit-response-list").empty();
            $.ajax({
                url: '/response/edit/'+id,
                type: "GET",
                dataType: "JSON",
                success: function (response) {
                    if (response["status"] == "fail") {
                        Swal.fire("Failed!", response["msg"], "error");
                    } else if (response["status"] == "success") {
                        $("#editResponseId").val(response.data.id)
                        $.each(response.responses,(i,v)=>{
                            addEditResponse(v)
                        })
                    }
                },
                error: function (error) {
                    console.log(error);
                },
                async: false
            });
        });

        function disableAlert(alr) {
            $("#" + alr).css("display", "none");
        }

        // 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();

            if(edit_responses.length > 0){
                $.ajax({
                    url: "/api/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')
            }
        }));

        //Trigger Question

        //Add Logic for Question
        $(document).on('click', '.add-logic', function (e) {
            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();
        })

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

            var UserOption = $(this).val();
            let triggerIndex = $('.trigger').index(this);
            let questionArea = this.closest('.polling-question-area')
            let triggerValue = questionArea.querySelector(".question_response_html").value;
            let check = [undefined , null , ""];
            // if(check.includes(triggerValue)) {
            //     toastr.error('Please select trigger first');
            //     return;
            // }

            if($(this).val()=='ask_question')
            {
                var id = $(this).attr('id').split('trigger')
                var questionCount = $("#question_id").val()
            }
            if($("#trigger"+questionId).val()=='required_action')
            {
                // $("#logic_question"+questionId).css('display','none');
                $("#logic_question"+questionId).children().last().remove();
                // $("#logic_question"+questionId).remove();
            }

            if ($(this).val() == 'ask_question') {
                $("#ask_question").modal('show');
                document.getElementById("parentQuestion").value = triggerIndex;
            }
        })

        // Delte Poll Question
        $(document).on('click', '.DeleteBtn', function(e) {

            var db_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) {

                    $.ajax({

                        url: '/api/poll/delete/question/' + id,

                        type: "GET",

                        dataType: "JSON",

                        success: function(response) {

                            if(response["status"] == "fail")
                            {
                                Swal.fire("Failed!", "Failed to Question Order.", "error");
                            }
                            else if(response["status"] == "success")
                            {
                                Swal.fire("Deleted!", "Question has been deleted.","success");
                            }
                        },

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

                        async: false

                    });

                }
                else
                {
                    Swal.close();
                }

            });
        });

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

        // Add Row When Response is Added
        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
        });

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

    document.getElementById("btnSubmitpoll").addEventListener("click" , function(e){
        e.preventDefault();
        let pollingQuestions = document.querySelectorAll(".polling-question-area");
        let questionCount = pollingQuestions.length;
        let responseList = [...document.querySelectorAll(".response-holder")];
        let createdRanking = [];
        let check = ["" , undefined , null]
        responseList.forEach((response)=>{
            let ranking = [ ...response.querySelectorAll(".created-response")];
            if(ranking.length > 0)
            {
                let rankingItems = [];
                ranking.forEach(item => {
                    if(!check.includes(item.value) )
                        rankingItems.push(item.value);
                        console.log(item.value)
                })
                createdRanking.push(rankingItems)
            }

        })

        let pollingName = document.getElementsByName("polling_name")[0].value;
        let closeDate = document.getElementById("poll_closing_date").value;
        let closingTime = document.getElementsByName("poll_closing_time")[0].value;
        let questionLists = [];
        let flag = false;
        let callbackResponses = ['radio' ,'true / false']
        pollingQuestions.forEach(eachQuestion =>{
            let question = eachQuestion.querySelector("input[name='question[]']").value;
            let questionType = eachQuestion.querySelector("input[name='input[]']").value;
            let responseId = eachQuestion.querySelector("input[name='response_id[]']").value;
            let parentId = eachQuestion.querySelector(".parent_question").value;
            let type = eachQuestion.querySelector(".question-type").value;
            let logicTrigger = eachQuestion.querySelector(".loggic_trigger").value;
            let triggerResponse = eachQuestion.querySelector(".question_response_html")
            let logicResponse = logicTrigger == 1 ? triggerResponse.options[triggerResponse.selectedIndex].value : "";
            // if(questionType == "radio" && check.includes(responseId)) flag = true;
            // if(questionType == "ranking" && eachQuestion.closest(".polling-question-area").querySelectorAll(".created-response").length ==0) flag =true;
            questionLists.push([  question, questionType ,responseId , parentId , type , logicTrigger ,logicResponse ]);
        });

        if(flag == true)
        {
            toastr.error("Please Complete Form!")
            return
        }

        $.ajax({
            type : 'POST',
            url : "{{route('update-poll')}}",
            datatype : 'JSON',
            data : {
                _token : '{{csrf_token()}}',
                createdRanking : createdRanking,
                questionList  : questionLists,
                id : '{{$id}}'
            },
            success: function(res){
                if(res.success == true)
                {
                    toastr.success("Polling Form Updated Successfully")
                }
            }
        })
    })

</script>
@endsection