@extends('layout.master')

@push('plugin-styles')
    <link href="{{ asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" />
@endpush

@push('style')
    <style>
        .error {
            color: #F00;
            background-color: #FFF;
        }
    </style>
@endpush

@section('content')
    <nav class="page-breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Questionnaire</a></li>
            <li class="breadcrumb-item active" aria-current="page">Questions</li>
            <li class="breadcrumb-item active" aria-current="page">
                @isset($question)
                    Edit
                @else
                    Create
                @endisset Question
            </li>
        </ol>
    </nav>

    <div class="row">
        <div class="col-lg-12">
            <div class="d-flex justify-content-center">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">
                                @isset($question)
                                    Edit
                                @else
                                    Create
                                @endisset Questions
                            </h4>
                            @isset($question)
                                <form method="post" action="/admin/questionnaire/questions/{{ $question->id }}" id="PostForm"
                                    enctype="multipart/form-data">
                                    @method('PUT')
                                @else
                                    <form method="post" action="/admin/questionnaire/questions" id="PostForm"
                                        enctype="multipart/form-data">
                                    @endisset
                                    <div class="col-lg-12">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="row">
                                                    <div class="col-lg-4">
                                                        <div class="mb-3">
                                                            <label for="name" class="form-label">Name</label>
                                                            <input class="form-control" name="name" id="name"
                                                                placeholder="Question Name"
                                                                value="@isset($question){{ $question->name }}@endisset"
                                                                type="text">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-4">
                                                        <div class="mb-3">
                                                            <label for="name" class="form-label">Category</label>
                                                            <select class="js-example-basic-single form-select"
                                                                data-width="100%" name="category" required>
                                                                <option></option>
                                                                @foreach ($categories as $category)
                                                                    <option value="{{ $category->id }}"
                                                                        {{ isset($question) && $category->id == $question->question_category_id ? 'selected' : '' }}>
                                                                        {{ $category->name }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-4">
                                                        <div class="mb-3">
                                                            <label for="name" class="form-label">Slug</label>
                                                            <input class="form-control" name="slug" id="slug"
                                                                placeholder="Question Slug"
                                                                value="@isset($question){{ $question->slug }}@endisset"
                                                                type="text">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="mb-3">
                                                <label for="name" class="form-label">Question
                                                    Type</label>
                                                <div class="mb-4">
                                                    <div class="form-check form-check-inline">
                                                        <input type="radio" class="form-check-input" name="type"
                                                            value="1" id="radioInline"
                                                            @isset($question)
                                                            @if ($question->type == 1)
                                                                checked
                                                            @endif
                                                            @endisset>
                                                        <label class="form-check-label" for="radioInline">
                                                            Single Choice (Select Box)
                                                        </label>
                                                    </div>
                                                    <div class="form-check form-check-inline">
                                                        <input type="radio" class="form-check-input" name="type"
                                                            value="2" id="radioInline"
                                                            @isset($question)
                                                            @if ($question->type == 2)
                                                                checked
                                                            @endif
                                                            @endisset>
                                                        <label class="form-check-label" for="radioInline1">
                                                            Mutiple Choice
                                                        </label>
                                                    </div>
                                                    <div class="form-check form-check-inline">
                                                        <input type="radio" class="form-check-input" name="type"
                                                            value="3" id="radioInline"
                                                            @isset($question)
                                                            @if ($question->type == 3)
                                                                checked
                                                            @endif
                                                            @endisset>
                                                        <label class="form-check-label" for="radioInlineSelected">
                                                            Boolean
                                                        </label>
                                                    </div>
                                                    <div class="form-check form-check-inline">
                                                        <input type="radio" class="form-check-input" name="type"
                                                            value="4" id="radioInline"
                                                            @isset($question)
                                                                @if ($question->type == 4)
                                                                    checked
                                                                @endif
                                                            @endisset>
                                                        <label class="form-check-label" for="radioInlineDisabled">
                                                            Text Box
                                                        </label>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-4">
                                            <div class="mb-3">
                                                <label for="name" class="form-label">Question</label>
                                                <input class="form-control" name="question" id="question"
                                                    placeholder="Question"
                                                    value="{{ isset($question) ? $question->question : '' }}"
                                                    type="text">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" id="optionButtons">
                                        @isset($question)
                                            @if ($question->type == 1 || $question->type == 2)
                                                <div class="col-lg-3">
                                                    <div class="mb-3">
                                                        <label for="name" class="form-label">Options Manage</label>
                                                        <button id="addOption" type="button" class="btn btn-info btn-sm"><i
                                                                data-feather="plus"></i></button>
                                                        <button id="removeOption" type="button"
                                                            class="btn btn-danger btn-sm"><i
                                                                data-feather="minus"></i></button>
                                                    </div>
                                                </div>
                                            @endif
                                        @endisset
                                    </div>

                                    <div id="options">
                                        @isset($question)
                                            @if ($question->type == 1)
                                                @foreach ($question->selectOptions as $option)
                                                    <div class="row selectOptions">
                                                        <div class="col-lg-3">
                                                            <div class="mb-3">
                                                                <label for="name" class="form-label">Name</label>
                                                                <input class="form-control" name="select_name[]"
                                                                    placeholder="Name" value="{{ $option->name }}"
                                                                    type="text">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-3">
                                                            <div class="mb-3">
                                                                <label for="name" class="form-label">Value</label>
                                                                <input class="form-control" name="select_option[]"
                                                                    placeholder="Option" value="{{ $option->value }}"
                                                                    type="text">
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @elseif($question->type == 2)
                                                @foreach ($question->MultiSelectOptions as $option)
                                                    <div class="row selectOptions">
                                                        <div class="col-lg-3">
                                                            <div class="mb-3">
                                                                <input type="hidden" name="multi_option_id[]"
                                                                    value="{{ $option->id }}">
                                                                <label for="name" class="form-label">Name</label>
                                                                <input class="form-control" name="select_name[]"
                                                                    placeholder="Name" value="{{ $option->name }}"
                                                                    type="text">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-3">
                                                            <div class="mb-3">
                                                                <label for="name" class="form-label">Value</label>
                                                                <input class="form-control" name="select_option[]"
                                                                    placeholder="Option" value="{{ $option->value }}"
                                                                    type="text">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-3">
                                                            <div class="mb-3">
                                                                <label class="form-label" for="formFile">Icon</label>
                                                                <input class="form-control" name="icon[]" type="file"
                                                                    id="formFile">

                                                            </div>
                                                        </div>
                                                        @if ($option->hasMedia('icon'))
                                                            <div class="col-lg-3">
                                                                <div class="mb-3">
                                                                    <br>
                                                                    <label class="form-label" for="formFile">Previous
                                                                        Icon</label>
                                                                    <img class="img-fluid"
                                                                        src="{{ $option->getFirstMediaUrl('icon') }}"
                                                                        alt="icon" width="40px" height="40px;">
                                                                </div>
                                                            </div>
                                                        @endif
                                                    </div>
                                                @endforeach
                                            @elseif ($question->type == 4)
                                                <div class="row selectOptions">
                                                    <div class="col-lg-3">
                                                        <div class="mb-3">
                                                            <label for="name" class="form-label">Name</label>
                                                            <input class="form-control" name="text_name"
                                                                value="{{ $question->textOption->name }}" placeholder="Name"
                                                                type="text">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3">
                                                        <div class="mb-3">
                                                            <label for="name" class="form-label">Placeholder</label>
                                                            <input class="form-control" name="placeholder"
                                                                value="{{ $question->textOption->placeholder }}"
                                                                placeholder="placeholder" type="text">
                                                        </div>
                                                    </div>

                                                </div>
                                            @endif
                                        @endisset

                                    </div>

                                    <input class="btn btn-primary" type="submit" value="Submit">
                                </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('plugin-scripts')
    <script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/jquery-validation/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
@endpush

@push('custom-scripts')
    <script>
        $(document).ready(function() {
            //creating slug for question
            $("#name").keyup(function(e) {
                var Text = $(this).val();
                Text = Text.toLowerCase();
                var regExp = /\s+/g;
                Text = Text.replace(regExp, '-');
                $("#slug").val(Text);
            });
            let type = $("input[name='type']:checked").val();
            $("input[name='type']").change(function() {
                let newType = $(this).val();
                if (newType == type) {
                    return;
                } else {
                    type = newType;
                    $("#options").html("");
                    removeButtons();
                    if (type == 1) {
                        var html = `<div class="row selectOptions">
                                <div class="col-lg-3">
                                    <div class="mb-3">
                                        <label for="name" class="form-label">Name</label>
                                        <input class="form-control" name="select_name[]" placeholder="Name"
                                            type="text">
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="mb-3">
                                        <label for="name" class="form-label">Value</label>
                                        <input class="form-control" name="select_option[]"
                                            placeholder="Option" type="text">
                                    </div>
                                </div>
                            </div>`;
                        addButtons();
                    } else if (type == 2) {
                        var html = `<div class="row selectOptions">
                                <div class="col-lg-3">
                                    <div class="mb-3">
                                        <label for="name" class="form-label">Name</label>
                                        <input class="form-control" name="select_name[]" placeholder="Name"
                                            type="text">
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="mb-3">
                                        <label for="name" class="form-label">Value</label>
                                        <input class="form-control" name="select_option[]"
                                            placeholder="Option" type="text">
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="mb-3">
                                        <label class="form-label" for="formFile">Icon</label>
                                        <input class="form-control" name="icon[]" type="file"
                                            id="formFile">
                                    </div>
                                </div>
                            </div>`;
                        addButtons();
                    } else if (type == 3) {
                        // var html = `<div class="col-lg-3">
                    //             <div class="mb-3">
                    //                 <label class="form-label">Input Value</label>
                    //                 <input class="form-control" name="inputValue" type="text">
                    //             </div>
                    //         </div>`;
                        removeButtons();
                    } else if (type == 4) {
                        var html = `<div class="row selectOptions">
                                <div class="col-lg-3">
                                    <div class="mb-3">
                                        <label for="name" class="form-label">Name</label>
                                        <input class="form-control" name="text_name" placeholder="Name"
                                            type="text">
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="mb-3">
                                        <label for="name" class="form-label">Placeholder</label>
                                        <input class="form-control" name="placeholder"
                                            placeholder="placeholder" type="text">
                                    </div>
                                </div>

                            </div>`;
                        removeButtons();
                    }

                    $("#options").append(html);
                }
            });
            $(document).on('click', '#addOption', function() {
                if (type == 1) {
                    var html = `<div class="row selectOptions">
                                <div class="col-lg-3">
                                    <div class="mb-3">
                                        <label for="name" class="form-label">Name</label>
                                        <input class="form-control" name="select_name[]" placeholder="Name"
                                            type="text">
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="mb-3">
                                        <label for="name" class="form-label">Value</label>
                                        <input class="form-control" name="select_option[]"
                                            placeholder="Option" type="text">
                                    </div>
                                </div>
                            </div>`;
                } else if (type == 2) {
                    var html = `<div class="row selectOptions">
                                <div class="col-lg-3">
                                    <div class="mb-3">
                                        <label for="name" class="form-label">Name</label>
                                        <input class="form-control" name="select_name[]" placeholder="Name"
                                            type="text">
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="mb-3">
                                        <label for="name" class="form-label">Value</label>
                                        <input class="form-control" name="select_option[]"
                                            placeholder="Option" type="text">
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="mb-3">
                                        <label class="form-label" for="formFile">Icon</label>
                                        <input class="form-control" name="icon[]" type="file"
                                            id="formFile">
                                    </div>
                                </div>
                            </div>`;
                }

                $("#options").append(html);
            });

            $(document).on('click', '#removeOption', function() {
                $(".selectOptions").last().remove();
            });



            //select2
            if ($(".js-example-basic-single").length) {
                $(".js-example-basic-single").select2({
                    placeholder: "Choose a option",
                });
            }

            $("#PostForm").validate({
                ignore: [],
                rules: {
                    name: {
                        required: true,
                        minlength: 3
                    },
                    category: {
                        required: true,
                    },
                    type: {
                        required: true,
                    },
                    question: {
                        required: true,
                    },
                    slug: {
                        required: true,
                    },
                },
                submitHandler: function(form, e) {
                    e.preventDefault();
                    var method = $(form).attr('method');
                    var url = $(form).attr('action');
                    var formData = new FormData(form);
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                        }
                    });
                    $.ajax({
                        type: method,
                        url: url,
                        contentType: false,
                        processData: false,
                        data: formData,
                        success: function(result) {
                            if (result) {
                                @isset($question)
                                @else
                                    form.reset();
                                    $(".js-example-basic-single").val('').trigger('change');
                                    removeButtons();
                                    $("#options").empty();
                                @endisset
                                const Toast = Swal.mixin({
                                    toast: true,
                                    position: 'top-end',
                                    showConfirmButton: false,
                                    timer: 2000,
                                    timerProgressBar: true,
                                });

                                Toast.fire({
                                    icon: 'success',
                                    title: result.message,
                                })
                            }
                        },
                        error: function(data) {
                            const Toast = Swal.mixin({
                                toast: true,
                                position: 'top-end',
                                showConfirmButton: false,
                                timer: 2000,
                                timerProgressBar: true,
                            });

                            Toast.fire({
                                icon: 'error',
                                title: 'Something went wrong',
                            })

                            if (data.responseJSON['errors']) {

                                let err = data.responseJSON['errors'];

                                $.each(err, (i, j) => {
                                    $(`input[name=${i}]`).after(
                                        `<span class="text-danger">${j}</span>`);
                                });
                            }
                        }
                    });
                    return false;
                }
            });

        });

        function addButtons() {
            var html = `<div class="col-lg-3">
                                            <div class="mb-3">
                                                <label for="name" class="form-label">Options Manage</label>
                                                <button id="addOption" type="button" class="btn btn-info btn-sm"><i
                                                        data-feather="plus"></i></button>
                                                <button id="removeOption" type="button" class="btn btn-danger btn-sm"><i
                                                        data-feather="minus"></i></button>
                                            </div>
                                        </div>`;
            $("#optionButtons").append(html);
            feather.replace();
        }

        function removeButtons() {
            $("#optionButtons").empty();
        }
    </script>
@endpush