@extends('admin.layout')

@section('content')

<div class="content-wrapper">
  <div class="d-flex justify-content-between mb-3 pl-3 align-items-center">
    <h4 class="card-title m-0">Employees</h4>
    <button type="button" class="btn btn-primary d-flex align-items-center justify-content-center" style="gap:1rem" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="d-block mdi mdi-plus-circle-outline"></i> Add Employees</button>
  </div>
  <div class="card">
    <div class="card-body">
      <div class="row">
        <div class="col-md-12">

          <div class="table-header my-3">
            <div class="row">
              <div class="col-md-11">
                <div class="d-flex align-items-center">
                  <i class="mdi icon-sm mdi-magnify text-primary"></i>
                  <input type="text" class="form-control" id="navbar-search-input" placeholder="Search" aria-label="search" aria-describedby="search">
                </div>
              </div>
              <div class="col-md-1 pl-0">
                <button type="button" class="btn btn-outline-primary btn-sm w-100 d-flex align-items-center justify-content-between m-0 btn-icon-text">
                  <i class="mdi mdi-filter m-0 btn-icon-append"></i>
                  Filter
                </button>
              </div>
            </div>
          </div>

          <div class="py-3 position-relative">


            <div class="employees-head border-bottom">
              <div class="card">
                <div class="card-body p-3">
                  <div class="row ps-0 align-items-center">
                    <div class="col-md-1">
                      <input type="checkbox" id="checkall" class="form-check-input position-relative m-0">
                    </div>
                    <div class="col-md-1"><strong>Image</strong></div>
                    <div class="col-md-3"><strong>Name</strong></div>
                    <div class="col-md-3"><strong>Email</strong></div>
                    <div class="col-md-2"><strong>Phone</strong></div>
                    <div class="col-md-1"><strong>Status</strong></div>
                    <div class="col-md-1"><strong></strong></div>
                  </div>
                </div>
              </div>

              <div id="table-column" class="py-2">

                @include('admin.employees.loop',['data' => $data['employees']])

              </div>

              <div id="table-loader" class="position-absolute top-0 left-0 w-100">
                <div class="loader-demo-box">
                  <div class="dot-opacity-loader">
                    <span></span>
                    <span></span>
                    <span></span>
                  </div>
                </div>
              </div>

          </div>

        </div>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" style="display: none;" aria-hidden="true">
  <div class="modal-dialog modal-lg" style="width: 60% !important" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add Employee</h5>
        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <form class="js-form" action="