@php ($headerOption = [
    'title' => '',
    'noCardView' => true
])
@extends('front.layouts.layout', $headerOption)

@section('content')


    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-flex align-items-center justify-content-between">
                <h4 class="mb-0 font-size-18">Personnel</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Dashboard</a></li>
                        <li class="breadcrumb-item active">Personnel</li>
                    </ol>
                </div>

            </div>

            <!-- <div class="d-flex justify-content-end mb-3">
                <div class="d-flex align-items-center">
                    <a href="#" class="btn btn-primary btn-rounded waves-effect waves-light mod-btn right-bar-toggle" >Create New Control</a>

                </div>
            </div> -->

        </div>
    </div>
    <!-- end page title -->

    <div class="row">
        <div class="col-12">
            <div class="connections-main-wrapper">
                <!-- Left sidebar -->
                <div class="email-leftbar card">
                    <!-- <button type="button" class="btn btn-danger btn-block waves-effect waves-light" data-toggle="modal" data-target="#composemodal">
                        Compose
                    </button> -->
                    <h4 class="card-title mb-0">All Current</h4>
                    <hr>
                    <h6 class="mt-2">Compliance</h6>

                    <div class="mail-list">
                        <a href="#" class="active"><i class="mdi mdi-check-circle-outline mr-2"></i> Compliant</a>
                        <a href="#"><i class="mdi mdi-close-circle-outline mr-2"></i>All Not Compliant <span class="mail-nav-count">13</span></a>
                        <div class="mail-list-nav">
                        <a href="#">Policies</a>
                        <a href="#">Identify MFA</a>
                        <a href="#">Background Check</a>
                        <a href="#">Security Check</a>
                        <a href="#">Device Compliance</a>
                        </div>
                    </div>
                    <hr>
                    <h6 class="mt-2">Filter by Status</h6>
                    <div class="w-100 mt-2">
                        <select class="form-control border-radius-100">
                            <option>All Current Personnel</option>
                        </select>
                    </div>
                    <hr>
                    <h6 class="mt-2">Filter by Group</h6>
                    <div class="w-100 mt-2">
                        <select class="form-control border-radius-100">
                            <option>Groups</option>
                        </select>
                    </div>
                </div>
                <!-- End Left sidebar -->


                <!-- Right Sidebar -->
                <div class="email-rightbar personnel-table-sec">

                    <div class="card">
                        <!-- Nav tabs -->
                        <ul class="personnel-top" >
                            <li class=" ">
                                <div class="btn-group mr-1">
                                    <button type="button" class="btn btn-primary btn-rounded waves-effect waves-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Actions <i class="mdi mdi-chevron-down"></i></button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="#">01</a>
                                        <a class="dropdown-item" href="#">02</a>
                                        <a class="dropdown-item" href="#">03</a>

                                    </div>
                                </div>
                            </li>
                            <li class="">
                                <div class="btn-group mr-1">
                                    <button type="button" class="btn btn-primary btn-rounded waves-effect waves-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="bx bx-download"></i> Download <i class="mdi mdi-chevron-down"></i></button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="#">01</a>
                                        <a class="dropdown-item" href="#">02</a>
                                        <a class="dropdown-item" href="#">03</a>

                                    </div>
                                </div>
                            </li>
                            <li class="w-90 ml-2 d-flex align-items-center">
                                <!-- <a class="nav-link" data-toggle="tab" href="#messages1" role="tab">
                                    <span class="d-block d-sm-none"><i class="bx bx-search"></i></span>
                                    <span class="d-none d-sm-block nowrap"><i class="bx bx-search"></i> Search Connections</span>
                                </a> -->
                                <div class="input-group cnt-frm ">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="option-date"><i class="bx bx-search"></i></span>
                                    </div>
                                    <input type="text" class="form-control" name="date" value="" aria-describedby="option-date" placeholder="Search controls by name , description code , or requirments...">
                                    </div>
                                    <a href="#" class="btn btn-primary btn-rounded waves-effect waves-light mod-btn ml-2  text-white mb-1" ><i class="fas fa-cog"></i></a>
                            </li>
                            <!-- <li class="w-10 text-center">

                            </li> -->
                        </ul>

                        <div class="tab-content p-0 text-muted">
                            <div class="tab-pane active" id="home1" role="tabpanel">
                                <div class="card-body connection-block-wrapper p-0">
                                    <div  class="table-responsive policy-table mb-0" data-pattern="priority-columns">
                                        <table class="table table-striped" >
                                            <thead>
                                                <tr>
                                                    <th>
                                                        <div class="custom-control custom-checkbox ">
                                                            <input type="checkbox" class="custom-control-input input-mini" id="closeButton" value="checked" >
                                                            <label class="custom-control-label" for="closeButton"></label>
                                                        </div>
                                                    </th>
                                                    <th class="text-truncate">
                                                        Name <i class="bx bx-chevron-up ml-1"></i>
                                                    </th>
                                                        <th class="text-truncate text-center">
                                                        Currently Complaiant ?
                                                    </th>
                                                        <th class="text-truncate text-center">
                                                        Status
                                                    </th>
                                                    <th class="text-truncate text-center">
                                                        Accepted Policies
                                                    </th>
                                                    <th class="text-truncate text-center">
                                                        Identity MFA
                                                    </th>
                                                    <th class="text-truncate text-center">
                                                        BG Check
                                                    </th>
                                                    <th class="text-truncate text-center">
                                                        Security Training
                                                    </th>
                                                    <th class="text-truncate text-center">
                                                        Device Compliance
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                                @foreach ($personnels as $personnel)
                                                <tr>
                                                    <td class="w-5">

                                                        <div class="custom-control custom-checkbox mb-2">
                                                            <input type="checkbox" class="custom-control-input input-mini" id="closeButton2" value="checked" >
                                                            <label class="custom-control-label" for="closeButton2"></label>
                                                        </div>
                                                        <!-- <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                            </div> -->

                                                    </td>

                                                    <td class="right-bar-toggle ">
                                                        <div class="media">
                                                            <div class="avatar-xs align-self-center mr-3">
                                                                <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                                    {{mb_substr($personnel->first_name, 0, 1);}}
                                                                </span>
                                                            </div>
                                                            <div class="media-body overflow-hidden">
                                                                <h5 class="text-truncate font-size-14 mb-1">{{$personnel->first_name . ' ' . $personnel->last_name}}</h5>
                                                                <p class="text-truncate mb-0">{{ $personnel->email }}</p>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="text-center">
                                                        <a href="#" class="btn btn-danger btn-rounded waves-effect waves-light mod-btn  text-white "><i class="far fa-envelope"></i></a>
                                                    </td>
                                                    <td class="text-center">
                                                        <div class="w-f-150 mx-auto">
                                                            <select class="form-control border-radius-100">
                                                                <option>Current Status</option>
                                                            </select>
                                                        </div>
                                                    </td>
                                                    <td class="text-center"><i class="far fa-check-circle text-success font-size-18"></i></td>
                                                    <td class="text-center"><i class="far fa-check-circle text-success font-size-18"></i></td>
                                                    <td class="text-center"><i class="far fa-times-circle text-danger font-size-18"></i></td>
                                                    <td class="text-center"><i class="far fa-times-circle text-danger font-size-18"></i></td>
                                                    <td class="text-center"><i class="far fa-check-circle text-success font-size-18"></i></td>
                                                </tr>
                                                @endforeach

                                                {{-- <tr>
                                                    <td class="w-5">

                                                        <div class="custom-control custom-checkbox mb-2">
                                                            <input type="checkbox" class="custom-control-input input-mini" id="closeButton3" value="checked" >
                                                            <label class="custom-control-label" for="closeButton3"></label>
                                                        </div>
                                                        <!-- <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                            </div> -->

                                                    </td>
                                                    <td class="right-bar-toggle ">
                                                        <div class="media">
                                                            <div class="avatar-xs align-self-center mr-3">
                                                                <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                                    K
                                                                </span>
                                                            </div>
                                                            <div class="media-body overflow-hidden">
                                                                <h5 class="text-truncate font-size-14 mb-1">Keith Gonzales</h5>
                                                                <p class="text-truncate mb-0">keith@gmail.com</p>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="text-center">
                                                        <a href="#" class="btn btn-danger btn-rounded waves-effect waves-light mod-btn  text-white "><i class="far fa-envelope"></i></a>
                                                    </td>
                                                    <td class="text-center">
                                                        <div class="w-f-150 mx-auto">
                                                            <select class="form-control border-radius-100">
                                                                <option>Current Status</option>
                                                            </select>
                                                        </div>
                                                    </td>
                                                    <td class="text-center"><i class="far fa-check-circle text-success font-size-18"></i></td>
                                                    <td class="text-center"><i class="far fa-check-circle text-success font-size-18"></i></td>
                                                    <td class="text-center"><i class="far fa-times-circle text-danger font-size-18"></i></td>
                                                    <td class="text-center"><i class="far fa-times-circle text-danger font-size-18"></i></td>
                                                    <td class="text-center"><i class="far fa-times-circle text-danger font-size-18"></i></td>
                                                </tr> --}}
                                                <tr>
                                                    <td class="w-5">
                                                        <div class="media">
                                                        <div class="custom-control custom-checkbox mb-2">
                                                            <input type="checkbox" class="custom-control-input input-mini" id="closeButton5" value="checked" >
                                                            <label class="custom-control-label" for="closeButton5"></label>
                                                        </div>
                                                        <!-- <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                            </div> -->
                                                    </div>
                                                    </td>

                                                    <td class="right-bar-toggle ">
                                                        <div class="media">
                                                            <div class="avatar-xs align-self-center mr-3">
                                                                <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                                    K
                                                                </span>
                                                            </div>
                                                            <div class="media-body overflow-hidden">
                                                                <h5 class="text-truncate font-size-14 mb-1">Keith Gonzales</h5>
                                                                <p class="text-truncate mb-0">keith@gmail.com</p>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="text-center">
                                                        <a href="#" class="btn btn-danger btn-rounded waves-effect waves-light mod-btn  text-white "><i class="far fa-envelope"></i></a>
                                                    </td>
                                                    <td class="text-center">
                                                        <div class="w-f-150 mx-auto">
                                                            <select class="form-control border-radius-100">
                                                                <option>Current Status</option>
                                                            </select>
                                                        </div>
                                                    </td>
                                                    <td class="text-center"><i class="far fa-check-circle text-success font-size-18"></i></td>
                                                    <td class="text-center"><i class="far fa-times-circle text-danger font-size-18"></i></td>
                                                    <td class="text-center"><i class="mdi mdi-minus-circle-outline font-size-20 text-muted"></i></td>
                                                    <td class="text-center"><i class="far fa-times-circle text-danger font-size-18"></i></td>
                                                    <td class="text-center"><i class="far fa-times-circle text-danger font-size-18"></i></td>
                                                {{-- </tr>
                                                <tr>
                                                    <td class="w-5">

                                                        <div class="custom-control custom-checkbox mb-2">
                                                            <input type="checkbox" class="custom-control-input input-mini" id="closeButton7" value="checked" >
                                                            <label class="custom-control-label" for="closeButton7"></label>
                                                        </div>
                                                        <!-- <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                            </div> -->

                                                    </td>

                                                    <td class="right-bar-toggle ">
                                                        <div class="media">
                                                            <div class="avatar-xs align-self-center mr-3">
                                                                <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                                    K
                                                                </span>
                                                            </div>
                                                            <div class="media-body overflow-hidden">
                                                                <h5 class="text-truncate font-size-14 mb-1">Keith Gonzales</h5>
                                                                <p class="text-truncate mb-0">keith@gmail.com</p>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="text-center">
                                                        <a href="#" class="btn btn-danger btn-rounded waves-effect waves-light mod-btn  text-white "><i class="far fa-envelope"></i></a>
                                                    </td>
                                                    <td class="text-center">
                                                        <div class="w-f-150 mx-auto">
                                                            <select class="form-control border-radius-100">
                                                                <option>Current Status</option>
                                                            </select>
                                                        </div>
                                                    </td>
                                                    <td class="text-center"><i class="far fa-check-circle text-success font-size-18"></i></td>
                                                    <td class="text-center"><i class="far fa-times-circle text-danger font-size-18"></i></td>
                                                    <td class="text-center"><i class="mdi mdi-minus-circle-outline font-size-20 text-muted"></i></td>
                                                    <td class="text-center"><i class="far fa-times-circle text-danger font-size-18"></i></td>
                                                    <td class="text-center"><i class="far fa-times-circle text-danger font-size-18"></i></td>
                                                </tr>
                                                <tr>
                                                    <td class="w-5">
                                                        <div class="media">
                                                        <div class="custom-control custom-checkbox mb-2">
                                                            <input type="checkbox" class="custom-control-input input-mini" id="closeButton9" value="checked" >
                                                            <label class="custom-control-label" for="closeButton9"></label>
                                                        </div>
                                                        <!-- <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                            </div> -->
                                                    </div>
                                                    </td>

                                                    <td class="right-bar-toggle ">
                                                        <div class="media">
                                                            <div class="avatar-xs align-self-center mr-3">
                                                                <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                                    K
                                                                </span>
                                                            </div>
                                                            <div class="media-body overflow-hidden">
                                                                <h5 class="text-truncate font-size-14 mb-1">Keith Gonzales</h5>
                                                                <p class="text-truncate mb-0">keith@gmail.com</p>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="text-center">
                                                        <a href="#" class="btn btn-danger btn-rounded waves-effect waves-light mod-btn  text-white "><i class="far fa-envelope"></i></a>
                                                    </td>
                                                    <td class="text-center">
                                                        <div class="w-f-150 mx-auto">
                                                            <select class="form-control border-radius-100">
                                                                <option>Current Status</option>
                                                            </select>
                                                        </div>
                                                    </td>
                                                    <td class="text-center"><i class="far fa-check-circle text-success font-size-18"></i></td>
                                                    <td class="text-center"><i class="far fa-check-circle text-success font-size-18"></i></td>
                                                    <td class="text-center"><i class="far fa-times-circle text-danger font-size-18"></i></td>
                                                    <td class="text-center"><i class="far fa-times-circle text-danger font-size-18"></i></td>
                                                    <td class="text-center"><i class="far fa-check-circle text-success font-size-18"></i></td>
                                                </tr>
                                                <tr>
                                                    <td class="w-5">

                                                        <div class="custom-control custom-checkbox mb-2">
                                                            <input type="checkbox" class="custom-control-input input-mini" id="closeButton11" value="checked" >
                                                            <label class="custom-control-label" for="closeButton11"></label>
                                                        </div>
                                                        <!-- <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                            </div> -->

                                                    </td>

                                                    <td class="right-bar-toggle ">
                                                        <div class="media">
                                                            <div class="avatar-xs align-self-center mr-3">
                                                                <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                                    K
                                                                </span>
                                                            </div>
                                                            <div class="media-body overflow-hidden">
                                                                <h5 class="text-truncate font-size-14 mb-1">Keith Gonzales</h5>
                                                                <p class="text-truncate mb-0">keith@gmail.com</p>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="text-center">
                                                        <a href="#" class="btn btn-danger btn-rounded waves-effect waves-light mod-btn  text-white "><i class="far fa-envelope"></i></a>
                                                    </td>
                                                    <td class="text-center">
                                                        <div class="w-f-150 mx-auto">
                                                            <select class="form-control border-radius-100">
                                                                <option>Current Status</option>
                                                            </select>
                                                        </div>
                                                    </td>
                                                    <td class="text-center"><i class="far fa-check-circle text-success font-size-18"></i></td>
                                                    <td class="text-center"><i class="far fa-times-circle text-danger font-size-18"></i></td>
                                                    <td class="text-center"><i class="mdi mdi-minus-circle-outline font-size-20 text-muted"></i></td>
                                                    <td class="text-center"><i class="far fa-times-circle text-danger font-size-18"></i></td>
                                                    <td class="text-center"><i class="far fa-times-circle text-danger font-size-18"></i></td>
                                                </tr>
                                                <tr>
                                                    <td class="w-5">

                                                        <div class="custom-control custom-checkbox mb-2">
                                                            <input type="checkbox" class="custom-control-input input-mini" id="closeButton12" value="checked" >
                                                            <label class="custom-control-label" for="closeButton12"></label>
                                                        </div>
                                                        <!-- <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                            </div> -->

                                                    </td>

                                                    <td class="right-bar-toggle ">
                                                        <div class="media">
                                                            <div class="avatar-xs align-self-center mr-3">
                                                                <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                                    K
                                                                </span>
                                                            </div>
                                                            <div class="media-body overflow-hidden">
                                                                <h5 class="text-truncate font-size-14 mb-1">Keith Gonzales</h5>
                                                                <p class="text-truncate mb-0">keith@gmail.com</p>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="text-center">
                                                        <a href="#" class="btn btn-danger btn-rounded waves-effect waves-light mod-btn  text-white "><i class="far fa-envelope"></i></a>
                                                    </td>
                                                    <td class="text-center">
                                                        <div class="w-f-150 mx-auto">
                                                            <select class="form-control border-radius-100">
                                                                <option>Current Status</option>
                                                            </select>
                                                        </div>
                                                    </td>
                                                    <td class="text-center"><i class="far fa-check-circle text-success font-size-18"></i></td>
                                                    <td class="text-center"><i class="far fa-check-circle text-success font-size-18"></i></td>
                                                    <td class="text-center"><i class="mdi mdi-minus-circle-outline font-size-20 text-muted"></i></td>
                                                    <td class="text-center"><i class="far fa-times-circle text-danger font-size-18"></i></td>
                                                    <td class="text-center"><i class="far fa-times-circle text-danger font-size-18"></i></td>
                                                </tr>

                                                <tr>
                                                    <td class="w-5">

                                                        <div class="custom-control custom-checkbox mb-2">
                                                            <input type="checkbox" class="custom-control-input input-mini" id="closeButton13" value="checked" >
                                                            <label class="custom-control-label" for="closeButton13"></label>
                                                        </div>
                                                        <!-- <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                            </div> -->

                                                    </td>

                                                    <td class="right-bar-toggle ">
                                                        <div class="media">
                                                            <div class="avatar-xs align-self-center mr-3">
                                                                <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                                    K
                                                                </span>
                                                            </div>
                                                            <div class="media-body overflow-hidden">
                                                                <h5 class="text-truncate font-size-14 mb-1">Keith Gonzales</h5>
                                                                <p class="text-truncate mb-0">keith@gmail.com</p>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="text-center">
                                                        <a href="#" class="btn btn-danger btn-rounded waves-effect waves-light mod-btn  text-white "><i class="far fa-envelope"></i></a>
                                                    </td>
                                                    <td class="text-center">
                                                        <div class="w-f-150 mx-auto">
                                                            <select class="form-control border-radius-100">
                                                                <option>Current Status</option>
                                                            </select>
                                                        </div>
                                                    </td>
                                                    <td class="text-center"><i class="far fa-check-circle text-success font-size-18"></i></td>
                                                    <td class="text-center"><i class="far fa-check-circle text-success font-size-18"></i></td>
                                                    <td class="text-center"><i class="mdi mdi-minus-circle-outline font-size-20 text-muted"></i></td>
                                                    <td class="text-center"><i class="far fa-times-circle text-danger font-size-18"></i></td>
                                                    <td class="text-center"><i class="far fa-times-circle text-danger font-size-18"></i></td>
                                                </tr>
                                                <tr>
                                                    <td class="w-5">

                                                        <div class="custom-control custom-checkbox mb-2">
                                                            <input type="checkbox" class="custom-control-input input-mini" id="closeButton14" value="checked" >
                                                            <label class="custom-control-label" for="closeButton14"></label>
                                                        </div>
                                                        <!-- <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                            </div> -->

                                                    </td>

                                                    <td class="right-bar-toggle ">
                                                        <div class="media">
                                                            <div class="avatar-xs align-self-center mr-3">
                                                                <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                                    K
                                                                </span>
                                                            </div>
                                                            <div class="media-body overflow-hidden">
                                                                <h5 class="text-truncate font-size-14 mb-1">Keith Gonzales</h5>
                                                                <p class="text-truncate mb-0">keith@gmail.com</p>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="text-center">
                                                        <a href="#" class="btn btn-danger btn-rounded waves-effect waves-light mod-btn  text-white "><i class="far fa-envelope"></i></a>
                                                    </td>
                                                    <td class="text-center">
                                                        <div class="w-f-150 mx-auto">
                                                            <select class="form-control border-radius-100">
                                                                <option>Current Status</option>
                                                            </select>
                                                        </div>
                                                    </td>
                                                    <td class="text-center"><i class="far fa-check-circle text-success font-size-18"></i></td>
                                                    <td class="text-center"><i class="far fa-check-circle text-success font-size-18"></i></td>
                                                    <td class="text-center"><i class="mdi mdi-minus-circle-outline font-size-20 text-muted"></i></td>
                                                    <td class="text-center"><i class="far fa-times-circle text-danger font-size-18"></i></td>
                                                    <td class="text-center"><i class="far fa-times-circle text-danger font-size-18"></i></td>
                                                </tr> --}}

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>


                        </div>







                    </div> <!-- card -->


                </div> <!-- end Col-9 -->
            </div>
        </div>

    </div><!-- End row -->


@endsection