@extends('adminlte::page')

@section('title', $clinic->name . 'とのチャット')

@section('content_header')
    <h5><label class="title-underbar">{{$clinic->name}}とのチャット</label></h5>
    <x-admin.success-flush-message />
    <x-admin.error-flush-message />
    <x-admin.validation-message />
@stop

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card card--sp" style="border-radius: 20px; box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.04);">
                <div class="card-body">
					<form action="{{ route('admin.clinics.chat.search', ['clinic_id' => $clinic_id]) }}" method="GET">
						<div id="searchArea">
							<div class="row">
								<div class="col-8">
									<input type="text" class="form-control main-text" name="keyword" placeholder="チャット内検索" />
								</div>
								<div class="col-4">
                                    <button type="submit" class="btn btn-block button-go btn-lg">検索</button>
								</div>
							</div>
						</div>
					</form>
                    <div id="chatInfoArea">
                        <div class="row">
                            <div class="col-md-3">
                                <button type="button" class="btn btn-block button-go btn-lg rounded-pill"
                                    data-toggle="modal" data-target="#pinnedMessageModal">
                                    <i class="fa fa-thumbtack"></i>
                                    <span id="pinCount">{{ $pinnedMessages->count() }}</span>
                                </button>
                            </div>
                            <div class="col-md-6"></div>
                            <div class="col-md-3">
                                <button type="button" class="btn btn-block button-go btn-lg rounded-pill"
                                    data-toggle="modal" data-target="#chatAllReadModal">
                                    <span>全て対応完了にする</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <button id="fasterLoad" type="button" class="btn btn-block button-go btn-lg" onclick="FetchBeforeOrEqualMessages()">
                        さらに前の投稿を表示する
                    </button>
                    <button id="onFirst" type="button" class="btn btn-block button-back btn-lg d-none" disabled>
                        これより古い投稿はありません
                    </button>
                    <div id="chatArea" class="chat-area">
                    {{-- @foreach ($messages as $message)
					@php
						$buttonClass = $message->is_pinned ? 'button-go' : 'button-back';
					@endphp
                    @if ($message->kind == 'CLINIC')
                        @include('components.chat.chat_left', ['message' => $message, 'user' => $message->clinic_staff, 'buttonClass' => $buttonClass])
                    @else
                        @include('components.chat.chat_right', ['message' => $message, 'user' => $employee, 'buttonClass' => $buttonClass])
                    @endif
                    @endforeach --}}
                    </div>
                    <button id="laterLoad" type="button" class="btn btn-block button-go btn-lg" onclick="FetchLaterMessages()">
                        新しい投稿を表示する
                    </button>
                    <button id="atLast" type="button" class="btn btn-block button-back btn-lg d-none" disabled>
                        最新の投稿です
                    </button>
                    <div id="loadingChatDiv" class="spinner-box">
                        <div class="circle-border">
                            <div class="circle-core"></div>
                        </div>
                    </div>
                    <div id="hiddenArea" class="d-none"></div>
                    <form method="POST" action="{{ route('admin.clinics.chat.SendMessage', ['clinic_id' => $clinic->id]) }}" id="contact_message_form" class="d-flex" onsubmit="$('button#contact_message_submit').prop('disabled', true);">
                        <div class="col-md-12" id="messageArea" style="margin-top: 20px;">
                            <div class="row">
                                <div class="col-md-10">
                                        @csrf
                                        <textarea name="chat_message" class="form-control main-text" id="chat_message" cols="30" rows="2" style="border: 2px solid #DCDCDC; border-radius: 15px;"></textarea>
                                        <input type="hidden" name="channel_id" id="channel_id" value="{{$channel->id}}" />
                                </div>
                                {{-- <div class="col-md-1">
                                    <a href="{{ route('admin.clinics.chat.video', ['clinic_id' => $clinic->id]) }}" id="start_video_chat" class="btn btn-block button-go btn-md"><i class="fas fa-video"></i></a>
                                </div> --}}
                                <div class="col-md-2">
                                    <button form="contact_message_form" id="contact_message_submit" class="btn btn-block button-go btn-lg" onclick="sendMessage(event)">送信</button>
                                </div>
                            </div>
                            @php
                            $userAgent = $_SERVER['HTTP_USER_AGENT'];
                            $isDesktop = strpos($userAgent, 'Windows') !== false || strpos($userAgent, 'Macintosh') !== false;
                            @endphp
                            <div class="row" style="width: calc(100% + 15px);">
                                <div class="col-md-12">
                                    <div id="dropArea" style="text-align:center">
                                        @if ($isDesktop)
                                            <div class="medium-heading" style="margin: -15px; background-color: #F5F5F5; border-radius: 10px;">
                                                <br>
                                                <span class="drag-upload"><b>{!! __("clinic-repair-request.create03.span_file_drag") !!}</b>
                                                <br><br>{!! __("clinic-repair-request.create03.text_or") !!}<br><br></span>
                                                <div>
                                                    <label class="custom-file-upload" style="background-color: #fff;">
                                                        <input type="file" id="file" name="file" multiple style="display:none;">
                                                        {!! __("clinic-repair-request.create03.label_file_select_pc") !!}
                                                    </label>
                                                </div>
                                                <br>
                                            </div>
                                        @else
                                            <div style="margin: -15px; background-color: #F5F5F5; border-radius: 10px;">
                                                <label class="custom-file-upload" style="margin: 15px; background-color: #fff;">
                                                    <input type="file" id="file" name="file" multiple style="display:none;">
                                                    {!! __("clinic-repair-request.create03.label_file_select_mobile") !!}
                                                </label>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div id="uploadFileList">
                                        @if(!empty($files))
                                            @foreach($files as $id => $file)
                                                <p>
                                                    <i class="fas fa-file"></i>
                                                    <span>{{ \Arr::get($file, 'name') }}</span>
                                                    <button type="button" class="delete-button text-danger" data-id={{$id}}>
                                                        [{!! __("clinic-repair-request.create03.button_file_delete") !!}]
                                                    </button>
                                                </p>
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="modal-container">
        <div><img src="" class="modal-chat-file-image"></div>
    </div>
    <button id="readBtn" type="button" class="btn btn-block button-go btn-lg rounded-pill d-none"
        data-toggle="modal" data-target="#chatReadModal">
    </button>
    <button id="unreadBtn" type="button" class="btn btn-block button-go btn-lg rounded-pill d-none"
        data-toggle="modal" data-target="#chatUnreadModal">
    </button>
    @include('clinic.chat.modal.pinned_message', ['pinnedmessages' => $pinnedMessages])
    @include('admin.clinics.modal.chat_all_read')
    @include('admin.clinics.modal.chat_read')
    @include('admin.clinics.modal.chat_unread')
    <div class="col-md-12 d-flex align-items-center justify-content-center">
        <a href="{{ route('admin.clinics.show', ['id' => $clinic_id]) }}" class="btn btn-sm btn-block button-go rounded-pill w-50">詳細画面へ戻る</a>
    </div>
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    <link rel="stylesheet" href="/css/chat.css">
    <link href="/css/pict_zoom.css" rel="stylesheet">
    <link href="/css/fileupload_drag&drop.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/admin_chat.css">
    <style>
        .disabled-link {
         pointer-events: none;
         opacity: 0.6;
         cursor: not-allowed;
        }
    </style>
