@extends('layouts.master')
@section('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style type="text/css">
        .select2-selection__choice__display{
            padding-left: 20px !important;
        }
        .fa-plus,.fa-trash{
            font-size: 15px !important;
        }
    </style>
@endsection
@section('content')
    @include('components.breadcum')
    <div class="row">
        <div class="col-12">
        </div>
        <div class="card">
            <div class="card-body">
                <form class="kt-form kt-form--label-right" id="frmDomain" name="frmDomain"
                    action="{{route('admin.quiz.store')}}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3 row">
                        <label for="example-text-input" class="col-md-2 col-form-label"><span class="text-danger">*</span>{{__('Type')}}</label>
                        <div class="col-md-5">
                            <label style="margin-right: 10px;"><input type="radio" name="type" value="all_users" checked>&nbsp;All Users</label>
                            <label style="margin-right: 10px;"><input type="radio" name="type" value="select_user">&nbsp;Selected User</label>
                            <label style="margin-right: 10px;"><input type="radio" name="type" value="pet_shop">&nbsp;Pet shop</label>
                            <label style="margin-right: 10px;"><input type="radio" name="type" value="pet_age">&nbsp;Pet age</label>
                        </div>
                    </div>
                    <div class="mb-3 row d-none" id="selct_user">
                        <label for="example-text-input" class="col-md-2 col-form-label">Users list</label>
                        <div class="col-md-10">
                            <select class="form-control" name="users[]" id="users" multiple="multiple">
                                @foreach($users as $users_new)
                                <option value="{{$users_new->id}}">{{$users_new->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row d-none" id="pet_shop">
                        <label for="example-text-input" class="col-md-2 col-form-label">Pet shop list</label>
                        <div class="col-md-10">
                            <select class="form-control" name="pet_shop_list[]" id="pet_shop_list" multiple="multiple">
                                @foreach($pet_shop_list as $pet_shop_list_new)
                                <option value="{{$pet_shop_list_new->id}}">{{$pet_shop_list_new->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row d-none" id="pet_age">
                        <label for="example-text-input" class="col-md-2 col-form-label">Age(in Months)</label>
                        <div class="col-md-10">
                            <input class="form-control" type="number" name="pet_age_in_month" id="pet_age_in_month" min="1">
                        </div>
                    </div>
                    <div class="mb-3 row d-none">
                        <label for="example-text-input" class="col-md-2 col-form-label"><span class="text-danger">*</span>Date</label>
                        <div class="col-md-10">
                                                       <input type="datetime-local" name="date_time" id="date_time" onclick="this.showPicker();" class="form-control" value="" min="{{$new_date}}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="example-text-input" class="col-md-2 col-form-label"><span class="text-danger">*</span>Quiz Name: </label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" id="name" name="name" value="{{$quiz->quiz_name}}" placeholder="{{ __('Enter Quiz Name') }}" >
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <div class="col-md-9"></div>
                        <div class="col-md-3">
                        <a href="javascript:void(0);" class="btn btn-primary btn-brand btn-elevate btn-icon-sm" onclick="addQuestion()"><i class="fas fa-plus"></i>Add Question</a>
                        &nbsp;&nbsp;
                        {{-- <a href="javascript:void(0);" class="btn btn-danger btn-elevate btn-icon-sm d-none remove_question_btn" onclick="removeQuestion()"><i class="fas fa-minus"></i>Remove Question</a> --}}
                        </div>
                    </div>
                    <div class="row question_box_container">
                        @if($quiz->questions)
                        <input type="hidden" id="total_quiz_no" value="{!! count($quiz['questions']) !!}">
                            @foreach($quiz['questions'] as $key => $questions_old)
                                                                <div class="card">
                                    <div class="card-body">
                                        <div class="row question_box" id="question_box_{{ $question_count }}">
                                            <label for="example-text-input" class="col-md-2 col-form-label"><span class="text-danger">*</span>Question: </label>
                                            <div class="col-md-10">
                                                <input type="text" class="form-control" id="question_{{ $question_count }}" name="question[]" value="{{$questions_old->question_name}}" placeholder="Enter Question">
                                            </div>
                                            <div class="option_box_{{ $question_count }} mt-3">
                                                @if($questions_old->answers)
                                                <input type="hidden" id="option_cont_{{ $question_count }}" value="{!! count($questions_old->answers) !!}">
                                                    @foreach($questions_old['answers'] as $answer_key => $answers_old)
                                                        @if($answers_old->options != 'Not from all')
                                                            @if($answer_key == 0)
                                                            <div class="mb-3 row question_{{ $question_count }}_option_col_{{$answer_key + 1}}">
                                                                <label for="example-text-input" class="col-md-2 col-form-label"><span class="text-danger">*</span>Option {{$answer_key + 1}}: </label>
                                                                <div class="col-md-6">
                                                                    <input type="text" class="form-control polling_option_{{ $question_count }}" data-id="{{$answer_key + 1}}" id="question_{{ $question_count }}_option{{$answer_key + 1}}" name="question_{{ $question_count }}_option[]" placeholder="{{ __('Enter Option ($answer_key + 1)') }}" value="{{$answers_old->options}}">
                                                                </div>
                                                                <div class="col-md-2 question_{{ $question_count }}_option_col_{{$answer_key + 1}} right_answer_col">
                                                                    <label class="kt-radio kt-radio--bold kt-radio--brand">
                                                                        @if($answers_old->is_right == '1')
                                                                        <input type="radio" name="question_{{ $question_count }}_radio_button" value="{{$answer_key + 1}}" class="right_answer_radio_button{{ $question_count }}" id="question_{{ $question_count }}_radio_button_{{$answer_key + 1}}" checked>
                                                                        @else
                                                                        <input type="radio" name="question_{{ $question_count }}_radio_button" value="{{$answer_key + 1}}" class="right_answer_radio_button{{ $question_count }}" id="question_{{ $question_count }}_radio_button_{{$answer_key + 1}}">
                                                                        @endif
                                                                        Right Answer
                                                                        <span></span>
                                                                    </label>
                                                                </div>
                                                                <div class="col-md-2">
                                                                    <div>
                                                                        <a href="javascript:" class="btn btn-success btn-elevate btn-icon-sm" title="Add Question {{ $question_count }} options" onclick="addMoreOption({{ $question_count }})"><i class="fas fa-plus"></i></a>
                                                                        <a href="javascript:" title="Remove Question {{ $question_count }} options" onclick="removeOption({{ $question_count }})" class="btn btn-danger btn-elevate btn-icon-sm d-none" id="remove_btn_{{ $question_count }}"><i class="fas fa-trash"></i></a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            @else
                                                            <div class="mb-3 row question_{{ $question_count }}_option_col_{{$answer_key + 1}}">
                                                                <label for="example-text-input" class="col-md-2 col-form-label"><span class="text-danger">*</span>Option {{$answer_key + 1}}: </label>
                                                                <div class="col-md-6">
                                                                    <input type="text" class="form-control polling_option_{{ $question_count }}" data-id="{{$answer_key + 1}}" id="question_{{ $question_count }}_option{{$answer_key + 1}}" name="question_{{ $question_count }}_option[]" placeholder="{{ __('Enter Option ($answer_key + 1)') }}" value="{{$answers_old->options}}">
                                                                </div>
                                                                <div class="col-md-2 question_{{ $question_count }}_option_col_{{$answer_key + 1}} right_answer_col">
                                                                    <label class="kt-radio kt-radio--bold kt-radio--brand">
                                                                        @if($answers_old->is_right == '1')
                                                                        <input type="radio" name="question_{{ $question_count }}_radio_button" value="{{$answer_key + 1}}" class="right_answer_radio_button{{ $question_count }}" id="question_{{ $question_count }}_radio_button_{{$answer_key + 1}}" checked>
                                                                        @else
                                                                        <input type="radio" name="question_{{ $question_count }}_radio_button" value="{{$answer_key + 1}}" class="right_answer_radio_button{{ $question_count }}" id="question_{{ $question_count }}_radio_button_{{$answer_key + 1}}">
                                                                        @endif
                                                                        Right Answer
                                                                        <span></span>
                                                                    </label>
                                                                </div>
                                                                <div class="col-md-2"></div>
                                                            </div>
                                                            @endif
                                                        @endif
                                                    @endforeach
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <div class="kt-portlet__foot">
                        <div class=" ">
                            <div class="row">
                                <div class="wd-sl-modalbtn">
                                    <button  type="submit" class="btn btn-primary waves-effect waves-light" id="save_changes">Submit</button>
                                    <a href="{{route('admin.quiz.index')}}" id="close"><button type="button" class="btn btn-outline-secondary waves-effect">Cancel</button></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('script')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        $('#users').select2();
    });

    $(document).ready(function() {
        $('#pet_shop_list').select2();
    });

    $("#frmDomain").validate({
        ignore: ':hidden:not(.validate)',
        // ignore: [],
        rules: {
            name: {
                required: true,
            },
            "question[]": {
                required: true,
            },
            right_answer: {
                required: true,
            },
        },
        messages: {
            name: {
                required: 'Please enter quiz name',
            },
            "question[]": {
                required: 'Please enter question',
            },
            right_answer: {
                required: 'Please select right answer',
            },
        },
        errorElement: 'span',
        errorPlacement: function(error, element) {
            if (element.attr('id') == "content") {
                error.addClass('invalid-feedback');
                error.insertAfter(element.closest('.form-group'));
            } else {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            }
        },
        errorPlacement: function (error, element) {
            if (element.attr("type") == "radio") {
                error.insertAfter($(element).parent().children().last());
            } else {
                error.insertAfter($(element))
            }
        },
        errorPlacement: function (error, element) {
            if (element.attr("id") == "users" || element.attr("id") == "pet_shop_list") {
                error.insertAfter($(element).parent().children().last());
            } else {
                error.insertAfter($(element))
            }
        },
        highlight: function(element, errorClass, validClass) {
            // KTUtil.scrollTo('m_form_1_msg', -200);
            $(element).focus();
            $(element).one('focus', function() {});
            $(element).addClass('is-invalid');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).removeClass('is-invalid');
        },
        submitHandler: function(form) {
            if ($(this).valid()) {
                addOverlay();
                form.submit();
            }
        }
    });

    $('input[type=radio][name=type]').change(function () {
        if (this.value == 'all_users') {
            var user_value = document.getElementsByName('users[]').length;
            $('#selct_user').addClass('d-none');
            $('#pet_shop').addClass('d-none');
            $('#pet_age').addClass('d-none');
        } else if(this.value == 'select_user') {
            var user_value = document.getElementsByName('users[]').length;
            $('#selct_user').removeClass('d-none');
            $('#pet_shop').addClass('d-none');
            $('#pet_age').addClass('d-none');
            $('#users').rules( "add", {
                required: true,
                messages: {
                    required: "Please select user from users list.",
                }
            });
            $('#pet_shop_list').rules("remove");
            $('#pet_age_in_month').rules("remove");
        } else if(this.value == 'pet_shop') {
            var user_value = document.getElementsByName('users[]').length;
            $('#selct_user').addClass('d-none');
            $('#pet_shop').removeClass('d-none');
            $('#pet_age').addClass('d-none');
            $('#pet_shop_list').rules( "add", {
                required: true,
                messages: {
                    required: "Please select pet shop from pet shop list.",
                }
            });
            $('#users').rules("remove");
            $('#pet_age_in_month').rules("remove");
        } else if(this.value == 'pet_age') {
            var user_value = document.getElementsByName('users[]').length;
            $('#selct_user').addClass('d-none');
            $('#pet_shop').addClass('d-none');
            $('#pet_age').removeClass('d-none');
            $('#pet_age_in_month').rules( "add", {
                required: true,
                min: 1,
                messages: {
                    required: "Please enter pet age in months.",
                }
            });
            $('#pet_shop_list').rules("remove");
            $('#users').rules("remove");
        }
    });

    var question_no = $('#total_quiz_no').val();

    $.validator.addMethod("cRequired", $.validator.methods.required,
        "Please enter option");

    $.validator.addClassRules("polling_option_" + question_no, {
        cRequired: true
    });

    $.validator.addMethod("rRequired", $.validator.methods.required,
        "Please select right answer");

    $.validator.addClassRules("right_answer_radio_button" + question_no, {
        rRequired: true
    });

    var question_option_no = {};

    var option_no = 3;

    function addMoreOption(current_question_no) {
        if (!question_option_no["question_" + current_question_no]) {
            question_option_no["question_" + current_question_no] = parseInt($('#option_cont_'+current_question_no).val());
        }
        $("#remove_btn_" + current_question_no).removeClass("d-none");
        var optionsHtml =
            '<div class="mb-3 row question_' + current_question_no + '_option_col_' + question_option_no["question_" +
                current_question_no] +
            ' " ><label for="example-text-input" class="col-md-2 col-form-label"><span class="text-danger">*</span>Option ' +
            question_option_no["question_" + current_question_no] +
            ': </label><div class="col-md-6"><input type="text" class="form-control polling_option_' + current_question_no + '" data-id="' +
            question_option_no["question_" + current_question_no] +
            '" id="question_' + current_question_no + '_option' + question_option_no["question_" +
                current_question_no] +
            '" name="question_' + current_question_no + '_option[]" placeholder="Enter Option ' + question_option_no[
                "question_" + current_question_no] +
            '"></div>';
        optionsHtml += '<div class="col-md-2 question_' + current_question_no + '_option_col_' + question_option_no[
                "question_" + current_question_no] +
            ' right_answer_col"><label class="kt-radio kt-radio--bold kt-radio--brand"><input type="radio" name="question_' +
            current_question_no + '_radio_button" data-id="' +
            question_option_no["question_" + current_question_no] +
            '" class="right_answer_radio_button' + current_question_no + '" id="question_' + current_question_no +
            '_radio_button_' +
            question_option_no["question_" + current_question_no] +
            '" value="' + question_option_no["question_" + current_question_no] +
            '">Right Answer<span></span></label></div><div class="col-md-2"></div></div>';

        $(".option_box_" + current_question_no).append(optionsHtml);

        option_no++;
        question_option_no["question_" + current_question_no] = question_option_no["question_" + current_question_no] +
            1;
    }

    function addQuestion() {
        question_no++;
        $.validator.addClassRules("polling_option_" + question_no, {
            cRequired: true
        });

        var question_html = '';
        question_html += '<div class="card" id="question_box_' + question_no + '">';
        question_html += '<div class="card-body">';
        question_html += '<div class="row question_box">';
        question_html += '<label for="example-text-input" class="col-md-2 col-form-label"><span class="text-danger">*</span>Question: </label>';
        question_html += '<div class="col-md-8">';
        // question_html += '<div class="form-group">';
        question_html += '<input type="text" class="form-control" id="question_' + question_no +
            '" name="question[]" value="{{ old('question[]') }}" placeholder="Enter Question"></div>';
        question_html +=
            '<div class="col-md-2"><a href="javascript:void(0);" class="btn btn-danger btn-elevate btn-icon-sm d-none remove_question_btn" onclick="removeQuestion(' +
            question_no + ')"> <i class="fas fa-trash"></i> Delete</a></div>';
        question_html += '<div class="option_box_' + question_no + ' mt-3">';
        question_html += '<div class="mb-3 row question_' + question_no + '_option_col_1">';
        question_html += '<label for="example-text-input" class="col-md-2 col-form-label"><span class="text-danger">*</span>Option 1: </label>';
        question_html += '<div class="col-md-6">';
        question_html += '<input type="text" class="form-control polling_option_' + question_no +
            '" data-id="1" id="question_' + question_no + '_option1" name="question_' + question_no +
            '_option[]" placeholder="Enter Option 1">';
        question_html += '</div>';
        question_html += '<div class="col-md-2 question_' + question_no + '_option_col_1 right_answer_col">';
        question_html += '<label class="kt-radio kt-radio--bold kt-radio--brand">';
        question_html +=
            '<input type="radio" name="question_' + question_no +
            '_radio_button" class="right_answer_radio_button' + question_no + '" id="question_' + question_no +
            '_radio_button_1" value="1" checked>Right Answer<span></span></label>';
        question_html += '</div>';
        question_html += '<div class="col-md-2">';
        question_html += '<div><a href="javascript:" class="btn btn-success btn-elevate btn-icon-sm" title="Add Question ' + question_no +
            ' options" onclick="addMoreOption(' + question_no +
            ')"><i class="fas fa-plus"></i></a>';
        question_html += '<a href="javascript:" class="btn btn-danger btn-elevate btn-icon-sm" title="Remove Question ' + question_no +
            ' options" onclick="removeOption(' + question_no +
            ')" class="btn btn-danger btn-elevate btn-icon-sm d-none" id="remove_btn_' + question_no +
            '"><i class="fas fa-trash"></i></a>';
        question_html += '</div>';
        question_html += '</div>';
        question_html += '</div>';
        question_html += '<div class="mb-3 row question_' + question_no + '_option_col_2">';
        question_html += '<label for="example-text-input" class="col-md-2 col-form-label"><span class="text-danger">*</span>Option 2</label>';
        question_html += '<div class="col-md-6">';
        question_html += '<input type="text" class="form-control polling_option_' + question_no +
            '" data-id="2" id="question_' + question_no + '_option2" name="question_' + question_no +
            '_option[]" placeholder="Enter Option 2">';
        question_html += '</div>';
        question_html += '<div class="col-md-2 question_' + question_no + '_option_col_2 right_answer_col">';
        question_html += '<label class="kt-radio kt-radio--bold kt-radio--brand">';
        question_html += '<input type="radio" name="question_' + question_no +
            '_radio_button" value="2" class="right_answer_radio_button' + question_no + '" id="question_' +
            question_no + '_radio_button_2">Right Answer<span></span></label>';
        question_html += '</div><div class="col-md-2"></div>';
        question_html += '</div>';
        question_html += '</div>';
        question_html += '</div>';
        question_html += '</div>';
        question_html += '</div>';

        $(".question_box_container").append(question_html);

        if (question_no > 1) {
            $(".remove_question_btn").removeClass('d-none');
        } else {
            $(".remove_question_btn").addClass('d-none');
        }

        $.validator.addMethod("rRequired", $.validator.methods.required,
            "Please select right answer");

        $.validator.addClassRules("right_answer_radio_button" + question_no, {
            rRequired: true
        });
    }

    function removeOption(current_question_no) {
        var idArray = {};
        var question = current_question_no;
        var addedOptions = [];
        $('.polling_option_' + current_question_no).each(function(key) {
            addedOptions.push($(this).attr('data-id'));
        });

        idArray[question] = addedOptions;

        var last_element = idArray[question].slice(-1);

        if (last_element[0] > 2) {
            $(".question_" + current_question_no + "_option_col_" + last_element[0]).remove();
            option_no--;
            question_option_no["question_" + current_question_no] = (question_option_no["question_" +
                current_question_no] - 1);
        }

        if (last_element[0] < 4) {
            $("#remove_btn_" + current_question_no).addClass("d-none");
        }
    }

    function removeQuestion(questionNo) {
        $("#question_box_" + questionNo).remove();
        question_no--;

        if (question_no > 1) {
            $(".remove_question_btn").removeClass('d-none');
        } else {
            $(".remove_question_btn").addClass('d-none');
        }
    }
</script>
@endsection