@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" 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 active" 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="incident-master" role="tabpanel" aria-labelledby="incident-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">Incident Insights</h3>
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="dash-card dash-gray">
                                                    <h5 class="counter">{{ $totalIncidentCount }}</h5>
                                                    <h6>Total incidents</h6>
                                                    <div class="dash-img">
                                                        <img src="{{ url('assets/img/icons/chart.svg') }}" alt="img">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-12">
                                                    <div id="chartincident"></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">Incident Response Time</h3>
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="dash-card dash-gray">
                                                    <h5 class="counter">{{ $totalIncidentCount }}</h5>
                                                    <h6>Total Incidents</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 incident-performance" style="width: 220px">
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div id="chartresponse"></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">Affected Assets by Type</h3>
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="dash-card dash-gray">
                                                    <h5 class="counter">{{ $totalAssetCount }}</h5>
                                                    <h6>Total Assets</h6>
                                                    <div class="dash-img">
                                                        <img src="{{ url('assets/img/icons/chart.svg') }}" alt="img">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-12">
                                                    <div id="chartasset"></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">Affected Assets by Risk Level</h3>
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="dash-card dash-gray">
                                                    <h5 class="counter">{{ $totalAssetCount }}</h5>
                                                    <h6>Total Assets</h6>
                                                    <div class="dash-img">
                                                        <img src="{{ url('assets/img/icons/chart.svg') }}" alt="img">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-12">
                                                    <div id="chartrisklevel"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('customScript')
    <script>
        var incidentCounts = @json($incidentCounts);
        var responseCounts = @json($responseCounts);
        var assetTypeCounts = @json($assetTypeCounts);
        var assetRiskCounts = @json($assetRiskCounts);
    </script>
@endsection