@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">External Auditor</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Settings</a></li>
                    <li class="breadcrumb-item active">External Auditor</li>
                </ol>
            </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-file-certificate-outline mr-2"></i> Certifications</a>
                    <div class="mail-list-nav">
                        <a href="#">Certified Information Privacy Professional (CIPP)</a>
                        <a href="#">Certified Information Systems Auditor (CISA)</a>
                        <a href="#">Certified Internal Auditor (CIA)</a>
                        {{-- <a href="#">Security Check</a> --}}
                        </div>
                    <a href="#"><i class="mdi mdi-earth mr-2"></i> ISO 27001 Lead Auditor: {{--<span class="mail-nav-count">13</span>--}}</a>
                    <div class="mail-list-nav">
                    <a href="#">Certification audit</a>
                    <a href="#">Surveillance audit</a>
                    {{-- <a href="#">Background Check</a> --}}
                    </div>
                </div>
                <hr>
                <h6 class="mt-2">Filter by Certifications</h6>
                <div class="w-100 mt-2">
                    <select class="form-control border-radius-100">
                        <option>All Current Certifications</option>
                    </select>
                </div>
                {{-- <hr>
                <h6 class="mt-2">Filter by Qualifications</h6>
                <div class="w-100 mt-2">
                    <select class="form-control border-radius-100">
                        <option>Qualifications</option>
                    </select>
                </div> --}}
            </div>
            <!-- End Left sidebar -->


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

                <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 external auditors 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="mdi mdi-cog-outline"></i></a>
                                 <a href="#" class="btn btn-primary btn-rounded waves-effect waves-light mod-btn ml-2  text-white mb-1" ><i class="mdi mdi-swap-vertical-bold"></i></a>
                        </li>
                        <!-- <li class="w-10 text-center">

                        </li> -->
                    </ul>

                    @foreach ($auditors as $key => $value)
                    <div class="row">
                        <div class="col-12">
                            <div class="card personal-table-grid-sec">
                                <div class="card-body">
                                    <div class="media d-flex align-items-center justify-content-between">
                                        <div class="personel-top">
                                        <div class="pr-check-box">
                                            <div class="custom-control custom-checkbox mr-2">
                                                <input type="checkbox" class="custom-control-input input-mini" id="closeButton2" value="checked">
                                                <label class="custom-control-label" for="closeButton2"></label>
                                            </div>
                                        </div>
                                        <div class="mr-3">
                                            <img src="{{ asset('/images/users/avatar-9.jpg') }}" alt="" class="avatar-md rounded-circle img-thumbnail">
                                        </div>
                                        <div class="media-body align-self-center">
                                            <div class="text-muted">
                                                <h5 class="card-title font-size-20 right-bar-toggle ext-audit" data-id="{{$value->unique_id}}">{{ $value->first_name . ' ' . $value->last_name }}</h5>
                                                <p class="mb-1">{{ $value->email }}</p>
                                            </div>
                                        </div>
                                        </div>
                                        {{-- <div class="personel-middle">
                                            <div class="complaiant-sec d-flex align-items-center mr-2">
                                                <h5 class="font-size-15 mb-0 mr-2">Currently Complaiant ?</h5>
                                                <a href="#" class="btn btn-danger btn-rounded waves-effect waves-light mod-btn  text-white avatar-sm d-flex align-items-center justify-content-center font-size-18"><i class="far fa-envelope"></i></a>
                                            </div>
                                        </div> --}}
                                        <div class="personel-last">
                                     <div class="comp-fix">

                                        <div class="dropdown">
                                            <button type="button" class="btn btn-light dropdown-toggle w-f-150" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="mdi mdi-dots-horizontal-circle-outline mr-1"></i> <span class="d-none d-sm-inline-block">Status <i class="mdi mdi-chevron-down"></i></span></button>
                                            <div class="dropdown-menu dropdown-menu-right" style="">

                                                <a class="dropdown-item" href="#">
                                                   01
                                                <a class="dropdown-item" href="#">
                                                   02
                                                </a>
                                                <a class="dropdown-item" href="#">
                                                  03
                                                </a>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                    </div>
                                    <div class="table-responsive mt-4">
                                        <table class="table table-striped text-center">
                                        <thead>
                                            <tr>
                                                <th>Bachelor's Degree</th>
                                                <th>Master's Degree	</th>
                                                <th>Privacy and Data Protection Courses</th>
                                                <th >Professional Development</th>
                                                {{-- <th>Device Compliance</th> --}}
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><i class="far fa-check-circle text-success font-size-18"></i></td>
                                                <td><i class="far fa-times-circle text-success font-size-18"></i></td>
                                                <td ><i class="far fa-check-circle text-danger font-size-18"></i></td>
                                                <td><i class="far fa-times-circle text-danger font-size-18"></i></td>
                                                {{-- <td ><i class="far fa-check-circle text-success font-size-18"></i></td> --}}
                                            </tr>
                                        </tbody>
                                    </table>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach

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


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

