@extends('layouts.master')

@section('content')
  <div class="container">
    @include('pages.auth.assessment.details')
  </div>
@stop

@section('sub-content')
  <form class="{{ $assessment->stage === App\Models\Assessment::STAGE_COMPLETED ? 'form-disable' : '' }}" id="formFinalReport" assessmentId="{{ $assessment->id }}">
    <div class="view-assessments-content">
      @include('pages.auth.assessment.view-navs')
      <div class="view-assessment-form {{ $pageName }}">
        <div class="row">
          <div class="col text-center text-lg-end">
            <a href="/">
              <img class="img-fluid" src="{{ URL::to('/') }}/images/common/leadershipedge-logo.jpg" alt="Image"/>
            </a>
          </div>
        </div>
        <div class="row text-center">
          <div class="col">
            <h2>Summary of Key Findings</h2>
          </div>
        </div>
        <div class="row mb-4">
          <div class="col-lg-10 offset-lg-1">
            <div class="form-floating">
              <textarea maxlength="450" dimensionId="0" name="dimension[0]" class="form-control dimensionTextArea" placeholder="Summary...">{{ $dimensionDescriptorAnswers[0] ?? '' }}</textarea>
              <label for="dimension0">Summary...</label>
            </div>
          </div>
        </div>

        <div class="row text-center mb-4">
          <div class="col-3">
            <b>The Edge Index</b>
          </div>
          <div class="col-3">
            <b><div class="box red"></div>Area Of Development</b>
          </div>
          <div class="col-3">
            <b><div class="box yellow"></div>Area Of Effectiveness</b>
          </div>
          <div class="col-3">
            <b><div class="box Green"></div>Area Of Strength</b>
          </div>
        </div>

        @foreach($dimensions as $dimension)
          <div class="row mb-4 dimension-container" dimensionName="{{ strtolower($dimension->name) }}">
            <div class="col-md-6 text-center">
              <b>{{ $dimension->name }} - Cluster Score:</b> <b class="clasterScore">{{ $clasterManager['claster_score'][$dimension->id]['score'] }}</b> <b>of 7</b>
              <div class="form-floating">
                <textarea dimensionId="{{ $dimension->id }}" maxlength="450" name="dimension[{{ $dimension->id }}]" class="form-control dimensionTextArea" placeholder="Summary..." id="dimension{{ $dimension->id }}">{{ $dimensionDescriptorAnswers[$dimension->id] ?? '' }}</textarea>
                <label for="dimension0">Summary...</label>
              </div>
            </div>
            <div class="col-md-6">
              <table class="clasterTable Xa {{ strtolower($dimension->name) }}">
                <tbody>
                  <tr class="tableHead">
                    <th>{{ $dimension->name }}</th>
                    <th colspan="3" class="text-center">Candidate Cluster<br>Score: <b class="clasterScore">{{ $clasterManager['claster_score'][$dimension->id]['score'] }}</b></th>
                  </tr>
                  <tr class="tableHead">
                    <th>{{ App\Models\Assessment::getDimensionDescriptions($dimension->name) }}</th>
                    <th class="red"></th>
                    <th class="yellow"></th>
                    <th class="green"></th>
                  </tr>
                  @foreach($clasterManager['claster_data'][$dimension->id] as $competency)
                    <tr>
                                            <th class="text-end">{{ str_replace('/', ' / ', $competency['competence_name']) }}</th>
                      <td class="color-red-{{$competency['competence_id']}} {{ $newColor === 'red' ? 'red' : '' }}">
                        @if($competency['color'] === 'red')
                          <div class="ha_gray" style="top: 0px; left: {{ floor($competency['procent']) }}px;"></div>
                          <div dimensionName="{{ strtolower($dimension->name) }}" id="red" a="{{ $assessment->id }}" c="{{ $competency['competence_id'] }}" class="ha ui-draggable" style="top: 0px; left: {{ $newMarkerPositions[$competency['competence_id']]['position'] === 0  ? floor($competency['procent']) - 16 : floor($newMarkerPositions[$competency['competence_id']]['position']) }}px;"></div>
                        @endif
                      </td>
                      <td class="color-yellow-{{$competency['competence_id']}} {{ $newColor === 'yellow' ? 'yellow ' : '' }}">
                        @if($competency['color'] === 'yellow')
                          <div class="ha_gray" style="top: 0px; left: {{ floor($competency['procent']) }}px;"></div>
                          <div dimensionName="{{ strtolower($dimension->name) }}" id="yellow" a="{{ $assessment->id }}" c="{{ $competency['competence_id'] }}" class="ha ui-draggable" style="top: 0px; left: {{ $newMarkerPositions[$competency['competence_id']]['position'] === 0  ? floor($competency['procent']) - 16 : floor($newMarkerPositions[$competency['competence_id']]['position']) }}px;"></div>
                        @endif
                      </td>
                      <td class="color-green-{{$competency['competence_id']}} {{ $newColor === 'green' ? 'green ' : '' }}">
                        @if($competency['color'] === 'green')
                          <div class="ha_gray" style="top: 0px; left: {{ floor($competency['procent']) }}px;"></div>
                          <div dimensionName="{{ strtolower($dimension->name) }}" id="green" a="{{ $assessment->id }}" c="{{ $competency['competence_id'] }}" class="ha ui-draggable" style="top: 0px; left: {{ $newMarkerPositions[$competency['competence_id']]['position'] === 0  ? floor($competency['procent']) - 16 : floor($newMarkerPositions[$competency['competence_id']]['position']) }}px;"></div>
                        @endif
                      </td>
                    </tr>
                  @endforeach
                  <tr class="borderless">
                    <td></td>
                    <td class="text-center"><b>Low</b></td>
                    <td class="text-center"><b>Mid</b></td>
                    <td class="text-center"><b>High</b></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        @endforeach
      </div>
    </div>
    <div class="container competence-container">
      @foreach($competenceDescriptors['dimension'] as $dimensionId => $dimension)
        <div class="accordion">
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#dimensionGroup{{ $dimensionId }}" aria-expanded="true" aria-controls="dimensionGroup{{ $dimensionId }}">
                <b class="fs-4">{{ $dimension }}</b><b>&nbsp;- Cluster Score:&nbsp;</b><b class="clasterScore {{ strtolower($dimension) }}">{{ $clasterManager['claster_score'][$dimensionId]['score'] }}</b><b>&nbsp;of 7</b>
              </button>
            </h2>
            <div id="dimensionGroup{{ $dimensionId }}" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
              <div class="accordion-body">
                <table class="table table-striped table-bordered">
                  <tbody>
                    @foreach($competenceDescriptors['competence'][$dimensionId] as $competenceId => $competence)
                      <tr>
                        <td width="30%" class="text-end">{{ $competence }}</td>
                        <td width="70%" style="position: relative">
                          <div class="form-floating">
                            <textarea maxlength="190" class="form-control dimensionTextArea" placeholder="Summary..." competenceId="{{ $competenceId }}" id="competence{{$competenceId}}" name="competence[{{ $competenceId }}]">{{ array_key_exists($competenceId, $competenceDescriptorAnswers) 
                                && array_key_exists($competenceDescriptorAnswers[$competenceId], $competenceDescriptors['descriptor'][$dimensionId][$competenceId]) 
                                ? $competenceDescriptors['descriptor'][$dimensionId][$competenceId][$competenceDescriptorAnswers[$competenceId]] 
                                : '' }}</textarea>
                            <label for="dimension0">Summary...</label>
                          </div>
                          <i class="bi-caret-down-fill openDropdown"></i> 
                          <div class="d-none list-group descriptorSelections">
                            @foreach($competenceDescriptors['descriptor'][$dimensionId][$competenceId] as $descriptorId => $descriptor)
                              <button type="button" descriptorId="{{ $descriptorId }}" competenceId="{{ $competenceId }}" class="list-group-item list-group-item-action descriptorSelect" aria-current="true">
                                {{ $descriptor }}
                              </button>
                            @endforeach
                          </div>
                        </td>
                      </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      @endforeach
    </div>

    @include('pages.auth.assessment.report-pdf-container')

    <div class="container">
      <div class="mt-4 row">
        <div class="col text-center">
          <div class="d-grid gap-2 d-lg-block">
            <button id="saveChanges" type="button" class="btn btn-primary btn-lg">Save Changes</button>
            @if ($user->role === App\Models\User::ROLE_WEBMASTER)
              <button id="completeAssessment" type="button" class="btn btn-primary btn-lg">Complete Assessment</button>
            @endif
            <button id="generatePdfBtn" type="button" class="btn btn-primary btn-lg">Generate PDF Report</button>
          </div>
        </div>
      </div>
    </div>
  </form>
@stop

@section('footer-scripts')
<script src="{{ asset('js/finalReport.js') }}"></script>
<script src="{{ asset('js/generatePdf.js') }}"></script>
@endsection