@layout('admin/master')
@section('content')
  @section('stylesheets')
    <link rel="stylesheet" href="/admin/assets/lib/datatables/jquery.dataTables.min.css">
    <link rel="stylesheet" href="/admin/assets/lib/datatables/responsive.bootstrap.min.css">
  @endsection 
  <div class="container-fluid g-0">
    <div class="row">
      <div class="col-12 col-md-6 col-lg-4">
        <div class="input-group mb-3">
          <input type="text" class="form-control search-input" placeholder="Search here" aria-label="Search here" aria-describedby="basic-addon1">
          <img src="./assets/img/search-img.png" alt="" class="search-img">
        </div>
      </div>
      <div class="col-12">
        <div class="static-table table-responsive">
          <table class="table" id="datatable">
            <thead>
              <tr>
                <th scope="col">User Name</th>
                <th scope="col">Email</th>
                <th scope="col">Phone</th>
                <th scope="col">Assign Tags</th>
                <th scope="col">Actions</th>
              </tr>
            </thead> 
            <tbody>
              <tr>
                <td>Mauris maximus</td>
                <td>maurismaximus@yopmail.com</td>
                <td>112-950-0779 607</td>
                <td>SBE01122, SBE0112 3</td>
                <td>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="switch-data d-flex align-items-center justify-content-between">
                      <div>
                        <p>Active</p>
                      </div>
                      <div>
                        <div class="form-check form-switch">
                          <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" />
                        </div>
                      </div>
                    </div>
                    
                </td>
              </tr>
              <tr>
                <td>Mauris maximus</td>
                <td>maurismaximus@yopmail.com</td>
                <td>112-950-0779 607</td>
                <td>SBE01122, SBE0112 3</td>
                <td>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="switch-data d-flex align-items-center justify-content-between">
                      <div>
                        <p>Active</p>
                      </div>
                      <div>
                        <div class="form-check form-switch">
                          <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" />
                        </div>
                      </div>
                    </div>
                    
                </td>
              </tr>
              <tr>
                <td>Mauris maximus</td>
                <td>maurismaximus@yopmail.com</td>
                <td>112-950-0779 607</td>
                <td>SBE01122, SBE0112 3</td>
                <td>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="switch-data d-flex align-items-center justify-content-between">
                      <div>
                        <p>Active</p>
                      </div>
                      <div>
                        <div class="form-check form-switch">
                          <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" />
                        </div>
                      </div>
                    </div>
                    
                </td>
              </tr>
              <tr>
                <td>Mauris maximus</td>
                <td>maurismaximus@yopmail.com</td>
                <td>112-950-0779 607</td>
                <td>SBE01122, SBE0112 3</td>
                <td>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="switch-data d-flex align-items-center justify-content-between">
                      <div>
                        <p>Active</p>
                      </div>
                      <div>
                        <div class="form-check form-switch">
                          <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" />
                        </div>
                      </div>
                    </div>
                    
                </td>
              </tr>
              <tr>
                <td>Mauris maximus</td>
                <td>maurismaximus@yopmail.com</td>
                <td>112-950-0779 607</td>
                <td>SBE01122, SBE0112 3</td>
                <td>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="switch-data d-flex align-items-center justify-content-between">
                      <div>
                        <p>Active</p>
                      </div>
                      <div>
                        <div class="form-check form-switch">
                          <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" />
                        </div>
                      </div>
                    </div>
                    
                </td>
              </tr>
              <tr>
                <td>Mauris maximus</td>
                <td>maurismaximus@yopmail.com</td>
                <td>112-950-0779 607</td>
                <td>SBE01122, SBE0112 3</td>
                <td>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="switch-data d-flex align-items-center justify-content-between">
                      <div>
                        <p>Active</p>
                      </div>
                      <div>
                        <div class="form-check form-switch">
                          <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" />
                        </div>
                      </div>
                    </div>
                    
                </td>
              </tr>
              <tr>
                <td>Mauris maximus</td>
                <td>maurismaximus@yopmail.com</td>
                <td>112-950-0779 607</td>
                <td>SBE01122, SBE0112 3</td>
                <td>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="switch-data d-flex align-items-center justify-content-between">
                      <div>
                        <p>Active</p>
                      </div>
                      <div>
                        <div class="form-check form-switch">
                          <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" />
                        </div>
                      </div>
                    </div>
                    
                </td>
              </tr>
              <tr>
                <td>Mauris maximus</td>
                <td>maurismaximus@yopmail.com</td>
                <td>112-950-0779 607</td>
                <td>SBE01122, SBE0112 3</td>
                <td>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="switch-data d-flex align-items-center justify-content-between">
                      <div>
                        <p>Active</p>
                      </div>
                      <div>
                        <div class="form-check form-switch">
                          <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" />
                        </div>
                      </div>
                    </div>
                    
                </td>
              </tr>
              <tr>
                <td>Mauris maximus</td>
                <td>maurismaximus@yopmail.com</td>
                <td>112-950-0779 607</td>
                <td>SBE01122, SBE0112 3</td>
                <td>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="switch-data d-flex align-items-center justify-content-between">
                      <div>
                        <p>Active</p>
                      </div>
                      <div>
                        <div class="form-check form-switch">
                          <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" />
                        </div>
                      </div>
                    </div>
                    
                </td>
              </tr>
              <tr>
                <td>Mauris maximus</td>
                <td>maurismaximus@yopmail.com</td>
                <td>112-950-0779 607</td>
                <td>SBE01122, SBE0112 3</td>
                <td>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="switch-data d-flex align-items-center justify-content-between">
                      <div>
                        <p>Active</p>
                      </div>
                      <div>
                        <div class="form-check form-switch">
                          <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" />
                        </div>
                      </div>
                    </div>
                    
                </td>
              </tr>
              <tr>
                <td>Mauris maximus</td>
                <td>maurismaximus@yopmail.com</td>
                <td>112-950-0779 607</td>
                <td>SBE01122, SBE0112 3</td>
                <td>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="switch-data d-flex align-items-center justify-content-between">
                      <div>
                        <p>Active</p>
                      </div>
                      <div>
                        <div class="form-check form-switch">
                          <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" />
                        </div>
                      </div>
                    </div>
                    
                </td>
              </tr>
              <tr>
                <td>Mauris maximus</td>
                <td>maurismaximus@yopmail.com</td>
                <td>112-950-0779 607</td>
                <td>SBE01122, SBE0112 3</td>
                <td>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="switch-data d-flex align-items-center justify-content-between">
                      <div>
                        <p>Active</p>
                      </div>
                      <div>
                        <div class="form-check form-switch">
                          <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" />
                        </div>
                      </div>
                    </div>
                    
                </td>
              </tr>
            </tbody>
          </table>
          <div class="row">
            <div class="col-12">
              <nav aria-label="..." class="text-end">
                <ul class="pagination">
                  <li class="page-item disabled">
                    <a class="page-link">Previous</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="#">1</a>
                  </li>
                  <li class="page-item active" aria-current="page">
                    <a class="page-link" href="#">2</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="#">3</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="#">4</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="#">5</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="#">6</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="#">Next</a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
    @include('admin.footer')
  @section('scripts')
    <script>
      let ajax_listing_url = "{{ route('admin.user.ajaxlsiting') }}";
    </script>
    <script src="/admin/assets/lib/datatables/jquery.dataTables.min.js"></script>
    <script src="/admin/assets/lib/datatables/dataTables.responsive.min.js"></script>
    {{--  <script src="/admin/assets/js/ajax-datatable.js"></script>  --}}
  @endsection
@endsection