@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">
                            <div class="valuate">
                                @if(!empty($detail_lesson->teacher_review))
                                    <div class="star">
                                                                    </div>
                                    <h2>Avaliação do professor</h2>
                                    <h3>Confira a sua avaliação</h3>
                                @else
                                    <div class="notAvailable">
                                        <h6>Aguardando avaliação</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>
                                @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