@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>Doctor</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">
                    @if (Auth::user()->role=='admin')
                    <a href="{{route('doctors.create')}}">
                        <button type="button" class="btn btn-primary">Add Doctor</button>
                    </a>
                    @endif
                </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>Editing Status</th>
            <th>Name</th>
            <th>Category</th> {{-- Will show subcategory --}}
            <th>Degree</th>
            <th>Higher Degree</th>
            <th>Phone</th>
            <th>Email</th>
            <th>Work Place</th>
            <th>Specialist</th>
            <th>Experience</th>
            <th>Charge</th>
            <th>Image</th>
            <th>Categorize Priority</th>
            <th>About</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 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>
                <div class="form-group">
                    <select name="editable_status" {{ isAdmin() ? '' : 'disabled' }} class="form-control select2 editable_status" style="width: 120px">
                        <option {{ $doctor->is_editable==0 ? 'selected' : '' }} value="{{ $doctor->doctor_id }}">Locked</option>
                        <option {{ $doctor->is_editable==1 ? 'selected' : '' }} value="{{ $doctor->doctor_id }}">Unlocked</option>
                    </select>
                </div>
            </td>
            <td>{{ $doctor->d_name }}</td>
            <td>{{ $doctor->subcategories->subcategory_name ?? 'Not Selected' }}</td> {{-- Show SubCategory as Category --}}
            <td>{{ $doctor->d_degree }}</td>
            <td>{{ $doctor->d_higher_degree }}</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="Doctor Image" style="width: 200px">
            </td>
          
            <td>{{ $doctor->categorize_priority }}</td>
            <td>{{ $doctor->d_about }}</td>
            <td>
                <div class="d-flex">
                    @if ($doctor->is_editable==1 || isAdmin())
                    <div>
                        <a href="{{ route('doctors.edit', $doctor->doctor_id) }}">
                            <button class="btn btn-outline-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit">
                                <i class="fas fa-edit"></i>
                            </button>
                        </a>
                    </div>
                    @endif
                    @if (isAdmin())
                    <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 ?')" class="btn btn-outline-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        </form>
                    </div>
                    @endif
                </div>
            </td>
        </tr>
        @endforeach
    </tbody>
    <tfoot>
        <tr>
            <th>#SL</th>
            <th>Status</th>
            <th>Editing Status</th>
            <th>Name</th>
            <th>Category</th>
            <th>Degree</th>
            <th>Higher Degree</th>
            <th>Phone</th>
            <th>Email</th>
            <th>Work Place</th>
            <th>Specialist</th>
            <th>Experience</th>
            <th>Charge</th>
            <th>Image</th>
            <th>Categorize Priority</th>
            <th>About</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){
                    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);
                }
            })
        })

        $(".editable_status").on('change',function(){
            var doctorId = $(this).val();
            var status = $(this).find('option:selected').text();
            $.ajax({
                url: "{{route('filter.doctor-editable-status')}}",
                type: "GET",
                data : {'doctorId':doctorId,'status':status},
                success : function(data){
                },
                error : function(error){
                    console.log(error);
                }
            })
        })
    })
  </script>
@endsection