@include('includes/header_start')

<!-- Summernote css -->
<link href="{{ asset('assets/plugins/summernote/summernote.css') }}" rel="stylesheet" />

<link href="{{ asset('assets/plugins/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/plugins/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css') }}" rel="stylesheet">
<!--Morris Chart CSS -->
<link rel="stylesheet" href="{{ asset('assets/plugins/morris/morris.css') }}">


@include('physicians/elements/header_end')

<!-- Page title -->
<ul class="list-inline menu-left mb-0">
    <li class="list-inline-item">
        <button type="button" class="button-menu-mobile open-left waves-effect">
            <i class="ion-navicon"></i>
        </button>
    </li>
    <li class="hide-phone list-inline-item app-search">
        <h3 class="page-title">Video Chat</h3>
    </li>
</ul>

<div class="clearfix"></div>
</nav>

</div>
<!-- Top Bar End -->

<!-- ==================
     PAGE CONTENT START
     ================== -->
<div class="wrap">

<div class="page-content-wrapper">

    <div class="row">

        @if($call->status !== 'VIDEOCHAT ROOM OPEN')
        <div class="col-md-6 col-xl-6 col-xs-12">
            <a href="{{ route('calls.call.open.physician', Request::segment(3)) }}">
                <div class="card text-center m-b-30 card-success">
                    <div class="mb-2 card-body text-muted">
                        <h3 class="text-info"><i class="ti-video-camera" style="color:white;"></i></h3>
                        <p style="color:white;">Open Videochat Room</p>
                    </div>
                </div>
            </a>
        </div>
        @endif
        @if($call->status === 'VIDEOCHAT ROOM OPEN')

            <div class="col-md-6 col-xl-6 col-xs-12">
            <a href="{{ route('calls.call.close.physician', Request::segment(3)) }}">
                <div class="card text-center m-b-30 card-danger">
                    <div class="mb-2 card-body text-muted">
                        <h3 class="text-info"><i class="ti-video-camera" style="color:white;"></i></h3>
                        <p style="color:white;">Close Videochat Room</p>
                    </div>
                </div>
            </a>
        </div>
        @endif
    </div>

    <div class="row">
        <div class="col-md-5 col-sm-12">
            <div class="card m-b-30" style="">
                <h4 class="card-header mt-0">Video Chat</h4>
                <div class="card-body">
{{--                    <iframe src="https://tokbox.com/embed/embed/ot-embed.js?embedId=add3d27d-1b9e-4c6c-af22-f9cc552af5d2&room=DEFAULT_ROOM&iframe=true" style="height:500px; width: 100%" scrolling="auto" allow="microphone; camera" ></iframe>--}}
                    <iframe src="https://tokbox.com/embed/embed/ot-embed.js?embedId=5664ab7c-cfad-4ca6-9472-21cab11f5d32&room=DEFAULT_ROOM&iframe=true" style="height:500px; width: 100%;" scrolling="auto" allow="microphone; camera" ></iframe>

                </div>
            </div>
        </div>