</div>






<div class="right-bar right-bar-xl">
    <div data-simplebar class="h-100">
        <div class="rightbar-title px-3 py-4">
            <a href="javascript:void(0);" class="right-bar-toggle float-right">
                <i class="mdi mdi-close noti-icon"></i>
            </a>
            <h5 class="m-0">View Audit</h5>
        </div>

        <div class="px-3 pt-4">

            <div class="connection-block-wrapper">
                <div class="up-form-sec">
            <h2 class="card-title mb-2 ">Details</h2>
       <hr>
        <div class="up-form-sec-body">
            <div class="d-flex justify-content-between">
            <div>
            <h5 class="card-title">First Name</h5>
            <span class="card-title-desc" id="firstname">John </span>
            </div>
            <div>
            <h5 class="card-title">Last Name</h5>
            <span class="card-title-desc" id="lastname"> Doe</span>
            </div>
            </div>
            <hr>
            <div>
            <h5 class="card-title">Email</h5>
            <span class="card-title-desc" id="email">John@gmail.com </span>
            </div>
            <hr>
            <div>
                <h5 class="card-title">Qualification</h5>
                <span class="card-title-desc d-block mb-1"><i class="far fa-check-circle text-success"></i> Bachelor's Degree </span>
                 <span class="card-title-desc d-block mb-1"><i class="far fa-times-circle text-danger"></i> Master's Degree</span>
                  <span class="card-title-desc d-block mb-1"><i class="far fa-check-circle text-success"></i> Privacy and Data Protection Courses</span>
                  <span class="card-title-desc d-block"><i class="far fa-times-circle text-danger"></i> Professional Development</span>
                </div>
                <hr>
            <div>
            <h5 class="card-title">Certification</h5>
            <span class="card-title-desc d-block mb-1"><i class="far fa-check-circle text-success"></i> Certified Information Privacy Professional (CIPP)</span>
             <span class="card-title-desc d-block mb-1"><i class="far fa-times-circle text-danger"></i> Certified Information Systems Auditor (CISA)</span>
              <span class="card-title-desc d-block mb-1"><i class="far fa-times-circle text-danger"></i> Certified Internal Auditor (CIA)</span>
              <span class="card-title-desc d-block"><i class="far fa-check-circle text-success"></i> ISO 27001 Lead Auditor:</span>
            </div>

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


            {{-- <div class="d-flex justify-content-end gap-10 border-top pt-4 pb-4 mt-4">
                <a href="#" class="btn btn-outline-primary btn-rounded waves-effect waves-light px-5 py-2">Cancel</a>
                <a href="#" class="btn btn-primary btn-rounded waves-effect waves-light px-5 py-2">Save</a>
            </div> --}}
        </div>



    </div> <!-- end slimscroll-menu-->
</div>
@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" ></script>
<script>
    $(document).ready(function() {
        // var app_url = "http://127.0.0.1:8000"
        $('body').on('click', '.ext-audit', function() {
            var id = $(this).attr('data-id')
            var app_url = "