@extends('admin.layouts.master') 
@section('content')
<style>
  .select2-container--default .select2-selection--multiple .select2-selection__choice {
      background-color: #007bff;
  }
</style>
<div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6" >
            <h1 class="m-0 text-dark">Update Therapist</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{{asset('admin')}}">Home</a></li>
              <li class="breadcrumb-item active"><a href="{{asset(route('therapist'))}}">Question</a></li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
  <div class="container-fluid">
    @if(session()->has('success'))
      <div class="alert alert-success">
        {{ session()->get('success') }}
       </div>
    @endif
    @if(session()->has('error'))
      <div class="alert alert-success">
        {{ session()->get('error') }}
      </div>
    @endif
        <div class="row">
          <div class="col-md-12">
            <div class="card card-primary">
              <div class="card-header">
                <h3 class="card-title">Update Therapist Info</h3>
              </div>
              <form role="form" method="post" action="{{!isset($therapist['id']) ? route('therapist.store') : route('therapist.update',$therapist['user_id'])}}">
                @csrf
                @if(isset($therapist['id']))
                   {{ method_field('PUT') }}
                @endif
                <div class="card-body">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group">
                        <label>First Name</label>
                        <input type="text" class="form-control" id="first_name" required name="first_name" value="{{ old('first_name', $therapist['first_name']) }}" placeholder="Enter First Name">
                      </div>
                      
                      <div class="form-group">
                        <label>Email</label>
                        <input type="text" class="form-control" id="email" required name="email" disabled value="{{ old('email', $therapist['email']) }}" placeholder="Enter Email">
                      </div>

                      <div class="form-group">
                        <label>Date of Birth</label>
                        <input type="text" class="form-control datepicker" required id="date_of_birth" name="date_of_birth" value="{{ old('date_of_birth', $therapist['date_of_birth']) }}" placeholder="Enter Date of Birth">
                      </div>

                      <div class="form-group">
                        <label>Gender</label>
                        <select class="form-control" name="gender" data-placeholder="Select Gender" style="width: 100%;">
                            <option value="" selected>Select Gender</option>
                            <option value="male" {{(isset($therapist->user->gender) && $therapist->user->gender == "male") ? "selected" : ""}}>Male</option>
                            <option value="female" {{(isset($therapist->user->gender) && $therapist->user->gender == 'female') ? "selected" : ""}}>Female</option>
                        </select>
                      </div>

                      <div class="form-group">
                        <label>Country</label>
                        <select class="form-control country_change" required style="width: 100%;" name="country_id" required>
                        <option value="" selected>Select Country</option>
                              @foreach($countries as $country)
                                <option value="{{$country->id}}" {{(isset($therapist['country_id']) && $therapist['country_id'] == $country->id) ? "selected" : ""}}>{{$country->name}}</option>
                              @endforeach
                        </select>
                      </div>

                      <div class="form-group">
                        <label>Address</label>
                        <input type="text" class="form-control" required id="address" name="address" value="{{ old('address', $therapist['address']) }}" placeholder="Enter Address">
                      </div>

                      <div class="form-group">
                        <label>About Me</label>
                        <textarea class="form-control" name="about_me" id="about_me">{{$therapist['about_me']}}</textarea>
                      </div>

                      <div class="form-group">
                        <label>Therapist Tools</label>
                        <select class="form-control select2" multiple="multiple" name="tool_ids[]" data-placeholder="Select Tools" style="width: 100%;">
                            @foreach($tools as $tool)
                                <option value="{{$tool->id}}" {{(isset($saved_tools) && in_array($tool->id,$saved_tools)) ? "selected" : ""}}>{{$tool->name}}</option>
                            @endforeach
                        </select>
                      </div>
                      <div class="form-group">
                        <button type="submit" class="btn btn-primary">Submit</button>
                      </div>
                    </div>
                    <!-- /.col -->
                    <div class="col-md-6">
                      <div class="form-group">
                        <label>Last Name</label>
                        <input type="text" class="form-control" id="last_name" required name="last_name" value="{{ old('last_name', $therapist['last_name']) }}" placeholder="Enter Last Name">
                      </div>
                      
                      
                      <div class="form-group">
                        <label>Mobile Number</label>
                        <input type="text" class="form-control" id="mobile" required name="mobile" value="{{ old('contact', $therapist['contact']) }}" placeholder="Enter Mobile">
                      </div>
                      
                      <div class="form-group">
                        <label>Total Experience</label>
                        <input type="text" class="form-control" id="experience" name="experience" value="{{ old('experience', $therapist['experience']) }}" placeholder="Total Experience">
                      </div>

                      <div class="form-group">
                        <label>City</label>
                        <select class="form-control" style="width: 100%;"  name="city_id" id="city_id" >
                            <option value="" selected>Select City</option>
                              @foreach($cities as $city)
                                <option value="{{$city->id}}" {{(isset($therapist['city_id']) && $therapist['city_id'] == $city->id) ? "selected" : ""}}>{{$city->name}}</option>
                              @endforeach
                        </select>
                      </div>
                      <div class="form-group">
                        <label>Post Code</label>
                        <input type="text" class="form-control" id="post_code" required name="post_code" value="{{ old('post_code', $therapist['post_code']) }}" placeholder="Enter Post Code">
                      </div>

                      <div class="form-group">
                        <label>Experience Summary</label>
                        <textarea class="form-control" name="exp_summary" required id="exp_summary">{{$therapist['exp_summary']}}</textarea>
                      </div>

                      <div class="form-group">
                        <label>Specialisms</label>
                        <select class="form-control select2" multiple="multiple" name="specialism_ids[]" data-placeholder="Select Specialism" style="width: 100%;">
                            @foreach($specialisms as $specialism)
                                <option value="{{$specialism->id}}" {{(isset($saved_specialism) && in_array($specialism->id,$saved_specialism)) ? "selected" : ""}}>{{$specialism->name}}</option>
                            @endforeach
                        </select>
                      </div>

                    </div>
                    <!-- /.col -->
                  </div>
                </div>
                
                  
              </form>
            </div>

            <div class="card card-primary">
            <div class="card-header">
              <h3 class="card-title">Therapist Qualifications</h3>

              <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
                  <i class="fas fa-minus"></i></button>
              </div>
            </div>
            <div class="card-body">
              <div class="form-group">
                <label for="qualification">Qualification</label>
                <textarea id="qualification" class="form-control" rows="4" user_id="{{$therapist['user_id']}}" qualification_id=""></textarea>
              </div>
              <div class="form-group">
                <label for="end_date">Date of Completion</label>
                <input type="text" id="end_date"autocomplete="off" class="form-control datepicker" value="" name="end_date" />
              </div>
              <div class="form-group">
                <button href="#" id="submit_qualification" class="btn btn-secondary">Save</button>
              </div>

              <table class="table table-bordered" id="qualification_table">
                  <thead>                  
                    <tr>
                      <th style="width: 10px">#</th>
                      <th>Qualification</th>
                      <th>Complete Date</th>
                      <th style="width: 100px"></th>
                    </tr>
                  </thead>
                  <tbody>
                    @if(isset($therapist['qualification']) && !empty($therapist['qualification']))
                      @php $i = 0; @endphp
                      @foreach($therapist['qualification'] as $qualification)
                        
                        <tr class="row_{{$qualification->id}}">
                          <td>{{++$i}}</td>
                          <td>{{$qualification->qualification}}</td>
                          <td>{{$qualification->end_date}}</td>
                          <td>
                            <a href="javascript:" qualification_id="{{$qualification->id}}" class="delete_qualification"><button class="btn-sm btn-danger">
                              <i class="fas fa-trash"></i></button>
                            </a>
                            <a href="javascript:" qualification_id="{{$qualification->id}}" class="update_qualification"><button class="btn-sm btn-success">
                              <i class="fas fa-edit"></i></button>
                            </a>
                          </td>
                        </tr>
                      @endforeach
                    @endif
                  </tbody>
                </table>
            </div>
            <!-- /.card-body -->
          </div>
          
          </div>
          
        </div>
      </div>
  @endsection
  @section('script')
    <script src="{{asset('admin_assets/plugins/select2/js/select2.full.min.js')}}"></script>
    <script src="{{asset('admin_assets/plugins/moment/moment.min.js')}}"></script>
    <script src="{{asset('admin_assets/plugins/daterangepicker/daterangepicker.js')}}"></script>
    <script>
          $(document).on("change",".country_change",function(){
            var country = $(this).val();
            $.ajax({
              url: base_path + "admin/cities",
              method:"GET",
              data:{country_id:country},
              success: function (result) {
                if(result.cities){
                  var dd_city = "<option value='' selected>Select City</option>";
                  $.each((result.cities), function () {
                    dd_city += "<option value='"+this['id']+"'>"+this['name']+"</option>";
                  });

                  $("#city_id").html(dd_city);
                }
              }
           }); 
          });

          $(document).on("click",".update_qualification",function(){
            var qualification_id = $(this).attr('qualification_id');
            var qualification = $(this).parents('tr').find('td:eq(1)').html();
            var end_date = $(this).parents('tr').find('td:eq(2)').html();
            $("#qualification").val(qualification);
            $("#end_date").val(end_date);
            $("#qualification").attr('qualification_id',qualification_id);
          });

          $(document).on("click",".delete_qualification",function(){
            var qualification_id = $(this).attr('qualification_id');
            $.ajax({
              url: base_path + "admin/therapist/qualification-delete",
              method:"POST",
              data:{qualification_id:qualification_id},
              success: function (result) {
                if(result){
                  alert('Qualification Deleted');
                  $(".row_"+qualification_id).remove();
                } else {
                  alert('Some thing went wrong');
                }
              }
            });
          });

          $(document).on("click","#submit_qualification",function(){
            var qualification = $("#qualification").val()
            var qualification_id = $("#qualification").attr('qualification_id');
            var user_id = $("#qualification").attr('user_id');
            var end_date = $("#end_date").val()

            $.ajax({
              url: base_path + "admin/therapist/qualification",
              method:"POST",
              data:{qualification:qualification,qualification_id:qualification_id,end_date:end_date,user_id:user_id},
              success: function (result) {
                if(result.update == 1){
                  alert('Qualification Updated');
                  $(".row_"+qualification_id).find('td:eq(1)').html(qualification);
                  $(".row_"+qualification_id).find('td:eq(2)').html(end_date);
                } else {
                  qualification_id = result.qualification_id;
                  alert('Qualification Saved');
                  var html = `<tr class="row_`+qualification_id+`">
                                <td>`+$('#qualification_table tr').length+`</td>
                                <td>`+qualification+`</td>
                                <td>`+end_date+`</td>
                                <td>
                                  <a href="javascript:" qualification_id="`+qualification_id+`" class="delete_qualification"><button class="btn-sm btn-danger">
                                    <i class="fas fa-trash"></i></button>
                                  </a>
                                  <a href="javascript:" qualification_id="`+qualification_id+`" class="update_qualification"><button class="btn-sm btn-success">
                                    <i class="fas fa-edit"></i></button>
                                  </a>
                                </td>
                              </tr>`;

                    $("#qualification_table").append(html)
                              
                }
                $("#qualification").val('');
                $("#end_date").val('');
                $("#qualification").attr('qualification_id','');
              }
            });
          });

          $('.select2bs4').select2({
            theme: 'bootstrap4'
          })
    </script>
  @endsection