@extends('user.layouts.app')

@section('title', 'サービスに関するお問い合わせ')

@section('header')
    <p><a href="javascript:history.back()">＜</a></p>
    <h1 id="title">サービスに関するお問い合わせ<a class="question-mark modal-open" data-target="use_flow"><img src="{{ asset('assets/user/img/question_mark.png') }}"></a></h1>
@endsection

@section('content')
    <main>
        <form>
            <div class="top-fixed">
                <p class="pt15 text-center">お気軽にお問い合わせしてね♪平日8：30〜17：30に返信しますよ！</p>
                <p class="pt10 text-center">ヘルプセンターへ連絡する　→　<a href="tel:092‐663‐2588">092‐663‐2588</a></p>
            </div>

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

            <div class="sendbox">
                {{--<div id="question_file_wrap" class="dropzone"></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 send_event" 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_css')
    <style>
        .top-fixed p {
            font-size: 12px !important;
        }

        #question_file_wrap {
            padding-bottom: 10px;
            margin-left: 8%;
            display: flex;
            flex-wrap: wrap;
            width: auto;
        }
        .file_box {
            border: 1px solid #dddddd;
            padding: 2px 5px;
            border-radius: 5px;
            display: inline-block;
            width: auto;
            cursor: pointer;
            vertical-align: middle;
            position: relative;
        }
        .close_btn {
            float:right;
            display:inline-block;
            padding:2px 5px;
            background:#ccc;
            border-radius: 30%;
            position: absolute;
            top: 0;
            right: 0;
        }
        .close_btn:hover {
            float:right;
            display:inline-block;
            padding:2px 5px;
            background:#ccc;
            color:#fff;
        }
        .fukidashi a:hover{
            color: #0B4B94;
        }
        .file_wrap {
            width: 49%;
            display: inline-block;
        }
        .dropzone {
            min-height: unset !important;
            border: none !important;
            background: white;
        }
        .dz-default.dz-message {
            display: none;
        }
        .pt15 {
            padding-top: 15px;
        }

        .pt10 {
            padding-top: 10px;
        }
        .top-fixed {
            position: fixed;
            top: 43px;
            background: #FFF;
            z-index: 1000;
        }
        #back-glay {
            margin-top: 130px;
        }
        body {
            overflow: hidden !important;
        }
        #back-glay {
            overflow: scroll;
        }
        .talkline a img.tiny {
            width: 100px !important;
            height: auto;
        }
        .talkline span {
            width: 100px !important;
        }
        .fukidashi p {
            display: grid;
        }
        .talkline-all .left-message ul.fukidashi li:nth-child(2) {
            max-width: 82%;
            width: auto;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('assets/vendor/dropzone/dist/dropzone.css') }}">
@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 () {
                $('#back-glay').animate({
                    scrollTop: $('.talkline-all').height()
                },1000);
            }, 500);
            return false;
        });
        let image_array = [];
        $(function () {
            $(document).ready(function () {
                $(".top-fixed").css('width', $("#title").width() + 'px');
                $("#back-glay").css('height', ($(window).height() - ($(".top-fixed").height()) - 127) + 'px');
                $(".talkline-all").css('min-height', ($("#back-glay").height()-150) + 'px');
                $('#send_question').click(function () {
                    if ($("#question_content").val() || $(".file_box").length > 0) {
                        let file_params = {};
                        $(".file_box").each(function () {
                            file_params[$(this).data('index')] = {};
                            file_params[$(this).data('index')]['type'] = "{{ config('const.question_type_code.from_supporter') }}";
                            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,
                    dictCancelUpload:'キャンセル',
                    dictCancelUploadConfirmation:'このアップロードをキャンセルしてよろしいですか?',
                    clickable:"#btnbrowse_01",
                    //previewsContainer:"#question_file_wrap",
                    url:"{{ route("user.chat.upload_file") }}",
                    params:{
                        "_token":"{{ csrf_token() }}"
                    },
                    dictDefaultMessage:"",
                    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("user.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_supporter') }}";
                            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) {
                    let is_sending = false;
                    $(".send_event").each(function () {
                        if($(this).hasClass('disable')) {
                            is_sending = true;
                        }
                    });
                    if(is_sending) {
                        return false;
                    } else {
                        $(".send_event").each(function () {
                            $(this).addClass('disable')
                        });
                    }
                    $.ajax({
                        type: "post",
                        url : '{{ route("user.chat.send_question") }}',
                        data: {
                            'question_content':$("#question_content").val(),
                            'question_file':file_params,
                            _token: '