@extends('adminlte::page')

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

@section('content_header')
    <h5><label class="title-underbar">チャット</label></h5>
@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="チャット内検索"
                                        @if (isset($inputs['keyword']))
                                        value="{{ $inputs['keyword'] }}"
                                        @endif
                                    />
								</div>
								<div class="col-4">
                                    <button type="submit" class="btn btn-block button-go btn-lg">検索</button>
								</div>
							</div>
						</div>
					</form>
                    @if ($messages->count() > 0)
                    <div id="chatArea">
                    @foreach ($messages as $message)
					@php
						$buttonClass = $message->is_pinned ? 'button-go' : 'button-back';
					@endphp
                    @if ($message->kind == 'CLINIC')
                        @include('components.chat.search_chat_left', ['message' => $message, 'user' => $message->clinic_staff, 'buttonClass' => $buttonClass])
                    @else
                        @include('components.chat.search_chat_right', ['message' => $message, 'user' => $employee, 'buttonClass' => $buttonClass])
                    @endif
                    @endforeach
                    </div>
                    @else
                    <div style="margin: 0 auto;">
                        <b>検索条件に当てはまるものはありませんでした。<br>キーワードを変えてお試しください。</b>
                    </div>
                    @endif
                </div>
                @if ($messages->count() > 0)
                <div style="margin: 0 auto;">
                    {{ $messages->appends(request()->input())->links() }}
                </div>
                @endif
            </div>
        </div>
    </div>
    <div id="modal-container">
        <div><img src="" class="modal-chat-file-image"></div>
    </div>
    <form action="{{ route('admin.clinics.chat.index', ['clinic_id' => $clinic_id]) }}" method="GET" id="displayChat">
        <input id="displayChatId" type="hidden" name="chat_id" value="0" />
    </form>
@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="/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', true, 'confirmFileList');
</script>
<script>
    const place = "CLINIC";
    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>
@php
    $latestMessageId = $messages->first() ? $messages->first()->id : 0;
@endphp
@include('components.chat.js-chat', ['channel_id' => $channel->id, 'clinic_id' => $clinic_id, 'user' => $employee, 'targetMessageId' => $latestMessageId])
@stop