@extends('admin.layouts.master') 
@section('content')
<div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">Therapist Info</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{{asset('/')}}">Home</a></li>
              <li class="breadcrumb-item active"><a href="{{asset(route('therapist'))}}">Therapist</a></li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-3">

            <!-- Profile Image -->
            <div class="card card-primary card-outline">
              <div class="card-body box-profile">
                <div class="text-center">
                  @if($therapist && $therapist['profile_image'])
                    <img class="profile-user-img img-fluid img-circle"
                        src="{{$therapist['profile_image']}}"
                        alt="User profile picture">
                  @else 
                    <img class="profile-user-img img-fluid img-circle"
                        src="{{asset('admin_assets/img/avatar5.png')}}"
                        alt="User profile picture">
                  @endif
                </div>

                <h3 class="profile-username text-center" style = "text-transform:capitalize;">{{$therapist['first_name']." ".$therapist['last_name']}}</h3>

                <p class="text-muted text-center">{{$therapist['email']}}<br>{{$therapist['mobile']}}</p>
                
                <ul class="list-group list-group-unbordered mb-3" style="display:none">
                  <li class="list-group-item">
                    <b>Followers</b> <a class="float-right">1,322</a>
                  </li>
                  <li class="list-group-item">
                    <b>Following</b> <a class="float-right">543</a>
                  </li>
                  <li class="list-group-item">
                    <b>Friends</b> <a class="float-right">13,287</a>
                  </li>
                </ul>

              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->

            <!-- About Me Box -->
            <div class="card card-primary">
              <div class="card-header">
                <h3 class="card-title">About Me</h3>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
              <strong><i class="far fa-file-alt mr-1"></i> Years of Experience</strong>

                <p class="text-muted">{{$therapist['experience']}}</p>

              <hr>
                <strong><i class="fas fa-map-marker-alt mr-1"></i> Location</strong>

                <p class="text-muted">{{$therapist['address'].', '. $therapist['city'] .', '.$therapist['country']}}</p>

                <hr>

                

                

                <strong><i class="fas fa-birthday-cake"></i> Date of Birth</strong>

                <p class="text-muted">{{($therapist['date_of_birth']) ? date('d M Y',strtotime($therapist['date_of_birth'])) : ''}}</p>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
          <div class="col-md-9">
            <div class="card">
              <div class="card-header p-2">
                Therapist Details
              </div><!-- /.card-header -->
              <div class="card-body">
                <div class="tab-content">
                  <div class="active tab-pane" id="activity">
                  <div class="post">
                      <div >
                            <h4>About Me</h4>
                      </div>
                        <div class="row mb-3">
                          <div class="col-sm-12">
                            <p class="text-muted">{{$therapist['about_me']}}</p>
                          </div>
                        </div>
                      
                    </div>
                    <div class="post">
                      <div >
                            <h4>Experience Summary</h4>
                      </div>
                      
                        
                        <div class="row mb-3">
                          <div class="col-sm-12">
                            <p class="text-muted">{{$therapist['exp_summary']}}</p>
                          </div>
                        </div>
                      
                    </div>
                    <!-- Post -->
                    <div class="post">
                      <div >
                            <h4>Specialism</h4>
                      </div>
                      @if($therapist['specialisms'])
                        
                        <div class="row mb-3">
                          <div class="col-sm-12">
                            <ul>
                              @foreach($therapist['specialisms'] as $specialisms)
                                <li class="text-muted">
                                  {{$specialisms}}
                                </li>
                              @endforeach
                            </ul>
                          </div>
                        </div>
                      @endif
                    </div>

                    <div class="post">
                      <div >
                            <h4>Tools</h4>
                      </div>
                      @if($therapist['tools'])
                        
                        <div class="row mb-3">
                          <div class="col-sm-12">
                            <ul>
                              @foreach($therapist['tools'] as $tool)
                                <li class="text-muted">
                                  {{$tool}}
                                </li>
                              @endforeach
                            </ul>
                          </div>
                        </div>
                      @endif
                    </div>
                    <div class="post">
                      <div >
                            <h4>Qualifications</h4>
                      </div>
                      @if($therapist['qualifications'])
                        
                        <div class="row mb-3">
                          <div class="col-sm-12">
                            <ul>
                              @foreach($therapist['qualifications'] as $qualifications)
                                <li class="text-muted">
                                  {{$qualifications['qualification']}}({{$qualifications['end_date']}})
                                </li>
                              @endforeach
                            </ul>
                          </div>
                        </div>
                      @endif
                    </div>
                    <div class="post">
                      <div >
                          <h4>Certification</h4>
                      </div>
                      @if($therapist['certification'])
                        
                        <div class="row mb-3">
                          <div class="col-sm-6">
                            @if( $therapist['certification_file_ext'] == 'pdf')
                            <a download="PDF File" class="btn-default btn btn-lg" href="{{$therapist['certification']}}" target="_blank"> <i class="text-red fas fa-file-pdf"></i> </a>
                            @else
                            <img class="img-fluid" src="{{$therapist['certification']}}" alt="Photo">
                            @endif
                          </div>
                        </div>
                      @endif
                    </div>
                    <div class="post">
                    <div >
                          <h4>Govt Identity</h4>
                        </div>
                      @if($therapist['govt_identity'])
                        
                        <div class="row mb-3">
                          <div class="col-sm-6">
                            @if( $therapist['govt_identity_file_ext'] == 'pdf')
                            <a download="PDF File" class="btn-default btn btn-lg" href="{{$therapist['govt_identity']}}" target="_blank"> <i class="text-red fas fa-file-pdf"></i> </a>
                            @else
                            <img class="img-fluid" src="{{$therapist['govt_identity']}}" alt="Photo">
                            @endif
                          </div>
                        </div>
                      @endif
                    </div>
                    <div class="post">
                      <div>
                          <h4>DBS Evidence (Working with U18)</h4>
                        </div>
                      @if($therapist['certification'])
                        
                        <div class="row mb-3">
                          <div class="col-sm-6">
                            @if( $therapist['certification_file_ext'] == 'pdf')
                            <a download="PDF File" class="btn-default btn btn-lg" href="{{$therapist['certification']}}" target="_blank"> <i class="text-red fas fa-file-pdf"></i> </a>
                            @else
                            <img class="img-fluid" src="{{$therapist['children_certificate']}}" alt="Photo">
                            @endif
                          </div>
                        </div>
                      @endif
                    </div>

                    <div class="post">
                      <div>
                          <h4>Indemnity insurance</h4>
                        </div>
                      @if($therapist['insruance_certificate'])
                        
                        <div class="row mb-3">
                          <div class="col-sm-6">
                            @if( $therapist['insruance_certificate_file_ext'] == 'pdf')
                            <a download="PDF File" class="btn-default btn btn-lg" href="{{$therapist['insruance_certificate']}}" target="_blank"> <i class="text-red fas fa-file-pdf"></i> </a>
                            @else
                            <img class="img-fluid" src="{{$therapist['insruance_certificate']}}" alt="Photo">
                            @endif
                          </div>
                        </div>
                      @endif
                    </div>
                    
                    <div class="post">
                      <div >
                            <h4>ChatRoom Stats</h4>
                      </div>
                      
                        <div class="row mb-3">
                          <div class="col-sm-12">
                          <div class="chart">
                            <canvas id="barChart" style="max-width: 100%;"></canvas>
                          </div>
                          </div>
                        </div>
                      
                    </div>

                  </div>
                </div>
                <!-- /.tab-content -->
              </div><!-- /.card-body -->
            </div>
            <!-- /.nav-tabs-custom -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
@endsection
@section('script')
<script src="{{asset('admin_assets/plugins/chart.js/Chart.min.js')}}"></script>

  <script>
      var ctx = $('#barChart');
      var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: ['Response Time in Seconds', 'Total Words', 'Total Messages'],
          datasets: [{
              label: 'Chatroom Stats',
              data: [{{$therapistStats['avg_response_time']}}, {{$therapistStats['total_words']}},{{$therapistStats['total_messages']}}],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true
                  }
              }]
          }
      }
  });
    </script>
@endsection