@extends('web.student.index')
@section('title', 'Detalhes')

@section('content')
@include('web.student.partials.sideBarClass')

<span data-readmore="view" data-readvocab class="active">
  <section class="myProfileMobile">
    <div class="menuTopMobile">
      <div class="menuMobileConteiner">

        <a href="{{ route('web.home') }}" class="voltar">
          <img src="{{ asset('images/web/icons/voltar.svg') }}" alt="voltar">
        </a>


        <div>
          <h2 class="font-bold">
            Aula do dia {{ $detail_lesson->date_time->format('d/m') }}
          </h2>
        </div>

        <a href="" class="edit">

        </a>

      </div>

      <div class="opcoes optionsDetailsMobile">
        <div class="active" data-progress="geral">
          <a href="">Geral</a>
        </div>

        <div data-progress="abstract">
          <a href="">Resumo</a>
        </div>

        <div data-progress="notes">
          <a href="">Notes</a>
        </div>

        <div data-progress="homework">
          <a href="">Homework</a>
        </div>
      </div>

    </div>
    <div class="marginMenuMobile2"> </div>
  </section>


  <section class="myProfile editMobile">
    <div class="barMyProfile closeMobile">
      <div class="title">
        <h2>Minhas aulas</h2>
        <span>></span>
        <h2>Aula do dia {{ $detail_lesson->date_time->format('d/m') }}</h2>
      </div>

      <div class="optionsMore">
        <div class="generalBadges progressGeneralBadges">
          <div data-progress="geral" class="active">
            <h3>Geral</h3>
          </div>

          <div data-progress="notes">
            <h3>Notes</h3>
          </div>
        </div>
      </div>
    </div>

    <span data-progresslabel="geral">

      <div class="classDetails">
        <div class="contentDetails">

          <div class="boxHorizontal">
              @if($studentStats && $studentStats->level)
                <div class="boxBlue">
                  <img class="avatar sDolls6" src="{{ asset('images/web/doll/ps6.png') }}" alt="avatar">
                  <h3 class="nivel">Seu nível atual: {{$studentStats->level->prefix}}</h3>
                  <h2 class="nivelTitle">{{$studentStats->level->name}}</h2>

                  <p>Última atualização:{{\Illuminate\Support\Carbon::parse($studentStats->levelUpdatedAt)->format('d/m/Y')}}</p>
                </div>
             @endif

            <div class="valuate">
                @if(!empty($detail_lesson->teacher_review))
                    <div class="star">
                                                                    </div>
                    <h2>Avaliação do professor</h2>
                    <h3>Confira a sua perfomance na aula e fique de olho no seu progresso em cada skill.</h3>
                @else
                    <div class="notAvailable">
                        <h6>Aguardando avaliação do professor</h6>
                    </div>
                @endif

                @if($detail_lesson->teacher_review)
                  <!-- Conteúdo Disponível  -->
                  <div class="contentEvaluation">
                    <div class="evaluation">
                      <div class="infoEvaluation infoStar">
                        <h3>
                          Writing
                        </h3>
                        <star-rating
                            :increment="0.01"
                            :active-color="['#dc3545','#ffb323']"
                            :star-points="[23,2, 14,17, 0,19, 10,34, 7,50, 23,43, 38,50, 36,34, 46,19, 31,17]"
                            :clearable="true"
                            :star-size="23"
                            gap="20px"
                            :rating="{{$detail_lesson->teacher_review->writing  ?? 0}}"
                            :show-rating="false"
                            :inactive-color="['#80807f']"
                            :read-only="true"
                        >
                           </star-rating>
                      </div>
                    </div>


                    <div class="evaluation">
                      <div class="infoEvaluation infoStar">
                        <h3>
                          Grammar
                        </h3>
                            <star-rating
                                :increment="0.01"
                                :active-color="['#dc3545','#ffb323']"
                                :star-points="[23,2, 14,17, 0,19, 10,34, 7,50, 23,43, 38,50, 36,34, 46,19, 31,17]"
                                :clearable="true"
                                :star-size="23"
                                gap="20px"
                                :rating="{{$detail_lesson->teacher_review->grammar  ?? 0}}"
                                :show-rating="false"
                                :inactive-color="['#80807f']"
                                :read-only="true"
                            >
                           </star-rating>
                      </div>
                    </div>


                    <div class="evaluation">
                      <div class="infoEvaluation infoStar">
                        <h3>
                          Listening
                        </h3>
                            <star-rating
                                :increment="0.01"
                                :active-color="['#dc3545','#ffb323']"
                                :star-points="[23,2, 14,17, 0,19, 10,34, 7,50, 23,43, 38,50, 36,34, 46,19, 31,17]"
                                :clearable="true"
                                :star-size="23"
                                gap="20px"
                                :rating="{{$detail_lesson->teacher_review->listening ?? 0}}"
                                :show-rating="false"
                                :inactive-color="['#80807f']"
                                :read-only="true"
                            >
                           </star-rating>
                      </div>
                    </div>


                    <div class="evaluation">
                      <div class="infoEvaluation infoStar">
                        <h3>
                          Pronunciation
                        </h3>

                       <star-rating
                           :increment="0.01"
                           :active-color="['#dc3545','#ffb323']"
                           :star-points="[23,2, 14,17, 0,19, 10,34, 7,50, 23,43, 38,50, 36,34, 46,19, 31,17]"
                           :clearable="true"
                           :star-size="23"
                           gap="20px"
                           :rating="{{$detail_lesson->teacher_review->pronunciation ?? 0}}"
                           :show-rating="false"
                           :inactive-color="['#80807f']"
                           :read-only="true"
                       >
                         </star-rating>
                      </div>
                    </div>

                  </div>
               @endif

            </div>

            <div class="detailsAbstract">
                <h2>Erros e elogios</h2>
                <h3>Fique atento às observações do professor. </h3>

                @if($detail_lesson->teacher_review)
                    <div class="contentAbstract">
                        <p>{{ $detail_lesson->teacher_review->comments }}</p>
                    </div>
                @else
                  <div class="notAvailable">
                    <h6>Aguardando feedback</h6>
                  </div>
                @endif
            </div>
          </div>


          <div class="boxVertical">
            <div class="vocab">
                <h2>Vocabulário da aula</h2>
                <h3>Marque as palavras que já fixaram na sua cabeça e fazem parte do seu vocabulário.</h3>
                @if($detail_lesson->lesson_vocabulary()->count() > 0)
                    <div class="contentBox">
                        @foreach($detail_lesson->lesson_vocabulary as $word)
                            <div class="boxVocab @php echo $word->fixed_by_student ? 'active' : '' @endphp" id="boxVocab">
                              <div class="wordVocab">
                                <h2>{{ $word->word }}</h2>
                                <h3>{{ $word->translation }}</h3>
                              </div>
                              <div class="checkVocab">
                                  @if($word->fixed_by_student)
                                      <img src="{{ asset('images/web/icons/checkVocab.svg') }}" alt="">
                                  @else
                                      <img src="{{ asset('images/web/icons/vocab.svg') }}" alt="">
                                  @endif
                              </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="notAvailable">
                        <h6>Aguardando vocabulário</h6>
                    </div>
                @endif
            </div>
          </div>
        </div>
      </div>
    </span>

    <span data-progresslabel="notes">
      <div class="notes">
        <div class="contentNotes">
          @if($detail_lesson->notes()->count() > 0)
            <div class="notesTitle">
                <h1>Anotações</h1>
                <p>Aqui temos todas as anotações que o aluno fez durante a aula. Ele também pode voltar aqui e adicionar mais anotações. </p>
            </div>
            @foreach($detail_lesson->notes as $note)
                <p>{{ $note->content }}</p>
            @endforeach
          @else
            <div class="offNotes">
                <h2>Você ainda não fez nenhuma anotação nessa aula. </h2>
                <h3>Insira comentários, dúvidas, e curiosidades para consulta.</h3>
                <img src="{{asset('images/web/croods.svg')}}" alt="Avatar">
            </div>
          @endif
        </div>
        <div class="addNotes" data-openmodal="notes">
          <img src="{{ asset('images/web/icons/notes.svg') }}" alt="Anotação">
        </div>
      </div>

      <!-- Modal Anotações -->
      <section class="modalClassChecked" data-modal="notes">

        <img class="fechar" src="{{ asset('images/web/icons/x.svg') }}" alt="Fechar">

        <div class="contentChecked">
          <h1>
            Anotações
          </h1>
          <h3>Salve anotações para mais tarde.</h3>

          <textarea name="" id="" class="" placeholder="Insira aqui as suas anotações "></textarea>

          <a href="" class="ver">
            Salvar anotações
          </a>

          <p class="voltar">
            Cancelar
          </p>
        </div>

      </section>

    </span>

    <!-- Versão Mobile -->

    <span data-progresslabel="homework">
      <div class="sideHomework">
        <div class="homeworkTitle">
          <h1>Homework</h1>
        </div>

        @if($detail_lesson->lesson_homework()->count() > 0)
            <ul id="homework">
                @foreach($detail_lesson->lesson_homework as $homework)
                  <li @if($homework->checked_by_student)class="active"@endif>
                    @if($homework->checked_by_student)
                        <img class="check" src="{{ asset('images/web/icons/true.svg') }}" alt="check">
                    @else
                        <img class="check" src="{{ asset('images/web/icons/check.svg') }}" alt="check">
                    @endif
                    <h2>{{$homework->title}}</h2>
                        @if($homework->link)
                            <a href="{{ $homework->link }}">Ver tarefa</a>
                        @endif
                  </li>
                @endforeach
            </ul>
        @else
            <div class="p-4 w-100">
                <div class="notAvailable">
                    <h6>Aguardando tarefas</h6>
                </div>
            </div>
        @endif
    </div>

    </span>


    <span data-progresslabel="abstract">
      <div class="abstractContentMobile">
        <div class="sideHomework">
          <div class="homeworkTitle">
            <h1>Resumo </h1>
            <p>Resumo da aula passada, que já foi realizada e finalizada.</p>
          </div>
        </div>

          @if($content)
              @foreach($content as $item)
                <div class="sideAbstract">
                  <details>
                    <summary>
                      <h2>{{ $item['title'] }}</h2>
                      <img src="{{ asset('images/web/icons/arrowUp.svg') }}" alt="abrir">
                    </summary>

                    @foreach($item['content'] as $block)
                        <div>
                            <h2>{{$block->title}}</h2>
                            <p>{{$block->content}}</p>
                            @if($block->links)
                                  <h2>Links</h2>
                                  <div>
                                    @foreach ($block->links as $link)
                                      <a href="{{ $link['link'] }}">{{ $link['title'] }}</a>
                                    @endforeach
                                  </div>
                            @endif
                        </div>
                    @endforeach
                  </details>
                </div>
              @endforeach
          @endif
      </div>

    </span>

  </section>
