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

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

<div class="row">
    @if(count($data) > 0)
        @foreach($data as $key => $val)
            <div class="col-xl-3 col-sm-6 col-12">
                <div class="card text-center">
                    <div class="card-body">
                        <div class="d-flex align-items-center gap-10 mb-3">
                            <div class="avatar-sm">
                                <span class="avatar-title rounded-circle bg-soft-primary text-primary font-size-16">
                                    P
                                </span>
                            </div>
                            <h5 class="font-size-16 mb-0"><a href="javascript:void(0);" class="text-dark">{{$val->name}}</a></h5>
                        </div>
                        <div>
                            <div style="display:inline;width:150px;height:150px;"><input class="knob" data-width="150" data-height="150" data-linecap="round" data-fgcolor="#c21807" value="0" data-skin="tron" data-angleoffset="180" data-readonly="true" data-thickness=".1" readonly="readonly" style="width: 79px; height: 50px; position: absolute; vertical-align: middle; margin-top: 50px; margin-left: -114px; border: 0px; background: none; font: bold 30px Arial; text-align: center; color: rgb(194, 24, 7); padding: 0px; appearance: none;"></div>
                            <small class="d-block text-center mt-2">Ready</small>
                        </div>
                    </div>
                    <div class="card-footer bg-transparent border-top">
                        <div class="d-flex font-size-20 frm-footer">
                            <a href="{{ route('framework-details', [$val->id, 'tab'=>'Accountability']) }}">
                            <div class="flex-fill d-flex align-items-center gap-10">
                                <div class="round-bg-icon badge-soft-success">
                                    <i class="bx bx-list-check"></i>
                                </div>
                                <div class="text-left">
                                    @php($frameworkModel = new \App\Models\Framework())
                                    @php($req_count = $frameworkModel->getRequirementCounts($val->id))
                                    @php($control_count = $frameworkModel->getControlCounts($val->id))
                                <h5 class="mb-0 font-size-16">0/{{$req_count}}</h5>
                                <h6 class="mb-0">Requirements</h6>
                                </div>
                            </div>
                            </a>
                            <div class="flex-fill d-flex align-items-center gap-10 justify-content-end">
                                <div class="round-bg-icon badge-soft-info">
                                    <i class="bx bx-slider-alt"></i>
                                </div>
                                <div class="text-left">
                                <h5 class="mb-0 font-size-16">{{ $control_count }}</h5>
                                <h6 class="mb-0">Controls Mapped</h6>
                                </div>
                            </div>
                            <!-- <div class="">
                                <a href="javascript:void(0);" class="btn btn-primary"><i class="bx bx-plus"></i> Learn More</a>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    @endif
    <div class="col-xl-3 col-sm-6 col-12"></div>
    <div class="col-xl-3 col-sm-6 col-12"></div>
    <div class="col-12"><hr></div>
    <div class="col-12 mt-2">
        <h2 class="card-title mb-5">You may like to perfom following action</h2>
        <div class="row">
            <div class="col-xl-3 col-sm-4 col-12">
                <div class="media align-items-center mb-4 text-disabled">
                    <div class="avatar-sm align-self-center mr-3">
                        <span class="avatar-title rounded-circle bg-soft-success text-success">
                            <i class="bx bx-home-circle font-size-20"></i>
                        </span>
                    </div>
                    <div class="media-body overflow-hidden">
                        <h5 class="text-truncate font-size-16 mb-1">Dashboard</h5>
                        <a href="{{ route('client.home') }}" class="d-flex align-items-center text-truncate mb-0 font-size-12 cursor-pointer">Explore <i class="bx bx-chevron-right font-size-15"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-4 col-12">
                <div class="media align-items-center mb-4 text-disabled">
                    <div class="avatar-sm align-self-center mr-3">
                        <span class="avatar-title rounded-circle bg-soft-warning text-warning">
                            <i class="bx bx-flag font-size-20"></i>
                        </span>
                    </div>
                    <div class="media-body overflow-hidden">
                        <h5 class="text-truncate font-size-16 mb-1">Task</h5>
                        <a href="{{ url('/home/tasks') }}" class="d-flex align-items-center text-truncate mb-0 font-size-12 cursor-pointer">Explore <i class="bx bx-chevron-right font-size-15"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-4 col-12">
                <div class="media align-items-center mb-4">
                    <div class="avatar-sm align-self-center mr-3">
                        <span class="avatar-title rounded-circle bg-soft-warning text-warning">
                            <i class="bx bx-customize font-size-20"></i>
                        </span>
                    </div>
                    <div class="media-body overflow-hidden">
                        <h5 class="text-truncate font-size-16 mb-1">Controls</h5>
                        <a href="{{ route('controls-in-scopes.index') }}" class="d-flex align-items-center text-truncate mb-0 font-size-12 cursor-pointer">Explore <i class="bx bx-chevron-right font-size-15"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-4 col-12">
                <div class="media align-items-center mb-4">
                    <div class="avatar-sm align-self-center mr-3">
                        <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                            <i class="bx bx-book-content font-size-20"></i>
                        </span>
                    </div>
                    <div class="media-body overflow-hidden">
                        <h5 class="text-truncate font-size-16 mb-1">Framework</h5>
                        <a href="{{ route('framework.index') }}" class="d-flex align-items-center text-truncate mb-0 font-size-12 cursor-pointer">Explore <i class="bx bx-chevron-right font-size-15"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-4 col-12">
                <div class="media align-items-center mb-4 text-disabled">
                    <div class="avatar-sm align-self-center mr-3">
                        <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                            <i class="bx bx-shape-circle font-size-20"></i>
                        </span>
                    </div>
                    <div class="media-body overflow-hidden">
                        <h5 class="text-truncate font-size-16 mb-1">Monitoring</h5>
                        <a href="{{ url('/home/monitoring') }}" class="d-flex align-items-center text-truncate mb-0 font-size-12 cursor-pointer">Explore <i class="bx bx-chevron-right font-size-15"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-4 col-12">
                <div class="media align-items-center mb-4 text-disabled">
                    <div class="avatar-sm align-self-center mr-3">
                        <span class="avatar-title rounded-circle bg-soft-info text-info">
                            <i class="bx bx-calendar-check font-size-20"></i>
                        </span>
                    </div>
                    <div class="media-body overflow-hidden">
                        <h5 class="text-truncate font-size-16 mb-1">Event Tracking</h5>
                        <a href="{{ url('/home/event-tracking') }}" class="d-flex align-items-center text-truncate mb-0 font-size-12 cursor-pointer">Explore <i class="bx bx-chevron-right font-size-15"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-4 col-12">
                <div class="media align-items-center mb-4 text-disabled">
                    <div class="avatar-sm align-self-center mr-3">
                        <span class="avatar-title rounded-circle bg-soft-success text-success">
                            <i class="bx bx-file font-size-20"></i>
                        </span>
                    </div>
                    <div class="media-body overflow-hidden">
                        <h5 class="text-truncate font-size-16 mb-1">Report & Docs</h5>
                        <a href="javascript:void(0);" class="d-flex align-items-center text-truncate mb-0 font-size-12 cursor-pointer">Explore <i class="bx bx-chevron-right font-size-15"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-4 col-12">
                <div class="media align-items-center mb-4">
                    <div class="avatar-sm align-self-center mr-3">
                        <span class="avatar-title rounded-circle bg-soft-info text-info">
                            <i class="bx bx-check-shield font-size-20"></i>
                        </span>
                    </div>
                    <div class="media-body overflow-hidden">
                        <h5 class="text-truncate font-size-16 mb-1">Policy Center</h5>
                        <a href="{{ url('/home/policy-center') }}" class="d-flex align-items-center text-truncate mb-0 font-size-12 cursor-pointer">Explore <i class="bx bx-chevron-right font-size-15"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-4 col-12">
                <div class="media align-items-center mb-4">
                    <div class="avatar-sm align-self-center mr-3">
                        <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                            <i class="bx bx-user font-size-20"></i>
                        </span>
                    </div>
                    <div class="media-body overflow-hidden">
                        <h5 class="text-truncate font-size-16 mb-1">Personnel</h5>
                        <a href="{{ url('/home/personnel') }}" class="d-flex align-items-center text-truncate mb-0 font-size-12 cursor-pointer">Explore <i class="bx bx-chevron-right font-size-15"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-4 col-12">
                <div class="media align-items-center mb-4">
                    <div class="avatar-sm align-self-center mr-3">
                        <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                            <i class="bx bx-file-find font-size-20"></i>
                        </span>
                    </div>
                    <div class="media-body overflow-hidden">
                        <h5 class="text-truncate font-size-16 mb-1">External Auditor</h5>
                        <a href="{{ url('/home/external-audit') }}" class="d-flex align-items-center text-truncate mb-0 font-size-12 cursor-pointer">Explore <i class="bx bx-chevron-right font-size-15"></i></a>
                    </div>
                </div>
            </div>
             <div class="col-xl-3 col-sm-4 col-12">
                <div class="media align-items-center mb-4">
                    <div class="avatar-sm align-self-center mr-3">
                        <span class="avatar-title rounded-circle bg-soft-info text-info">
                            <i class="bx bx-check-shield font-size-20"></i>
                        </span>
                    </div>
                    <div class="media-body overflow-hidden">
                        <h5 class="text-truncate font-size-16 mb-1">Audit Planing</h5>
                        <a href="{{ url('/home/audit-planing') }}" class="d-flex align-items-center text-truncate mb-0 font-size-12 cursor-pointer">Explore <i class="bx bx-chevron-right font-size-15"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-4 col-12">
                <div class="media align-items-center mb-4 text-disabled">
                    <div class="avatar-sm align-self-center mr-3">
                        <span class="avatar-title rounded-circle bg-soft-warning text-warning">
                            <i class="bx bx-check-square font-size-20"></i>
                        </span>
                    </div>
                    <div class="media-body overflow-hidden">
                        <h5 class="text-truncate font-size-16 mb-1">Audit Hubs</h5>
                        <a href="javascript:void(0);" class="d-flex align-items-center text-truncate mb-0 font-size-12 cursor-pointer">Explore <i class="bx bx-chevron-right font-size-15"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-4 col-12">
                <div class="media align-items-center mb-4">
                    <div class="avatar-sm align-self-center mr-3">
                        <span class="avatar-title rounded-circle bg-soft-danger text-danger">
                            <i class="bx bx-error font-size-22"></i>
                        </span>
                    </div>
                    <div class="media-body overflow-hidden">
                        <h5 class="text-truncate font-size-16 mb-1">Risk Assessment</h5>
                        <a href="{{ url('/home/risk-assessment') }}" class="d-flex align-items-center text-truncate mb-0 font-size-12 cursor-pointer">Explore <i class="bx bx-chevron-right font-size-15"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-4 col-12">
                <div class="media align-items-center mb-4 text-disabled">
                    <div class="avatar-sm align-self-center mr-3">
                        <span class="avatar-title rounded-circle bg-soft-warning text-warning">
                            <i class="bx bx-briefcase-alt font-size-20"></i>
                        </span>
                    </div>
                    <div class="media-body overflow-hidden">
                        <h5 class="text-truncate font-size-16 mb-1">Vendors</h5>
                        <a href="{{ url('/home/vendors') }}" class="d-flex align-items-center text-truncate mb-0 font-size-12 cursor-pointer">Explore <i class="bx bx-chevron-right font-size-15"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-4 col-12">
                <div class="media align-items-center mb-4 text-disabled">
                    <div class="avatar-sm align-self-center mr-3">
                        <span class="avatar-title rounded-circle bg-soft-info text-info">
                            <i class="bx bx-spreadsheet font-size-20"></i>
                        </span>
                    </div>
                    <div class="media-body overflow-hidden">
                        <h5 class="text-truncate font-size-16 mb-1">Assets</h5>
                        <a href="{{ url('/home/assets') }}" class="d-flex align-items-center text-truncate mb-0 font-size-12 cursor-pointer">Explore <i class="bx bx-chevron-right font-size-15"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-4 col-12">
                <div class="media align-items-center mb-4 text-disabled">
                    <div class="avatar-sm align-self-center mr-3">
                        <span class="avatar-title rounded-circle bg-soft-success text-success">
                            <i class="bx bx-link-alt font-size-20"></i>
                        </span>
                    </div>
                    <div class="media-body overflow-hidden">
                        <h5 class="text-truncate font-size-16 mb-1">Connections</h5>
                        <a href="{{ url('/home/connections') }}" class="d-flex align-items-center text-truncate mb-0 font-size-12 cursor-pointer">Explore <i class="bx bx-chevron-right font-size-15"></i></a>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-sm-4 col-12">
                <div class="media align-items-center mb-4 ">
                    <div class="avatar-sm align-self-center mr-3">
                        <span class="avatar-title rounded-circle bg-soft-success text-success">
                            <i class="bx bx-link-alt font-size-20"></i>
                        </span>
                    </div>
                    <div class="media-body overflow-hidden">
                        <h5 class="text-truncate font-size-16 mb-1">Perfomance Management</h5>
                        <a target="_blank" href="http://www.reydey.com/QBIXPMS" class="d-flex align-items-center text-truncate mb-0 font-size-12 cursor-pointer">Explore <i class="bx bx-chevron-right font-size-15"></i></a>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-sm-4 col-12">
                <div class="media align-items-center mb-4 ">
                    <div class="avatar-sm align-self-center mr-3">
                        <span class="avatar-title rounded-circle bg-soft-success text-success">
                            <i class="bx bx-link-alt font-size-20"></i>
                        </span>
                    </div>
                    <div class="media-body overflow-hidden">
                        <h5 class="text-truncate font-size-16 mb-1">MSCOA and Budgeting</h5>
                        <a target="_blank" href="http://102.130.113.5:9511/tm1web/" class="d-flex align-items-center text-truncate mb-0 font-size-12 cursor-pointer">Explore <i class="bx bx-chevron-right font-size-15"></i></a>
                    </div>
                </div>
            </div>

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

