@extends('base')
@section('content')

<h1 class="mt-5">Questions</h1>
<div class="graph-card px-4 py-3 my-3" style="max-width: 600px;">
    <h2 class="d-inline-block" style="color: #727E88;">Add Question</h2>
    <div class="float-end">
        <img src="{{secure_asset('images/flag.svg')}}" alt="...">
    </div>
    <form class="px-3 pb-3"  method="POST" action="{{ secure_url('/add-questions/update',$question->id) }}" enctype="multipart/form-data">
        {{ csrf_field() }}
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
            <label>Question:</label>
            <input type="text" value="{{ $question->questions }}" name="questions" class="form-control audit-name px-3 py-2 mb-3"  id="TextInput"  style="max-width: 100%;">

        <input type="text" name="tag_input" id="tag_input" hidden>
        <div id="appendTo" style="display: inline;"></div>
        <br>
        <label>Tags:</label>
        <select name="search" class="d-inline-block form-control px-3 py-2 audit-name mb-3" id="search-input">
            @foreach($getTag as $getTags)
                <option value="{{ $getTags->id }}" id="{{ $getTags->name }}" >{{ $getTags->name }}</option>
            @endforeach
        </select>

        <br>
        <label>Company:</label>
        <select name="company_id" class="d-inline-block form-control px-3 py-2 audit-name mb-3" id="search-input">
            @foreach($getCompany as $getCompanies)
                <option value="{{ $getCompanies->id }}" id="{{ $getCompanies->name }}" >{{ $getCompanies->name }}</option>
            @endforeach
        </select>

        <label>Explain:</label>
        <textarea name="explain" class="form-control px-3 py-2 audit-name mb-3 tinymce-editor"></textarea>

        <div class="text-end">
        <button type="submit" class="btn btn-primary vl-btn-small">Save & Exit</button>
        </div>


    </form>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
<script src="https://cdn.tiny.cloud/1/f0ldnesmdkmyl0dn2689v4dtetn0nenv2dylcl3dlyzkzta8/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script type="text/javascript">
    var route = "{{ url('autocomplete-search') }}";
    $('#search-input').typeahead({
        source: function (query, process) {
            return $.get(route, {
                query: query
            }, function (data) {
                return process(data);
            });
        }
    });


    $('#search-input').change(function(){
        var getValue  = $('#search-input').val();
        var getName   = $('#search-input option:selected').attr('id');
        arr.push(getValue);
        $('#tag_input').val(JSON.stringify(arr));
        $( "#appendTo" ).append('<span class="badge bg-dark mx-2">'+getName+'</span>');
        count++;
    });

    tinymce.init({
        selector: 'textarea.tinymce-editor',
        automatic_uploads: true,
        image_class_list: [
            {title: 'upload-image', value: 'upload-image'},
        ],
        height: 500,
        setup: function (editor) {
            editor.on('init change', function () {
                editor.save();
            });
        },
        image_dimensions: false,

        plugins: [
            "advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media table contextmenu paste imagetools"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image ",

        image_title: true,
        automatic_uploads: true,
        images_upload_url: '/upload-image',
        file_picker_types: 'image',
        image_max_dimensions: {
            width: "100%",
            height: "auto",
        },
        file_picker_callback: function(cb, value, meta) {
            var input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', 'image/*');
            input.onchange = function() {
                var file = this.files[0];

                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function () {
                    var id = 'blobid' + (new Date()).getTime();
                    var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                    var base64 = reader.result.split(',')[1];
                    var blobInfo = blobCache.create(id, file, base64);
                    blobCache.add(blobInfo);
                    cb(blobInfo.blobUri(), { title: file.name });
                };
            };
            input.click();
        }
    });

    setTimeout(function() {
        $('.flashmsg').fadeOut(1500);
    }, 3000);

</script>

@endsection