@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 Registration</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">All Category</h3>
              </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>Title</th>
                    <th>Name</th>
                    <th>Mobile</th>
                    <th>Email</th>
                    <th>Date of Birth</th>
                    <th>Gender</th>
                    <th>National ID</th>
                    <th>BMDC Reg.</th>
                    <th>Type</th>
                    <th>Division</th>
                    <th>Address</th>
                    <th>Attachments</th>
                    <th>Action</th>
                  </tr>
                  </thead>
                  <tbody>
                    @php
                        $sl = 1;
                    @endphp
                  @foreach ($doctors as $doctor)
                  <tr style="background-color: {{ $doctor->status == 'Pending' ? '#FAEF9B' : ($doctor->status == 'Hold' ? '#FF9843':( $doctor->status == "Banned" ? "#FF8080":"")) }}"
                    >
                    <td>{{$sl++}}</td>
                    <td>
                        <form action="{{ route('filter.registration-status-approved') }}" method="post">
                            @csrf
                            <div class="form-group">
                                <select name="status" class="form-control select2 status" style="width: 120px" onchange="this.form.submit()">
                                    <option value="Pending" @if ($doctor->status == "Pending")
                                        selected
                                    @endif>Pending</option>
                                    <option value="Approved" @if ($doctor->status == "Approved") selected @endif>Approved</option>
                                    <option value="Hold" @if ($doctor->status == "Hold") selected @endif>Hold</option>
                                    <option value="Banned" @if ($doctor->status == "Banned") selected @endif>Banned</option>
                                </select>
                            </div>
                            <input type="hidden" name="doctor_id" class="doctorId" value="{{ $doctor->id }}">
                        </form>
                    </td>

                    <td>{{$doctor->title}}</td>
                    <td>{{$doctor->name}}</td>
                    <td>{{$doctor->mobile}}</td>
                    <td>{{$doctor->email}}</td>
                    <td>{{$doctor->dob}}</td>
                    <td>{{$doctor->gender}}</td>
                    <td>{{$doctor->nid}}</td>
                    <td>{{$doctor->bmdc}}</td>
                    <td>{{$doctor->type}}</td>
                    <td>{{$doctor->division}}</td>
                    <td>{{$doctor->address}}</td>
                    <td><a href="{{asset($doctor->image)}}"><img src="{{asset($doctor->image)}}" style="width: 200px" alt="" srcset=""></a></td>

                    <td>
                        <div class="d-flex ">
                            <div>
                                <a href="">
                                    <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('doctor-registrations.destroy',$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>Title</th>
                    <th>Name</th>
                    <th>Mobile</th>
                    <th>Email</th>
                    <th>Date of Birth</th>
                    <th>Gender</th>
                    <th>National ID</th>
                    <th>BMDC Reg.</th>
                    <th>Type</th>
                    <th>Division</th>
                    <th>Address</th>
                    <th>Attachments</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.registration-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