@extends('layouts.main_layout')

@section('main-content')
<style type="text/css">
    label {
        display: inline-block;
        margin-bottom: .5rem;
        margin-top: 30px;
    }
</style>

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 dashboard-page-head edit-document document pt-3 pb-5 mb-2">
    <div>
        <div id="main">
            <div class="row">
                <div class="col-md-12 uppersection">
                    <div class="row validitysection" style="padding: 0 !important; margin: 0 0 20px 0;">
                        <div class="col-lg-12">
                            <nav id="navbackground">
                                <label for="tab1" data-tab-label="tab1"> Dashboard </label>
                            </nav>
                        </div>
                    </div>
                </div> 
            </div>
        </div>
    </div>
</main>

<div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <div><span class="close">&times;</span></div>
        <h4 class="padding-1">
            <i class="fas fa-bell notification"><span class="notification-count">4</span></i>My Task Notification
        </h4>
        <div class="row">
            <div class="col-lg-12">
                <div class="row" style="padding: 1rem 0;">
                    <div class="col-lg-8 col-sm-12">
                        <p class="hover-effect">Adding Risk and Controls for your department is pending</p>
                    </div>
                    <div class="col-lg-4 col-sm-12">
                        <p><i class="fas fa-clock notification-time"> </i>Today, 12.30 am</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="row" style="padding: 1rem 0;">
                    <div class="col-lg-8 col-sm-8">
                        <p class="hover-effect">Response to Questionnaire is Pending and is due on 10/03/2021</p>
                    </div>
                    <div class="col-lg-4 col-sm-4">
                        <p><i class="fas fa-clock notification-time"> </i>Monday, 2.30 pm</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="row" style="padding: 1rem 0;">
                    <div class="col-lg-8 col-sm-12">
                        <p class="hover-effect">Response to Questionnaire is Overdue. The due date was 10/03/2021. Kindly complete at the earliest</p>
                    </div>
                    <div class="col-lg-4 col-sm-12">
                        <p><i class="fas fa-clock notification-time"> </i>Sunday, 3.30 am</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="row" style="padding: 1rem 0;">
                    <div class="col-lg-8 col-sm-8">
                        <p class="hover-effect">Inputs of Risk Ref 011 has been declined by the Approver. Kindly edit and submit for approval</p>
                    </div>
                    <div class="col-lg-4 col-sm-4">
                        <p><i class="fas fa-clock notification-time"> </i>20 Feb, 10.30 am</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="myModal2" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <div><span class="close">&times;</span></div>
        <h4 class="padding-1">
            <i class="fas fa-bell notification"><span class="notification-count">3</span></i>My Task Notification
        </h4>
        <div class="row">
            <div class="col-lg-12">
                <div class="row" style="padding: 1rem 0;">
                    <div class="col-lg-8 col-sm-12">
                        <p class="hover-effect">Risk Ref 011 has been submitted for approval Kindly approve by clicking on the Risk Registered</p>
                    </div>
                    <div class="col-lg-4 col-sm-12">
                        <p><i class="fas fa-clock notification-time"> </i>Today, 12.30 am</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="row" style="padding: 1rem 0;">
                    <div class="col-lg-8 col-sm-8">
                        <p class="hover-effect">Response to Questionnaire is Overdue. The due date was 10/03/2021. Kindly complete at the earliest</p>
                    </div>
                    <div class="col-lg-4 col-sm-4">
                        <p><i class="fas fa-clock notification-time"> </i>Yesterday, 3.30 pm</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="row" style="padding: 1rem 0;">
                    <div class="col-lg-8 col-sm-12">
                        <p class="hover-effect">Inputs of Risk Ref 011 has been declined by the Approver. Kindly edit and submit for approval</p>
                    </div>
                    <div class="col-lg-4 col-sm-12">
                        <p><i class="fas fa-clock notification-time"> </i>20 Feb, 10.30 am</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
   
@endsection

@section('additionaljs')

@endsection