@extends('admin.layouts.app')

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

@section('header')
    <h1 id="title">チャット</h1>
@endsection

@section('content')

    <main>
        <div id="vehicle_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('admin.vehicles.edit', ['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>
        main {
            margin: 0 auto 0 auto;
            max-width: 768px;
        }
        #vehicle_wrapper{
            max-width: 768px;
            margin: 40px auto;
        }

        .picandtext {
            overflow: hidden;
        }
        .picandtext .pic {
            min-height: 100px;
            width: 55%;
            position: relative;
            float: left;
        }
        .picandtext .pic span {
            font-weight:bold;
            position: absolute;
            top: 5px;
            left: 5px;
            line-height: 1.2;
            font-size: 0.75rem;
            width: 60px;
            height: 60px;
            text-align: center;
            border-radius: 50%;
            color: #FFF;
            box-sizing: border-box;
        }
        .picandtext .pic span.inputing {
            background: #EC1C24;
            padding: 20px 0 0 0;
        }
        .picandtext .pic span.wait {
            background: #F15A29;
            padding: 15px 0 0 0;
        }
        .picandtext .pic span.now {
            background: #F7941E;
            padding: 22px 0 0 0;
        }
        .picandtext .pic span.finish {
            background: #58595B;
            padding: 22px 0 0 0;
        }
        .picandtext .pic span.cancel {
            background: #FFF;
            border:1px solid #333;
            color: #333;
            padding: 15px 0 0 0;
        }
        .picandtext .pic span.established {
            background: #EC1C24;
            padding: 15px 0 0 0;
        }
        .picandtext .pic span.changes {
            background:#f15a29;
            padding: 15px 0 0 0;
        }
        .picandtext .pic span.end {
            background: #333;
            padding: 15px 0 0 0;
        }
        .picandtext .pic span.ok {
            background: green;
            padding: 15px 0 0 0;
            margin: 0 !important;
        }
        .picandtext .pic span.under {
            font-weight:bold;
            position: absolute;
            top: 60px;
            left: 5px;
            line-height: 1.2;
            font-size: 0.75rem;
            width: 60px;
            height: 60px;
            text-align: center;
            border-radius: 50%;
            color: #FFF;
            box-sizing: border-box;
        }
        .picandtext .text {
            width: 40%;
            margin: 0 0 0 5%;
            float: right;
        }
        .picandtext .text dl dt:first-child {
            padding: 0;
        }
        .picandtext .text dl{
            line-height: 1.4;
        }
        .picandtext .text dl dt {
            font-size: 0.6rem;
            color: #666;
            padding: 2px 0 0 0;
        }
        .picandtext .text dl dd {
            border-bottom: 1px solid #F1F2F2;
            padding: 0 0 2px 0;
        }
        .picandtext .text dl dd:last-child {
            border-bottom: none;
        }
        a img, img {
            border: 0;
        }
        img, svg {
            max-width: 100%;
        }

        #back-glay {
            max-width: 768px;
            margin: 15px auto 0 auto;
            background: #F7F7F7;
            padding: 15px 0;
        }
        .talkline-all {
            padding-bottom: 100px;
            min-height:calc(100vh - 150px);
        }
        .talkline-all time {
            text-align: center;
            color: #BCBEC0;
            display: block;
            margin: 0 auto 5px auto;
            width: 100px;
            font-size: 0.7rem;
        }
        .talkline {
            overflow: hidden;
            clear: both;
            padding: 5px 15px 15px 5px;
        }
        .talkline-all .right-message {
            float: right;
            max-width: 50%;
            margin: 0 20px 0 0;
        }
        .talkline-all .right-message .thename {
            font-size: 11px;
            color: #999;
        }
        .talkline-all .left-message .thename {
            font-size: 11px;
            color: #999;
            margin-left: 50px;
        }
        .talkline-all ul.fukidashi {
            clear: both;
            width: 250px;
        }
        .talkline-all ul.fukidashi li {
            float: left;
        }
        ul.fukidashi li p, div.fukidashi p {
            font-size: 13px !important;
        }
        .talkline-all div.fukidashi {
            width: 100%;
            max-width: 200px;
            background: #BEE1DD;
            padding: 5px 10px;
            border-radius: 10px;
            position: relative;
        }
        .talkline-all div.fukidashi:after {
            position: absolute;
            right: -5px;
            top: 10px;
            content: "";
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 5px 0 5px 5px;
            border-color: transparent transparent transparent #97DBD2;
        }
        .talkline-all .left-message {
            float: left;
        }
        .talkline-all .left-message ul.fukidashi li:nth-child(1) {
            width: 18%;
            display: block;
        }
        .talkline-all .left-message ul.fukidashi li:nth-child(1) div {
            width: 30px;
            height: 30px;
            overflow: hidden;
            border-radius: 50%;
        }
        .talkline-all .left-message ul.fukidashi li:nth-child(1) div img {
            max-width: 100%;
        }
        .talkline-all .left-message ul.fukidashi li:nth-child(2) {
            width: 82%;
            background: #FFF;
            padding: 5px 10px;
            box-sizing: border-box;
            border-radius: 10px;
            position: relative;
        }
        .talkline-all .left-message ul.fukidashi li:nth-child(2):before {
            position: absolute;
            left: -5px;
            top: 10px;
            content: "";
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 5px 5px 5px 0;
            border-color: transparent #FFF transparent transparent;
        }
        input[type=submit].paperplane, input[type=button].paperplane {
            background: url("{{ asset('assets/admin/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;
        }
        input[type=submit].paperplane2 {
            background: url("{{ asset('assets/admin/img/icon/paperplane2.svg') }}") #FFF 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;
        }
        .sendbox {
            position: fixed;
            bottom: 0px;
            background: #FFF;
            width: 100%;
            max-width: 768px;
            padding: 0 3%;
            box-sizing: border-box;
            padding-top: 5px;
            padding-bottom: 5px;
            z-index: 9980;
        }
        .sendbox.estimate-ver {
            background: #1C75BC
        }
        ul.bottom-list {
            position: relative;
        }
        ul.bottom-list li {
            float: left;
        }
        ul.bottom-list li:nth-child(1) {
            width: 8%;
            padding: 5px 0 0 0;
            line-height: 1.3;
            color: #FFF;
        }
        ul.bottom-list li:nth-child(2) {
            width: 82%;
        }
        ul.bottom-list li:nth-child(2) textarea, ul.bottom-list li:nth-child(2) input[type=number] {
            width: 100%;
            border-radius: 5px;
            height: 40px;
            max-height: 300px;
            padding: 8px;
            line-height: 20px;
        }
        textarea.waku1 {
            background: #FFF;
            border: 1px solid #D1D3D4;
        }
        input.waku2 {
            background: #FFF;
            border: none;
            width: 88% !important;
            margin: 0 5px 0 10px;
        }
        input.waku2 + span {
            color: #FFF;
        }
        ul.bottom-list li:nth-child(2) div {
            position: absolute;
            left: 5px;
            top: 6px;
        }
        ul.bottom-list li:nth-child(2) div img {
            width: 16px;
        }
        ul.bottom-list li:nth-child(3) {
            width: 7%;
            padding: 5px 0 0 2%;
        }
        .dn {
            display: none
        }
        .btn_fileupload {
            background: transparent url("{{ asset('assets/admin/img/icon/clip.svg') }}") no-repeat top left !important;
            background-size: 14px;
            border: none;
            width: 14px;
            height: 28px;
            cursor: pointer;
        }
        .btn_fileupload_over {
            background: transparent url("{{ asset('assets/admin/img/icon/clip.svg') }}") no-repeat top left;
            background-size: 14px;
            border: none;
            width: 14px;
            height: 28px;
            cursor: pointer;
        }
        #vehicle_wrapper {
            position: fixed;
            top: 0;
            z-index: 99;
            background: white;
            padding: 20px 35px;
            margin: 40px 0;
        }
        #r-content {
            margin-top: 0 !important;
        }
        @media only screen and (max-width: 769px){
            #vehicle_wrapper {
                padding: 30px 15px 0 15px !important;
                margin: 30px 0 0 0;
            }
        }
        #vehicle_wrapper .picandtext .pic img {
            width: -webkit-fill-available !important;
        }
        body {
            overflow: hidden !important;
        }
        #back-glay {
            overflow: scroll;
        }
        /*---------------------------------------*/
    </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 = 20;
                        delWidth = 60;
                    }
                    console.log($("#vehicle_wrapper").height());
                    $("#vehicle_wrapper").css("width", ($('main').width() ) + 'px');
                    console.log($("#vehicle_wrapper").height());
                    $("#back-glay").css('margin-top', ($("#vehicle_wrapper").height()+addHeight) + 'px');

                    $("#back-glay").css('height', ($(window).height() - ($("#vehicle_wrapper").height()+addHeight) - 127) + 'px');
                    $(".talkline-all").css('min-height', ($("#back-glay").height()-150) + 'px');
                }, 500);
            });
        });
    </script>

@endsection