@extends('layouts.head') @section('content')

<!-- <iframe
  src="https://video-chat.aliansap.com.co/"
  allow="microphone; camera"
  width="100%"
  height="800px"
></iframe> -->

<form target="_blank" method="POST" action="{{ url('/video/create_session/') }}">
  {{ csrf_field() }}
  <input type="hidden" name="guest_id" id="guest_id" required>
  <div class="row">
    <div class="col-xs-2">
      <div class="form-group">
        <label for="exampleFormControlInput1">{{ __('messages.video.label_1') }}</label>
        <input type="text" class="form-control" id="user_id" placeholder="Documento..." required />
      </div>
    </div>
  </div>
  <div class="box-header">
    <button type="submit" class="btn btn-success btn-full"
      style="margin-right:5px; background-color:#f79708; border-color:#f79708;">
      <i class="fa fa-plus" style="margin-right:4px;"></i>{{ __('messages.video.button_createcall') }}
    </button>
  </div>
</form>

<div class="row">
  <div class="col-xs-2">
    <div class="form-group">
      <label for="exampleFormControlInput1">{{ __('messages.video.label_2') }}</label>
      <input type="text" class="form-control" id="document" required readonly />
    </div>
  </div>
</div>
<div class="row">
  <div class="col-xs-2">
    <div class="form-group">
      <label for="exampleFormControlInput1">{{ __('messages.video.label_3') }}</label>
      <input type="text" class="form-control" id="name" required readonly />
    </div>
  </div>
</div>

<div class="row">
  <div class="col-xs-2">
    <div class="form-group">
      <label for="exampleFormControlInput1">{{ __('messages.video.label_4') }}</label>
      <input type="text" class="form-control" id="last_name" required readonly />
    </div>
  </div>
</div>
<script>
  $("#user_id").autocomplete({
      source: "/pacientes/autocomplete",
      minLength: 3,
      select: function (event, ui) {
        $('#document').val(ui.item.value);
        $('#name').val(ui.item.nombre1);
        $('#last_name').val(ui.item.apellido1);
        $('#guest_id').val(ui.item.id);
      }
    });
</script>

@endsection