@extends('backend.master')

@section('title')
    {{ ___('common.data_table') }}
@endsection

@section('content')

<!--  page content start-->
<div class="page-content">
    {{-- bradecrumb Area S t a r t --}}
    <div class="page-header">
        <div class="row">
            <div class="col-sm-6">
                <h4 class="bradecrumb-title mb-1">{{ ___('common.data_table') }}</h1>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">{{ ___('common.home') }}</a></li>
                    <li class="breadcrumb-item">{{ ___('common.data_table') }}</li>
                </ol>
            </div>
            <div class="col-sm-6">
                <!-- Bookmark Start-->
                <div class="bookmark">
                    <ul>
                        <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-inbox"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg></a></li>
                        <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg></a></li>
                        <li><a href="javascript:void(0)" ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-command"><path d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z"></path></svg></a></li>
                        <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg></a></li>
                        <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star bookmark-search"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></a></li>
                    </ul>
                </div>
                <!-- Bookmark Ends-->
            </div>
        </div>
    </div>
    {{-- bradecrumb Area E n d --}}

    <!--  table content start -->
    <div class="table-content table-basic">
      <div class="card">
        <div class="card-header">{{ ___('common.basic_datatable') }}</div>
        <div class="card-body">
          <!-- toolbar table start -->
          <div
            class="table-toolbar d-flex flex-wrap gap-2 flex-column flex-xl-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">{{ ___('common.10') }}</option>
                      <option value="25">{{ ___('common.25') }}</option>
                      <option value="50">{{ ___('common.50') }}</option>
                      <option value="100">{{ ___('common.100') }}</option>
                    </select>
                    <span class="ml-8">{{ ___('common.entries') }}</span>
                  </label>
                </div>

                <div class="align-self-center d-flex gap-2">
                  <!-- 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="Add">
                      <span><i class="fa-solid fa-plus"></i> </span>
                      <span class="d-none d-xl-inline">{{ ___('common.add') }}</span>
                    </a>
                  </div>
                  <!-- 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="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="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 ot-input" 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="#">{{ ___('common.main_department') }}</a>
                          </li>

                          <li class="list-item">
                            <a class="dropdown-item" href="#">{{ ___('common.admin_hrm') }}</a>
                          </li>

                          <li class="list-item">
                            <a class="dropdown-item" href="#">{{ ___('common.accounts') }}</a>
                          </li>

                          <li class="list-item">
                            <a class="dropdown-item" href="#">{{ ___('common.development') }}</a>
                          </li>

                          <li class="list-item">
                            <a class="dropdown-item" href="#">{{ ___('common.software') }}</a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 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>

                <!-- dropdown action -->
                <div class="align-self-center">
                  <div class="dropdown dropdown-action" data-bs-toggle="tooltip" data-bs-placement="right"
                    data-bs-title="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>
            <!-- 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="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 dropdown-menu-end">
                    <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>
          </div>
          <!-- toolbar table end -->
          <!--  toolbar table 2 start  -->
          <div
            class="table-toolbar d-flex flex-wrap gap-2 flex-column flex-xl-row justify-content-center justify-content-xxl-between align-content-center pb-3">
            <div class="align-self-center">
            </div>
          </div>
          <!--toolbar table 2 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.purchase_id') }}</th>
                  <th class="sorting_desc">{{ ___('common.title') }}</th>
                  <th class="sorting_desc">{{ ___('common.user') }}</th>
                  <th class="sorting_desc">{{ ___('common.assigned_to') }}</th>
                  <th class="sorting_desc">{{ ___('common.created_by') }}</th>
                  <th class="sorting_desc">{{ ___('common.create_date') }}</th>
                  <th class="sorting_desc">{{ ___('common.status') }}</th>
                  <th class="sorting_desc">{{ ___('common.priority') }}</th>
                  <th class="sorting_desc">{{ ___('common.action') }}</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>IDL-963</td>
                  <td>Add Dynamic Contact List</td>
                  <td>Robert Downey</td>
                  <td>Peter Parker</td>
                  <td>Robert Downey</td>
                  <td>Jan 14, 2022</td>
                  <td>
                    <span class="badge-light-success">{{ ___('common.re_open') }}</span>
                  </td>
                  <td>
                    <span class="badge-success">{{ ___('common.high') }}</span>
                  </td>
                  <td>
                    <div class="dropdown dropdown-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-12"><i
                                class="fa-solid fa-pen-to-square"></i></span>
                                {{ ___('common.edit') }}</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>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="check-box">
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" />
                      </div>
                    </div>
                  </td>
                  <td>01</td>
                  <td>IDL-963</td>
                  <td>Add Dynamic Contact List</td>
                  <td>Robert Downey</td>
                  <td>Peter Parker</td>
                  <td>Robert Downey</td>
                  <td>Jan 14, 2022</td>
                  <td>
                    <span class="badge-light-danger">{{ ___('common.re_open') }}</span>
                  </td>
                  <td>
                    <span class="badge-danger">{{ ___('common.high') }}</span>
                  </td>
                  <td>
                    <div class="dropdown dropdown-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-12"><i
                                class="fa-solid fa-pen-to-square"></i></span>
                            Edit</a>
                        </li>
                        <li>
                          <a class="dropdown-item" href="#">
                            <span class="icon mr-16"><i class="fa-solid fa-trash-can"></i></span>Delete
                          </a>
                        </li>
                      </ul>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="check-box">
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" />
                      </div>
                    </div>
                  </td>
                  <td>01</td>
                  <td>IDL-963</td>
                  <td>Add Dynamic Contact List</td>
                  <td>Robert Downey</td>
                  <td>Peter Parker</td>
                  <td>Robert Downey</td>
                  <td>Jan 14, 2022</td>
                  <td>
                    <span class="badge-light-warning">{{ ___('common.re_open') }}</span>
                  </td>
                  <td>
                    <span class="badge-warning">{{ ___('common.high') }}</span>
                  </td>
                  <td>
                    <div class="dropdown dropdown-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-12"><i
                                class="fa-solid fa-pen-to-square"></i></span>
                            Edit</a>
                        </li>
                        <li>
                          <a class="dropdown-item" href="#">
                            <span class="icon mr-16"><i class="fa-solid fa-trash-can"></i></span>Delete
                          </a>
                        </li>
                      </ul>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="check-box">
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" />
                      </div>
                    </div>
                  </td>
                  <td>01</td>
                  <td>IDL-963</td>
                  <td>Add Dynamic Contact List</td>
                  <td>Robert Downey</td>
                  <td>Peter Parker</td>
                  <td>Robert Downey</td>
                  <td>Jan 14, 2022</td>
                  <td>
                    <span class="badge-light-primary">{{ ___('common.re_open') }}</span>
                  </td>
                  <td>
                    <span class="badge-primary">{{ ___('common.high') }}</span>
                  </td>
                  <td>
                    <div class="dropdown dropdown-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-12"><i
                                class="fa-solid fa-pen-to-square"></i></span>
                            Edit</a>
                        </li>
                        <li>
                          <a class="dropdown-item" href="#">
                            <span class="icon mr-16"><i class="fa-solid fa-trash-can"></i></span>Delete
                          </a>
                        </li>
                      </ul>
                    </div>
                  </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>
    <!--  table content end -->
  </div>
  <!--  page content end -->

@endsection