</span>

<span data-readmore="abstract">

  <section class="myProfileMobile">
    <div class="menuTopMobile">
      <div class="menuMobileConteiner">

        <a href="index.php" class="voltar"></a>
        <div>
          <h2>Erros e elogios</h2>
        </div>

        <a href="" class="edit" data-viewmore>
          <img src="{{ asset('images/web/icons/x.svg') }}" alt="voltar">
        </a>

      </div>
    </div>
    <div class="marginMenuMobile1"> </div>
  </section>
</span>


<span data-readvocab="vocab">

  <section class="myProfileMobile">
    <div class="menuTopMobile">
      <div class="menuMobileConteiner">

        <a href="index.php" class="voltar"></a>
        <div>
          <h2>Vocabulário</h2>
        </div>

        <a href="" class="edit" data-viewvocab>
          <img src="{{ asset('images/web/icons/x.svg') }}" alt="voltar">
        </a>

      </div>
    </div>
    <div class="marginMenuMobile1"> </div>
  </section>

  <section class="myProfile editMobile">
    <div class="contentVocabMobile">
      <div class="sideVocab">
          @if($detail_lesson->lesson_vocabulary()->count() > 0)
              <div class="contentBox">
                @foreach($detail_lesson->lesson_vocabulary as $word)
                    <div class="boxVocab @php echo $word->fixed_by_student ? 'active' : '' @endphp" id="boxVocab">
                        <div class="wordVocab">
                            <h2>{{ $word->word }}</h2>
                            <h3>{{ $word->translation }}</h3>
                        </div>
                        <div class="checkVocab">
                            @if($word->fixed_by_student)
                                <img src="{{ asset('images/web/icons/checkVocab.svg') }}" alt="">
                            @else
                                <img src="{{ asset('images/web/icons/vocab.svg') }}" alt="">
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="notAvailable">
                <h6>Aguardando vocabulário</h6>
            </div>
        @endif
      </div>
    </div>
  </section>
</span>
@endsection