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

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

<!-- top block start -->
<div class="connections-main-wrapper">
    <div class="risk-assessment-top-block-section">
        <p>Assess your risk to prepare for upcoming audits and identify opportunities to improve your organization's ongoining security posture. It's a good idea to get help for each section from someone with relevent expertise in your
            organization so your risk assessment reports are as accurate as possible.</p>
        <a href="#">About Risk Assessment in Dreamztech</a>

        <!-- card block section start -->
        <div class="card-block-sec mt-3">
            <div class="row">
                @foreach ($riskgroups as $key => $val)
                <div class="col-lg-2 col-md-2 col-2">
                    <a href="#">
                        <div class="card mini-stats-wid">
                            <div class="card-body">
                                <div class="d-flex flex-wrap">
                                    <div class="mr-3">
                                        <h5 class="mb-2">{{ $val->title }}</h5>
                                        <p class="text-muted mb-0">Incomplete</p>
                                        <p class="text-muted mb-0">Unassigned</p>
                                    </div>
                                    <div class="avatar-sm ml-auto">
                                        <div class="text-primary font-size-16 text-right">
                                            <i class="mdi mdi-buddhism"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                @endforeach
                {{-- <div class="col-lg-2 col-md-2 col-2">
                    <a href="#">
                        <div class="card mini-stats-wid">
                            <div class="card-body">
                                <div class="d-flex flex-wrap">
                                    <div class="mr-3">
                                        <h5 class="mb-2">Legal</h5>
                                        <p class="text-muted mb-0">Incomplete</p>
                                        <p class="text-muted mb-0">Unassigned</p>
                                    </div>
                                    <div class="avatar-sm ml-auto">
                                        <div class="text-primary font-size-16 text-right">
                                            <i class="mdi mdi-buddhism"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-2 col-md-2 col-2">
                    <a href="#">
                        <div class="card mini-stats-wid">
                            <div class="card-body">
                                <div class="d-flex flex-wrap">
                                    <div class="mr-3">
                                        <h5 class="mb-2">HR</h5>
                                        <p class="text-muted mb-0">Incomplete</p>
                                        <p class="text-muted mb-0">Unassigned</p>
                                    </div>
                                    <div class="avatar-sm ml-auto">
                                        <div class="text-primary font-size-16 text-right">
                                            <i class="mdi mdi-buddhism"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-2 col-md-2 col-2">
                    <a href="#">
                        <div class="card mini-stats-wid">
                            <div class="card-body">
                                <div class="d-flex flex-wrap">
                                    <div class="mr-3">
                                        <h5 class="mb-2">Info Sec</h5>
                                        <p class="text-muted mb-0">Incomplete</p>
                                        <p class="text-muted mb-0">Unassigned</p>
                                    </div>
                                    <div class="avatar-sm ml-auto">
                                        <div class="text-primary font-size-16 text-right">
                                            <i class="mdi mdi-buddhism"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-2 col-md-2 col-2">
                    <a href="#">
                        <div class="card mini-stats-wid">
                            <div class="card-body">
                                <div class="d-flex flex-wrap">
                                    <div class="mr-3">
                                        <h5 class="mb-2">Finance</h5>
                                        <p class="text-muted mb-0">Incomplete</p>
                                        <p class="text-muted mb-0">Unassigned</p>
                                    </div>
                                    <div class="avatar-sm ml-auto">
                                        <div class="text-primary font-size-16 text-right">
                                            <i class="mdi mdi-buddhism"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-2 col-md-2 col-2">
                    <a href="#">
                        <div class="card mini-stats-wid">
                            <div class="card-body">
                                <div class="d-flex flex-wrap">
                                    <div class="mr-3">
                                        <h5 class="mb-2">Sales</h5>
                                        <p class="text-muted mb-0">Incomplete</p>
                                        <p class="text-muted mb-0">Unassigned</p>
                                    </div>
                                    <div class="avatar-sm ml-auto">
                                        <div class="text-primary font-size-16 text-right">
                                            <i class="mdi mdi-buddhism"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div> --}}
            </div>
        </div>
        <!-- card block section end -->

        <!-- lower download section start -->
        <div class="download-btn-sec mt-4 text-center">
            <p class="mb-2">Your report includes information from scetions you complete.</p>
            <a href="#" class="btn btn-primary"><i class="mdi mdi-download"></i> Download Report</a>
        </div>
        <!-- lower download section start -->
    </div>
</div>
<!-- top block end -->

<!-- lower block start -->
<div class="legal-risk-asse-lower-sec mt-4">
    <div class="card">
        <div class="card-body text-center">
            <div class="legal-risk-txt-zone">
                <h2>Legal Risk Assessment</h2>
                <p class="mt-3 mb-5">9 Total Questions ( ~ 10 min to complete )</p>
                <div class="btn-section">
                    <a href="#" class="btn btn-primary btn-begin">Begin</a> press Enter
                </div>
            </div>
        </div>
    </div>
</div>
<!-- lower block end -->
@endsection