@extends('layout.adminapp')
@section('page-css')
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
  {{-- <link href="{{ asset('css/buttons.bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ asset('css/buttons.dataTables.min.css') }}" rel="stylesheet"> --}}
    {{-- <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css"> --}}
    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
          <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css"/>
@endsection
@section('page-content')
  @php
  $sumgvhigh=0;
  $sumghigh=0;
  $sumgmedium=0;
  $sumglow=0;
  $summvhigh=0;
  $summhigh=0;
  $summmedium=0;
  $summlow=0;
  @endphp
  @foreach ($data as $key=>$value)
  @php


  $sumgvhigh+= $value['gvhigh'];
  $sumghigh+= $value['ghigh'];
  $sumgmedium+= $value['gmedium'];
  $sumglow+= $value['glow'];
  $summvhigh+= $value['mvhigh'];
  $summhigh+= $value['mhigh'];
  $summmedium+= $value['mmedium'];
  $summlow+= $value['mlow'];
  @endphp
  @endforeach
      <section class="content mb-5">

        <div class="content-inner content-docs">
          <div class="row">
    <div class="col-12">
      <div class="card mb-5">
        <div class="card-header">
        COI Declaration Summary

        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-bordered table-hover" style="width:100%">
<thead class="d-none">
  <tr >
    <th class="bg-secondary" > <strong>Divisions</strong> </th>
    <th class="bg-secondary" > <strong>General Declarations</strong> </th>
    <th  class="bg-secondary" > <strong>Risk Rating</strong> </th>
    <th  class="bg-secondary" > <strong>Momo Declaration</strong> </th>
    <th class="bg-secondary" > <strong>Risk Rating</strong> </th>
    <th class="bg-secondary d-none d-print-none" > <strong>Divisions</strong> </th>
    <th class="bg-secondary d-none d-print-none" > <strong>General Declarations</strong> </th>
    <th  class="bg-secondary d-none d-print-none" > <strong>Risk Rating</strong> </th>
    <th  class="bg-secondary d-none d-print-none" > <strong>Momo Declaration</strong> </th>
    <th class="bg- d-none d-print-none" > <strong>Risk Rating</strong> </th>
    <th class="bg- d-none d-print-none" > <strong>Risk Rating</strong> </th>
  </tr>

</thead>
  <tbody>
    <tr >
      <td class="bg-secondary" > <strong>Divisions</strong> </td>
      <td class="bg-secondary" > <strong>General Declarations</strong> </td>
      <td  class="bg-secondary" colspan="4"> <strong>Risk Rating</strong>
        <div class="row g-2 m-0 p-0">
          <div class="col-lg bg-danger text-white">
Very High
          </div>
          <div class="col-lg bg-danger text-white">
High
          </div>
          <div class="col-lg bg-warning text-white">
Medium
          </div>
          <div class="col-lg">
Low
          </div>
        </div>
       </td>
      <td  class="bg-secondary" > <strong>Momo Declaration</strong> </td>
      <td class="bg-secondary" colspan="4"> <strong>Risk Rating</strong>
        <div class="row m-0 p-0">
          <div class="col-lg bg-danger text-white">
Very High
          </div>
          <div class="col-lg bg-danger text-white">
High
          </div>
          <div class="col-lg bg-warning text-white">
Medium
          </div>
          <div class="col-lg">
Low
          </div>
        </div>
      </td>
      <td class="bg-secondary d-none" > <strong>Divisions</strong> </td>
      <td class="bg-secondary d-none" > <strong>General Declarations</strong> </td>
      <td  class="bg-secondary d-none" > <strong>Risk Rating</strong> </td>
      <td  class="bg-secondary d-none" > <strong>Momo Declaration</strong> </td>
      <td class="bg- d-none" > <strong>Risk Rating</strong> </td>
      <td class="bg- d-none" > <strong>Risk Rating</strong> </td>
    </tr>

    {{-- <tr>
      <td class="bg-secondary "> </td>
      <td class="bg-secondary "> </td>
      <td class="bg-danger text-white" >Very High</td>
      <td class="bg-danger text-white" >High</td>
      <td class="text-white bg-warning">Medium</td>
      <td class="bg-secondary d-">Low</td>

      <td class="bg-secondary"> </td>
      <td class="bg-danger text-white">Very High</td>
      <td class="bg-danger text-white">High</td>
      <td class="text-white bg-warning">Medium</td>
      <td class="bg-secondary">Low</td>
    </tr> --}}

@foreach ($data as $key=>$value)
  <tr>
    <td class="bg-secondary">{{ $value['division'] }}</td>
    <td>{{ $value['gen'] }}</td>
    <td class="bg-danger text-white">{{ $value['gvhigh'] }}</td>
    <td class="bg-danger text-white">{{ $value['ghigh'] }}</td>
    <td class="text-white bg-warning">{{ $value['gmedium'] }}</td>
    <td >{{ $value['glow'] }}</td>
    <td>{{ $value['momo'] }}</td>
    <td class="bg-danger text-white">{{ $value['mvhigh'] }}</td>
    <td class="bg-danger text-white">{{ $value['mhigh'] }}</td>
    <td class="text-white bg-warning">{{ $value['mmedium'] }}</td>
    <td>{{ $value['mlow'] }}</td>
  </tr>

@endforeach
<tr class="bg-secondary">
  <td>Total</td>
  <td>{{ $sumgen}}</td>
  <td>{{ $sumgvhigh }}</td>
  <td>{{$sumghigh}}</td>
  <td>{{$sumgmedium}}</td>
  <td>{{$sumglow}}</td>
  <td>{{ $summomo }}</td>
  <td>{{ $summvhigh }}</td>
  <td>{{$summhigh}}</td>
  <td>{{$summmedium}}</td>
  <td>{{$summlow}}</td>

</tr>

</tbody>


</table>

          </div>

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

@endsection

@section('page-js')
  <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js" charset="utf-8"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
  {{-- <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>--}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js" charset="utf-8"></script>
<script src="{!! asset('js/buttons.server-side.js') !!}"></script>
  <script type="text/javascript">
  $(document).ready(function() {

      $('.table').DataTable( {
        dom: 'Bfrtip',
          buttons: [
              'copyHtml5',
              'excelHtml5',
              'csvHtml5',
              'pdfHtml5'
          ],
          searching: false, paging: false, info: false,
          
      } );
  } );
  </script>
@endsection