@extends('layouts/main')

@section('container')

<!-- css references -->
<link href="css/history.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/bottom-bar.css" rel="stylesheet" type="text/css" media="all" />

{{-- library --}}


<div id="title" class="mt-5 text-center title">
    {{ __('messages.historytitle') }}
</div>

<div class="container mt-5 mb-5 graph">
    <canvas id="myChart" height="250" width="600"></canvas>
</div>

<div class="container-md mt-5 history-list">
    <div id="header" class="row border border-bottom border-white align-items-start history-header">
        <div class="col-1 border-end">
            Test ID
        </div>
        <div class="col-2 border-start border-end">
            {{ __('messages.historytype') }}
        </div>
        <div class="col-3 border-start border-end">
            {{ __('messages.historyfield') }}
        </div>
        <div class="col-2 border-start border-end">
            {{ __('messages.historyscore') }}
        </div>
        <div class="col-2 border-start">
            {{ __('messages.historydate') }}
        </div>
    </div>

    <div id="item-list" class="row border-bottom border-success mt-4 item-list">
        @if (DB::table('answers')->where('user_id', Auth::user()->id)->exists())
            @foreach ($answer as $key=>$item)
                <div class="col-1 border-success border-top border-end border-bottom">
                    {{ ++$key }}
                </div>
                <div class="col-2 border-start border-success border-top border-end border-bottom">
                    {{ $item->business_type }}        
                </div>
                <div class="col-3 border-start border-success border-top border-end border-bottom">
                    {{ $item->business_field }}
                </div>
                <div class="col-2 border-start border-success border-top border-end border-bottom">
                    {{ $score[$key-1] }}/96
                </div>
                <div class="col-2 border-start border-success border-top border-bottom">
                    {{ $item->updated_at }}
                </div>
                <div class="col-2 border-success border-top border-bottom details-hyperlink">
                    <a href="/detail/{{ $item->id }}">Details</a>
                </div>
                <div class="w-100 d-none d-md-block"></div>
            @endforeach
        @else
        <div class="col">
            No data
        </div>
        @endif
    </div>

    <div id="footnote" class="mb-5 footnote">
        <p>*Note: {{ __('messages.historynote') }}</p>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script type="text/javascript">

      var labels =  {{ Js::from($labels) }};
      var users =  {{ Js::from($data) }};

      const data = {
        labels: labels,
        datasets: [{
          label: 'This Year',
          backgroundColor: 'rgb(255, 99, 132)',
          borderColor: 'rgb(255, 99, 132)',
          data: users,
        }]
      };

      const config = {
        type: 'line',
        data: data,
        options: {}
      };

      const myChart = new Chart(
        document.getElementById('myChart'),
        config
      );
</script>

@include('part.bottom')
@endsection