@extends('admin.dashboard.layouts.app')
@section('main')
      <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>DataTables</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">DataTables</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Doctors List</h3>
                <div class="d-flex justify-content-end items-center">
                    <a href="{{route('doctors.create')}}">
                        <button type="button" class="btn btn-primary">Add Doctor</button>
                    </a>
                </div>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <table id="example1" class="table table-bordered table-hover">
                  <thead>
                  <tr>
                    <th>#SL</th>
                    <th>Status</th>
                    <th>Name</th>
                    <th>Category</th>
                    <th>SubCategory</th>
                    <th>Designation</th>
                    <th>Degree</th>
                    <th>Higher Degree</th>
                    <th>BMDC Reg.</th>
                    <th>Phone</th>
                    <th>Email</th>
                    <th>Work Place</th>
                    <th>Specialist</th>
                    <th>Experience</th>
                    <th>Charge</th>
                    <th>Image</th>
                    <th>Signature</th>
                    <th>About</th>

                    <th>Total Earned</th>

                    <th>Online Appointment</th>
                    <th>Available on</th>
                    <th>Starting Time</th>
                    <th>Ending Time</th>
                    <th>Fee</th>
                    <th>Avg. Delay</th>

                    <th>Offline Appointment</th>
                    <th>Available on</th>
                    <th>Starting Time</th>
                    <th>Ending Time</th>
                    <th>Fee</th>
                    <th>Commission</th>
                    <th>Work Place</th>
                    <th>Location</th>

                    <th>Action</th>
                  </tr>
                  </thead>
                  <tbody>
                    @php
                        $sl = 1;
                    @endphp
                  @foreach ($doctors as $doctor)
                  <tr style="background-color: {{$doctor->color}}">
                    <td>{{$sl++}}</td>
                    <td>
                        <div class="form-group">
                            <select  name="status" class="form-control select2 status" style="width: 120px">
                                <option selected="selected" value="{{$doctor->doctor_id}}">{{$doctor->d_status}}</option>
                                @if ($doctor->d_status != "Pending")
                                    <option value="{{ $doctor->doctor_id }}">Pending</option>
                                @endif
                                @if ($doctor->d_status != "Approved")
                                    <option value="{{ $doctor->doctor_id }}">Approved</option>
                                @endif
                                @if ($doctor->d_status != "Hold")
                                    <option value="{{ $doctor->doctor_id }}">Hold</option>
                                @endif
                                @if ($doctor->d_status != "Banned")
                                    <option value="{{ $doctor->doctor_id }}">Banned</option>
                                @endif
                            </select>
                        </div>
                    </td>
                    <td>{{$doctor->d_name}}</td>
                    <td>{{ $doctor->categories->category_name ?? 'Not Selected' }}</td>
                    <td>{{ $doctor->subcategories->subcategory_name ?? 'Not Selected' }}</td>
                    {{-- <td>{{$doctor->subcategories->subcategory_name}}</td> --}}
                    <td>{{$doctor->d_designation}}</td>
                    <td>{{$doctor->d_degree}}</td>
                    <td>{{$doctor->d_higher_degree}}</td>
                    <td>{{$doctor->d_bmdc}}</td>
                    <td>{{$doctor->d_phone}}</td>
                    <td>{{$doctor->d_email}}</td>
                    <td>{{$doctor->work_place}}</td>
                    <td>{{$doctor->specialist_in}}</td>
                    <td>{{$doctor->d_experience}}</td>
                    <td>{{$doctor->charge}}</td>
                    <td>
                        <img src="{{asset($doctor->d_image)}}" alt="" srcset="" style="width: 200px">
                    </td>
                    <td>
                        <img src="{{asset($doctor->d_signature)}}" alt="" srcset="" style="width: 200px">
                    </td>
                    <td>{{$doctor->d_about}}</td>
                    <td>{{$doctor->after_charge_earned}}</td>
                    <td>{{$doctor->available_on!=null?"Available":"Unavailable"}}</td>
                    <td>{{$doctor->available_on}}</td>
                    <td>{{$doctor->d_starting_time}}</td>
                    <td>{{$doctor->d_ending_time}}</td>
                    <td>{{$doctor->d_fee}}</td>
                    <td>{{$doctor->avg_delay}} {{$doctor->avg_delay?"Minutes":""}}</td>
                    <td>{{$doctor->offlineSchedule->offline_avail_days!=null?"Available":"Unavailable"}}</td>


                    <td>{{$doctor->offlineSchedule->offline_avail_days}}</td>
                    <td>{{$doctor->offlineSchedule->offline_starting_time}}</td>
                    <td>{{$doctor->offlineSchedule->offline_ending_time}}</td>
                    <td>{{$doctor->offlineSchedule->offline_fees}}</td>
                    <td>{{$doctor->offlineSchedule->offline_comission}}</td>
                    <td>{{$doctor->offlineSchedule->offline_work_place}}</td>
                    <td>{{$doctor->offlineSchedule->offline_location}}</td>


                    <td>
                        <div class="d-flex ">
                            <div>
                                <a href="{{route('doctors.edit', $doctor->doctor_id)}}">
                                    <button data-tooltip-target="edit-button" class="btn btn-outline-primary" data-bs-toggle="tooltip"
                                            data-bs-placement="top">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                </a>
                            </div>
                            <div class="pl-2">
                                <form action="{{route('doctors.destroy', $doctor->doctor_id)}}" method="POST" class="d-inline">
                                    @method('DELETE')
                                    @csrf
                                    <button onclick="return confirm('Do you want to delete ?')" data-tooltip-target="delete-button" class="btn btn-outline-danger" data-bs-toggle="tooltip"
                                            data-bs-placement="top">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                </form>
                            </div>
                        </div>
                    </td>
                  </tr>
                  @endforeach
                  </tbody>
                  <tfoot>
                  <tr>
                    <th>#SL</th>
                    <th>Status</th>
                    <th>Name</th>
                    <th>Category</th>
                    <th>SubCategory</th>
                    <th>Designation</th>
                    <th>Degree</th>
                    <th>Higher Degree</th>
                    <th>BMDC Reg.</th>
                    <th>Phone</th>
                    <th>Email</th>
                    <th>Work Place</th>
                    <th>Specialist</th>
                    <th>Experience</th>
                    <th>Charge</th>
                    <th>Image</th>
                    <th>Signature</th>
                    <th>About</th>

                    <th>Total Earned</th>

                    <th>Online Appointment</th>
                    <th>Available on</th>
                    <th>Starting Time</th>
                    <th>Ending Time</th>
                    <th>Fee</th>
                    <th>Avg. Delay</th>

                    <th>Offline Appointment</th>
                    <th>Available on</th>
                    <th>Starting Time</th>
                    <th>Ending Time</th>
                    <th>Fee</th>
                    <th>Commission</th>
                    <th>Work Place</th>
                    <th>Location</th>

                    <th>Action</th>
                  </tr>
                  </tfoot>
                </table>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  <script>
    $(document).ready(function(){
        $(".status").on("change", function(){
            var doctorId = $(this).val();
            var status = $(this).find('option:selected').text();
            var currentRow = $(this).closest('tr');
            //alert(status+doctorId);
            $.ajax({
                url: "{{route('filter.doctor-status')}}",
                type: "GET",
                data : {'doctorId':doctorId,'status':status},
                success : function(data){
                    console.log(data);
                    currentRow.css("background-color", data.color);

                    // var subcategory = data.subcategory;
                    // var html = '';
                    // if(subcategory.length > 0){
                    //     for(let i=0; i<subcategory.length; i++){
                    //         html +=`<option value=`+subcategory[i]['id']+`>`+subcategory[i]['subcategory_name']+`</option>`
                    //     }
                    // }else{

                    // }
                    // $('#d_subcategory').html(html);
                }
            })
        })
    })
  </script>
@endsection