@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="{{ old('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>
                    @php $question_count = 1; @endphp
                    <div class="row question_box_container">
                        <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="{{ old('question[]') }}" placeholder="Enter Question">
                                    </div>
                                    <div class="option_box_{{ $question_count }} mt-3">
                                        <div class="mb-3 row question_{{ $question_count }}_option_col_1">
                                            <label for="example-text-input" class="col-md-2 col-form-label"><span class="text-danger">*</span>Option 1: </label>
                                            <div class="col-md-6">
                                                <input type="text" class="form-control polling_option_{{ $question_count }}" data-id="1" id="question_{{ $question_count }}_option1" name="question_{{ $question_count }}_option[]" placeholder="{{ __('Enter Option 1') }}">
                                            </div>
                                            <div class="col-md-2 question_{{ $question_count }}_option_col_1 right_answer_col">
                                                <label class="kt-radio kt-radio--bold kt-radio--brand">
                                                    <input type="radio" name="question_{{ $question_count }}_radio_button" value="1" class="right_answer_radio_button{{ $question_count }}" id="question_{{ $question_count }}_radio_button_1" checked>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>
                                        <div class="mb-3 row question_{{ $question_count }}_option_col_2">
                                            <label for="example-text-input" class="col-md-2 col-form-label"><span class="text-danger">*</span>Option 2: </label>
                                            <div class="col-md-6">
                                                <input type="text" class="form-control polling_option_{{ $question_count }}" data-id="2" id="question_{{ $question_count }}_option2" name="question_{{ $question_count }}_option[]" placeholder="{{ __('Enter Option 2') }}">
                                            </div>
                                            <div class="col-md-2 question_{{ $question_count }}_option_col_2 right_answer_col">
                                                <label class="kt-radio kt-radio--bold kt-radio--brand">
                                                    <input type="radio" name="question_{{ $question_count }}_radio_button" value="2" class="right_answer_radio_button{{ $question_count }}" id="question_{{ $question_count }}_radio_button_2">Right Answer
                                                    <span></span>
                                                </label>
                                            </div>
                                            <div class="col-md-2"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </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 = 1;

        $.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] = 3;
            }
            $("#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