{{--        <div class="col-6">--}}
{{--            <div class="card m-b-30">--}}
{{--                <h4 class="card-header mt-0">Video Chat</h4>--}}
{{--                <div class="card-body">--}}
{{--                    <iframe src="https://tokbox.com/embed/embed/ot-embed.js?embedId=add3d27d-1b9e-4c6c-af22-f9cc552af5d2&room=DEFAULT_ROOM&iframe=true" style="height:400px; width: 100%;" scrolling="auto" allow="microphone; camera" ></iframe>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
        <div class="col-md-7 col-sm-12">
            <div class="card m-b-30">
                <h4 class="card-header mt-0">Patient Details</h4>
                <div class="card-body">
                    <span><h4>Name:</h4><h5>{{ $call->patient['first_name'] }} {{ $call->patient['first_name'] }}</h5></span>
                    <span><h4>Call Time:</h4><h5>{{ date('m/d/Y H:i', strtotime($callScheduled->call_date_time)) }}</h5></span>

{{--                    {{ $call }}--}}
{{--                    {{ $call }}--}}
                </div>
            </div>

            <form action="{{ route('calls.videochat.comments.store', ['id' => Request::segment(3)]) }} " method="POST" enctype="multipart/form-data" onsubmit="return confirm('Are you sure you want to submit this form? Doing so will refresh the page and leave the video call. Please make sure this is what you would like to do.');" autocomplete="off">
                @csrf

                    @include('patient_elements/patient_info')

                <div class="card m-b-30">
                    <h4 class="card-header mt-0">Airway Evaluation</h4>
                    <div class="card-body">

                        <div class="form-group">
                            <label>Teeth Diagram</label>
                            <input type="text" class="form-control" name="teeth_diagram" value="{{ old('teeth_diagram') }}" required>

                            @if ($errors->has('teeth_diagram'))
                                <span class="badge badge-danger">{{ $errors->first('teeth_diagram') }}</span>
                            @endif

                        </div>

                        <div class="form-group">
                            <label>Mallapati Score</label>
                            <input type="text" class="form-control" name="mallapati_score" value="{{ old('mallapati_score') }}" required>

                            @if ($errors->has('mallapati_score'))
                                <span class="badge badge-danger">{{ $errors->first('mallapati_score') }}</span>
                            @endif

                        </div>
                        <div class="form-group">
                            <label>Thyromental Distance</label>
                            <input type="text" class="form-control" name="thyromental_distance" value="{{ old('thyromental_distance') }}" required>

                            @if ($errors->has('thyromental_distance'))
                                <span class="badge badge-danger">{{ $errors->first('thyromental_distance') }}</span>
                            @endif

                        </div>
                        <div class="form-group">
                            <label>Jaw Prominence</label>
                            <input type="text" class="form-control" name="jaw_prominence" value="{{ old('jaw_prominence') }}" required>

                            @if ($errors->has('jaw_prominence'))
                                <span class="badge badge-danger">{{ $errors->first('jaw_prominence') }}</span>
                            @endif

                        </div>
                        <div class="form-group">
                            <label>Neck Circumference</label>
                            <input type="text" class="form-control" name="neck_circumference" value="{{ old('neck_circumference') }}" required>

                            @if ($errors->has('neck_circumference'))
                                <span class="badge badge-danger">{{ $errors->first('neck_circumference') }}</span>
                            @endif

                        </div>

                        <div class="form-group">
                            <label>Tongue Size</label>
                            <input type="text" class="form-control" name="tongue_size" value="{{ old('tongue_size') }}" required>

                            @if ($errors->has('tongue_size'))
                                <span class="badge badge-danger">{{ $errors->first('tongue_size') }}</span>
                            @endif

                        </div>
                        <hr>

                        <div class="header"><h5>Test Recommendations</h5></div>
                        <textarea class="summernote" id="summernote" name="test_comment" required>{{ old('test_comment') }}</textarea>

                        @if ($errors->has('test_comment'))
                            <span class="badge badge-danger">{{ $errors->first('test_comment') }}</span>
                        @endif

                        <div class="header"><h5>Additional Clearence Recommendations</h5></div>
                        <textarea class="summernote" id="summernote" name="additional_clearence_recommendations" required>{{ old('additional_clearence_recommendations') }}</textarea>

                        @if ($errors->has('additional_clearence_recommendations'))
                            <span class="badge badge-danger">{{ $errors->first('additional_clearence_recommendations') }}</span>
                        @endif

                        <hr>

                        <h5>Please ensure that all sections are filled out before submitting the form.</h5>
                        <p>Once the form is submitted the video chat will be postponed on refresh.</p>

                        <div class="row">
                            <div class="col-md-12">
                                <button type="submit" id="submit-form" class="btn btn-success btn-flat pull-right">Submit</button>
                            </div>
                        </div>

                    </div>
                </div>
            </form>

        </div>

    </div>



</div> <!-- Page content Wrapper -->
</div>


@include('includes/footer_start')

<script src="{{ asset('assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>

<script src="{{ asset('assets/plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/dataTables.buttons.min.js') }}"></script>

<script src="{{ asset('assets/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>
{{--<script src="{{ asset('assets/pages/datatables.init.js') }}"></script>--}}

<!--Summernote js-->
<script src="{{ asset('assets/plugins/summernote/summernote.min.js') }}"></script>

<script>
    jQuery(document).ready(function(){
        $('.summernote').summernote({
            height: 300,                 // set editor height
            minHeight: null,             // set minimum height of editor
            maxHeight: null,             // set maximum height of editor
            focus: false                 // set focus to editable area after initializing summernote
        });
        var el = document.getElementById('submit-form');

        el.addEventListener('submit', function(){
            return confirm('Are you sure you want to submit this form?');
        }, false);

        $('.patient-datatables').DataTable();

        //Buttons examples
        var table = $('.patient-datatables').DataTable({
            lengthChange: false,
            buttons: ['copy', 'excel', 'pdf', 'colvis']
        });

        // table.buttons().container()
        //     .appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)');

        $('.collapse').on('shown.bs.collapse', function(e) {
            var $card = $(this).closest('.card');
            $('html,body').animate({
                scrollTop: $card.offset().top-70
            }, 500);
        });
    });
</script>

@include('includes/footer_end')