@extends('layouts.app')
  @section('content')
  <div class="container mb-5">
    <form method="get">
      <div class="row my-3">
          <input type="hidden" name="evaluation" value="{{\App\Helpers\Helper::encriptId($evaluation_id)}}">

          <div class="col-6">
                <select name="role" id="role" class="form-select">
                  <option value="">Select Role...</option>
                  @foreach($roles as $role)
                    @if(\App\Helpers\Helper::encriptId($role->id) == app('request')->input('role'))
                      <option selected="selected" value="{{ \App\Helpers\Helper::encriptId($role->id)}}">{{ $role->role_name}}</option>
                    @else
                      <option value="{{ \App\Helpers\Helper::encriptId($role->id)}}">{{ $role->role_name}}</option>
                    @endif
                  @endforeach
              </select>
          </div>
          {{-- <div class="col-auto"><button type="submit" class="btn btn btn-primary">Compare</button></div> --}}
      </div>
    </form>
      <hr>
      @if($evaluation->leader_name !== null)
        <p class="text-end"><span class="text-muted">Leader Name:</span> {{$evaluation->leader_name}}</p>
      @endif

      <h4 class="text-center text-muted"> <b>{{($roleEvaluation) ? 'Comparison with '.$roleEvaluation->role_name : ''}}</b></h4>
      @if(app('request')->input('role'))
        @include('report.radar_chart_compare',['data'=>$data])
      @else
        @include('report.radar_chart',['data'=>$data])
      @endif
      <div class="row mt-4">
        <div class="d-grid gap-2 col-2 ms-auto"><a href="{{ url('welcome') }}" class="btn btn-secondary btn-rounded" type="submit">Back </a></div>
      </div>
      <br><br>
  </div>
@endsection

<script src="{{ asset('assets/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
<script src="{{ asset('assets/js/chart.js') }}"></script>

<script>
  $(document).ready(function() {
      $('#role').on('change', function(){
          $(this).closest('form').submit();
      });
  });
</script>