@extends('layouts.main')

@section('container')

<!-- css reference (and library links?) -->
<link href="css/results.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/bottom-bar.css" rel="stylesheet" type="text/css" media="all" />

<!-- this div is for the laptop picture which is the main picture of this web -->
<div class="img"></div>

<!-- result page items -->
<div class=" container resultpage">
  @auth

  <!-- page title -->
  <div id="result_title" class=" border-bottom result_title">
    <div class="d-flex justify-content-center result-title">
      <label class="d-flex justify-content-center" for="">Statistic Result</label>
    </div>
    
    <!-- total point accumulation -->
    <div class="dimension-result" id="dimension-result">
      
      <!-- line 1 -->
      <label>{{ __('messages.total_score1') }}</label><br>

      <!-- dynamic score -->
      <div class="total-score">
        <label >{{ $score }}</label><br>
      </div>

      <!-- line 2 -->
      <label>{{ __('messages.total_score2') }}</label>

      <p class="mt-5 total_score_detail">explanation</p>
    </div>
  </div>  
  
  <!-- separator -->
  <div class="mt-5 separator">
    <label>{{ __('messages.graph_separator') }}</label>
  </div>

  <!-- score ditribution -->
  <div id="score_distribution" class="score_distribution">

  <!-- row 1 -->
    <span class="d-flex justify-content-evenly mt-5 row1">
      
      <!-- External Environment score -->
      <div class="EE">
        <p id="EE">External Environment</p>
        <label> {{ $ea }} </label>
        <p class="mt-2 score_distribution_detail">explanation</p>
      </div>

      <!-- internal environment score -->
      <div class="IE">
        <p id="IE">Internal Environment</p>
        <label> {{ $ia }} </label>
        <p class="mt-2 score_distribution_detail">explanation</p>
      </div>
    </span><br>

    <!-- row 2 -->
    <span class="d-flex justify-content-evenly mt-5 row2">
      
      <!-- cognitive aspect score -->
      <div class="CA">
        <p id="CA">Cognitive Aspect</p>
        <label> {{ $ba }} </label>
        <p class="mt-2 score_distribution_detail">explanation</p>
      </div>

      <!-- behavioral aspect score -->
      <div class="BA">
        <p id="BA">Behavioral Aspect</p>
        <label> {{ $ca }} </label>
        <p class="mt-2 score_distribution_detail">explanation</p>
      </div>
    </span>
  </div>
      
  <!-- display for guest that were literally asking the user to login-->
  @else
  <div class="container guest">
  <p>
    {{ __('messages.guest1_result') }} 
    <a href="/login">{{ __('messages.resultlogin') }}</a> 
    {{ __('messages.guest2_result') }} 
    <a href="/register">{{ __('messages.resultregister') }}</a> 
    {{ __('messages.guest3_result') }}
  </p>
  </div>
  @endauth
</div>

@include('part.bottom')
@endsection