@extends('layouts.index')

@section('content')
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.6/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.11.6/js/jquery.dataTables.min.js"></script>
<div class="content-body">
  <!-- row -->
  <div class="container-fluid">
    <div class="form-head d-flex mb-3 mb-md-2 align-items-start">
      <div class="me-auto d-none d-lg-block">
        <h3 class="font-w600 m-0 p-0">Doctor List</h3>
      </div>
      <div class="form-group">
        <input type="text" id="searchInput" class="form-control" placeholder="Search...">
      </div>
      <div style="text-align: end;"> <a href="{{route('admin.add-Doctor')}}" class="btn btn-success">Add Doctors</a> </div>
      @if(session('success'))
      <div class="alert alert-success"> {{ session('success') }} </div>
      @endif
      @if(session('error'))
      <div class="alert alert-danger"> {{ session('error') }} </div>
      @endif </div>
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-body news-List">
            <div class="table-responsive">
              <table id="example5" class="table table-hover mb-0">
                <thead>
                  <tr>
                    <th>Sr. No.</th>
                    <!--<th>Profile Picture</th>-->
                    <th>Name</th>
                    <th style="width: 20px;">Education</th>
                    <th>Designation</th>
                    <th>Department</th>
                    <th>Experience</th>
                    <th>Edit</th>
                    <th>Delete</th>
                  </tr>
                </thead>
                <tbody>
                
                @foreach($doctorList as $key => $doctor)
                <tr>
                  <td>{{ $doctorList->firstItem() + $loop->index }}</td>
                  <!--<td>
                                                @if($doctor->profile_pic)
                                                    <img src="{{ asset('upload/profile/' . $doctor->profile_pic) }}" alt="Profile Picture" width="50" style="border-radius: 50%;">
                                                @else
                                                    <div style="width: 50px; height: 50px; background-color: #ccc; display: flex; align-items: center; justify-content: center; border-radius: 50%;">
                                                        <span style="font-size: 18px; color: #fff;">{{ strtoupper(substr($doctor->firstname, 0, 1) . substr($doctor->lastname, 0, 1)) }}</span>
                                                    </div>
                                                @endif
                                            </td>-->
                  <td>{{ $doctor->firstname.' '.$doctor->lastname }}</td>
                  <td style="max-width: 200px; overflow-x: auto;">{{ $doctor->education }}</td>
                  <td>{{ $doctor->medical_license}}</td>
                  <td>{{ $doctor->specialization }}</td>
                  <td>{{ $doctor->work_experience }}</td>
                  <td><a href="{{route('admin.Doctoredit',['id'=>$doctor->id])}}" class="btn btn-primary">Edit</a></td>
                  <td><a href="{{ route('admin.delete-Doctor', ['id' => $doctor->id]) }}" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this doctor?')">Delete</a> </td>
                </tr>
                @endforeach
                </tbody>
                
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12"> {{ $doctorList->links() }} </div>
    </div>
  </div>
</div>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.css" />
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
<script>
		(function($)
		{
			var table = $('#example5').DataTable({
				searching: false,
				paging:true,
				select: false,
				lengthChange:false,
				dom: 'Bfrtip',
				buttons: [
					//'copyHtml5',
					 'excelHtml5',
					//'csvHtml5',
					 'pdfHtml5'
				]
			});
			$('#example tbody').on('click', 'tr', function () {
				var data = table.row( this ).data();
			});
		})
		(jQuery);
			jQuery('#datetimepicker2').datetimepicker({
			datepicker:false,
			format:'H:i'
		});
	</script>
<script>
$(document).ready(function(){
    $('#searchInput').on('keyup', function(){
        var searchText = $(this).val().toLowerCase();
        $('tbody tr').each(function(){
            var rowData = $(this).text().toLowerCase();
            if(rowData.indexOf(searchText) === -1){
                $(this).hide();
            } else {
                $(this).show();
            }
        });
    });

   $('#example5').DataTable();
});
</script>
@endsection