@extends('layouts.app')

@section('content')
  <div class="page-content">
    <div class="container-fluid">

      <!-- start page title -->
      @include('layouts.partials.breadcrumb', ['title' => 'Employee'])

      <!-- end page title -->

      <div class="card">
        <div class="card-body">
          <div class="row g-2">
            <div class="col-sm-4">
              <div class="search-box">
                <input type="text" class="form-control" id="searchMemberList"
                  placeholder="Search for name or designation...">
                <i class="ri-search-line search-icon"></i>
              </div>
            </div>
            <!--end col-->
            <div class="col-sm-auto ms-auto">
              <div class="list-grid-nav hstack gap-1">

                <button class="btn btn-success addMembers-modal" data-bs-toggle="modal"
                  data-bs-target="#addmemberModal"><i class="ri-add-fill me-1 align-bottom"></i> Create Employee</button>

              </div>
            </div>
            <!--end col-->
          </div>
          <!--end row-->
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12">
          <div>

            <div id="teamlist">
              <div class="team-list row grid-view-filter" id="team-member-list">

                <div class="col">
                  <div class="card team-box">
                    <div class="team-cover"> <img src="assets/images/small/img-9.jpg" alt="" class="img-fluid">
                    </div>
                    <div class="card-body p-4">
                      <div class="row align-items-center team-row">
                        <div class="col team-settings">
                          <div class="row">
                            <div class="col">
                              <div class="me-2 flex-shrink-0"> <button type="button"
                                  class="btn btn-light btn-icon rounded-circle btn-sm favourite-btn"> <i
                                    class="ri-star-fill fs-14"></i> </button> </div>
                            </div>
                            <div class="col dropdown text-end"> <a href="javascript:void(0);" data-bs-toggle="dropdown"
                                aria-expanded="false"> <i class="ri-more-fill fs-17"></i> </a>
                              <ul class="dropdown-menu dropdown-menu-end">
                                <li><a class="dropdown-item edit-list" href="#addmemberModal" data-bs-toggle="modal"
                                    data-edit-id="12"><i class="ri-pencil-line text-muted me-2 align-bottom"></i>Edit</a>
                                </li>
                                <li><a class="dropdown-item remove-list" href="#removeMemberModal" data-bs-toggle="modal"
                                    data-remove-id="12"><i
                                      class="ri-delete-bin-5-line text-muted me-2 align-bottom"></i>Remove</a></li>
                              </ul>
                            </div>
                          </div>
                        </div>
                        <div class="col-lg-4 col">
                          <div class="team-profile-img">
                            <div class="avatar-lg img-thumbnail rounded-circle flex-shrink-0"><img
                                src="assets/images/users/avatar-2.jpg" alt=""
                                class="member-img img-fluid d-block rounded-circle"></div>
                            <div class="team-content"> <a class="member-name" data-bs-toggle="offcanvas"
                                href="#member-overview" aria-controls="member-overview">
                                <h5 class="fs-16 mb-1">Nancy Martino</h5>
                              </a>
                              <p class="text-muted member-designation mb-0">Team Leader &amp; HR</p>
                            </div>
                          </div>
                        </div>
                        <div class="col-lg-4 col">
                          <div class="row text-muted text-center">
                            <div class="col-6 border-end border-end-dashed">
                              <h5 class="projects-num mb-1">225</h5>
                              <p class="text-muted mb-0">Projects</p>
                            </div>
                            <div class="col-6">
                              <h5 class="tasks-num mb-1">197</h5>
                              <p class="text-muted mb-0">Tasks</p>
                            </div>
                          </div>
                        </div>
                        <div class="col-lg-2 col">
                          <div class="text-end"> <a href="pages-profile.html" class="btn btn-light view-btn">View
                              Profile</a> </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col">
                  <div class="card team-box">
                    <div class="team-cover"> <img src="assets/images/small/img-12.jpg" alt="" class="img-fluid">
                    </div>
                    <div class="card-body p-4">
                      <div class="row align-items-center team-row">
                        <div class="col team-settings">
                          <div class="row">
                            <div class="col">
                              <div class="me-2 flex-shrink-0"> <button type="button"
                                  class="btn btn-light btn-icon rounded-circle btn-sm favourite-btn active"> <i
                                    class="ri-star-fill fs-14"></i> </button> </div>
                            </div>
                            <div class="col dropdown text-end"> <a href="javascript:void(0);" data-bs-toggle="dropdown"
                                aria-expanded="false"> <i class="ri-more-fill fs-17"></i> </a>
                              <ul class="dropdown-menu dropdown-menu-end">
                                <li><a class="dropdown-item edit-list" href="#addmemberModal" data-bs-toggle="modal"
                                    data-edit-id="11"><i
                                      class="ri-pencil-line text-muted me-2 align-bottom"></i>Edit</a></li>
                                <li><a class="dropdown-item remove-list" href="#removeMemberModal"
                                    data-bs-toggle="modal" data-remove-id="11"><i
                                      class="ri-delete-bin-5-line text-muted me-2 align-bottom"></i>Remove</a></li>
                              </ul>
                            </div>
                          </div>
                        </div>
                        <div class="col-lg-4 col">
                          <div class="team-profile-img">
                            <div class="avatar-lg img-thumbnail rounded-circle flex-shrink-0">
                              <div class="avatar-title bg-light text-primary rounded-circle text-uppercase border">HB
                              </div>
                            </div>
                            <div class="team-content"> <a class="member-name" data-bs-toggle="offcanvas"
                                href="#member-overview" aria-controls="member-overview">
                                <h5 class="fs-16 mb-1">Henry Baird</h5>
                              </a>
                              <p class="text-muted member-designation mb-0">Full Stack Developer</p>
                            </div>
                          </div>
                        </div>
                        <div class="col-lg-4 col">
                          <div class="row text-muted text-center">
                            <div class="col-6 border-end border-end-dashed">
                              <h5 class="projects-num mb-1">352</h5>
                              <p class="text-muted mb-0">Projects</p>
                            </div>
                            <div class="col-6">
                              <h5 class="tasks-num mb-1">376</h5>
                              <p class="text-muted mb-0">Tasks</p>
                            </div>
                          </div>
                        </div>
                        <div class="col-lg-2 col">
                          <div class="text-end"> <a href="pages-profile.html" class="btn btn-light view-btn">View
                              Profile</a> </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col">
                  <div class="card team-box">
                    <div class="team-cover"> <img src="assets/images/small/img-11.jpg" alt=""
                        class="img-fluid"> </div>
                    <div class="card-body p-4">
                      <div class="row align-items-center team-row">
                        <div class="col team-settings">
                          <div class="row">
                            <div class="col">
                              <div class="me-2 flex-shrink-0"> <button type="button"
                                  class="btn btn-light btn-icon rounded-circle btn-sm favourite-btn"> <i
                                    class="ri-star-fill fs-14"></i> </button> </div>
                            </div>
                            <div class="col dropdown text-end"> <a href="javascript:void(0);" data-bs-toggle="dropdown"
                                aria-expanded="false"> <i class="ri-more-fill fs-17"></i> </a>
                              <ul class="dropdown-menu dropdown-menu-end">
                                <li><a class="dropdown-item edit-list" href="#addmemberModal" data-bs-toggle="modal"
                                    data-edit-id="10"><i
                                      class="ri-pencil-line text-muted me-2 align-bottom"></i>Edit</a></li>
                                <li><a class="dropdown-item remove-list" href="#removeMemberModal"
                                    data-bs-toggle="modal" data-remove-id="10"><i
                                      class="ri-delete-bin-5-line text-muted me-2 align-bottom"></i>Remove</a></li>
                              </ul>
                            </div>
                          </div>
                        </div>
                        <div class="col-lg-4 col">
                          <div class="team-profile-img">
                            <div class="avatar-lg img-thumbnail rounded-circle flex-shrink-0"><img
                                src="assets/images/users/avatar-3.jpg" alt=""
                                class="member-img img-fluid d-block rounded-circle"></div>
                            <div class="team-content"> <a class="member-name" data-bs-toggle="offcanvas"
                                href="#member-overview" aria-controls="member-overview">
                                <h5 class="fs-16 mb-1">Frank Hook</h5>
                              </a>
                              <p class="text-muted member-designation mb-0">Project Manager</p>
                            </div>
                          </div>
                        </div>
                        <div class="col-lg-4 col">
                          <div class="row text-muted text-center">
                            <div class="col-6 border-end border-end-dashed">
                              <h5 class="projects-num mb-1">164</h5>
                              <p class="text-muted mb-0">Projects</p>
                            </div>
                            <div class="col-6">
                              <h5 class="tasks-num mb-1">182</h5>
                              <p class="text-muted mb-0">Tasks</p>
                            </div>
                          </div>
                        </div>
                        <div class="col-lg-2 col">
                          <div class="text-end"> <a href="pages-profile.html" class="btn btn-light view-btn">View
                              Profile</a> </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>


              </div>
            </div>



          </div>
        </div><!-- end col -->
      </div>
      <!--end row-->
    </div><!-- container-fluid -->
  </div>
@endsection