@extends('admin.layouts.master') 
@section('content')
<style>
  .select2-container--default .select2-selection--multiple .select2-selection__choice {
      background-color: #007bff;
  }
  .child-option {
      padding-left: 20px; /* Adjust the padding as per your preference */
  }
</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" enctype="multipart/form-data" 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>New Password</label>
                        <input type="password" class="form-control" id="password" name="password" value="" placeholder="Enter new password">
                      </div>

                      <div class="form-group">
                        <label>Date of Birth</label>
                        <input type="text" class="form-control datepicker"  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"  style="width: 100%;" name="country_id" >
                        <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" 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">
                        <label>Professions</label>
                        <select class="form-control select2child" multiple="multiple" name="profession_type_ids[]" data-placeholder="Select Profession" style="width: 100%;">
                            @foreach($professions as $profession)
                                <option value="{{$profession->id}}" class="parent-option" {{(isset($saved_professions) && in_array($profession->id,$saved_professions)) ? "selected" : ""}}>{{$profession->name}}</option>
                                @foreach($profession->sub_type as $sub_type)
                                    <option value="{{$sub_type->id}}" class="child-option" {{(isset($saved_professions) && in_array($sub_type->id,$saved_professions)) ? "selected" : ""}}>{{$sub_type->name}}</option>
                                @endforeach
                            @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" 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" 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 class="form-group">
                        @include('admin.components.mutisource-company-options', [
                            'all_option' => false,
                            'source_company' => old('source_company', $therapist['source_company'])
                        ])
                      </div>

                      <div class="form-group">
                        <label>Document(for admins only)</label>
                        <div class="custom-file">
                          <input type="file" class="custom-file-input" id="admin_document" name="admin_document" value="{{ old('admin_document', $therapist['admin_document']) }}"
                            aria-describedby="inputGroupFileAddon01">
                          <label class="custom-file-label" for="admin_document">Choose file</label>
                        </div>
                        {{-- <input type="file" class="form-control btn btn-default" id="admin_document" name="admin_document" value="{{ old('admin_document', $therapist['admin_document']) }}" > --}}      
                        @if($therapist['admin_document'])
                        <small class="mt-2"><a download="Admin Document File" class="mt-2 btn-info btn btn-sm text-white" href="{{$therapist['admin_document']}}" target="_blank">Download current document file <i class="fas fa-file"></i> </a></small>
                        @endif
                      </div>

                      <div class="form-group">
                        <label>Cost Per Month</label>
                        <input type="text" class="form-control" id="cost_per_month" name="cost_per_month" value="{{ old('cost_per_month', $therapist['cost_per_month']) }}" placeholder="Enter Post Code">
                      </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>Qualification Document</label>
                  <input type = "file" name="qualification_file" id="qualification_file"  class="dropify" data-show-remove="false">
              </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>Document</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>
                            @if($qualification->qualification_document)
                              <a href="{{\App\Helpers\CommonHelper::signedBucketFile($qualification->qualification_document,env('AWS_THERAPIST_BUCKET'))}}" target="_blank">View Document</a>
                            @endif 
                          </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(3)').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()

            var formData = new FormData(); // Use FormData to handle file uploads
            var qualification = $("#qualification").val();
            var qualification_id = $("#qualification").attr('qualification_id');
            var user_id = $("#qualification").attr('user_id');
            var end_date = $("#end_date").val();
            var file_data = $('#qualification_file')[0].files[0]; // Get file object

            formData.append('qualification', qualification);
            formData.append('qualification_id', qualification_id);
            formData.append('user_id', user_id);
            formData.append('end_date', end_date);
            formData.append('qualification_document', file_data);

            $.ajax({
              url: base_path + "admin/therapist/qualification",
              method:"POST",
              data: formData,
              contentType: false, // Required for FormData
              processData: false, 
              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(result.qualification_document);
                  $(".row_"+qualification_id).find('td:eq(3)').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>`+result.qualification_document+`</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