@extends('backend.master')

@section('content')

<div class="page-content">
    <!-- profile content start -->
    <div class="profile-content">
      <div class="d-flex flex-column flex-lg-row gap-4 gap-lg-0">
        <!-- profile menu mobile start -->
        <div class="profile-menu-mobile">
          <button class="btn-menu-mobile" type="button" data-bs-toggle="offcanvas"
            data-bs-target="#offcanvasWithBothOptionsMenuMobile" aria-controls="offcanvasWithBothOptionsMenuMobile">
            <span class="icon"><i class="fa-solid fa-bars"></i></span>
          </button>

          <div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1"
            id="offcanvasWithBothOptionsMenuMobile">
            <div class="offcanvas-header">
              <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close">
                <span class="icon"><i class="fa-solid fa-xmark"></i></span>
              </button>
            </div>
            <div class="offcanvas-body">
              <!-- profile menu start -->
              <div class="profile-menu">
                <!-- profile menu head start -->
                <div class="profile-menu-head">
                  <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                      <img class="img-fluid rounded-circle" src="{{ asset('backend/assets/images/profile/user-avatar.jpg') }}"
                        alt="profile image" />
                    </div>
                    <div class="flex-grow-1">
                      <div class="body">
                        <h2 class="title">Robert Downey</h2>
                        <p class="paragraph">UI/UX Designer</p>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- profile menu head end -->

                <!-- profile menu body start -->
                <div class="profile-menu-body">
                  <nav>
                    <ul class="nav flex-column">
                      <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="./profile">{{ ___('common.my_profile') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="./profile-attendance">{{ ___('common.attendance') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="./profile-notices">{{ ___('common.notices') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="./profile-leaves">{{ ___('common.leaves') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="./profile-schedule">{{ ___('common.schedule') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link active" href="./profile-phonebook">{{ ___('common.phonebook') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="./profile-appointment">{{ ___('common.appointment') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="./profile-support-ticket">{{ ___('common.support_tickets') }}</a>
                      </li>
                    </ul>
                  </nav>
                </div>
                <!-- profile menu body end -->
              </div>
              <!-- profile menu end -->
            </div>
          </div>
        </div>
        <!-- profile menu mobile end -->

        <!-- profile menu start -->
        <div class="profile-menu">
          <!-- profile menu head start -->
          <div class="profile-menu-head">
            <div class="d-flex align-items-center">
              <div class="flex-shrink-0">
                <img class="img-fluid rounded-circle" src="{{ asset('backend/assets/images/profile/user-avatar.jpg') }}"
                  alt="profile image" />
              </div>
              <div class="flex-grow-1">
                <div class="body">
                  <h2 class="title">Robert Downey</h2>
                  <p class="paragraph">UI/UX Designer</p>
                </div>
              </div>
            </div>
          </div>
          <!-- profile menu head end -->

          <!-- profile menu body start -->
          <div class="profile-menu-body">
              <nav>
                    <ul class="nav flex-column">
                      <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="./profile">{{ ___('common.my_profile') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="./profile-attendance">{{ ___('common.attendance') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="./profile-notices">{{ ___('common.notices') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="./profile-leaves">{{ ___('common.leaves') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="./profile-schedule">{{ ___('common.schedule') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link active" href="./profile-phonebook">{{ ___('common.phonebook') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="./profile-appointment">{{ ___('common.appointment') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="./profile-support-ticket">{{ ___('common.support_tickets') }}</a>
                      </li>
                    </ul>
              </nav>
          </div>
          <!-- profile menu body end -->
        </div>
        <!-- profile menu end -->

        <!-- profile body start -->
        <div class="profile-body padding-reduce">
          <h2 class="title">{{ ___('common.phonebook') }}</h2>

          <div class="profile-table-content">
            <!--  toolbar table  start  -->
            <div
              class="table-toolbar d-flex flex-wrap gap-2 flex-column flex-xxl-row justify-content-center justify-content-xxl-between align-content-center pb-3">
              <div class="align-self-center">
                <div
                  class="d-flex flex-wrap gap-2 flex-column flex-lg-row justify-content-center align-content-center">
                  <!-- show per page -->
                  <div class="align-self-center">
                    <label>
                      <span class="mr-8">{{ ___('common.show') }}</span>
                      <select class="form-select d-inline-block">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                      </select>
                      <span class="ml-8">{{ ___('common.entries') }}</span>
                    </label>
                  </div>

                  <div class="align-self-center d-flex gap-2">
                    <!-- daterange -->
                    <div class="align-self-center">
                      <button type="button" class="btn-daterange" id="daterange" data-bs-toggle="tooltip"
                        data-bs-placement="right" data-bs-title="{{ ___('common.date_range') }}">
                        <span class="icon"><i class="fa-solid fa-calendar-days"></i>
                        </span>
                        <span class="d-none d-xl-inline">{{ ___('common.date_range') }}</span>
                      </button>
                    </div>
                    <!-- Designation -->
                    <div class="align-self-center">
                      <div class="dropdown dropdown-designation" data-bs-toggle="tooltip" data-bs-placement="right"
                        data-bs-title="{{ ___('common.designation') }}">
                        <button type="button" class="btn-designation" data-bs-toggle="dropdown"
                          aria-expanded="false">
                          <span class="icon"><i class="fa-solid fa-user-shield"></i></span>

                          <span class="d-none d-xl-inline">{{ ___('common.designation') }}</span>
                        </button>

                        <div class="dropdown-menu">
                          <div class="search-content">
                            <div class="search-box d-flex">
                              <input class="form-control" placeholder="{{ ___('common.search') }}" name="search" />
                              <span class="icon"><i class="fa-solid fa-magnifying-glass"></i></span>
                            </div>
                          </div>

                          <div class="dropdown-divider"></div>

                          <ul class="list">
                            <li class="list-item">
                              <a class="dropdown-item" href="#">Main Department</a>
                            </li>

                            <li class="list-item">
                              <a class="dropdown-item" href="#">Admin & HRM</a>
                            </li>

                            <li class="list-item">
                              <a class="dropdown-item" href="#">Accounts</a>
                            </li>

                            <li class="list-item">
                              <a class="dropdown-item" href="#">Development</a>
                            </li>

                            <li class="list-item">
                              <a class="dropdown-item" href="#">Software</a>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <!-- export -->
                    <div class="align-self-center">
                      <div class="d-flex justify-content-center justify-content-xl-end align-content-center">
                        <div class="dropdown dropdown-export" data-bs-toggle="tooltip" data-bs-placement="right"
                          data-bs-title="{{ ___('common.export') }}">
                          <button type="button" class="btn-export" data-bs-toggle="dropdown" aria-expanded="false">
                            <span class="icon"><i class="fa-solid fa-arrow-up-right-from-square"></i></span>

                            <span class="d-none d-xl-inline">{{ ___('common.export') }}</span>
                          </button>

                          <ul class="dropdown-menu">
                            <li>
                              <a class="dropdown-item" href="#"><span class="icon mr-8"><i
                                    class="fa-solid fa-copy"></i></span>
                                    {{ ___('common.copy') }}</a>
                            </li>
                            <li>
                              <a class="dropdown-item" href="#" aria-current="true"><span class="icon mr-10"><i
                                    class="fa-solid fa-file-excel"></i></span>
                                    {{ ___('common.exel_file') }}</a>
                            </li>
                            <li>
                              <a class="dropdown-item" href="#">
                                <span class="icon mr-14"><i class="fa-solid fa-file-csv"></i></span>{{ ___('common.csv_file') }}
                              </a>
                            </li>
                            <li>
                              <a class="dropdown-item" href="#">
                                <span class="icon mr-14"><i class="fa-solid fa-file-pdf"></i></span>{{ ___('common.pdf_file') }}
                              </a>
                            </li>
                            <li>
                              <a class="dropdown-item" href="#">
                                <span class="icon mr-10"><i class="fa-solid fa-table-columns"></i></span>{{ ___('common.column_header') }}
                              </a>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>

                    <!-- dropdown action -->
                    <div class="align-self-center">
                      <div class="dropdown dropdown-action" data-bs-toggle="tooltip" data-bs-placement="right"
                        data-bs-title="{{ ___('common.action') }}">
                        <button type="button" class="btn-dropdown" data-bs-toggle="dropdown" aria-expanded="false">
                          <i class="fa-solid fa-ellipsis"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                          <li>
                            <a class="dropdown-item" href="#"><span class="icon mr-10"><i
                                  class="fa-solid fa-eye"></i></span>
                                  {{ ___('common.make_publish') }}</a>
                          </li>
                          <li>
                            <a class="dropdown-item" href="#" aria-current="true"><span class="icon mr-8"><i
                                  class="fa-solid fa-eye-slash"></i></span>
                                  {{ ___('common.make_unpublish') }}</a>
                          </li>
                          <li>
                            <a class="dropdown-item" href="#">
                              <span class="icon mr-16"><i class="fa-solid fa-trash-can"></i></span>{{ ___('common.delete') }}
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="align-self-center d-flex gap-2">
                <!-- search -->
                <div class="align-self-center">
                  <div class="search-box d-flex">
                    <input class="form-control" placeholder="{{ ___('common.search') }}" name="search" />
                    <span class="icon"><i class="fa-solid fa-magnifying-glass"></i></span>
                  </div>
                </div>
                <!-- add btn -->
                <div class="align-self-center">
                  <a href="#" role="button" class="btn-add" data-bs-toggle="tooltip"
                    data-bs-placement="right" data-bs-title="{{ ___('common.add') }}">
                    <span><i class="fa-solid fa-plus"></i> </span>
                    <span class="d-none d-xl-inline">{{ ___('common.add') }}</span>
                  </a>
                </div>
              </div>
            </div>
            <!--toolbar table end -->
            <!--  table start -->
            <div class="table-responsive">
              <table class="table table-bordered">
                <thead class="thead">
                  <tr>
                    <th class="sorting_asc">
                      <div class="check-box">
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" />
                        </div>
                      </div>
                    </th>
                    <th class="sorting_desc">{{ ___('common.sr_no') }}</th>
                    <th class="sorting_desc">{{ ___('common.name') }}</th>
                    <th class="sorting_desc">{{ ___('common.email_address') }}</th>
                    <th class="sorting_desc">{{ ___('common.phone') }}</th>
                    <th class="sorting_desc">{{ ___('common.designation') }}</th>
                    <th class="sorting_desc">{{ ___('common.department') }}</th>
                    <th class="sorting_desc">{{ ___('common.role') }}</th>
                    <th class="sorting_desc">{{ ___('common.status') }}</th>
                  </tr>
                </thead>
                <tbody class="tbody">
                  <tr>
                    <td>
                      <div class="check-box">
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" />
                        </div>
                      </div>
                    </td>
                    <td>01</td>
                    <td>Johnney Depp</td>
                    <td>john@sookh.com</td>
                    <td>+9932869238</td>
                    <td>Product Designer</td>
                    <td>Design</td>
                    <td>Staff</td>
                    <td>
                      <span class="badge-light-success">Active</span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div class="check-box">
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" />
                        </div>
                      </div>
                    </td>
                    <td>02</td>
                    <td>Johnney Depp</td>
                    <td>john@sookh.com</td>
                    <td>+9932869238</td>
                    <td>Product Designer</td>
                    <td>Design</td>
                    <td>Staff</td>
                    <td>
                      <span class="badge-light-success">Active</span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div class="check-box">
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" />
                        </div>
                      </div>
                    </td>
                    <td>03</td>
                    <td>Johnney Depp</td>
                    <td>john@sookh.com</td>
                    <td>+9932869238</td>
                    <td>Product Designer</td>
                    <td>Design</td>
                    <td>Staff</td>
                    <td>
                      <span class="badge-light-success">Active</span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div class="check-box">
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" />
                        </div>
                      </div>
                    </td>
                    <td>04</td>
                    <td>Johnney Depp</td>
                    <td>john@sookh.com</td>
                    <td>+9932869238</td>
                    <td>Product Designer</td>
                    <td>Design</td>
                    <td>Staff</td>
                    <td>
                      <span class="badge-light-success">Active</span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <!--  table end -->
            <!--  pagination start -->
            <div class="ot-pagination d-flex justify-content-end align-content-center">
              <nav aria-label="Page navigation example">
                <ul class="pagination">
                  <li class="page-item">
                    <a class="page-link" href="#" aria-label="Previous">
                      <span aria-hidden="true"><i class="fa fa-angle-left"></i></span>
                    </a>
                  </li>
                  <li class="page-item">
                    <a class="page-link active" href="#">1</a>
                  </li>
                  <li class="page-item">
                    <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="#" aria-label="Next">
                      <span aria-hidden="true"><i class="fa fa-angle-right"></i></span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
            <!--  pagination end -->
          </div>
        </div>
      </div>
      <!-- profile body form end -->
    </div>
    <!-- profile body end -->
  </div>
    
@endsection