@extends('layouts.main_frontend')
@section('main-content')

<link rel="stylesheet" href="{{asset('/css/frontend/front_dashboard.css')}}" type="text/css" />

<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="loss-event d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-2">
                <div class="user-list-head">
                    <div class="user-links">
                        <div class="approve-status dropdown-top">
                            <form action="">
                                <div class="form-group">
                                    <label for="approve-status">Approval Years</label>
                                    <span>
                                        <form method="POST" action="{{route('frontend.dashboard')}}">
                                            <!-- @csrf -->
                                            <div class="select_custom">
                                                <i class="fas fa-sort-down"></i>

                                                <select class="form-control" id="years" name="y" onchange="this.form.submit()" ><option value="2025" selected = "selected" >2025</option><option value="2024" >2024</option><option value="2023" >2023</option><option value="2022" >2022</option><option value="2021" >2021</option><option value="2020" >2020</option><select>                                            </div>
                                        </form>
                                    </span>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <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">
                            <input checked="checked" id="tab1" type="radio" name="tab" data-tab="tab1" />

                            <nav id="navbackground">
                                <label for="tab1" data-tab-label="tab1">Dashboard for Organization Level User</label>
                                <a href="#" class="myBtn">
                                    <label for="tab2" data-tab-label="tab2">My Task <span class="circle">{{$getListOf['count_ofall']}}</span></label>
                                </a>
                                <a href="#" class="myBtn">
                                    <label for="tab3" data-tab-label="tab3">Approved Task <span class="circle">{{$getListOf['count_ofallapproved']}}</span></label>
                                </a>
                            </nav>
                            <section class="risk-section" data-tab-panel="tab1">
                                <div class="row" style="padding: 20px 10px;">
                                    <!-- <div class="col-md-6">
                                        <canvas id="canv" style="width: 100%;" />
                                    </div> -->
                                    <div class="col-md-6">
                                        <!--<div id="spider_div"></div>-->
                                    </div>
                                    <div class="col-md-6">
                                        <div class="table-responsive">
                                            <!--
                                            <p>Overall Risk Rating : </p>
                                            <p> Organization level and Business Entity Level </p>
                                            <table class="list-table">
                                                <tr>
                                                    <td><a href="{{route('risks.index',['status'=>'a'])}}"><span class="average"></span>Approved</a></td>
                                                    <td>{{ $allCounts['getApprovalRisk'] ?? ''}}</td>
                                                </tr>
                                                <tr>
                                                    <td><a href="{{route('risks.index',['status'=>'r'])}}"><span class="verypoor"></span>Rejected</a></td>
                                                    <td>{{ $allCounts['getRejectedRisk'] ?? ''}}</td>
                                                </tr>
                                                <tr>
                                                    <td><a href="{{route('risks.index',['status'=>'a'])}}"><span class="verygood"></span>All</a></td>
                                                    <td>{{-- $allCounts['getAllRisk'] ?? '' --}}</td>
                                                </tr>
                                            </table>
                                        -->
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12 col-md-12 m-20">
                    <div class="row validitysection" style="padding: 0 !important; margin: 0 0 20px 0;">
                        <div class="col-lg-12 nopadding risk-section" style="border-bottom: 1px solid #192131;">
                            <div class="innersection">Risk</div>
                            <div class="row">
                                <!--
                                <div class="col-lg-2">
                                    <div class="row" style="padding: 1rem 0;">
                                        <div class="col-lg-12 col-sm-12">
                                            <div>Rag Status</div>
                                            <div class="large-number">{{-- $allCounts['getAllRisk'] ?? '' --}}</div>
                                        </div>
                                    </div>
                                </div>
                            -->
                                <div class="col-lg-3">
                                        <div class="col-lg-12 col-sm-12">
                                            <div>Risk Assessment Awaiting Approval</div>
                                            <div class="large-number">{{ $allCounts['getApprovalRisk'] ?? ''}}</div>
                                        </div>
                                </div>

                                <div class="col-lg-3">
                                        <div class="col-lg-12 col-sm-12">
                                            <div>Risk Awaiting Assessment</div>
                                            <div class="large-number">{{ $allCounts['getApprovedRisk'] ?? '' }}</div>
                                        </div>
                                        <div class="col-lg-4 col-sm-12"></div>
                                </div>

                                <div class="col-lg-3">
                                        <div class="col-lg-12 col-sm-12" >
                                            <div>Assessed <br/>Risk</div>
                                            <div class="large-number">{{ $allCounts['getAssessedRisk'] ?? ''}}</div>
                                        </div>
                                </div>

                                <div class="col-lg-3">
                                        <div class="col-lg-12 col-sm-12">
                                            <div>Completed Risk Assessment</div>
                                            <div class="large-number">{{ $allCounts['completedRiskAssessment'] ?? '' }}</div>
                                        </div>
                                </div>
                                
                                @if(!empty($ragStatus['name']))
                                <div class="col-lg-6">
                                    <div class="col-lg-12 col-sm-12" style="padding: 1rem 0;">
                                        <div id="rag_status_graph" style="height:300px;"></div>
                                    </div>
                                </div>
                                @endif
                                @if(!empty($getAssessedRiskGraph['name']))
                                @if(count($getAssessedRiskGraph['name'])>5)
                                <div class="col-lg-12">
                                @else 
                                <div class="col-lg-6">
                                @endif
                                    <div class="col-lg-12 col-sm-12" style="padding: 1rem 0;">
                                        <div id="assessed_risk_graph" style="height:300px;"></div>
                                    </div>
                                </div>
                                @endif
                                @if(!empty($getCompletedAssessedRiskGraph['name']))
                                @if(count($getCompletedAssessedRiskGraph['name'])>5)
                                <div class="col-lg-12">
                                @else 
                                <div class="col-lg-6">
                                @endif
                                    <div class="col-lg-12 col-sm-12" style="padding: 1rem 0;">
                                        <div id="completed_assessed_risk_graph" style="height:300px;"></div>
                                    </div>
                                </div>
                                @endif
                            </div>

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

                <div class="col-lg-12 col-md-12 m-20">
                    <div class="row validitysection" style="padding: 0 !important; margin: 0 0 20px 0;">
                        <div class="col-lg-12 nopadding risk-section">
                            <div class="innersection">Loss Event Info</div>
                            <div class="row">
                                <div class="col-lg-4">
                                        <div class="col-lg-12 col-sm-12">
                                            <div>Open Events</div>
                                            <div class="large-number">{{ $allCounts['getOpenLossEvent'] ?? '' }}</div>
                                        </div>
                                        <div class="col-lg-4 col-sm-12"></div>
                                </div>

                                <div class="col-lg-4">
                                    <div class="col-lg-12 col-sm-12">
                                        <div>Events Awaiting Approval</div>
                                        <div class="large-number">{{ $allCounts['getPendingApprovalEvent'] ?? '' }}</div>
                                    </div>
                                    <div class="col-lg-4 col-sm-12"></div>
                                </div>

                                <div class="col-lg-4">
                                    <div class="col-lg-12 col-sm-12">
                                        <div>Open Event over 1 Mn {{$currencyName}}</div>
                                        <div class="large-number">{{ $allCounts['getOverMilLossEvent'] ?? '' }}</div>
                                    </div>
                                    <div class="col-lg-4 col-sm-12"></div>
                                </div>
                                @if(!empty($openByCat['name']))
                                <div class="col-lg-12">
                                    <div class="col-lg-12 col-sm-12" style="padding: 1rem 0;">
                                        <div id="event_cat_div" style="height:300px;"></div>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>


                <div class="col-lg-12 col-md-12 m-20">
                    <div class="row validitysection" style="padding: 0 !important; margin: 0 0 20px 0;">
                        <div class="col-lg-12 nopadding risk-section" style="border-bottom: 1px solid #192131;">
                            <div class="innersection">Issues and Action</div>
                            
                            <div class="row">
                                <div class="col-lg-4">
                                        <div class="col-lg-12 col-sm-12">
                                            <div>Open Action Items</div>
                                            <div class="large-number">{{ $allCounts['getOpenActions'] ?? '' }}</div>
                                        </div>
                                </div>
                                <div class="col-lg-4">
                                        <div class="col-lg-12 col-sm-12">
                                            <div>Overdue Issues</div>
                                            <div class="large-number">{{ $allCounts['getOverDueActions'] ?? '' }}</div>
                                            <div id="overdue_div"></div>
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="loss-event d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-2">
                <div class="user-list-head">
                    <div class="user-links">
                        <div class="approve-status">
                            <form action="">
                                <div class="form-group">
                                    <label for="approve-status">Department/Business Entity/Process</label>
                                    <span>
                                        <form method="POST" action="{{route('frontend.dashboard')}}">
                                            <!-- @csrf -->
                                            <div class="select_custom">
                                                <i class="fas fa-sort-down"></i>
                                                <select class="form-control" id="unit_status" name="q" onchange="this.form.submit()" style="width:12rem !important">
                                                    @if($unitType)
                                                        @foreach($unitType as $key => $val)
                                                            <option value="{{ $key }}">{{ ucwords($val) }}</option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                            </div>
                                        </form>
                                    </span>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row" style="padding: 2rem 0;">
                <div class="col-lg-12 col-md-12 m-20">
                    <div class="row validitysection" style="padding: 0 !important; margin: 0 0 20px 0;">
                        <div class="col-lg-12 nopadding risk-section" style="border-bottom: 1px solid #192131;">
                            <div class="innersection">Risk</div>
                            <div class="row">
                                <!--
                                <div class="col-lg-2">
                                    <div class="row" style="padding: 1rem 0;">
                                        <div class="col-lg-12 col-sm-12">
                                            <div>Rag Status</div>
                                            <div class="large-number">{{-- $fetchDeptCount['getAllRisk'] ?? '' --}}</div>
                                        </div>
                                    </div>
                                </div>
                            -->
                                <div class="col-lg-5">
                                        <div class="col-lg-12 col-sm-12">
                                            <div>Risk Assessment Awaiting Approval</div>
                                            <div class="large-number">{{ $fetchDeptCount['getApprovalRisk'] ?? ''}}</div>
                                        </div>
                                        <div class="col-lg-4 col-sm-12"></div>
                                </div>
                                <div class="col-lg-4">
                                        <div class="col-lg-12 col-sm-12">
                                            <div>Risk Awaiting Assessment</div>
                                            <div class="large-number">{{ $fetchDeptCount['getApprovedRisk'] ?? ''}}</div>
                                        </div>
                                </div>
                                <div class="col-lg-3">
                                        <div class="col-lg-12 col-sm-12">
                                            <div>Assessed Risk</div>
                                            <div class="large-number">{{ $fetchDeptCount['getAssessedRisk'] ?? '' }}</div>
                                        </div>
                                </div>
                                <!-- this is for org. level only
                                <div class="col-lg-4">
                                    <div class="row" style="padding: 1rem 0;">
                                        <div class="col-lg-12 col-sm-12">
                                            <div>Completed Risk Assessment</div>
                                            <div class="large-number">{{ $fetchDeptCount['completedRiskAssessment'] ?? '' }}</div>
                                        </div>
                                    </div>
                                </div>
                                -->
                                @if(!empty($fetchDeptRagStatus['name']))
                                <div class="col-lg-3"></div>
                                <div class="col-lg-6">
                                        <div class="col-lg-12 col-sm-12" style="padding: 1rem 0;">
                                            <div id="rag_status_dept_graph" style="height:300px;"></div>
                                        </div>
                                </div>
                                @endif
                            </div>                            
                        </div>
                    </div>
                </div>

                <div class="col-lg-12 col-md-12 m-20">
                    <div class="row validitysection" style="padding: 0 !important; margin: 0 0 20px 0;">
                        <div class="col-lg-12 nopadding risk-section" style="border-bottom: 1px solid #192131;">
                            <div class="innersection">Loss Event Info</div>
                            <div class="row">
                                <div class="col-lg-4">
                                        <div class="col-lg-12 col-sm-12">
                                            <div>Open Events</div>
                                            <div class="large-number">{{ $fetchDeptCount['getOpenLossEvent'] ?? '' }}</div>
                                        </div>
                                        <div class="col-lg-4 col-sm-12"></div>
                                </div>
                                <div class="col-lg-4">
                                        <div class="col-lg-12 col-sm-12" >
                                            <div>Events Awaiting Approval</div>
                                            <div class="large-number">{{ $fetchDeptCount['getPendingApprovalEvent'] ?? '' }}</div>
                                        </div>
                                        <div class="col-lg-4 col-sm-12"></div>
                                </div>
                                <div class="col-lg-4">
                                        <div class="col-lg-12 col-sm-12">
                                            <div>Open Event over 1 Mn {{$deptCurrencyName}}</div>
                                            <div class="large-number">{{ $fetchDeptCount['getOverMilLossEvent'] ?? '' }}</div>
                                        </div>
                                        <div class="col-lg-4 col-sm-12"></div>
                                </div>

                                @if(!empty($fetchDeptopenByCat['name']))
                                <div class="col-lg-12">
                                        <div class="col-lg-12 col-sm-12" style="padding: 1rem 0;">
                                            <div id="dept_event_cat_div" style="height:300px;"></div>
                                        </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            

               
                <div class="col-lg-12 col-md-12 m-20">
                    <div class="row validitysection" style="padding: 0 !important; margin: 0 0 20px 0;">
                        <div class="col-lg-12 nopadding risk-section">
                            <div class="innersection">Issues and Action</div>
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="row" style="padding: 1rem 0;">
                                        <div class="col-lg-12 col-sm-12">
                                            <div>Open Action Items</div>
                                            <div class="large-number">{{ $fetchDeptCount['getOpenActions'] ?? '' }}</div>
                                        </div>
                                        <div class="col-lg-4 col-sm-12"></div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="row" style="padding: 1rem 0;">
                                        <div class="col-lg-12 col-sm-12">
                                            <div>Overdue Issues</div>
                                            <div class="large-number">{{ $fetchDeptCount['getOverDueActions'] ?? '' }}</div>
                                        </div>
                                        <!-- <div class="col-lg-4 col-sm-12">
                                            <p>Add Donut Chart</p>
                                        </div> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- Models -->
<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">{{$getListOf['count_ofall']}}</span></i>RCSA/Risk Notification
        </h4>
        @if($getListOf['loss_events'])
        @foreach($getListOf['loss_events'] as $lossTask)
        <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">Added Loss Events for Ref {{$lossTask['reference_no']}} and Controls for your department is {{$lossTask['status']=='o' ? 'Open' : 'Close'}}.</p>
                    </div>
                    <div class="col-lg-4 col-sm-12">
                        <p><i class="fas fa-clock notification-time"> </i>{{ getRangeDateString($lossTask['created_at']) }}, {{date('d M Y H:i A',strtotime($lossTask['created_at']))}}</p>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
        @endif

        @if($getListOf['actionStatus'])
        @foreach($getListOf['actionStatus'] as $actionTask)
        <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">Added new Action/Issues for Ref {{$actionTask['risk_reference_num']}} and Controls for your department is {{$actionTask['status']=='open' ? 'Open' : 'Close'}}.</p>
                    </div>
                    <div class="col-lg-4 col-sm-12">
                        <p><i class="fas fa-clock notification-time"> </i>{{ getRangeDateString($actionTask['created_at']) }}, {{date('d M Y H:i A',strtotime($actionTask['created_at']))}}</p>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
        @endif

        @if($getListOf['rcsaStatus'])
        @foreach($getListOf['rcsaStatus'] as $rcsa)
        <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">Added new RCSA Task/Issues for Ref {{$rcsa['rcsa_reference_num']}} and Controls for your department is {{$rcsa['status']=='pending' ? 'Pending' : 'Ongoing'}}.</p>
                    </div>
                    <div class="col-lg-4 col-sm-12">
                        <p><i class="fas fa-clock notification-time"> </i>{{ getRangeDateString($rcsa['created_at']) }}, {{date('d M Y H:i A',strtotime($rcsa['created_at']))}}</p>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
        @endif
    </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">{{$getListOf['count_ofallapproved']}}</span></i>Approved/Rejected Notification
        </h4>
        @if($getListOf['approvedRiskStatus'])
        @foreach($getListOf['approvedRiskStatus'] as $risk_approved)
            @if($risk_approved['status']=='r')
                <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 {{$risk_approved['reference_no']}} has been declined by the Approver. Kindly check in clicking on the <a href="{{route('risks.index')}}">Risk List Panel</a>.</p>
                            </div>
                            <div class="col-lg-4 col-sm-12">
                                <p><i class="fas fa-clock notification-time"> </i>{{ getRangeDateString($risk_approved['created_at']) }}, {{date('d M Y H:i A',strtotime($risk_approved['created_at']))}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            @elseif($risk_approved['status']=='a')
                <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 Referance number {{$risk_approved['reference_no']}} has been approved. Kindly check in clicking on the <a href="{{route('risks.index')}}">Risk List Panel</a>.</p>
                            </div>
                            <div class="col-lg-4 col-sm-12">
                                <p><i class="fas fa-clock notification-time"> </i>{{ getRangeDateString($risk_approved['created_at']) }}, {{date('d M Y H:i A',strtotime($risk_approved['created_at']))}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        @endforeach
        @endif

        @if($getListOf['approvedRcsaStatus'])
        @foreach($getListOf['approvedRcsaStatus'] as $rcsa_approved)
            @if($rcsa_approved['status']=='rejected')
                <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 RCSA Ref {{$risk_approved['reference_no']}} has been rejected by the Approver. Kindly check in clicking on the <a href="{{route('rcsalist')}}">RCSA List Panel</a>.</p>
                            </div>
                            <div class="col-lg-4 col-sm-12">
                                <p><i class="fas fa-clock notification-time"> </i>{{ getRangeDateString($rcsa_approved['created_at']) }}, {{date('d M Y H:i A',strtotime($rcsa_approved['created_at']))}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            @elseif($rcsa_approved['status']=='approved')
                <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">RCSA Referance number {{$rcsa_approved['rcsa_reference_num']}} has been {{$rcsa_approved['status']}}. Kindly check in clicking on the <a href="{{route('rcsalist')}}">RCSA List Panel</a>.</p>
                            </div>
                            <div class="col-lg-4 col-sm-12">
                                <p><i class="fas fa-clock notification-time"> </i>{{ getRangeDateString($rcsa_approved['created_at']) }}, {{date('d M Y H:i A',strtotime($rcsa_approved['created_at']))}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        @endforeach
        @endif
    </div>
</div>

@endsection
@section('additionaljs')
<script src="{{asset('/js/jquery1.9.1.min.js')}}"></script>
<script src="{{asset('/js/jquery2.1.1.min.js')}}"></script>
<script src="{{asset('/js/spider_script.js')}}"></script>
<script src="{{asset('/js/highcharts.js')}}"></script>
<script src="{{asset('/js/highcharts-more.js')}}"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> -->

<script type="text/javascript">
    var risk_a = '';
    var risk_r = '';
    var risk_all = 'null';

    var rcsa_p = '';
    var rcsa_o = '';
    var rcsa_r = '';
    var rcsa_a = '';

    var ragStatusLabel = 'null';
    var ragStatusVal = 'null';
    var fetchDeptRagStatusLabel = 'null';
    var fetchDeptRagStatusVal = 'null';
    var openByCatLabel = 'null';
    var openByCatVal = 'null';
    var fetchDeptopenByCatLabel = 'null';
    var fetchDeptopenByCatVal = 'null';
    var assessedRiskGraphLabel = 'null';
    var assessedRiskGraphVal = 'null';
    var getCompletedAssessedRiskGraphLabel = 'null';
    var getCompletedAssessedRiskGraphVal = 'null';
    
    //console.log('ragstatus');
    //console.log(ragStatusLabel);
    //console.log(ragStatusLabel.length);
</script>


<script type="text/javascript">
    var riskUrl = "{{ route('frontend.getriskvalues') }}";
    
    $(document).ready(function() {
        
        //console.log(jQuery.parseJSON(fetchDeptopenByCatVal));
        /*divchart2 total scheduled,ongoing,completed or cancelled counts Spider chart */
        $(function() {
            /* see file on left data.json*/
            $.getJSON(riskUrl, function(response) {

                if(ragStatusLabel.length > 2) {
                    //Rag Status - all section
                    Highcharts.chart('rag_status_graph', {
                        chart: {
                            type: 'column',
                            backgroundColor: '#2F3B52',
                            borderWidth: 2,
                            borderRadius: '2%',
                            borderColor: '#FFFFFF',
                            //height: '300',
                            //width: '500'
                        },
                        title: {
                            text: 'RAG Status',
                            align: 'center',
                            style: {
                                color: '#FFFFFF'
                            },
                        },
                        //subtitle: {
                            //text: 'Dummy Text',
                            //align: 'left'
                        //},
                        xAxis: {
                            categories: jQuery.parseJSON(ragStatusLabel),
                            labels: {
                                style: {
                                    color: '#FFFFFF',
                                    fontSize: '11px'
                                },
                            },
                            title: {
                                text: 'Risk Level',
                                align: 'middle',
                                style: {
                                    color: '#FFFFFF',
                                    fontSize: '12px'
                                },
                            },
                            /*
                            gridLineWidth: 1,
                            lineWidth: 0
                            */
                        },
                        yAxis: {
                            //min: 0,
                            title: {
                                text: 'Value',
                                align: 'middle',
                                style: {
                                    color: '#FFFFFF',
                                    fontSize: '12px'
                                },
                            },
                            labels: {
                                //overflow: 'justify'
                                style: {
                                    color: '#FFFFFF',
                                    fontSize: '13px'
                                },
                            },
                            gridLineWidth: 0
                        },
                        tooltip: {
                            //valueSuffix: ' millions'
                        },
                        plotOptions: {
                            bar: {
                                borderRadius: '50%',
                                dataLabels: {
                                    enabled: true
                                },
                                groupPadding: 0.1
                            },
                            column: {
                                borderRadius: '0.9%',
                                dataLabels: {
                                    enabled: true
                                },
                                groupPadding: 0.4,
                                borderWidth: 0,
                                //colorByPoint: true
                                color: '#FFB339'
                            }
                        },
                        legend: {
                            enabled:false
                            /*
                            layout: 'horizontal',
                            align: 'top',
                            verticalAlign: 'right',
                            x: -40,
                            y: 80,
                            floating: false,
                            borderWidth: 1,
                            backgroundColor:
                            Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
                            shadow: true
                            */
                        },
                        credits: {
                            enabled: false
                        },
                        series: [{
                            name: '',
                            data: jQuery.parseJSON(ragStatusVal)
                        }]
                    });
                }

                if(fetchDeptRagStatusLabel.length > 2) {
                    //Rag Status - department wise
                    Highcharts.chart('rag_status_dept_graph', {
                        chart: {
                            type: 'column',
                            backgroundColor: '#2F3B52',
                            borderWidth: 2,
                            borderRadius: '2%',
                            borderColor: '#FFFFFF',
                            //height: '300',
                            //width: '500'
                        },
                        title: {
                            text: 'RAG Status',
                            align: 'center',
                            style: {
                                color: '#FFFFFF'
                            },
                        },
                        //subtitle: {
                            //text: 'Dummy Text',
                            //align: 'left'
                        //},
                        xAxis: {
                            categories: jQuery.parseJSON(fetchDeptRagStatusLabel),
                            labels: {
                                style: {
                                    color: '#FFFFFF',
                                    fontSize: '11px'
                                },
                            },
                            title: {
                                text: 'Risk Level',
                                align: 'middle',
                                style: {
                                    color: '#FFFFFF',
                                    fontSize: '12px'
                                },
                            },
                            /*
                            gridLineWidth: 1,
                            lineWidth: 0
                            */
                        },
                        yAxis: {
                            //min: 0,
                            title: {
                                text: 'Value',
                                align: 'middle',
                                style: {
                                    color: '#FFFFFF',
                                    fontSize: '13px'
                                },
                            },
                            labels: {
                                //overflow: 'justify'
                                style: {
                                    color: '#FFFFFF',
                                    fontSize: '12px'
                                },
                            },
                            gridLineWidth: 0
                        },
                        tooltip: {
                            //valueSuffix: ' millions'
                        },
                        plotOptions: {
                            bar: {
                                borderRadius: '50%',
                                dataLabels: {
                                    enabled: true
                                },
                                groupPadding: 0.1
                            },
                            column: {
                                borderRadius: '0.9%',
                                dataLabels: {
                                    enabled: true
                                },
                                groupPadding: 0.4,
                                borderWidth: 0,
                                //colorByPoint: true
                                color: '#FFB339'
                            }
                        },
                        legend: {
                            enabled:false
                            /*
                            layout: 'horizontal',
                            align: 'top',
                            verticalAlign: 'right',
                            x: -40,
                            y: 80,
                            floating: false,
                            borderWidth: 1,
                            backgroundColor:
                            Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
                            shadow: true
                            */
                        },
                        credits: {
                            enabled: false
                        },
                        series: [{
                            name: '',
                            data: jQuery.parseJSON(fetchDeptRagStatusVal)
                        }]
                    });
                }

                if(assessedRiskGraphLabel.length > 2) {
                    //Assessed Risk - all section
                    Highcharts.chart('assessed_risk_graph', {
                        chart: {
                            type: 'column',
                            backgroundColor: '#2F3B52',
                            borderWidth: 2,
                            borderRadius: '2%',
                            borderColor: '#FFFFFF',
                            //height: '300',
                            //width: '500'
                        },
                        title: {
                            text: 'Assessed Risk',
                            align: 'center',
                            style: {
                                color: '#FFFFFF'
                            },
                        },
                        //subtitle: {
                            //text: 'Dummy Text',
                            //align: 'left'
                        //},
                        xAxis: {
                            categories: jQuery.parseJSON(assessedRiskGraphLabel),
                            labels: {
                                style: {
                                    color: '#FFFFFF',
                                    fontSize: '11px'
                                },
                            },
                            title: {
                                text: 'Categories',
                                align: 'middle',
                                style: {
                                    color: '#FFFFFF',
                                    fontSize: '12px'
                                },
                            },
                            /*
                            gridLineWidth: 1,
                            lineWidth: 0
                            */
                        },
                        yAxis: {
                            //min: 0,
                            title: {
                                text: 'Value',
                                align: 'middle',
                                style: {
                                    color: '#FFFFFF',
                                    fontSize: '13px'
                                },
                            },
                            labels: {
                                //overflow: 'justify'
                                style: {
                                    color: '#FFFFFF',
                                    fontSize: '12px'
                                },
                            },
                            gridLineWidth: 0
                        },
                        tooltip: {
                            //valueSuffix: ' millions'
                        },
                        plotOptions: {
                            bar: {
                                borderRadius: '50%',
                                dataLabels: {
                                    enabled: true
                                },
                                groupPadding: 0.1
                            },
                            column: {
                                borderRadius: '0.9%',
                                dataLabels: {
                                    enabled: true
                                },
                                groupPadding: 0.4,
                                borderWidth: 0,
                                //colorByPoint: true
                                color: '#FFB339'
                            }
                        },
                        legend: {
                            enabled:false
                            /*
                            layout: 'horizontal',
                            align: 'top',
                            verticalAlign: 'right',
                            x: -40,
                            y: 80,
                            floating: false,
                            borderWidth: 1,
                            backgroundColor:
                            Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
                            shadow: true
                            */
                        },
                        credits: {
                            enabled: false
                        },
                        series: [{
                            name: '',
                            data: jQuery.parseJSON(assessedRiskGraphVal)
                        }]
                    });
                }

                if(getCompletedAssessedRiskGraphLabel.length > 2) {
                    //Completed Assessed Risk - all section
                    Highcharts.chart('completed_assessed_risk_graph', {
                        chart: {
                            type: 'column',
                            backgroundColor: '#2F3B52',
                            borderWidth: 2,
                            borderRadius: '2%',
                            borderColor: '#FFFFFF',
                            //height: '300',
                            //width: '500'
                        },
                        title: {
                            text: 'Completed Assessed Risk',
                            align: 'center',
                            style: {
                                color: '#FFFFFF'
                            },
                        },
                        //subtitle: {
                            //text: 'Dummy Text',
                            //align: 'left'
                        //},
                        xAxis: {
                            categories: jQuery.parseJSON(getCompletedAssessedRiskGraphLabel),
                            labels: {
                                style: {
                                    color: '#FFFFFF',
                                    fontSize: '11px'
                                },
                            },
                            title: {
                                text: 'Categories',
                                align: 'middle',
                                style: {
                                    color: '#FFFFFF',
                                    fontSize: '12px'
                                },
                            },
                            /*
                            gridLineWidth: 1,
                            lineWidth: 0
                            */
                        },
                        yAxis: {
                            //min: 0,
                            title: {
                                text: 'Value',
                                align: 'middle',
                                style: {
                                    color: '#FFFFFF',
                                    fontSize: '13px'
                                },
                            },
                            labels: {
                                //overflow: 'justify'
                                style: {
                                    color: '#FFFFFF',
                                    fontSize: '12px'
                                },
                            },
                            gridLineWidth: 0
                        },
                        tooltip: {
                            //valueSuffix: ' millions'
                        },
                        plotOptions: {
                            bar: {
                                borderRadius: '50%',
                                dataLabels: {
                                    enabled: true
                                },
                                groupPadding: 0.1
                            },
                            column: {
                                borderRadius: '0.9%',
                                dataLabels: {
                                    enabled: true
                                },
                                groupPadding: 0.4,
                                borderWidth: 0,
                                //colorByPoint: true
                                color: '#FFB339'
                            }
                        },
                        legend: {
                            enabled:false
                            /*
                            layout: 'horizontal',
                            align: 'top',
                            verticalAlign: 'right',
                            x: -40,
                            y: 80,
                            floating: false,
                            borderWidth: 1,
                            backgroundColor:
                            Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
                            shadow: true
                            */
                        },
                        credits: {
                            enabled: false
                        },
                        series: [{
                            name: '',
                            data: jQuery.parseJSON(getCompletedAssessedRiskGraphVal)
                        }]
                    });
                }

                if(openByCatLabel.length > 2) {
                    //Open Event by category - all section
                    Highcharts.chart('event_cat_div', {
                        chart: {
                            type: 'column',
                            backgroundColor: '#2F3B52',
                            borderWidth: 2,
                            borderRadius: '2%',
                            borderColor: '#FFFFFF',
                            //height: '300',
                            //width: '500'
                        },
                        title: {
                            text: 'Open Event By Category',
                            align: 'center',
                            style: {
                                color: '#FFFFFF'
                            },
                        },
                        //subtitle: {
                            //text: 'Dummy Text',
                            //align: 'left'
                        //},
                        xAxis: {
                            categories: jQuery.parseJSON(openByCatLabel),
                            labels: {
                                style: {
                                    color: '#FFFFFF',
                                    fontSize: '11px'
                                },
                            },
                            title: {
                                text: 'Categories',
                                align: 'middle',
                                style: {
                                    color: '#FFFFFF',
                                    fontSize: '12px'
                                },
                            },
                            /*
                            gridLineWidth: 1,
                            lineWidth: 0
                            */
                        },
                        yAxis: {
                            //min: 0,
                            title: {
                                text: 'Value',
                                align: 'middle',
                                style: {
                                    color: '#FFFFFF',
                                    fontSize: '13px'
                                },
                            },
                            labels: {
                                //overflow: 'justify'
                                style: {
                                    color: '#FFFFFF',
                                    fontSize: '12px'
                                },
                            },
                            gridLineWidth: 0
                        },
                        tooltip: {
                            //valueSuffix: ' millions'
                        },
                        plotOptions: {
                            bar: {
                                borderRadius: '50%',
                                dataLabels: {
                                    enabled: true
                                },
                                groupPadding: 0.1
                            },
                            column: {
                                borderRadius: '0.9%',
                                dataLabels: {
                                    enabled: true
                                },
                                groupPadding: 0.4,
                                borderWidth: 0,
                                //colorByPoint: true
                                color: '#FFB339'
                            }
                        },
                        legend: {
                            enabled:false
                            /*
                            layout: 'horizontal',
                            align: 'top',
                            verticalAlign: 'right',
                            x: -40,
                            y: 80,
                            floating: false,
                            borderWidth: 1,
                            backgroundColor:
                            Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
                            shadow: true
                            */
                        },
                        credits: {
                            enabled: false
                        },
                        series: [{
                            name: '',
                            data: jQuery.parseJSON(openByCatVal)
                        }]
                    });
                }

                if(fetchDeptopenByCatLabel.length > 2) {
                    //Open Event by category - for dept section
                    Highcharts.chart('dept_event_cat_div', {
                        chart: {
                            type: 'column',
                            backgroundColor: '#2F3B52',
                            borderWidth: 2,
                            borderRadius: '2%',
                            borderColor: '#FFFFFF',
                            //height: '300',
                            //width: '500'
                        },
                        title: {
                            text: 'Open Event By Category',
                            align: 'center',
                            style: {
                                color: '#FFFFFF'
                            },
                        },
                        //subtitle: {
                            //text: 'Dummy Text',
                            //align: 'left'
                        //},
                        xAxis: {
                            categories: jQuery.parseJSON(fetchDeptopenByCatLabel),
                            labels: {
                                style: {
                                    color: '#FFFFFF',
                                    fontSize: '11px'
                                },
                            },
                            title: {
                                text: 'Categories',
                                align: 'middle',
                                style: {
                                    color: '#FFFFFF',
                                    fontSize: '12px'
                                },
                            },
                            /*
                            gridLineWidth: 1,
                            lineWidth: 0
                            */
                        },
                        yAxis: {
                            //min: 0,
                            title: {
                                text: 'Value',
                                align: 'middle',
                                style: {
                                    color: '#FFFFFF',
                                    fontSize: '13px'
                                },
                            },
                            labels: {
                                //overflow: 'justify'
                                style: {
                                    color: '#FFFFFF',
                                    fontSize: '12px'
                                },
                            },
                            gridLineWidth: 0
                        },
                        tooltip: {
                            //valueSuffix: ' millions'
                        },
                        plotOptions: {
                            bar: {
                                borderRadius: '50%',
                                dataLabels: {
                                    enabled: true
                                },
                                groupPadding: 0.1
                            },
                            column: {
                                borderRadius: '0.9%',
                                dataLabels: {
                                    enabled: true
                                },
                                groupPadding: 0.4,
                                borderWidth: 0,
                                //colorByPoint: true
                                color: '#FFB339'
                            }
                        },
                        legend: {
                            enabled:false
                            /*
                            layout: 'horizontal',
                            align: 'top',
                            verticalAlign: 'right',
                            x: -40,
                            y: 80,
                            floating: false,
                            borderWidth: 1,
                            backgroundColor:
                            Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
                            shadow: true
                            */
                        },
                        credits: {
                            enabled: false
                        },
                        series: [{
                            name: '',
                            data: jQuery.parseJSON(fetchDeptopenByCatVal)
                        }]
                    });
                }
                //console.log(response);
                // $('#spider_div, #rag_status_div').radarChart({
                //     size: [400, 200],
                //     step: 1,
                //     title: "",
                //     values: response.allCounts,
                //     showAxisLabels: true
                // });

                Highcharts.chart('spider_div', {
                    chart: {
                        polar: true,
                        type: 'line',
                        backgroundColor: '#00000000'
                    },

                    title: {
                        text: '',
                    },

                    pane: {
                        size: '80%'
                    },

                    xAxis: {
                        categories: ['Rejected', 'Approved', 'Total'],
                        tickmarkPlacement: 'on',
                        lineWidth: 0,
                        labels: {
                            style: {
                                color: '#ffffff',
                                fontSize: '11px'
                            }
                        }
                    },

                    yAxis: {
                        gridLineInterpolation: 'polygon',
                        labels: {
                            style: {
                                color: '#ffffff',
                                fontSize: '12px'
                            }
                        }
                    },

                    series: [{
                        name: 'Risk Rate',
                        data: response.allCounts,
                        pointPlacement: 'on'
                    }],

                    credits: {
                        enabled: false
                    },

                    plotOptions: {
                        series: {
                            color: '#7cbfff'
                        }
                    },

                    legend: {
                        enabled: false,
                    }
                });
                Highcharts.chart('rag_status_div', {
                    chart: {
                        polar: true,
                        type: 'line',
                        backgroundColor: '#00000000'
                    },

                    title: {
                        text: '',
                    },

                    pane: {
                        size: '80%'
                    },

                    xAxis: {
                        categories: ['Rejected', 'Approved', 'Total'],
                        tickmarkPlacement: 'on',
                        lineWidth: 0,
                        labels: {
                            style: {
                                color: '#ffffff',
                            }
                        }
                    },

                    yAxis: {
                        gridLineInterpolation: 'polygon',
                        labels: {
                            style: {
                                color: '#ffffff',
                            }
                        }
                    },

                    series: [{
                        name: 'Risk Rate',
                        data: response.allCounts,
                        pointPlacement: 'on'
                    }],

                    credits: {
                        enabled: false
                    },

                    plotOptions: {
                        series: {
                            color: '#7cbfff'
                        }
                    },

                    legend: {
                        enabled: false,
                    }
                });

                // $('#risk_assessment_div').radarChart({
                //     size: [400, 200],
                //     step: 1,
                //     title: "",
                //     values: response.rcsa_rating,
                //     showAxisLabels: false
                // });
                Highcharts.chart('risk_assessment_div', {
                    chart: {
                        polar: true,
                        type: 'line',
                        backgroundColor: '#00000000'
                    },

                    title: {
                        text: '',
                    },

                    pane: {
                        size: '65%'
                    },

                    xAxis: {
                        categories: ['Pending','Ongoing','Rejected', 'Approved', 'All'],
                        tickmarkPlacement: 'on',
                        lineWidth: 0,
                        labels: {
                            style: {
                                color: '#ffffff',
                            }
                        }
                    },

                    yAxis: {
                        gridLineInterpolation: 'polygon',
                        labels: {
                            style: {
                                color: '#ffffff',
                            }
                        }
                    },

                    series: [{
                        name: 'RCSA Rate',
                        data: response.rcsa_rating,
                        pointPlacement: 'on'
                    }],

                    credits: {
                        enabled: false
                    },

                    plotOptions: {
                        series: {
                            color: '#7cbfff'
                        }
                    },

                    legend: {
                        enabled: false,
                    }
                });
            })
        });
        /* End here */
    });
</script>
<script src="{{asset('/js/frontend/frontend_dashboard.js')}}" type="text/javascript"></script>
@endsection