@extends('admin.layouts.app')

@section('content')
    <div class="tour-content">
        <h2 class="title float-l">問い合わせ編集 </h2>
    </div>
    {{ Form::open(["route"=>["admin.question.update", ["question"=>$question->id]], "method"=>"put"]) }}
    <table class="table2">
        <tr>
            <th>受付日時</th>
            <td><input type="text" placeholder="" class="text" value="{{ Carbon::parse($question->register_date)->format('Y/m/d H:i') }}" readonly></td>
        </tr>
        <tr>
            <th>種別</th>
            <td><input type="text" placeholder="" class="text" value="{{ config('const.question_type.'.$question->question_type) }}" readonly></td>
        </tr>
        <tr>
            <th>サポーター名 </th>
            <td><input type="text" placeholder="" class="text" value="{{ $question->supporter->supporter_id }}" readonly></td>
        </tr>
        <tr>
            <th>氏名 </th>
            <td><input type="text" placeholder="" class="text" value="{{ $question->supporter->name }}" readonly></td>
        </tr>
        <tr>
            <th>フリガナ </th>
            <td><input type="text" placeholder="" class="text" value="{{ $question->supporter->name_kana }}" readonly></td>
        </tr>
        <tr>
            <th>メールアドレス </th>
            <td><input type="text" placeholder="" class="text" value="{{ $question->supporter->email }}" readonly></td>
        </tr>
        <tr>
            <th>電話番号 </th>
            <td><input type="text" placeholder="" class="text" value="{{ $question->supporter->tel }}" readonly></td>
        </tr>
        <tr>
            <th>問い合わせ内容 </th>
            <td><textarea readonly>@php echo nl2br($question->question_content) @endphp</textarea></td>
        </tr>
        <tr>
            <th>添付ファイル</th>
            <td class="attachment_file">
                @foreach($question->support_file as $question_file)
                    @if(!empty($question_file->file_path) && Storage::disk('question')->has($question->id.'/'.$question_file->file_path))
                        <p>
                            <a href="{{ route("admin.question.download_file", ['question_file_id'=>$question_file->id]) }}">
                                @if($question_file->isImage())
                                    <img src="{{ asset('storage/question/') }}/{{ $question->id }}/{{ $question_file->file_path }}"><br>
                                @endif
                                {{ $question_file->file_name }}
                            </a>
                        </p>
                    @endif
                @endforeach
            </td>
        </tr>
        <tr>
            <th>回答</th>
            <td><textarea name="reply">@php echo nl2br($question->reply) @endphp</textarea></td>
        </tr>
        <tr>
            <th>添付ファイル</th>
            <td>
                <li id="dropzoneForm" class="dropzone">
                    <label id="btnbrowse_01">ファイルを選択</label>
                </li>
                <div id="question_file_wrap">
                    @foreach($question->site_file as $question_file)
                        @if(!empty($question_file->file_path) && Storage::disk('question')->has($question->id.'/'.$question_file->file_path))
                            <div class="file_box" id="file_box{{ $loop->index }}" data-index="{{ $loop->index }}">
                                <span class="close_btn" data-index="{{ $loop->index }}">x</span>
                                @if($question_file->isImage())
                                    <img src="{{ asset('storage/question/') }}/{{ $question->id }}/{{ $question_file->file_path }}"><br>
                                @endif
                                <a id="file_link" href="{{ route("admin.question.download_file", ['question_file_id'=>$question_file->id]) }}">{{ Str::limit($question_file->file_name, 10, '...') }}</a>
                                <input type="hidden" class="file_name" id="file_path_{{ $loop->index }}" name="question_file[{{ $loop->index }}][file_path]" value="{{ $question_file->file_path }}">
                                <input type="hidden" class="file_path" id="file_name_{{ $loop->index }}" name="question_file[{{ $loop->index }}][file_name]" value="{{ $question_file->file_name }}">
                                <input type="hidden" class="file_type" id="file_type_{{ $loop->index }}" name="question_file[{{ $loop->index }}][type]" value="{{ $question_file->type }}">
                                <input type="hidden" id="file_id_{{ $loop->index }}" name="question_file[{{ $loop->index }}][id]" value="{{ $question_file->id }}">
                            </div>
                        @endif
                    @endforeach
                </div>
            </td>
        </tr>
        <tr>
            <th>社内用備考 </th>
            <td><textarea name="internal_note">@php echo nl2br($question->internal_note) @endphp</textarea></td>
        </tr>
        <tr>
            <th>対応状況</th>
            <td>
                <ul class="coil-list">
                    @foreach(config('const.question_response_status') as $key => $status)
                    <li class="check">
                        <input type="checkbox" value="{{ $key }}" id="response_status{{ $key }}" name="response_status" {{ $question->response_status == $key ? 'checked' : '' }}>
                        <label for="response_status{{ $key }}">{{ $status }}</label>
                    </li>
                    @endforeach
                </ul>
            </td>
        </tr>
    </table>
    <div class="search-btn">
        <input type="submit" value="編集する" class="edit">
    </div>
    {{ Form::close() }}

    <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">
        <input type="hidden" class="file_type" id="temp_file_type">
    </div>
@endsection

@section('page_css')
    <style>
        #question_file_wrap {
            padding-bottom: 10px;
            display: flex;
            flex-wrap: wrap;
            width: auto;
            margin-top: 10px;
        }
        .file_box {
            border: 1px solid #dddddd;
            padding: 2px 5px;
            border-radius: 5px;
            display: inline-block;
            width: auto;
            cursor: pointer;
            vertical-align: middle;
            position: relative;
        }
        .attachment_file img {
            width: 100px;
        }
        .file_box img {
            width: 100px;
        }
        .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;
        }
        input[type=button].paperplane {
            background: url(/assets/user/img/icon/paperplane.svg) #2BB673 50% 50% no-repeat;
            background-size: 20px;
            width: 32px;
            height: 32px;
            color: #FFF;
            border: none;
            border-radius: 50%;
            padding: 0 5px;
            display: block;
            text-align: center;
            letter-spacing: 0;
            transition: all 0.3s ease-in;
            font-size: 1rem;
            box-sizing: border-box;
            margin: 0;
            box-shadow: 0 0 30px #ccc;
            font-weight: bold;
        }
        .dropzone {
            min-height: unset !important;
            border: none !important;
            background: white;
            padding: 0 !important;
        }
        .dz-default.dz-message {
            display: none;
        }
        .dropzone label {
            border: 1px solid #888888;
            padding: 5px;
            color: #888888;
            display: inline-block;
            border-radius: 5px;
            cursor: pointer;
            font-size: 12px;
            min-width: 76px;
        }
        .dropzone label::before {

            content: '＋';
            font-size: 12px;
            font-weight: bold;
            padding: 0px;
            transition: all, 0.25s, linear;
            margin-right: 0px;
        }
    </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;
        let image_array = [];
        $(function () {
            $(document).ready(function () {
                $(".close_btn").click(function () {
                    let count = $(this).data('index');
                    helper_confirm("dialog-confirm", '削除', "削除します。<br />よろしいですか？", 300, "確認", "閉じる", function(){
                        $.ajax({
                            type: "post",
                            url : '{{ route("admin.question.delete_file") }}',
                            data: {
                                'file_name':$("#file_path_" + count).val(),
                                'id':$("#file_id_" + count).val(),
                                _token: '