@extends('user.layouts.app')

@section('title', 'チャット')

@section('header')
    <p><a href="{{ route('user.vehicles.' . $from) }}">＜</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>
        <div id="wrapper">
            <div class="picandtext">
                <div class="pic">
                    @if(is_object($vehicle->contract))
                        @switch($vehicle->contract->contract_register_status)
                            @case(config('const.contract_status_code.waiting_seller'))
                            <span class="established">売主情報<br>登録待ち</span>
                            @break
                            @case(config('const.contract_status_code.waiting_client'))
                            <span class="established">引取先情報<br>登録待ち</span>
                            @break
                            @case(config('const.contract_status_code.waiting_document'))
                            <span class="established">必要書類<br>準備待ち</span>
                            @break
                            @case(config('const.contract_status_code.waiting_document_confirm'))
                            <span class="confirmed">必要書類<br>発送待ち</span>
                            @break
                            @case(config('const.contract_status_code.waiting_desired'))
                            <span class="confirmed">引取希望日<br>登録待ち</span>
                            @break
                            @case(config('const.contract_status_code.waiting_reception_date'))
                            <span class="confirmed">引取日<br>確定待ち</span>
                            @break
                            @case(config('const.contract_status_code.waiting_pickup'))
                            <span class="ok">引取・売主<br>支払い待ち</span>
                            @break
                            @case(config('const.contract_status_code.waiting_payment'))
                            <span class="ok">サポート料<br>支払い待ち</span>
                            @break
                            @case(config('const.contract_status_code.end'))
                            <span class="end">取引<br>完了</span>
                            @break
                            @case(config('const.contract_status_code.cancel'))
                            <span class="cancel">取引<br>キャンセル</span>
                            @break
                            @case(config('const.contract_status_code.changes'))
                            <span class="changes">金額変更<br>後買取</span>
                            @break
                        @endswitch
                    @else
                        @if(!$vehicle->is_complete)
                            <span class="inputing">入力中</span>
                        @elseif($vehicle->status == config('const.vehicle_status_code.assessed'))
                            <span class="finish">査定済</span>
                        @elseif($vehicle->status == config('const.vehicle_status_code.under_assessment'))
                            <span class="now">査定中</span>
                        @elseif($vehicle->status == config('const.vehicle_status_code.cancel'))
                            <span class="cancel">キャン<br>セル</span>
                        @else
                            <span class="wait">受付<br>待ち</span>
                        @endif
                    @endif
                    <a href="{{ route('user.vehicles.show', ['vehicle'=>$vehicle->id]) }}">
                        @php
                            $index_file = $vehicle->getIndexImage();
                        @endphp
                        @if(!empty($index_file) && Storage::disk('vehicles')->has($vehicle->id.'/'.$index_file))
                            <img src="{{ asset("storage/vehicles") }}/{{ $vehicle->id }}/{{ $index_file }}">
                        @else
                            <img src="{{ asset("assets/share/img/sample/i_noimage.gif") }}"/>
                        @endif
                    </a>
                </div>
                <div class="text">
                    <dl>
                        <dl>
                            <dt>受付番号</dt>
                            <dd>{{ $vehicle->manage_no }}</dd>
                            <dt>形状</dt>
                            <dd>{{ $vehicle->getVehicleShape() }}</dd>
                            <dt>型式</dt>
                            <dd>{{ $vehicle->getVehicleModel() }}</dd>
                            <dt>年式</dt>
                            <dd>{{ \App\Helper\SystemHelper::convertSymbolGtJYeaMonth($vehicle->year_type_y, $vehicle->year_type_m) }}</dd>
                        </dl>
                    </dl>
                </div>
            </div>
        </div>
        <div id="back-glay" class="fixclear">
            <div class="talkline-all">
                @include('share.chat._unit', ['messages'=>$messages])
            </div>
        </div>

        <div class="sendbox">
            <div id="chat_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="message_content" class="waku1" name="message_content"></textarea>
                </li>
                <li>
                    <input type="button" class="paperplane" id="send_message" value="">
                </li>
            </ul>
        </div>
    </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>
        #wrapper {
            position: fixed;
            top: 0;
            z-index: 99;
            background: white;
            padding: 20px 35px;
            margin: 40px 0;
        }
        body {
            overflow: hidden !important;
        }
        #wrapper .picandtext .pic img {
            width: -webkit-fill-available !important;
        }
        #back-glay {
            overflow: scroll;
        }
        .talkline-all {
        }
        @media only screen and (max-width: 769px){
            #wrapper {
                padding: 30px 30px 0 30px !important;
                margin: 20px 0 0 0;
            }
        }
    </style>
    @include('share.chat.chat_css')

@endsection

@section('page_js')

    @include('share.chat.chat_js')
    <script>
        $(function () {
            $(document).ready(function () {
                setTimeout(function () {
                    let addHeight = 40;
                    let delWidth = 70;
                    if($(document).width() > 768) {
                        addHeight = 70;
                        delWidth = 60;
                    }
                    $("#wrapper").css("width", ($('main').width() - delWidth) + 'px');
                    $("#back-glay").css('margin-top', ($("#wrapper").height()+addHeight) + 'px');
                    $("#back-glay").css('height', ($(window).height() - ($("#wrapper").height()+addHeight) - 127) + 'px');
                    $(".talkline-all").css('min-height', ($("#back-glay").height()-150) + 'px');
                }, 500);
            });
        });
    </script>

@endsection