@extends('layouts/main')

@section('container')

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

{{-- page title --}}
<div id="title" class="mt-5 text-center title">
    Detail
</div>

{{-- page items --}}
<div class=" mt-5">
    
    {{-- back button --}}
    <h6 class="container back"><
        <a class="back" href="/history">
            Back
        </a>
    </h6>

    {{-- Test Details --}}
    <div class=" container mt-3 d-flex justify-content-center border border-success border-1 test-info">
        <p for=""><label for="">{{ __('messages.business_type') }}: {{ $type }}</label></p>
        <p for=""><label for="">{{ __('messages.business_field') }}: {{ $field }}</label></p>
        <p for=""><label for="">{{ __('messages.test_date') }}: {{ $date }}</label></p>
    </div>

    {{-- main score --}}
    <div class="mt-5 main-score">
        <label for="">Total score</label>
        <div class="total-score">
            <label >{{ $score }}</label><br>
          </div>
    </div>

    {{-- separator --}}
    <div class="container mt-3 border-bottom separator">
        _
    </div>

    {{-- sub score --}}
    <div class="mb-5 sub-score">
        <!-- 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>
</div>
    
    @include('part.bottom')
@endsection