@extends('layouts.site')

@section('content')
    <section class="banner_blog_img1">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 col-xs-12 col-md-12 p-0">
                    <div class="banner-blog1">
                        <h2>{{ $questionnaire->title }}</h2>
                        <p>{{ $questionnaire->short_description }}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="section--40">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-xs-12 col-sm-12 mt-3">
                    <div class="side_slide_category">
                        <div class="banner_form_dist">
                            <div class="dlt-head-log">
                                <h2>{{ $questionnaire->title }}</h2>
                                <p>{{ $questionnaire->description }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-8 col-xs-12 col-md-12 mt-3">
                    <div class="leads_main_inform">

                        <div id="questionAjax">
                        </div>

                        <div class="row">
                            <div class="col-lg-12 col-sm-12 btn-collect">
                                <div class="btn-end_next">
                                    <div class="btn_head btn-next-prev">
                                        <a href="lead-form-v2.php" class="btn__primary btn__icon btn_lead_center btn_clor">
                                            <i class="fa fa-long-arrow-left" aria-hidden="true"></i>
                                            <span> Previous</span>
                                        </a>
                                    </div>
                                    <div class="btn_head btn-next-prev">
                                        <a id="next" class="btn__primary btn__icon btn_lead_center btn_next">
                                            <span> Next</span>
                                            <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>

                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script type="text/javascript">
        $(document).ready(function() {
            loadPage();
            var entries = [];
            var page = 1;
            let questions = [];
            let isLastPage = false;

            $(document).on('click', '.inform_border', function() {
                if ($(this).hasClass('general_data')) {
                    $(this).removeClass('general_data');
                } else {
                    $(this).addClass('general_data');
                }
            });

            $("#next").click(function() {
                getFormData();
                if (isLastPage) {
                    $.ajax({
                        url: "/questionnaire/" + '{{ $questionnaire->slug }}',
                        type: "post",
                        data: {
                            _token: "{{ csrf_token() }}",
                            data: entries,
                        },
                        success: function(response) {
                            if (response.message) {
                                window.location.href = '/';
                            }
                        }
                    });
                } else {
                    page++;
                    $.ajax({
                        url: "/questionnaire/" + '{{ $questionnaire->slug }}' + "/?page=" +
                            page,
                        type: "get",
                        success: function(response) {
                            response.next_page_url == null ? isLastPage = true :
                                isLastPage = false;
                            questions = response.data;
                            $('#questionAjax').empty();
                            questionManage(questions);
                        }
                    });
                }
            });

            function loadPage() {
                $.ajax({
                    type: "get",
                    url: "/questionnaire/" + '{{ $questionnaire->slug }}',
                    success: function(response) {
                        if (response.last_page == page) {
                            isLastPage = true;
                        }
                        questions = response.data;

                        questionManage(questions);
                    }
                });
            }

            function questionManage(questionNew) {
                $.each(questionNew, function(index, question) {
                    let mainquestion = question.question;
                    if (mainquestion.type == 1) {
                        var html = '';
                        var options = '';
                        $.each(mainquestion.select_options, function(index,
                            option) {
                            options += `<option value="` + option.value + `">` +
                                option.name + `</option>`;
                        });
                        html = `<div class="` + `${index == 0 ? '' : 'smart_some'}` + `">
                                    <div class="banner_form_dist">
                                        <div class="dlt-head-log">
                                            <h6>` + mainquestion.category.name + `</h6>
                                            <span>` + mainquestion.question + `</span>
                                        </div>
                                    </div>
                                    <div class="reward-drop-list">
                                        <div class="selectBox">
                                            <label for="list">
                                                <select id="favcity" class="drowp-list" name="` + mainquestion.slug +
                            `">` +
                            options +
                            `</select>
                                            </label>
                                        </div>
                                    </div>
                                </div>`;

                        $('#questionAjax').append(html);
                    } else if (mainquestion.type == 2) {
                        var options = '';
                        $.each(mainquestion.multi_select_options, function(index,
                            option) {
                            options += `<div class="col-lg-3 col-xs-12 col-sm-6 col-6 mt-3">
                                                    <div class="inform_border general_data abouve_data question_` +
                                mainquestion.id + `"
                                                        data-option="` + option.value + `">
                                                        <img src="`+option.icon+`" alt="">
                                                        <h4>` + option.name + `</h4>
                                                    </div>
                                                </div>`;
                        });
                        var html = `<div class="` +
                            `${index == 0 ? '' : 'smart_some'}` + `">
                                    <div class="banner_form_dist">
                                        <div class="dlt-head-log">
                                            <h6>` + mainquestion.category.name + `</h6>
                                            <span>` + mainquestion.question + `</span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        ` + options + `
                                    </div>
                                </div>`;
                        $('#questionAjax').append(html);
                    } else if (mainquestion.type == 3) {
                        var html = `<div class="` +
                            `${index == 0 ? '' : 'smart_some'}` + `">
                                    <h6>` + mainquestion.category.name + `</h6>
                                    <span>` + mainquestion.question + `</span>
                                    <div class="work-finish-btn">
                                        <div class="btn_case">
                                            <div class="button-wrap">
                                                <div class="label-demo">
                                                    <input class="hidden radio-label" type="radio"
                                                        name="` + mainquestion.slug + `" value="yes" id="yes-button" />
                                                    <label class="button-label" for="yes-button">
                                                        <h1>Yes</h1>
                                                        <i class="fa fa-check wrong-green" aria-hidden="true"></i>
                                                    </label>
                                                </div>
                                                <div class="label-demo">
                                                    <input class="hidden radio-label" type="radio"
                                                        name="` + mainquestion.slug + `" value="no" id="no-button" />
                                                    <label class="button-label" for="no-button">
                                                        <h1>No</h1>
                                                        <i class="fa fa-times wrong-doen" aria-hidden="true"></i>
                                                </div>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>`;
                        $('#questionAjax').append(html);
                    } else if (mainquestion.type == 4) {
                        var html = `<div class="` +
                            `${index == 0 ? '' : 'smart_some'}` + `">
                                    <div class="banner_form_dist">
                                        <div class="dlt-head-log">
                                            <h6>` + mainquestion.category.name + `</h6>
                                            <span>` + mainquestion.question + `</span>
                                        </div>
                                    </div>
                                    <div class="reward-drop-list">
                                        <div class="place-application">
                                            <input type="text" placeholder="` + mainquestion.text_option.placeholder + `"
                                                name="` + mainquestion.slug + `" required>
                                        </div>
                                    </div>
                                </div>`;
                        $('#questionAjax').append(html);
                    }
                });
            }

            function getFormData() {

                $.each(questions, function(index, question) {
                    question = question.question;
                    if (question.type == 1) {
                        var answer = $('select[name="' + question.slug + '"]').val();
                        entries.push({
                            'question_id': question.id,
                            'answer': answer
                        });
                    } else if (question.type == 2) {
                        var elements = $('.question_' + question.id).not('.general_data');
                        if (elements.length == 0) {
                            alert('Please select at least one option');
                            return false;
                        } else {
                            elements = elements.map(function(index, element) {
                                return $(element).data('option');
                            }).get();
                        }
                        entries.push({
                            'question_id': question.id,
                            'answer': elements
                        });
                    } else if (question.type == 3) {
                        var answer = $('input[name="' + question.slug + '"]:checked').val();
                        entries.push({
                            'question_id': question.id,
                            'answer': answer
                        });
                    } else if (question.type == 4) {
                        var answer = $('input[name="' + question.slug + '"]').val();
                        entries.push({
                            'question_id': question.id,
                            'answer': answer
                        });
                    }
                });
            }
        });
    </script>
@endpush