@extends('admin.admin_master')
@section('main')

    <!-- ============================================================== -->
    <!-- main wrapper -->
    <!-- ============================================================== -->
    <div class="dashboard-main-wrapper">
        <!-- ============================================================== -->
       <!-- navbar -->
       <!-- ============================================================== -->
    
       <!-- end navbar -->
       <!-- ============================================================== -->
       <!-- ============================================================== -->
       <!-- left sidebar -->
       <!-- ============================================================== -->
    
       <!-- ============================================================== -->
       <!-- end left sidebar -->
       <!-- ============================================================== -->
       <!-- ============================================================== -->
       <!-- wrapper  -->
       <!-- ============================================================== -->
       
           <div class="container-fluid  dashboard-content">
               <!-- ============================================================== -->
               <!-- pageheader -->
               <!-- ============================================================== -->
               <div class="row">
                   <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                       <div class="page-header">
                           <h2 class="pageheader-title">Data Tables</h2>
                       </div>
                   </div>
               </div>
               <!-- ============================================================== -->
               <!-- end pageheader -->
               <!-- ============================================================== -->
               <div class="row">
                   <!-- ============================================================== -->
                   <!-- basic table  -->
                   <!-- ============================================================== -->
                   <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                       <div class="card">
                           <h5 class="card-header">Basic Table</h5>
                           <div class="card-body">
                               <div class="table-responsive">
                                   <input type="text" id="searchInput" onkeyup="searchTable()" placeholder="Search for blood group..">
                                   <table id="dataTable" class="table table-striped table-bordered first">
                                       <thead>
                                           <tr>
                                               <th>Name</th>
                                               <th>Email</th>
                                               <th>Date</th> 
                                               <th>Last Seend</th> 
                                               <th>Action</th> 
                                           </tr>
                                       </thead>
                                       <tbody>
                                        @foreach ($users as $user)
                                           <tr>
                                               <td>{{$user->name}}</td>
                                               <td>{{$user->email}}</td>
                                               {{-- <td>{{$users->phone}}</td> --}}
                                               {{-- <td>{{$users->blood_group}}</td>
                                               <td>{{$users->date}}</td> --}}
                                               <td>{{$user->created_at}}</td>
                                               <td>{{Carbon\Carbon::parse($user->last_seen)->diffForHumans()}}</td>
                                               {{-- <td>{{($users->last_seen >= now()->subMinutes(2) ? 'online': 'Offline')}}</td> --}}
                                               <td>  <i class="far fa-edit"></i></td>
                                               <td>  <i class="far fa-trash-alt"></i></td>
                                           </tr>
                           @endforeach
                                       </tbody>
                                       <tfoot>
                                           <tr>
                                               <th>Name</th>
                                               <th>Email</th>
                                               <th>Contact</th>
                                               <th>Blood Group</th>
                                               <th>Last Donate</th>
                                               <th>Date</th>
                                           </tr>
                                       </tfoot>
                                   </table>
                               </div>
                           </div>
                       </div>
                   </div>
                   <!-- ============================================================== -->
                   <!-- end basic table  -->
                   <!-- ============================================================== -->
               </div>
               <!-- ============================================================== -->
               <!-- end data table  -->
               <!-- ============================================================== -->
           </div>
           <!-- ============================================================== -->
           <!-- footer -->
           <!-- ============================================================== -->
   <!-- ============================================================== -->
   <!-- end main wrapper -->
   <!-- ============================================================== -->
   <script>
    function searchTable() {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("searchInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("dataTable");
        tr = table.getElementsByTagName("tr");

        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[3]; // Change index to the column you want to search (starting from 0)
            if (td) {
                txtValue = td.textContent || td.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }
</script>

@endsection