@extends('portal.main.layout')

@section('title','Risk Assessment Matrix')

@section('breadcrumb')

    <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
        <li class="breadcrumb-item text-sm text-white">
            <a class="text-white" href="{{ route('dashboard.index') }}">
                <i class="fas fa-home"></i>
            </a>
        </li>
        <li class="breadcrumb-item text-sm text-white active" aria-current="page">@yield('title')</li>
    </ol>

@endsection

@section('styles')

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.1/spectrum.min.css">

    <style>
        .table-bordered td, .table-bordered th {
            border: 1px solid black !important;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
        }
        .color-box {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: black; /* Set the label color to black */
            font-weight: bold;
        }
    </style>

@endsection

@section('content')

    <div class="row mt-4" id="riskassessmentmatrix-page"
         data-loadingurl="{{ route('setting.riskassessmentmatrix.list') }}"
         data-updateurl="{{ route('setting.riskassessmentmatrix.update') }}"
         data-token="{{ csrf_token() }}">
        <div class="col-12">

            <div class="card">

                <div class="mt-3 mb-3" style="min-height: 40vh">

                    <div class="col-md-12" style="margin-left: 20px">

                        <div class="table-responsive">

                            <table class="table table-bordered" style="max-width: 80%">
                                <thead>
                                <tr>
                                    <th rowspan="2">Risk Probability</th>
                                    <th colspan="5">Table of Risk Severity</th>
                                </tr>
                                <tr>
                                    <th>Catastrophic (A)</th>
                                    <th>Hazardous (B)</th>
                                    <th>Major (C)</th>
                                    <th>Minor (D)</th>
                                    <th>Negligible (E)</th>
                                </tr>
                                </thead>
                                <tbody id="riskTableBody">
                                <!-- Table rows will be inserted here by JavaScript -->
                                </tbody>
                            </table>

                        </div>

                        <button onclick="saveAction()" id="btnsubmit" class="btn btn-danger ms-auto mb-0" type="button" title="Submit">Submit</button>
                    </div>

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

@endsection

@section('scripts')

    <script src="{{ asset('assets/js/plugins/sweetalert2.all.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/js/plugins/sweet-alerts.min.js') }}" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.1/spectrum.min.js"></script>
    <script src="{{ asset('js/core/riskassessmentmatrix.js') }}" type="text/javascript"></script>

@endsection