@extends('adminlte::page')

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

@section('content_header')
    <h5><label class="title-underbar">{{$clinic->name}}とのビデオチャット</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">
                    <div id="chatArea">
                        <div class="row">
                            <div id="connect" class="col-12">
                                <button id="connect_submit" class="btn btn-block button-go btn-lg" onclick="callVideoChat('calling')">「{{$clinic->name}}」と通話を開始する</button>
                            </div>
                            <div id="disconnect" class="col-12" style="display: none;">
                                <button id="disconnect_submit" class="btn btn-block button-go btn-lg" onclick="disconnect()">通話を終了する</button>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-5">
                                <div class="text-center">自分の映像</div>
                                <video id="video-here" autoplay></video>
                            </div>
                            <div class="col-2 text-center">
                                ⇔<br>
                                ビデオチャット
                            </div>
                            <div class="col-5">
                                <div class="text-center">相手の映像</div>
                                <video id="video-there" autoplay></video>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('components.chat.calling')
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    <link rel="stylesheet" href="/css/chat.css">
    <style>
        .disabled-link {
         pointer-events: none;
         opacity: 0.6;
         cursor: not-allowed;
        }   
        video {
            width: 100%
        }
    </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://cdn.jsdelivr.net/npm/simple-peer@9.11.1/simplepeer.min.js"></script>
<script src="/js/apiCall.js"></script>
<script>
    const place = "OSADA";
</script>
@include('components.chat.js-chat', ['channel_id' => $channel->id, 'clinic_id' => $clinic->id, 'user' => $employee])
@include('components.chat.js-chat_video', ['channel_id' => $channel->id, 'clinic_id' => $clinic->id, 'user' => $employee])
@stop