@section('css')
  <link
    rel="stylesheet"
    href="/plugins/apex-chart/apexcharts.css"
    type="text/css"
  >
@endsection

<div class="row p-0 m-0" style="min-height: 620px">
  <div class="col-md-4 m-0 p-0">
    <small class="text-muted px-3 pt-2">Priority</small>
    <div id="risk-matrix"></div>
    <small class="text-muted px-5 ml-5">Consolidated Threat</small>
  </div>

  <div class="col-md-7 offset-md-1 p-0">
    <table class="table table-chrome table-striped not-wrapped-results" id="risk-matrix-table">
      <thead>
        <tr>
          @foreach ($tableFields as $field)
            <th>{{ $field }}</th>
          @endforeach
        </tr>
      </thead>

      <tbody>
        @forelse($tableRows as $rowKey => $rows)
          <tr
            data-priority="{{ $rows[5] }}"
            data-consolidated="{{ $rows[6] }}"
          >
            @foreach ($tableFields as $key => $field)
              <td>
                {{ $rows[$key] }}
              </td>
            @endforeach
            <td>
              @include('widgets.dashboard.components._risk-drilldown', [
                  'modalItemId' => "matrix-modal_{$loop->index}",
                  'xValue' => $xValue,
              ])
            </td>
          </tr>
        @empty
          <tr>
            <td colspan="6">
              <div style="display: block flex; justify-content: center;">
                <span>n/a</span>
              </div>
            </td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>
</div>
<style lang="scss" scoped>
  .exportCSV {
    display: none;
  }
</style>
<script type="text/javascript">
  $(function() {
    const htmlTable = document.querySelector('#risk-matrix-table')
    const table = new DataTable(htmlTable, {perPageSelect: [5, 15, 25, 50, 100],perPage: 15, sortable: false,});
    const allRows = [...table.rows().dt.activeRows]
    const htmlRows = allRows.map(el => el.outerHTML)

    function getVisibleColumns(priority, consolidated) {
      const visible = []

      const lower = (str) => String(str).toLowerCase()

      allRows.forEach((el, i) => {
        if (lower(el.dataset.priority) == lower(priority) && lower(el.dataset.consolidated) == lower(
            consolidated)) {
          visible.push(i)
        }
      })

      return [...visible];
    }

    document
      .addEventListener('click', (e) => {
      //  console.log(e.target.nodeName);
        if (e.target.nodeName.toLowerCase() !== 'rect' && e.target.nodeName.toLowerCase() !== 'button' && e.target
          .nodeName.toLowerCase() !== 'a' && !e.target.closest('.modal') && e.target.nodeName.toLowerCase() !== 'input'
          && e.target.nodeName.toLowerCase() !== 'select' ) {
          table.destroy()
          htmlTable.querySelector('tbody').innerHTML = [...htmlRows].join('')
          table.init()
          table.refresh()
        }
      })

    const options = {
      chart: {
        type: 'heatmap',
        height: 500,
        events: {
          click: function(event, chartContext, config) {
            const seriesIndex = config.seriesIndex
            const dataIndex = config.dataPointIndex

            const priority = String(chartContext.w.config.series[seriesIndex].name).toLowerCase()
            const consolidated = String(chartContext.w.config.series[seriesIndex].data[dataIndex].x)
              .toLowerCase()

            const visible = getVisibleColumns(priority, consolidated)

            const keys = [...Array(table.columns().dt.activeRows.length).keys()]

            table.page(1)
            table.refresh()
            table.destroy()
            htmlTable.querySelector('tbody').innerHTML = [...htmlRows].filter((el, i) => visible.includes(i))
              .join('')
            table.init()
          }
        }
      },
      stroke: {
        show: true,
        width: 2,
        colors: ['#0A1422']
      },
      legend: {
        show: false
      },
      tooltip: {
        theme: 'dark',
      },
      plotOptions: {
        heatmap: {
          shadeIntensity: 1,
          radius: 0,
          useFillColorAsStroke: true,
          colorScale: {
            // inverse: false,
            ranges: [{
                from: 0,
                to: {{ $levels[0] + $levels[1] }},
                color: '#88b798',
                name: 'low',
              },
              {
                from: {{ $levels[0] + $levels[1] + 1 }},
                to: {{ $levels[1] + $levels[2] }},
                color: '#8bb6ef',
                name: 'medium',
              },
              {
                from: {{ $levels[1] + $levels[2] + 1 }},
                to: {{ $levels[2] + $levels[3] }},
                color: '#bc9b47',
                name: 'high',
              },
              {
                from: {{ $levels[2] + $levels[3] + 1 }},
                to: {{ $levels[3] + $levels[3] }},
                color: '#a31d1d',
                name: 'extreme',
              },
              {
                from: {{ $levels[3] + $levels[3] + 1 }},
                to: 150,
                color: '#a31d1d',
                name: 'end',
              },
              {
                from: {{ $levels[0] + $levels[3] }},
                to: {{ $levels[1] + $levels[3] - 1 }},
                color: '#f4d689',
                name: 'high2',
              },
            ]
          },
        },
      },
      xaxis: {
        labels: {
          show: true,
          style: {
            colors: '#CCCCCC'
          }
        }
      },
      yaxis: {
        labels: {
          show: true,
          style: {
            colors: '#CCCCCC'
          }
        }
      },
      dataLabels: {
        enabled: true,
        formatter: function(val, opt) {
          const value = opt.w.config.series[opt.seriesIndex].data[opt.dataPointIndex].label ?? 'Fallback'
          return value + " Issues"
        },
        style: {
          colors: ['#333333']
        }
      },
      tooltip: {
        theme: 'dark',
        y: {
          formatter: function(value, {
            series,
            seriesIndex,
            dataPointIndex,
            w
          }) {
            return w.config.series[seriesIndex].data[dataPointIndex].label ?? 'Fallback'
          }
        }
      },
      noData: {
        text: 'n/a'
      },
      series: {!! json_encode($matrixData) !!},
    };
    const chart = new ApexCharts(document.getElementById('risk-matrix'), options);
    chart.render();
  });
</script>