@extends('layouts.layout_menu_all')

@section('content')
    <style>
        table, th, td {
            border: 1px solid grey;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px auto;
        }
        .bg-blue-green {
            background-color: #009999
        }
        .bg-blue-green-1 {
            background-color: #CCFFCC
        }

        .bg-blue {
            background-color: #000099
        }
        .bg-blue-1 {
            background-color: #CCCCFF
        }

        .bg-blue-3 {
            background-color: #89c1f8
        }

        .bg-blue-4 {
            background-color:#00d2f7
        }
        .bg-green {
            background-color: #00cc00
        }
        .bg-green-1 {
            background-color: #CCFFCC
        }
        .bg-purple {
            background-color: #b266ff
        }
        .bg-purple-1 {
            background-color: #E5CCFF
        }
        .bg-yellow {
            background-color: #FFFF00
        }
        .bg-yellow-1 {
            background-color: #FFFFCC
        }
        .bg-red {
            background-color: #FF3333
        }
        .bg-red-1 {
            background-color: #FFCCCC
        }

        .text-white {
            color: white;
        }
        .text-strong {
            font-weight: bold;
        }

        .text-center {
            text-align: center;
        }
        .text-right {
            text-align: right;
        }
        .text-left {
            text-align: left;
        }
        .text-justify {
            text-align: justify;
        }

        .border-status-blue {
            border-color: blue
        }

        .border-white {
            border-color:white;
            border-width: thick;
        }

        .bg-color-black {
            background-color: black;
        }
    </style>
    <div class="row">
        <div class="col-sm-12">
            <div class="box">
                <div class="box-header with-border; label label-primary">
                    <h3 class="box-title">MANAJEMEN RISIKO</h3>
                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="box">
                <div class="box-header with-border">
                    <div class="row">
                        <div class="col-xs-10">
                            <h3 class="box-title">Penyampaian Formulir Komitmen Manajemen Risiko</h3>
                        </div>
                        <div class="col-xs-2 text-right">
                            <a href='{{ route("home") }}' class="btn btn-warning">Kembali</a>
                        </div>
                    </div>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="form-group col-lg-12 form-hide">
                            <label for="status">Tahun</label>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class='input-group date' id='datetimepicker-year-mr'>
                                        <input type='text' id="year-mr" class="form-control" value="{{now()->format("Y")}}"/>
                                        <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <table class="table table-mr">
                        <thead class="label-warning">
                            <tr>
                                <th rowspan="3" class="text-center" style="vertical-align:middle; border:1px solid white;">NO</th>
                                <th rowspan="3" class="text-center" style="vertical-align:middle; border:1px solid white;">TINGKAT</th>
                                <th colspan="15" class="text-center" style="vertical-align:middle; border:1px solid white;">STATUS PENYAMPAIAN</th>
                            </tr>
                            <tr>
                                <th colspan="3" class="text-center" style="vertical-align:middle; border:1px solid white;">KOMITMEN MR</th>
                            </tr>
                            <tr>
                                <th class="text-center" style="vertical-align:middle; border:1px solid white; width:5%">V</th>
                                <th class="text-center" style="vertical-align:middle; border:1px solid white; width:5%">D</th>
                                <th class="text-center" style="vertical-align:middle; border:1px solid white; width:5%">B</th>
                            </tr>
                        </thead>
                        <tbody class="table-mr-body">
                            @php
                                $v = 0;
                                $d = 0;
                                $b = 0;
                            @endphp
                            @foreach ($data->unit as $item)
                                @if (! $item->verifikasi)
                                    @php
                                        $color = '#c50909';
                                    @endphp
                                @elseif ($item->verifikasi < 3)
                                    @php
                                        $color = '#d8b802';
                                    @endphp
                                @else
                                    @php
                                        $color = '#048504';
                                    @endphp
                                @endif
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td style="color: {{ $color }}">{{ $item->NAMA }}</td>
                                    @if (! $item->verifikasi)
                                        @php
                                            $b++;
                                        @endphp
                                        <td class="text-center"></td>
                                        <td class="text-center"></td>
                                        <td class="text-center"><span class="fa fa-check"></span></td>
                                    @elseif ($item->verifikasi < 3)
                                        @php
                                            $d++;
                                        @endphp
                                        <td class="text-center"></td>
                                        <td class="text-center"><span class="fa fa-check"></span></td>
                                        <td class="text-center"></td>
                                    @else
                                        @php
                                            $v++;
                                        @endphp
                                        <td class="text-center"><span class="fa fa-check"></span></td>
                                        <td class="text-center"></td>
                                        <td class="text-center"></td>
                                    @endif
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot class="table-mr-foot">
                            <tr>
                                <td colspan="2">Total Jumlah</td>
                                <td class="text-center" style="background-color: #048504; color: #fff">{{ $v }}</td>
                                <td class="text-center" style="background-color: #d8b802; color: #fff">{{ $d }}</td>
                                <td class="text-center" style="background-color: #c50909; color: #fff">{{ $b }}</td>
                            </tr>
                        </tfoot>
                    </table>
                    <br>
                    <p>Keterangan : </p>
                    <p>V : Terverifikasi</p>
                    <p>D : Draft, Dalam verifikasi UKI Uker/UPT, Dalam verifikasi UKI Unor</p>
                    <p>B : Belum membuat</p>
                </div>
            </div>
        </div>
    </div>
@endsection