@extends('admin.dashboard')

@section('title','Add live doctor')
@section('content')
  <div class="row">
      <div class="col-12">
          <div class="page-title-box d-flex align-items-center justify-content-between">
              <h4 class="mb-0 font-size-18">Doctor Registration</h4>

              <div class="page-title-right">
                  <ol class="breadcrumb m-0">
                      <li class="breadcrumb-item"><a href="javascript: void(0);">Home</a></li>
                      <li class="breadcrumb-item active">Doctors form</li>
                  </ol>
              </div>
              
          </div>
      </div>
  </div>    

  <form method="post" class="row" enctype="multipart/form-data" id="save"> @csrf
    <div class="col-md-12">
      <div class="card">
        <div class="card-body">
        
          <div class="form-group row">
            <label class="col-form-label col-md-2 col-sm-12">Search Doctor</label>
            <div class="col-md-8 col-sm-8">
              <input class="form-control" type="search" autofocus autocomplete="off" id="search_doctor" name="search_doctor" placeholder="Search doctor by name">
            </div>
            <div class="col-md-2 col-sm-4">
              <button type="button" class="searchDoctor btn btn-light waves-effect mb-5 float-right"><i class="fa fa-search"></i> Search doctor</button>
            </div>

          </div>
          <div class="form-group pull-left doctorSearachResult"></div>

          <div class="container">
            @include('admin.doctor.live-doctor-form')
          </div>

          <div class="col-md-12 mt-5">
            <button type="submit" class="float-right btn btn-info waves-effect waves-light"> Add To Panel </button>
          </div>
        </div>
      </div>

    </div>
  </form>


<style type="text/css">
  .typeahead {
    top:20px;
  }
</style>
<link href="{{asset('back/typeahead/style.css')}}" rel="stylesheet"> 
<script src="{{asset('back/assets/js/jquery.min.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>  
<script type="text/javascript">
  //search doctor for assingnig chambers
  var doctor_path = "/common/doctor-autocomplete";
  $('#search_doctor').typeahead({
      minLength: 2,
      source:  function (query, process) {
          return $.get(doctor_path, { query: query }, function (data) {
              return process(data);
          });
      },
  });

  $(function(){
     $('.searchDoctor').on('click',function(){
          if ($('[name=search_doctor]').val().length >0) {
              $('.doctorSearachResult').html('Loading ...');
              $.ajax({
                  url : "/common/search-chamber/"+ $('[name=search_doctor]').val(),
                  type: "get", contentType: false,cache: false,processData:false
              }).done(function(response){ //
                  $('.doctorSearachResult').html(response);
              });
          }else{  alert('type something');}
     });
  })
</script>
@endsection