@extends('admin.layouts.app')

@section('content')

    <main>
        <form>

            <div id="back-glay" class="fixclear">
                <div class="talkline-all">
                    @foreach($questions as $question)
                        @include('admin.chat._chat')
                    @endforeach
                </div>
            </div>

            <div class="sendbox">
                <div id="question_file_wrap"></div>
                <ul class="bottom-list">
                    <li id="dropzoneForm" class="dropzone">
                        <input type="button" id="btnbrowse_01" class="btn_fileupload" onmouseover="this.className='btn_fileupload_over'" onmouseout="this.className='btn_fileupload'"  value="">
                    </li>
                    <li>
                        <textarea placeholder="Aa" id="question_content" class="waku1" name="question_content"></textarea>
                    </li>
                    <li>
                        <input type="button" class="paperplane" id="send_question" value="">
                    </li>
                </ul>
            </div>
        </form>
    </main>

    <div id="temp_file_box" style="display: none">
        <span class="close_btn">x</span>
        <a id="temp_file_link"></a>
        <input type="hidden" class="file_name" id="temp_file_path">
        <input type="hidden" class="file_path" id="temp_file_name">
    </div>
@endsection

@section('page_js')
    <script src="{{ asset('assets/vendor/dropzone/dist/dropzone.js') }}"></script>
    <script>

        Dropzone.autoDiscover = false;
        $(function(){
            $('.chat-fix-btn').addClass('hide');
            setTimeout(function () {
                $('html, body').animate({
                    scrollTop: $(document).height()
                },1000);
            }, 500);
            return false;
        });
        let image_array = [];
        $(function () {
            $(document).ready(function () {
                $('#send_question').click(function () {
                    if(!$(this).hasClass('send-disabled')){
                        if ($("#question_content").val() || $(".file_box").length > 0) {
                            $(this).addClass('send-disabled');
                            let file_params = {};
                            $(".file_box").each(function () {
                                file_params[$(this).data('index')] = {};
                                file_params[$(this).data('index')]['type'] = "{{ config('const.question_type_code.from_site') }}";
                                file_params[$(this).data('index')]['file_name'] = $("#file_name_" + $(this).data('index')).val();
                                file_params[$(this).data('index')]['file_path'] = $("#file_path_" + $(this).data('index')).val();
                            });
                            sendMessage(file_params);
                        }
                    }
                });

                $("#dropzoneForm").dropzone({
                    autoProcessQueue : true,
                    clickable:"#btnbrowse_01",
                    url:"{{ route("admin.chat.upload_file") }}",
                    params:{
                        "_token":"{{ csrf_token() }}"
                    },
                    dictDefaultMessage:"",
                    dictCancelUpload:'キャンセル',
                    dictCancelUploadConfirmation:'このアップロードをキャンセルしてよろしいですか?',
                    dictRemoveFileConfirmation:1,
                    addRemoveLinks:true,
                    init:function(){
                        myDropzone = this;
                        this.on("complete", function(){
                            if(this.getQueuedFiles().length == 0 && this.getUploadingFiles().length == 0)
                            {
                                var _this = this;
                                _this.removeAllFiles();
                            }
                        });

                    },
                    success: function success(file) {
                        let data = JSON.parse(file.xhr.response);
                        let src = "{{ route("admin.chat.download_file") }}" + "?file_name=" + data.file_name + "&file_path=" + data.file_path;
                        let img_src = "{{ asset('storage/temp') }}" + "/" + data.file_path;
                        let temp = [];
                        temp['file_name'] = data.file_name;
                        temp['file_path'] = data.file_path;
                        temp['src'] = src;
                        temp['img_src'] = img_src;
                        image_array.push(temp);
                    },
                    queuecomplete:function () {
                        let count = isNaN(parseInt($('.file_box').last().attr('data-index'))) ? 0 : (parseInt($('.file_box').last().attr('data-index')) + 1);
                        let include_numer = true;
                        let file_params = {};
                        /*
                        image_array.forEach(function (element) {
                            if(!hasNumber(element.file_name)){
                                include_numer = false;
                            }
                        });
                        if(include_numer){
                            image_array.sort(function (first, second) {
                                if(first.file_name > second.file_name){
                                    return 1;
                                }
                                if(first.file_name < second.file_name){
                                    return -1;
                                }
                                return 0;
                            });
                        }
                        */
                        image_array.forEach(function (element) {
                            //addAddition( element.file_path, element.file_name, element.src, count, element.img_src);
                            file_params[count] = {};
                            file_params[count]['type'] = "{{ config('const.question_type_code.from_site') }}";
                            file_params[count]['file_name'] = element.file_name;
                            file_params[count]['file_path'] = element.file_path;
                            count++;
                        });
                        sendMessage(file_params);
                        image_array = [];
                    }
                });

                function sendMessage(file_params) {
                    $.ajax({
                        type: "post",
                        url : '{{ route("admin.chat.send_question") }}',
                        data: {
                            'reply':$("#question_content").val(),
                            'user_id':"{{ $user_id }}",
                            'question_file':file_params,
                            _token: '