@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">Monitoring</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">Monitoring</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 Controls</h4>
                <hr>
                <h6 class="mt-4">Top Result</h6>

                <div class="mail-list">
                    <a href="#" class="active"><i class="mdi mdi-minus-circle-outline mr-2"></i>Failed</a>
                    <a href="#"><i class="mdi mdi-plus-circle-outline mr-2"></i> Passed</a>
                    <a href="#"><i class="mdi mdi-information-outline mr-2"></i>Error</a>
                </div>
                 <h6 class="mt-4">Category</h6>
                <div class="mail-list ">
                    <a href="#" class="active"><i class="mdi mdi-file-check-outline mr-2"></i> Policy</a>
                    <a href="#"><i class="mdi mdi-cube-outline mr-2"></i>In Data</a>
                    <a href="#"><i class="mdi mdi-buddhism mr-2"></i>Devca</a>
                    <a href="#"><i class="mdi mdi-buffer mr-2"></i>Investive</a>
                    <a href="#" class="align-items-center"><i class="bx bx-user mr-2"></i>Identy Provider</a>
                </div>

            </div>
            <!-- End Left sidebar -->


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

                <div class="card">
                    <div class="btn-toolbar p-3" role="toolbar">
                        <div class="mr-2 mb-2 mb-sm-0 w-100 d-flex align-items-center">
                            <!-- <button type="button" class="btn btn-primary waves-light waves-effect"><i class="bx bx-list-ol"></i> All Tests</button> -->
                            <button type="button" class="btn btn-primary btn-rounded waves-effect waves-light mod-btn text-white mr-2"  data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2"><i class="bx bx-download"></i></button>
                            <div class="input-group cnt-frm w-100">
                                <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>
                        </div>
                    </div>

                    <div class="card-body connection-block-wrapper">
                        <div class="row ">
                            <div class="col-lg-4 col-md-4 col-12">
                                <div class="card mini-stats-wid">
                                    <div class="card-body">

                                        <div class="d-flex flex-wrap">
                                            <div class="mr-3">
                                                <h5 class="mb-2">35%</h5>
                                                <p class="text-muted mb-0">Of Tests Passed</p>
                                            </div>

                                            <div class="avatar-sm ml-auto">
                                                <div class="avatar-title bg-light rounded-circle text-primary font-size-20">
                                                    <i class="mdi mdi-flower-poppy"></i>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-12">
                                <div class="card mini-stats-wid">
                                    <div class="card-body">

                                        <div class="d-flex flex-wrap">
                                            <div class="mr-3">
                                                <h5 class="mb-2">60</h5>
                                                <p class="text-muted mb-0">Failed Tests</p>
                                            </div>

                                            <div class="avatar-sm ml-auto">
                                                <div class="avatar-title bg-light rounded-circle text-primary font-size-20">
                                                    <i class="mdi mdi-minus-circle text-danger"></i>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-12">
                                <div class="card mini-stats-wid">
                                    <div class="card-body">

                                        <div class="d-flex flex-wrap">
                                            <div class="mr-3">
                                                <h5 class="mb-2">33</h5>
                                                <p class="text-muted mb-0">Passed Tests</p>
                                            </div>

                                            <div class="avatar-sm ml-auto">
                                                <div class="avatar-title bg-light rounded-circle text-primary font-size-20">
                                                    <i class="mdi mdi-check-circle text-success"></i>
                                                </div>
                                            </div>
                                        </div>

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

                        </div>

                        <div class="table-responsive policy-table mb-0 mt-3" data-pattern="priority-columns">
                            <table id="tech-companies-1" class="table table-striped">
                                <tbody>
                                    <tr>
                                        <td>
                                            <div class="custom-control custom-switch " dir="ltr">
                                                <input type="checkbox" class="custom-control-input" id="customSwitch1" checked="">
                                                <label class="custom-control-label" for="customSwitch1"></label>
                                            </div>
                                        </td>
                                        <td class="right-bar-toggle">Password Manager Records on Employe Computers</td>
                                        <td class="text-right"><span class="text-muted">Last Tested 2 hours ago</span><i class="mdi mdi-buddhism ml-2"></i></td>
                                        <td class="text-right"><a href="#" class="btn btn-primary">Fix Now</a></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="custom-control custom-switch " dir="ltr">
                                                <input type="checkbox" class="custom-control-input" id="customSwitch2" >
                                                <label class="custom-control-label" for="customSwitch2"></label>
                                            </div>
                                        </td>
                                        <td>MFA on Identify Provider</td>
                                        <td class="text-right"><span class="text-muted">Last Tested 2 hours ago</span><i class="bx bx-user ml-2"></i></td>
                                        <td class="text-right"><a href="#" class="btn btn-primary">Fix Now</a></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="custom-control custom-switch " dir="ltr">
                                                <input type="checkbox" class="custom-control-input" id="customSwitch3" >
                                                <label class="custom-control-label" for="customSwitch3"></label>
                                            </div>
                                        </td>
                                        <td>Data Recently Policy</td>
                                        <td class="text-right"><span class="text-muted">Last Tested 2 hours ago</span><i class="mdi mdi-file-check-outline ml-2"></i></td>
                                        <td class="text-right"><a href="#" class="btn btn-primary">Fix Now</a></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="custom-control custom-switch " dir="ltr">
                                                <input type="checkbox" class="custom-control-input" id="customSwitch4" >
                                                <label class="custom-control-label" for="customSwitch4"></label>
                                            </div>
                                        </td>
                                        <td>Contractor Accept the Code of Conduct</td>
                                        <td class="text-right"><span class="text-muted">Last Tested 2 hours ago</span><i class="mdi mdi-file-check-outline ml-2"></i></td>
                                        <td class="text-right"><a href="#" class="btn btn-primary">Fix Now</a></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="custom-control custom-switch " dir="ltr">
                                                <input type="checkbox" class="custom-control-input" id="customSwitch5" >
                                                <label class="custom-control-label" for="customSwitch5"></label>
                                            </div>
                                        </td>
                                        <td>Employe Background Checks</td>
                                        <td class="text-right"><span class="text-muted">Last Tested 2 hours ago</span><i class="mdi mdi-cube-outline ml-2"></i></td>
                                        <td class="text-right"><a href="#" class="btn btn-primary">Fix Now</a></td>
                                    </tr>
                                 <tr>
                                        <td>
                                            <div class="custom-control custom-switch " dir="ltr">
                                                <input type="checkbox" class="custom-control-input" id="customSwitch6" >
                                                <label class="custom-control-label" for="customSwitch6"></label>
                                            </div>
                                        </td>
                                        <td>Employe Accept the Acceptable User Policy</td>
                                        <td class="text-right"><span class="text-muted">Last Tested 2 hours ago</span><i class="mdi mdi-cube-outline ml-2"></i></td>
                                        <td class="text-right"><a href="#" class="btn btn-primary">Fix Now</a></td>
                                    </tr>

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

                    </div>

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



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

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