<div class="quick-start-wrapper d-none">
    <!--card starts-->
    <div class="card quick-start-row mb-3">
        <div class="card-body position-relative" data-toggle="collapse" href="#collapseExample1" aria-expanded="false" aria-controls="collapseExample">
            <div class="d-flex align-items-center">
                <div class="flex-grow-1">
                    <div class="d-flex gap-10 align-items-center">
                        <div><i class="bx bx-chip font-size-30"></i></div>
                        <h5 class="mb-0">Connect your system</h5>
                    </div>
                </div>
                <div class="d-flex align-items-center gap-10">
                    <h4 class="font-size-14 mb-0"><span class="text-success">8/8</span> Completed</h4>
                    <i class="bx bx-chevron-right font-size-24"></i>
                </div>
            </div>
            <div class="progress position-absolute w-100 left-0 right-0 bottom-0">
                <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
            </div>
        </div>
        <i class="bx bxs-check-circle text-success font-size-24 check-icon"></i>

        <div class="collapse collapsed" id="collapseExample1">
            <div class="card card-body mb-0 quick-collapse-body px-5">
                <div class="row align-items-center">
                    <div class="col-sm-8">
                        <div>
                            <h3 class="font-size-16">Automate through connect</h3>
                            <p>Donec leo lorem, elementum ac ante non, viverra sagittis purus. Nulla auctor massa diam, at imperdiet ligula mattis vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ligula libero, egestas vel ullamcorper sollicitudin, viverra nec turpis. Mauris posuere, arcu sed hendrerit tempus, dolor quam varius justo, id tempor arcu eros id elit. Donec fringilla hendrerit tellus, eget condimentum nibh maximus eget.</p>
                            <div class="d-flex align-items-center gap-10">
                                <a href="connections.html"><button class="btn btn-primary waves-effect">Set up Connections</button></a>
                                <button class="btn btn-outline-secondary waves-effect">Learn More</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div>
                            <img src="assets/img/connect-pic.jpg" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--card ends-->
    <!--card starts-->
    <div class="card quick-start-row mb-3">
        <div class="card-body position-relative" data-toggle="collapse" href="#collapseExample2" aria-expanded="false" aria-controls="collapseExample">
            <div class="d-flex align-items-center">
                <div class="flex-grow-1">
                    <div class="d-flex gap-10 align-items-center">
                        <div><i class="bx bx-user-plus font-size-30"></i></div>
                        <h5 class="mb-0">Prepare for employee onboarding</h5>
                    </div>
                </div>
                <div class="d-flex align-items-center gap-10">
                    <h4 class="font-size-14 mb-0"><span class="text-warning">7/8</span> Completed</h4>
                    <i class="bx bx-chevron-right font-size-24"></i>
                </div>
            </div>
            <div class="progress position-absolute w-100 left-0 right-0 bottom-0">
                <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%"></div>
            </div>
        </div>

        <div class="collapse collapsed quick-clp-hover" id="collapseExample2">
            <div class="card card-body mb-0 quick-collapse-body px-5">
                <div class="row align-items-center">
                    <!--inner collapse starts-->
                    <div class="col-sm-12 py-3 quick-clp-body-hove">
                        <div class="d-flex justify-content-between align-items-center cursor-pointer"  data-toggle="collapse" href="#collapseExampleInner1" aria-expanded="false" aria-controls="collapseExample">
                            <div class="d-flex align-items-center gap-10">
                                <i class="bx bx-check-circle font-size-24 text-success"></i>
                                <h5 class="mb-0 font-size-14">Update company info</h5>
                            </div>
                            <i class="bx bx-chevron-right font-size-24"></i>
                        </div>
                        <div class="collapse collapsed" id="collapseExampleInner1">
                            <div class="card card-body mb-0 quick-collapse-body px-5">
                                <div class="row align-items-center">
                                    <div class="col-sm-8">
                                        <div>
                                            <h3 class="font-size-16">Automate through connect</h3>
                                            <p>Donec leo lorem, elementum ac ante non, viverra sagittis purus. Nulla auctor massa diam, at imperdiet ligula mattis vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ligula libero, egestas vel ullamcorper sollicitudin, viverra nec turpis. Mauris posuere, arcu sed hendrerit tempus, dolor quam varius justo, id tempor arcu eros id elit. Donec fringilla hendrerit tellus, eget condimentum nibh maximus eget.</p>
                                            <div class="d-flex align-items-center gap-10">
                                                <button class="btn btn-primary waves-effect">Set up Connections</button>
                                                <button class="btn btn-outline-secondary waves-effect">Learn More</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div>
                                            <img src="assets/img/connect-pic.jpg" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--inner collapse ends-->
                    <!--inner collapse starts-->
                    <div class="col-sm-12 py-3 quick-clp-body-hove">
                        <div class="d-flex justify-content-between align-items-center cursor-pointer"  data-toggle="collapse" href="#collapseExampleInner2" aria-expanded="false" aria-controls="collapseExample">
                            <div class="d-flex align-items-center gap-10">
                                <i class="bx bx-check-circle font-size-24 text-success"></i>
                                <h5 class="mb-0 font-size-14">Identify key personel</h5>
                            </div>
                            <i class="bx bx-chevron-right font-size-24"></i>
                        </div>
                        <div class="collapse collapsed" id="collapseExampleInner2">
                            <div class="card card-body mb-0 quick-collapse-body px-5">
                                <div class="row align-items-center">
                                    <div class="col-sm-8">
                                        <div>
                                            <h3 class="font-size-16">Automate through connect</h3>
                                            <p>Donec leo lorem, elementum ac ante non, viverra sagittis purus. Nulla auctor massa diam, at imperdiet ligula mattis vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ligula libero, egestas vel ullamcorper sollicitudin, viverra nec turpis. Mauris posuere, arcu sed hendrerit tempus, dolor quam varius justo, id tempor arcu eros id elit. Donec fringilla hendrerit tellus, eget condimentum nibh maximus eget.</p>
                                            <div class="d-flex align-items-center gap-10">
                                                <button class="btn btn-primary waves-effect">Set up Connections</button>
                                                <button class="btn btn-outline-secondary waves-effect">Learn More</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div>
                                            <img src="assets/img/connect-pic.jpg" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--inner collapse ends-->
                    <!--inner collapse starts-->
                    <div class="col-sm-12 py-3 quick-clp-body-hove">
                        <div class="d-flex justify-content-between align-items-center cursor-pointer"  data-toggle="collapse" href="#collapseExampleInner4" aria-expanded="false" aria-controls="collapseExample">
                            <div class="d-flex align-items-center gap-10">
                                <i class="bx bx-check-circle font-size-24 text-success"></i>
                                <h5 class="mb-0 font-size-14">Assign user role</h5>
                            </div>
                            <i class="bx bx-chevron-right font-size-24"></i>
                        </div>
                        <div class="collapse collapsed" id="collapseExampleInner4">
                            <div class="card card-body mb-0 quick-collapse-body px-5">
                                <div class="row align-items-center">
                                    <div class="col-sm-8">
                                        <div>
                                            <h3 class="font-size-16">Assign user role</h3>
                                            <p>Donec leo lorem, elementum ac ante non, viverra sagittis purus. Nulla auctor massa diam, at imperdiet ligula mattis vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ligula libero, egestas vel ullamcorper sollicitudin, viverra nec turpis. Mauris posuere, arcu sed hendrerit tempus, dolor quam varius justo, id tempor arcu eros id elit. Donec fringilla hendrerit tellus, eget condimentum nibh maximus eget.</p>
                                            <div class="d-flex align-items-center gap-10">
                                                <button class="btn btn-primary waves-effect">Set up Connections</button>
                                                <button class="btn btn-outline-secondary waves-effect">Learn More</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div>
                                            <img src="assets/img/connect-pic.jpg" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--inner collapse ends-->
                    <!--inner collapse starts-->
                    <div class="col-sm-12 py-3 quick-clp-body-hove">
                        <div class="d-flex justify-content-between align-items-center cursor-pointer"  data-toggle="collapse" href="#collapseExampleInner5" aria-expanded="false" aria-controls="collapseExample">
                            <div class="d-flex align-items-center gap-10">
                                <i class="bx bx-check-circle font-size-24 text-success"></i>
                                <h5 class="mb-0 font-size-14">Verify employment status of personel</h5>
                            </div>
                            <i class="bx bx-chevron-right font-size-24"></i>
                        </div>
                        <div class="collapse collapsed" id="collapseExampleInner5">
                            <div class="card card-body mb-0 quick-collapse-body px-5">
                                <div class="row align-items-center">
                                    <div class="col-sm-8">
                                        <div>
                                            <h3 class="font-size-16">Assign user role</h3>
                                            <p>Donec leo lorem, elementum ac ante non, viverra sagittis purus. Nulla auctor massa diam, at imperdiet ligula mattis vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ligula libero, egestas vel ullamcorper sollicitudin, viverra nec turpis. Mauris posuere, arcu sed hendrerit tempus, dolor quam varius justo, id tempor arcu eros id elit. Donec fringilla hendrerit tellus, eget condimentum nibh maximus eget.</p>
                                            <div class="d-flex align-items-center gap-10">
                                                <button class="btn btn-primary waves-effect">Set up Connections</button>
                                                <button class="btn btn-outline-secondary waves-effect">Learn More</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div>
                                            <img src="assets/img/connect-pic.jpg" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--inner collapse ends-->
                    <!--inner collapse starts-->
                    <div class="col-sm-12 py-3 quick-clp-body-hove">
                        <div class="d-flex justify-content-between align-items-center cursor-pointer"  data-toggle="collapse" href="#collapseExampleInner6" aria-expanded="false" aria-controls="collapseExample">
                            <div class="d-flex align-items-center gap-10">
                                <i class="bx bx-check-circle font-size-24 text-success"></i>
                                <h5 class="mb-0 font-size-14">Connect background check provider</h5>
                            </div>
                            <i class="bx bx-chevron-right font-size-24"></i>
                        </div>
                        <div class="collapse collapsed" id="collapseExampleInner6">
                            <div class="card card-body mb-0 quick-collapse-body px-5">
                                <div class="row align-items-center">
                                    <div class="col-sm-8">
                                        <div>
                                            <h3 class="font-size-16">Assign user role</h3>
                                            <p>Donec leo lorem, elementum ac ante non, viverra sagittis purus. Nulla auctor massa diam, at imperdiet ligula mattis vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ligula libero, egestas vel ullamcorper sollicitudin, viverra nec turpis. Mauris posuere, arcu sed hendrerit tempus, dolor quam varius justo, id tempor arcu eros id elit. Donec fringilla hendrerit tellus, eget condimentum nibh maximus eget.</p>
                                            <div class="d-flex align-items-center gap-10">
                                                <button class="btn btn-primary waves-effect">Set up Connections</button>
                                                <button class="btn btn-outline-secondary waves-effect">Learn More</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div>
                                            <img src="assets/img/connect-pic.jpg" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--inner collapse ends-->
                    <!--inner collapse starts-->
                    <div class="col-sm-12 py-3 quick-clp-body-hove">
                        <div class="d-flex justify-content-between align-items-center cursor-pointer"  data-toggle="collapse" href="#collapseExampleInner7" aria-expanded="false" aria-controls="collapseExample">
                            <div class="d-flex align-items-center gap-10">
                                <i class="bx bx-check-circle font-size-24 text-success"></i>
                                <h5 class="mb-0 font-size-14">Setup workstation configuration monitoring</h5>
                            </div>
                            <i class="bx bx-chevron-right font-size-24"></i>
                        </div>
                        <div class="collapse collapsed" id="collapseExampleInner7">
                            <div class="card card-body mb-0 quick-collapse-body px-5">
                                <div class="row align-items-center">
                                    <div class="col-sm-8">
                                        <div>
                                            <h3 class="font-size-16">Assign user role</h3>
                                            <p>Donec leo lorem, elementum ac ante non, viverra sagittis purus. Nulla auctor massa diam, at imperdiet ligula mattis vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ligula libero, egestas vel ullamcorper sollicitudin, viverra nec turpis. Mauris posuere, arcu sed hendrerit tempus, dolor quam varius justo, id tempor arcu eros id elit. Donec fringilla hendrerit tellus, eget condimentum nibh maximus eget.</p>
                                            <div class="d-flex align-items-center gap-10">
                                                <button class="btn btn-primary waves-effect">Set up Connections</button>
                                                <button class="btn btn-outline-secondary waves-effect">Learn More</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div>
                                            <img src="assets/img/connect-pic.jpg" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--inner collapse ends-->
                    <!--inner collapse starts-->
                    <div class="col-sm-12 py-3 quick-clp-body-hove">
                        <div class="d-flex justify-content-between align-items-center cursor-pointer"  data-toggle="collapse" href="#collapseExampleInner8" aria-expanded="false" aria-controls="collapseExample">
                            <div class="d-flex align-items-center gap-10">
                                <i class="bx bx-check-circle font-size-24 text-success"></i>
                                <h5 class="mb-0 font-size-14">Setup security awareness training</h5>
                            </div>
                            <i class="bx bx-chevron-right font-size-24"></i>
                        </div>
                        <div class="collapse collapsed" id="collapseExampleInner8">
                            <div class="card card-body mb-0 quick-collapse-body px-5">
                                <div class="row align-items-center">
                                    <div class="col-sm-8">
                                        <div>
                                            <h3 class="font-size-16">Assign user role</h3>
                                            <p>Donec leo lorem, elementum ac ante non, viverra sagittis purus. Nulla auctor massa diam, at imperdiet ligula mattis vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ligula libero, egestas vel ullamcorper sollicitudin, viverra nec turpis. Mauris posuere, arcu sed hendrerit tempus, dolor quam varius justo, id tempor arcu eros id elit. Donec fringilla hendrerit tellus, eget condimentum nibh maximus eget.</p>
                                            <div class="d-flex align-items-center gap-10">
                                                <button class="btn btn-primary waves-effect">Set up Connections</button>
                                                <button class="btn btn-outline-secondary waves-effect">Learn More</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div>
                                            <img src="assets/img/connect-pic.jpg" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--inner collapse ends-->
                    <!--inner collapse starts-->
                    <div class="col-sm-12 py-3 quick-clp-body-hove">
                        <div class="d-flex justify-content-between align-items-center cursor-pointer"  data-toggle="collapse" href="#collapseExampleInner3" aria-expanded="false" aria-controls="collapseExample">
                            <div class="d-flex align-items-center gap-10">
                                <i class="bx bx-check-circle font-size-24 text-success"></i>
                                <h5 class="mb-0 font-size-14">Setup security awareness training</h5>
                            </div>
                            <i class="bx bx-chevron-right font-size-24"></i>
                        </div>
                        <div class="collapse collapsed" id="collapseExampleInner3">
                            <div class="card card-body mb-0 quick-collapse-body px-5">
                                <div class="row align-items-center">
                                    <div class="col-sm-8">
                                        <div>
                                            <h3 class="font-size-16">Assign user role</h3>
                                            <p>Donec leo lorem, elementum ac ante non, viverra sagittis purus. Nulla auctor massa diam, at imperdiet ligula mattis vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ligula libero, egestas vel ullamcorper sollicitudin, viverra nec turpis. Mauris posuere, arcu sed hendrerit tempus, dolor quam varius justo, id tempor arcu eros id elit. Donec fringilla hendrerit tellus, eget condimentum nibh maximus eget.</p>
                                            <div class="d-flex align-items-center gap-10">
                                                <button class="btn btn-primary waves-effect">Set up Connections</button>
                                                <button class="btn btn-outline-secondary waves-effect">Learn More</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div>
                                            <img src="assets/img/connect-pic.jpg" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--inner collapse ends-->
                    <!--inner collapse starts-->
                    <div class="col-sm-12 py-3 quick-clp-body-hove">
                        <div class="d-flex justify-content-between align-items-center cursor-pointer"  data-toggle="collapse" href="#collapseExampleInner9" aria-expanded="false" aria-controls="collapseExample">
                            <div class="d-flex align-items-center gap-10">
                                <i class="bx bx-check-circle font-size-24 text-success"></i>
                                <h5 class="mb-0 font-size-14">Invite personel</h5>
                            </div>
                            <i class="bx bx-chevron-right font-size-24"></i>
                        </div>
                        <div class="collapse collapsed" id="collapseExampleInner9">
                            <div class="card card-body mb-0 quick-collapse-body px-5">
                                <div class="row align-items-center">
                                    <div class="col-sm-8">
                                        <div>
                                            <h3 class="font-size-16">Assign user role</h3>
                                            <p>Donec leo lorem, elementum ac ante non, viverra sagittis purus. Nulla auctor massa diam, at imperdiet ligula mattis vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ligula libero, egestas vel ullamcorper sollicitudin, viverra nec turpis. Mauris posuere, arcu sed hendrerit tempus, dolor quam varius justo, id tempor arcu eros id elit. Donec fringilla hendrerit tellus, eget condimentum nibh maximus eget.</p>
                                            <div class="d-flex align-items-center gap-10">
                                                <button class="btn btn-primary waves-effect">Set up Connections</button>
                                                <button class="btn btn-outline-secondary waves-effect">Learn More</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div>
                                            <img src="assets/img/connect-pic.jpg" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--inner collapse ends-->
                </div>
            </div>
        </div>
    </div>
    <!--card ends-->
    <!--card starts-->
    <div class="card quick-start-row mb-3">
        <div class="card-body position-relative" data-toggle="collapse" href="#collapseExample3" aria-expanded="false" aria-controls="collapseExample">
            <div class="d-flex align-items-center">
                <div class="flex-grow-1">
                    <div class="d-flex gap-10 align-items-center">
                        <div><i class="bx bx-file font-size-30"></i></div>
                        <h5 class="mb-0">Build or upload policies</h5>
                    </div>
                </div>
                <div class="d-flex align-items-center gap-10">
                    <h4 class="font-size-14 mb-0"><span class="text-warning">6/8</span> Completed</h4>
                    <i class="bx bx-chevron-right font-size-24"></i>
                </div>
            </div>
            <div class="progress position-absolute w-100 left-0 right-0 bottom-0">
                <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"></div>
            </div>
        </div>

        <div class="collapse collapsed" id="collapseExample3">
            <div class="card card-body mb-0 quick-collapse-body px-5">
                <div class="row align-items-center">
                    <div class="col-sm-8">
                        <div>
                            <h3 class="font-size-16">Automate through connect</h3>
                            <p>Donec leo lorem, elementum ac ante non, viverra sagittis purus. Nulla auctor massa diam, at imperdiet ligula mattis vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ligula libero, egestas vel ullamcorper sollicitudin, viverra nec turpis. Mauris posuere, arcu sed hendrerit tempus, dolor quam varius justo, id tempor arcu eros id elit. Donec fringilla hendrerit tellus, eget condimentum nibh maximus eget.</p>
                            <div class="d-flex align-items-center gap-10">
                                <button class="btn btn-primary waves-effect">Set up Connections</button>
                                <button class="btn btn-outline-secondary waves-effect">Learn More</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div>
                            <img src="assets/img/connect-pic.jpg" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--card ends-->
    <!--card starts-->
    <div class="card quick-start-row mb-3">
        <div class="card-body position-relative" data-toggle="collapse" href="#collapseExample4" aria-expanded="false" aria-controls="collapseExample">
            <div class="d-flex align-items-center">
                <div class="flex-grow-1">
                    <div class="d-flex gap-10 align-items-center">
                        <div><i class="bx bx-equalizer font-size-30"></i></div>
                        <h5 class="mb-0">Scope your requirements and assign control owners</h5>
                    </div>
                </div>
                <div class="d-flex align-items-center gap-10">
                    <h4 class="font-size-14 mb-0"><span class="text-danger">4/8</span> Completed</h4>
                    <i class="bx bx-chevron-right font-size-24"></i>
                </div>
            </div>
            <div class="progress position-absolute w-100 left-0 right-0 bottom-0">
                <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"></div>
            </div>
        </div>

        <div class="collapse collapsed" id="collapseExample4">
            <div class="card card-body mb-0 quick-collapse-body px-5">
                <div class="row align-items-center">
                    <div class="col-sm-8">
                        <div>
                            <h3 class="font-size-16">Automate through connect</h3>
                            <p>Donec leo lorem, elementum ac ante non, viverra sagittis purus. Nulla auctor massa diam, at imperdiet ligula mattis vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ligula libero, egestas vel ullamcorper sollicitudin, viverra nec turpis. Mauris posuere, arcu sed hendrerit tempus, dolor quam varius justo, id tempor arcu eros id elit. Donec fringilla hendrerit tellus, eget condimentum nibh maximus eget.</p>
                            <div class="d-flex align-items-center gap-10">
                                <button class="btn btn-primary waves-effect">Set up Connections</button>
                                <button class="btn btn-outline-secondary waves-effect">Learn More</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div>
                            <img src="assets/img/connect-pic.jpg" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--card ends-->
    <!--card starts-->
    <div class="card quick-start-row mb-3">
        <div class="card-body position-relative" data-toggle="collapse" href="#collapseExample5" aria-expanded="false" aria-controls="collapseExample">
            <div class="d-flex align-items-center">
                <div class="flex-grow-1">
                    <div class="d-flex gap-10 align-items-center">
                        <div><i class="bx bx-stats font-size-30"></i></div>
                        <h5 class="mb-0">Continuous monitoring and gap analysis</h5>
                    </div>
                </div>
                <div class="d-flex align-items-center gap-10">
                    <h4 class="font-size-14 mb-0"><span class="text-danger">5/8</span> Completed</h4>
                    <i class="bx bx-chevron-right font-size-24"></i>
                </div>
            </div>
            <div class="progress position-absolute w-100 left-0 right-0 bottom-0">
                <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"></div>
            </div>
        </div>

        <div class="collapse collapsed" id="collapseExample5">
            <div class="card card-body mb-0 quick-collapse-body px-5">
                <div class="row align-items-center">
                    <div class="col-sm-8">
                        <div>
                            <h3 class="font-size-16">Automate through connect</h3>
                            <p>Donec leo lorem, elementum ac ante non, viverra sagittis purus. Nulla auctor massa diam, at imperdiet ligula mattis vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ligula libero, egestas vel ullamcorper sollicitudin, viverra nec turpis. Mauris posuere, arcu sed hendrerit tempus, dolor quam varius justo, id tempor arcu eros id elit. Donec fringilla hendrerit tellus, eget condimentum nibh maximus eget.</p>
                            <div class="d-flex align-items-center gap-10">
                                <button class="btn btn-primary waves-effect">Set up Connections</button>
                                <button class="btn btn-outline-secondary waves-effect">Learn More</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div>
                            <img src="assets/img/connect-pic.jpg" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--card ends-->
</div>
@endsection