@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">Dashboard</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">Dashboard</li>
                    </ol>
                </div>

            </div>



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

    <div class="row">
        <div class="col-lg-8 col-md-8 col-12">
            <div class="card">
                <div class="card-body connection-block-wrapper dashboard-blog">
                    <h2 class="font-size-18 ">Readiness overview</h2>

                    <div class="row">
                        <div class="col-lg-4 col-md-12 col-12">
                            <div class="card mt-4">
                                <div class="card-body">
                                    <div class="media">
                                        <div class="mr-3">
                                            <img src="{{ asset('/images/users/avatar-3.jpg') }}" alt=""
                                                class="avatar-sm rounded-circle img-thumbnail">
                                        </div>
                                        <div class="media-body">
                                            <div class="media">
                                                <div class="media-body">
                                                    <div class="text-muted">
                                                        <h5 class="mb-1">ISO 27001-2022</h5>
                                                        <div class="progress mb-2">
                                                            <div class="progress-bar bg-info" role="progressbar"
                                                                style="width: 50%" aria-valuenow="50" aria-valuemin="0"
                                                                aria-valuemax="100"></div>
                                                        </div>
                                                        <p class="mb-0">0% Ready</p>
                                                    </div>

                                                </div>

                                            </div>


                                            <hr>

                                            <div class="row">
                                                <div class="col-12">
                                                    <div>
                                                        <p class="text-muted   mb-2">Control Preventing Readness</p>
                                                        <h3 class="mb-0">32 <span class="text-muted ml-1 font-size-12">out
                                                                of 196 total</span></h3>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>


                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-12 col-12">
                            <div class="card mt-4">
                                <div class="card-body">
                                    <div class="media">
                                        <div class="mr-3">
                                            <img src="{{ asset('/images/users/avatar-3.jpg') }}" alt=""
                                                class="avatar-sm rounded-circle img-thumbnail">
                                        </div>
                                        <div class="media-body">
                                            <div class="media">
                                                <div class="media-body">
                                                    <div class="text-muted">
                                                        <h5 class="mb-1">SOC 2 2017</h5>
                                                        <div class="progress mb-2">
                                                            <div class="progress-bar bg-info" role="progressbar"
                                                                style="width: 50%" aria-valuenow="50" aria-valuemin="0"
                                                                aria-valuemax="100"></div>
                                                        </div>
                                                        <p class="mb-0">0% Ready</p>
                                                    </div>

                                                </div>

                                            </div>


                                            <hr>

                                            <div class="row">
                                                <div class="col-12">
                                                    <div>
                                                        <p class="text-muted   mb-2">Control Preventing Readness</p>
                                                        <h3 class="mb-0">133 <span
                                                                class="text-muted ml-1 font-size-12">out of 196 total</span>
                                                        </h3>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>


                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-12 col-12">
                            <div class="card mt-4">
                                <div class="card-body">
                                    <div class="media">
                                        <div class="mr-3">
                                            <img src="{{ asset('/images/users/avatar-3.jpg') }}" alt=""
                                                class="avatar-sm rounded-circle img-thumbnail">
                                        </div>
                                        <div class="media-body">
                                            <div class="media">
                                                <div class="media-body">
                                                    <div class="text-muted">
                                                        <h5 class="mb-1">GDPR</h5>
                                                        <div class="progress mb-2">
                                                            <div class="progress-bar bg-info" role="progressbar"
                                                                style="width: 50%" aria-valuenow="50" aria-valuemin="0"
                                                                aria-valuemax="100"></div>
                                                        </div>
                                                        <p class="mb-0">0% Ready</p>
                                                    </div>

                                                </div>

                                            </div>


                                            <hr>

                                            <div class="row">
                                                <div class="col-12">
                                                    <div>
                                                        <p class="text-muted   mb-2">Control Preventing Readness</p>
                                                        <h3 class="mb-0">35 <span class="text-muted ml-1 font-size-12">out
                                                                of 39 total</span></h3>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>


                                    </div>

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

            </div>
            <div class="card">
                <div class="card-body connection-block-wrapper">
                    <h2 class="font-size-18 ">Test Trends</h2>
                    <div class="table-responsive policy-table mb-0" data-pattern="priority-columns">
                        <table id="tech-companies-1" class="table table-striped">
                            <tbody>
                                <tr>
                                    <td>Total falling Test</td>
                                    <td class="text-right">60</td>
                                    <td class="text-right">3%</td>
                                </tr>
                                <hr>
                                <tr>
                                    <td><strong>Category</strong></td>
                                    <td class="text-right"><strong>Falling Tests</strong></td>
                                    <td class="text-right"><strong><i
                                                class="mdi mdi-alert-circle font-size-20"></i></strong></td>
                                </tr>
                                <tr>
                                    <td><i class="mdi mdi-file-check-outline mr-1"></i> Policy</td>
                                    <td class="text-right">26</td>
                                    <td class="text-right">0% <i class="mdi mdi-chevron-right ml-1"></i></td>
                                </tr>
                                <tr>
                                    <td><i class="mdi mdi-cube-outline mr-1"></i> In Dreata</td>
                                    <td class="text-right">16</td>
                                    <td class="text-right">0% <i class="mdi mdi-chevron-right ml-1"></i></td>
                                </tr>
                                <tr>
                                    <td><i class="mdi mdi-youtube-tv mr-1"></i> Overvisibility</td>
                                    <td class="text-right">5</td>
                                    <td class="text-right">0% <i class="mdi mdi-chevron-right ml-1"></i></td>
                                </tr>
                                <tr>
                                    <td><i class="mdi mdi-buddhism mr-1"></i> Devica</td>
                                    <td class="text-right">4</td>
                                    <td class="text-right">0% <i class="mdi mdi-chevron-right ml-1"></i></td>
                                </tr>
                                <tr>
                                    <td><i class="bx bx-user mr-1"></i> Identity Provider</td>
                                    <td class="text-right">1</td>
                                    <td class="text-right">0% <i class="mdi mdi-chevron-right ml-1"></i></td>
                                </tr>
                                <tr>
                                    <td><i class="mdi mdi-map-marker-outline mr-1"></i> Tracking</td>
                                    <td class="text-right">0</td>
                                    <td class="text-right">0% <i class="mdi mdi-chevron-right ml-1"></i></td>
                                </tr>
                                <tr>
                                    <td><i class="mdi mdi-merge mr-1"></i> Version Control</td>
                                    <td class="text-right">0</td>
                                    <td class="text-right">0% <i class="mdi mdi-chevron-right ml-1"></i></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-lg-6 col-12">
                    <div class="card">
                        <div class="card-body">
                            <h2 class="font-size-18 ">Policy Status</h2>
                            <div class="text-center mt-3">
                                <input class="knob" data-width="150" data-height="150" data-linecap=round
                                    data-fgColor="#4854a4" value="80" data-skin="tron" data-angleOffset="180"
                                    data-readOnly=true data-thickness=".1" />
                            </div>
                            <p><i class="dripicons-dot mr-1 text-success font-weight-bold"></i> Active <strong>22</strong>
                            </p>
                            <p><i class="dripicons-dot mr-1 text-success font-weight-bold"></i> Renews Soon
                                <strong>0</strong></p>
                            <p class="mb-0"><i class="dripicons-dot mr-1 text-success font-weight-bold"></i> Noods
                                Approval <strong>0</strong></p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-lg-6 col-12">
                    <div class="card">
                        <div class="card-body">
                            <h2 class="font-size-18 ">Vendor Risk</h2>
                            <div class="text-center mt-3">
                                <input class="knob" data-width="150" data-height="150" data-linecap=round
                                    data-fgColor="#4854a4" value="80" data-skin="tron" data-angleOffset="180"
                                    data-readOnly=true data-thickness=".1" />
                            </div>
                            <p class="text-center mt-3">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat
                                similique adipisci, dolorum porro fugit ut magni labore. </p>
                            <a href="#" class="d-block text-center">Add Vendors</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-12">
            <div class="card">
                <div class="card-body">
                    <h2 class="font-size-18 ">Task forecast</h2>
                    <div class="text-center mt-3 mb-3">
                        <input class="knob" data-width="150" data-height="150" data-linecap=round
                            data-fgColor="#4854a4" value="80" data-skin="tron" data-angleOffset="180"
                            data-readOnly=true data-thickness=".1" />
                    </div>
                    <hr>

                    <div class="mt-4">
                        <h2 class="font-size-18 ">Task list</h2>
                        <div data-simplebar style="max-height: 410px;">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item py-3">
                                    <div class="media">
                                        <div class="avatar-xs mr-3">
                                            <div class="avatar-title rounded-circle bg-light text-primary">
                                                <i class="bx bxs-user"></i>
                                            </div>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="font-size-14 mb-1">Acceptable Use Policy</h5>
                                            <p class="text-muted mb-0">Due May 15 , 2024</p>

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

                                <li class="list-group-item py-3">
                                    <div class="media">
                                        <div class="avatar-xs mr-3">
                                            <div class="avatar-title rounded-circle bg-light text-primary">
                                                <i class="bx bxs-user"></i>
                                            </div>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="font-size-14 mb-1">Asset Management Policy</h5>
                                            <p class="text-muted mb-0">Due May 15 , 2024</p>


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

                                <li class="list-group-item py-3">
                                    <div class="media">
                                        <div class="avatar-xs mr-3">
                                            <div class="avatar-title rounded-circle bg-light text-primary">
                                                <i class="bx bxs-user"></i>
                                            </div>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="font-size-14 mb-1">Backup Policy</h5>
                                            <p class="text-muted mb-0">Due May 25 , 2024</p>

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

                                <li class="list-group-item py-3">
                                    <div class="media">
                                        <div class="avatar-xs mr-3">
                                            <div class="avatar-title rounded-circle bg-light text-primary">
                                                <i class="bx bxs-user"></i>
                                            </div>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="font-size-14 mb-1">Password Policy</h5>
                                            <p class="text-muted mb-0">Due May 24 , 2024</p>

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

                                <li class="list-group-item py-3">
                                    <div class="media">
                                        <div class="avatar-xs mr-3">
                                            <div class="avatar-title rounded-circle bg-light text-primary">
                                                <i class="bx bxs-user"></i>
                                            </div>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="font-size-14 mb-1">System Assect Control</h5>
                                            <p class="text-muted mb-0">Due May 24 , 2024</p>

                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item py-3">
                                    <div class="media">
                                        <div class="avatar-xs mr-3">
                                            <div class="avatar-title rounded-circle bg-light text-primary">
                                                <i class="bx bxs-user"></i>
                                            </div>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="font-size-14 mb-1">Information Security Policy</h5>
                                            <p class="text-muted mb-0">Due May 1 , 2024</p>

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

                                <li class="list-group-item py-3">
                                    <div class="media">
                                        <div class="avatar-xs mr-3">
                                            <div class="avatar-title rounded-circle bg-light text-primary">
                                                <i class="bx bxs-user"></i>
                                            </div>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="font-size-14 mb-1">Password Policy</h5>
                                            <p class="text-muted mb-0">Due May 24 , 2024</p>

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

                                <li class="list-group-item py-3">
                                    <div class="media">
                                        <div class="avatar-xs mr-3">
                                            <div class="avatar-title rounded-circle bg-light text-primary">
                                                <i class="bx bxs-user"></i>
                                            </div>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="font-size-14 mb-1">System Assect Control</h5>
                                            <p class="text-muted mb-0">Due May 24 , 2024</p>

                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item py-3">
                                    <div class="media">
                                        <div class="avatar-xs mr-3">
                                            <div class="avatar-title rounded-circle bg-light text-primary">
                                                <i class="bx bxs-user"></i>
                                            </div>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="font-size-14 mb-1">Information Security Policy</h5>
                                            <p class="text-muted mb-0">Due May 1 , 2024</p>

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

                            </ul>

                        </div>
                        <a href="#" class="mt-3 d-block text-center">View all Task</a>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection