@extends('layouts.master')

@section('mainContent')
    <div class="page-wrapper">
        <div class="page-header-link">
            <a href="javascript:;" class="show-menuheader">
                Risk Menus
                <i class="fas fa-align-left ms-auto"></i>
            </a>
        </div>
        <div class="page-menu">
            <div class="page-menu-header">
                <h2>Risk Menu</h2>
                <a href="javascript:;" class="close-header-menu"> <i class="fas fa-close"></i></a>
            </div>
            @include('layouts.tenants.risks-header-menu')
        </div>
        <div class="content">
            <div class="row">
                <div class="col-12">
                    <div class="page-header">
                        <h3>Dashboard</h3>
                        <ul>
                            <li class="text-primary">Risk Management</li>
                            <li><a href="javascript:;">Dashboard</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            {{--
            <div class="row">
                <div class="col-12 d-flex widget-path widget-service">
                    <div class="card">
                        <div class="tab-set">
                            <nav>
                                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                    <a class="nav-link active" href="{{ route('risk-dashboard.index') }}" id="risk-tab"
                                        aria-controls="risk-master" aria-selected="false">Risk</a>
                                    <a class="nav-link" href="{{ route('asset-dashboard.index') }}" id="asset-tab"
                                        aria-controls="asset-master" aria-selected="true">Assets</a>
                                    <a class="nav-link" href="{{ route('incident-dashboard.index') }}" id="incident-tab"
                                        aria-controls="incident-master" aria-selected="true">Incident</a>
                                </div>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="risk-master" role="tabpanel" aria-labelledby="risk-tab">
                    <div class="master-wrapper">

                        <div class="row">
                            <div class="col-lg-6 col-12">
                                <div class="card">
                                    <div class="card-body pb-0">
                                        <h3 class="head-client">Risk Trend Insights</h3>
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="dash-card dash-gray">
                                                    <h5 class="counter">{{ $totalRiskCount }}</h5>
                                                    <h6>Total Risk</h6>
                                                    <div class="dash-img">
                                                        <img src="{{ url('assets/img/icons/chart.svg') }}" alt="img">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="daterange-picker d-flex align-items-center justify-content-center">
                                                    <div class="form-sort me-2">
                                                        <i class="ti ti-calendar"></i>
                                                        <input type="text" class="form-control  date-range risk-trend" style="width: 220px">
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div id="chartrisktrend"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12">
                                <div class="card">
                                    <div class="card-body pb-0">
                                        <h3 class="head-client">Risk Insights</h3>
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="dash-card dash-gray">
                                                    <h5 class="counter">{{ $totalRiskCount }}</h5>
                                                    <h6>Total Risk</h6>
                                                    <div class="dash-img">
                                                        <img src="{{ url('assets/img/icons/chart.svg') }}" alt="img">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="daterange-picker d-flex align-items-center justify-content-center">
                                                    <div class="form-sort me-2">
                                                        <i class="ti ti-calendar"></i>
                                                        <input type="text" class="form-control  date-range risk-type" style="width: 220px">
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div id="chartrisktrend"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body pb-0">
                                        <div class="card-body-header">
                                            <h5 class="headclient">Top 5 Risks</h5>
                                            <a href="{{ route('risk-register.list') }}" target="_blank" class="btn btn-primary d-flex"><i class="fa fa-angle-double-right me-2"></i> View All Risks</a>
                                        </div>
                                        <div class="row">
                                            <div class="col-12">

                                                <div class="table-responsive">
                                                    <table class="table" id="risk_dashboard_table">
                                                        <thead>
                                                            <tr>
                                                                <th>Risk Register ID</th>
                                                                <th>Risk Name</th>
                                                                <th>Risk Type</th>
                                                                <th>Risk Value</th>
                                                                <th>Treatment Type</th>
                                                                <th>Effectiveness</th>
                                                                <th>Risk Owner</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @if ($riskListData->isNotEmpty())
                                                                @foreach ($riskListData as $row)
                                                                @php
                                                                    $url = 'javascript:;';
                                                                    if(Auth::user()->hasPermission('risk_register','view')) {
                                                                        $url = route('risk-register.details', ['id' => $row->id]);
                                                                    }
                                                                @endphp
                                                                <tr>
                                                                    <td>
                                                                        <h6 class="table-avatar flex-column align-items-start">
                                                                            <a target="_blank" href="{{ $url }}">{{ $row->risk_register_id}}</a>
                                                                        </h6>
                                                                    </td>
                                                                    <td>{{ $row->risk_name }}</td>
                                                                    <td>
                                                                        @if ($row->riskTypeData)
                                                                            <span class="badge-dot"><span style="background:{{ $row->riskTypeData->color_name ?? '' }}"></span>{{ !empty($row->riskTypeData) ? $row->riskTypeData->name : '' }}</span>
                                                                        @else
                                                                            {{'-'}}
                                                                        @endif
                                                                    </td>
                                                                    <td>
                                                                        @if ($row->risk_value)
                                                                            <span class="badge badge-grey-light yellow-span vw-auto">{{ $row->risk_value }} </span>
                                                                        @else
                                                                            {{'-'}}
                                                                        @endif
                                                                    </td>
                                                                    <td>{{$row->treatment_type}}</td>
                                                                    <td>{{ !empty($row->effectivenessData) ? $row->effectivenessData->name : '-' }}</td>
                                                                    <td>{{$row->ownerData->first_name.' '.$row->ownerData->last_name}}</td>
                                                                </tr>
                                                                @endforeach
                                                            @endif
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>  --}}

            <!--  <h5 class="mb-5">New dashboard</h5> -->
            <div class="row">
                <div class="col-lg-6 col-12">
                    <div class="card">
                        <div class="card-body pb-0">
                            <div class="head-client">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h3>Risk Insights</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="nested-card">
                                <div class="dash-card">
                                    <div class="flex-count-blk d-flex align-items-end">
                                        <div class="count-start flex-fill">
                                            <h6>Risks</h6>
                                            <h5>{{ $totalRiskCount }}</h5>
                                        </div>
                                        <ul class="insight-list flex-fill d-flex gap-2">
                                            <li>
                                                <i class="fa fa-circle draft-status me-1"></i> Treat
                                                <span class="ms-2 weight-bold">{{ $risk_types['treat'] }}</span>
                                            </li>
                                            <li>
                                                <i class="fa fa-circle retired-status me-1"></i> Transfer
                                                <span class="ms-2 weight-bold">{{ $risk_types['transfer'] }}</span>
                                            </li>
                                            <li>
                                                <i class="fa fa-circle danger-status me-1"></i> Terminate
                                                <span class="ms-2 weight-bold">{{ $risk_types['terminate'] }}</span>
                                            </li>
                                            <li>
                                                <i class="fa fa-circle danger-status me-1"></i> Tolerate
                                                <span class="ms-2 weight-bold">{{ $risk_types['tolerate'] }}</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="dash-img">
                                        <i class="fe fe-bar-chart-2"></i>
                                    </div>
                                </div>
                                <div id="risk-trend"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="count-card-blk">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body pb-0">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="nested-card w-100 mb-3 border p-3 rounded">
                                                <div class="head-client">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <h3>Threat Exposure</h3>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div id="threat-status"></div>
                                            </div>
                                            <div class="nested-card w-100 mb-3 border p-3 rounded">
                                                <div class="head-client">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <h3>Vulnerability Landscape</h3>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div id="vulner-status"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="count-card-blk">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body pb-0">
                                    <div class="head-client">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <h3>IT Incidents Insights</h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="nested-card w-100 mb-3 border p-3 rounded">
                                                <div class="dash-card">
                                                    <h6>Incidents</h6>
                                                    <h5>{{ $totalIncidentCount }}</h5>
                                                    <div class="dash-img">
                                                        <i class="fe fe-bar-chart-2"></i>
                                                    </div>
                                                    <span class="badge badge-insights">Total Timeloss:
                                                        <b>{{ $totalTimeLoss }} hrs</b></span>
                                                    <hr>
                                                    <ul class="insight-list d-flex flex-wrap gap-2">
                                                        <li>
                                                            <i class="fa fa-circle draft-status me-1"></i> Avg Timeloss
                                                            <span class="ms-2 weight-bold">{{ $averageTimeLoss }} h</span>
                                                        </li>
                                                        <li>
                                                            <i class="fa fa-circle retired-status me-1"></i> Max Timeloss
                                                            <span class="ms-2 weight-bold">{{ $maximumTimeLoss }} h</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="border mb-3 p-3 rounded" id="incident-type"></div>
                                                <div class="nested-card w-100 mb-3 border p-3 rounded">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <h3> </h3>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <a href="{{ route('riskincidents.lists') }}" target="_blank"
                                                                class="btn align-items-center justify-content-center btn-primary d-flex"><i
                                                                    class="fa fa-angle-double-right me-2"></i> View All</a>
                                                        </div>
                                                    </div>
                                                    <br>
                                                    <div class="table-responsive" id="riskdash_table">
                                                        <table class="table {{ $incidentTypesList->isNotEmpty() ? 'datatable' : '' }}">
                                                            <thead>
                                                                <tr>
                                                                    <th>Incident Type</th>
                                                                    <th>Date & time</th>
                                                                    <th>Time lost</th>
                                                                    <th>Status</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                @if ($incidentTypesList->isNotEmpty())
                                                                    @foreach ($incidentTypesList as $row)
                                                                        @php
                                                                            $statusText = isset($row->statusData) ? $row->statusData->name : '-';
                                                                            $colourText = isset($row->statusData) ? $row->statusData->color_name : '';
                                                                        @endphp
                                                                        <tr>
                                                                            <td>{{ isset($row->typesData->name) ? $row->typesData->name : '' }}
                                                                            </td>
                                                                            <td>{{ displayDateTime($row->incident_datetime) }}
                                                                            </td>
                                                                            <td>{{ $row->time_loss ?? '-' }}</td>
                                                                            <td><span class="badge" style="color: #ffffff; background:{{$colourText}}">{{ $statusText}}</span>
                                                                            </td>
                                                                        </tr>
                                                                    @endforeach
                                                                @else
                                                                    <tr>
                                                                        <td colspan="4">No records found</td>
                                                                    </tr>
                                                                @endif
                                                            </tbody>
                                                        </table>
                                                    </div>

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

                <div class="col-lg-6 col-12 dflex">
                    <div class="card">
                        <div class="card-body pb-0">
                            <div class="head-client">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h3>Assets Insights</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="nested-card">
                                <div class="dash-card">
                                    <div class="flex-count-blk d-flex align-items-end">
                                        <div class="count-start flex-fill">
                                            <h6>Assets</h6>
                                            <h5>{{ $totalAssetCount }}</h5>
                                        </div>
                                        <ul class="insight-list flex-fill d-flex gap-2">
                                            <li>
                                                <i class="fa fa-circle draft-status me-1"></i> IT
                                                <span class="ms-2 weight-bold">{{ $assetTypeCounts['it'] }}</span>
                                            </li>
                                            <li>
                                                <i class="fa fa-circle retired-status me-1"></i> Non-IT
                                                <span class="ms-2 weight-bold">{{ $assetTypeCounts['non_it'] }}</span>
                                            </li>
                                            <li>
                                                <i class="fa fa-circle danger-status me-1"></i> EOL <small
                                                    class="text-muted"> (in 3months)</small>
                                                <span class="ms-2 weight-bold">{{ $end_of_assets_count }}</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="dash-img">
                                        <i class="fe fe-bar-chart-2"></i>
                                    </div>
                                </div>
                                <div id="asset-cat"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('customScript')
    <script></script>
    <style>
        #riskdash_table{
            height: 355px;
        }
        #riskdash_table .dataTables_length, #riskdash_table div.dataTables_wrapper div.dataTables_paginate, #riskdash_table div.dataTables_wrapper div.dataTables_info {
            display: none;
        }
    </style>
@endsection