@stop
@section('js')
<script src="https://js.pusher.com/7.0/pusher.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/laravel-echo@1.15.3/dist/echo.iife.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simple-peer/9.11.1/simplepeer.min.js" integrity="sha512-0f7Ahsuvr+/P2btTY4mZIw9Vl23lS6LY/Y7amdkmUg2dqsUF+cTe4QjWvj/NIBHJoGksOiqndKQuI9yzn2hB0g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="/js/apiCall.js"></script>
<script src="/js/upload/base.js" type="module"></script>
<script src="/js/upload/ajaxForChat.js" type="module"></script>
<script type="module">
    import AjaxForChat from '/js/upload/ajaxForChat.js';
    const ajaxUpload = new AjaxForChat('file', 'dropArea', 'uploadFileList','contact_message_form', false);
</script>
<script>
    const place = "OSADA";
    const CLINIC_ID = {{ $clinic->id }};
    // 画像拡大表示
    const modal = $('#modal-container');
    const img = modal.find('img');
    $('img.popup').each(function(index) {
        $(this).click(function() {
            img.attr('src', $(this).attr('src'));
            modal.show();
        })
    });
    modal.click(function() {
        $(this).hide();
    });
</script>
@include('components.chat.js-chat', ['channel_id' => $channel->id, 'clinic_id' => $clinic->id, 'user' => $employee, 'targetMessageId' => $targetChatId])
<script src="/js/adminChat.js" type="module"></script>
@stop