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

@section('content')
    <span class="sideBarCalendarMobileNone">
    @include('web.student.partials.sideBarCalendar')
</span>
    <section class="myProfileMobile">
        <div class="menuTopMobile">
            <div class="menuMobileConteiner">

                <a href="index.php" class="voltar"> </a>
                <div>
                    <h2>
                        Progresso
                    </h2>
                </div>

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

            </div>

            <div class="opcoes">
                <div class="active" data-progress="general">
                    <a href="">Geral</a>
                </div>
                <div data-progress="vocabulary">
                    <a href="">Vocab</a>
                </div>
                <div data-progress="homework">
                    <a href="">Homework</a>
                </div>
                <div data-progress="badges">
                    <a href="">Badges</a>
                </div>
            </div>

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

    <section class="myProfile editMobile">
        <div class="barMyProfile closeMobile">
            <div class="title">
                <h2>Progresso</h2>
            </div>

            <div class="generalBadges progressGeneralBadges">
                <div data-progress="general">
                    <h3>Geral</h3>
                </div>

                <div data-progress="vocabulary">
                    <h3>Vocabulário</h3>
                </div>

                <div data-progress="homework">
                    <h3>Homework</h3>
                </div>

                <div data-progress="badges">
                    <h3>Badges</h3>
                </div>
            </div>
        </div>
    <span data-progresslabel="general">
        <div class="pageProgress">
            <div class="contentEvaluation">
                  <div class="conteinerProgress">
            </div>
                <div class="evaluation" data-nota="{{ $stats->writingPercentage !== null ?  $stats->writingPercentage : '0'}}">
                    <div class="infoEvaluation">
                        <h3>
                            <div></div> Writing
                        </h3>
                        <h5>{{ $stats->writingPercentage !== null ? $stats->writingPercentage : '0'}}%</h5>
                    </div>
                    <div class="barEvaluation">
                        <div class="progress"></div>
                    </div>
                </div>
                <div class="evaluation" data-nota="{{ $stats->grammarPercentage !== null ? $stats->grammarPercentage : '0'}}">
                    <div class="infoEvaluation">
                        <h3>
                            <div></div> Reading
                        </h3>
                        <h5>{{$stats->grammarPercentage !== null ? $stats->grammarPercentage :'0' }} %</h5>
                    </div>
                    <div class="barEvaluation">
                        <div class="progress"></div>
                    </div>
                </div>
                
                <div class="evaluation" data-nota="{{$stats->listeningPercentage !== null ? $stats->listeningPercentage : '0' }}">
                    <div class="infoEvaluation">
                        <h3>
                            <div></div> Listening
                        </h3>
                        <h5> {{$stats->listeningPercentage !== null ? $stats->listeningPercentage :'0'}} %</h5>
                    </div>
                    <div class="barEvaluation">
                        <div class="progress"></div>
                    </div>
                </div>
                <div class="evaluation" data-nota="{{ $stats->pronunciationPercentage !== null ? $stats->pronunciationPercentage : '0' }}">
                    <div class="infoEvaluation">
                        <h3>
                            <div></div> Speaking
                        </h3>
                        <h5>{{ $stats->pronunciationPercentage !== null ? $stats->pronunciationPercentage : '0' }} %</h5>
                    </div>
                    <div class="barEvaluation">
                        <div class="progress"></div>
                    </div>
                </div>
            </div>
            @foreach($progress->reviews_received_student as $review)
                <div class="boxProgress">
                    <details>
                        <summary>
                            <h2>Erros e elogios</h2>
                            <h3>Aula do dia 
                                <span>{{ date('d/m', strtotime($review->lesson->date_time)) }}</span> 
                                <span>({{ date('H:i', strtotime($review->lesson->date_time))  }})</span>
                            </h3>
                            <a href="{{route('detailsClass', $review->lesson_id)}}">
                                Ver detalhes
                            </a>
                            <img src="{{ asset('images/web/icons/arrowUp.svg') }}" alt="abrir">
                        </summary>

                        <div class="contentBox">
                            <p>
                                {{ $review->comments }}
                            </p>
                        </div>
                    </details>
                </div>
            @endforeach
        </div>
    </span>
    <span data-progresslabel="vocabulary">
        <div class="pageProgress">
            <div class="contentEvaluation">
                <div class="evaluation" data-nota="{{ $stats->vocabPercentage }}">
                    <div class="infoEvaluation">
                        <h3>
                            <div></div> Vocabulário
                        </h3>
                        <h5>{{ $stats->vocabPercentage }}%</h5>
                    </div>
                    <div class="barEvaluation">
                        <div class="progress"></div>
                    </div>
                </div>
            </div>
            @foreach($lessons as $lesson)
                @if(!$lesson->lesson_vocabulary->isEmpty() && $lesson->status !== 'pending')
                    <div class="boxProgress">
                        <details>
                            <summary>
                                <h2>Vocabulário</h2>
                                <h3>Aula do dia 
                                    <span> {{ $lesson->date_time ? date('d/m', strtotime($lesson->date_time)) : 'Data não disponível' }} </span> 
                                    <span> {{ $lesson->date_time ? date('H:i', strtotime($lesson->date_time)) : 'Hora não disponível' }} </span>
                                </h3>
                                <a href="{{ route('detailsClass', $lesson->id ?? '#') }}">
                                    Ver detalhes
                                </a>
                                <img src="{{ asset('images/web/icons/arrowUp.svg') }}" alt="abrir">
                            </summary>

                            @foreach($lesson->lesson_vocabulary as $vocabulary)
                                <user-vocabulary
                                    route="{{ route('fixe-vocabulary') }}"
                                    :id='`{{ $vocabulary->id }}`'
                                    :lesson_id='`{{ $vocabulary->lesson_id }}`'
                                    :student_id='`{{ $vocabulary->student_id }}`'
                                    :teacher_id='`{{ $vocabulary->teacher_id }}`'
                                    :words='`{{ $vocabulary->word }}`'
                                    :translate='`{{ $vocabulary->translation }}`'
                                    :fixed='`{{$vocabulary->fixed_by_student}}`'
                               ></user-vocabulary>
                            @endforeach
                        </details>
                    </div>
                @endif
            @endforeach
        </div>
    </span>
    <span data-progresslabel="homework">
        <div class="pageProgress" id="homework">
            <div class="contentEvaluation">
                <div class="evaluation" data-nota="{{ $stats->homeworkPercentage }}">
                    <div class="infoEvaluation">
                        <h3>
                            <div></div> Homework
                        </h3>
                        <h5 id="homeworkEvaluation">{{ $stats->homeworkPercentage }} %</h5>
                    </div>
                    <div class="barEvaluation">
                        <div class="progress"></div>
                    </div>
                </div>
            </div>
            @foreach($lessons as $homework)
                @if(!$homework->lesson_homework->isEmpty() && $homework->status !== 'pending')
                    <div class="boxProgress">
                        <details>
                            <summary id="homeworkSummary">
                                <h2>{{$homework->title}}</h2>
                                <h3>Tarefa do dia 
                                    <span>{{ date('d/m/y', strtotime($homework->date_time))  }}</span> 
                                    <span>({{ date('H:i', strtotime($homework->date_time))  }} - {{ date('H:i', strtotime($homework->updated_at))  }})</span></h3>
                                    <a href="{{ route('detailsClass', $homework->id ?? '#') }}">
                                        Ver detalhes</a>
                                 <img src="{{ asset('images/web/icons/arrowUp.svg') }}" alt="abrir">
                            </summary>
                            <div class="contentVocabulary">
                                <div class="boxHomework">
                                    <ul>
                                        @foreach($homework->lesson_homework as $task)
                                            <user-homework
                                                route="{{ route('check-homework') }}"
                                                :id='`{{ $task->id }}`'
                                                :student_id='`{{ $task->user_id }}`'
                                                :task='`{{ $task->title }}`'
                                                :check='`{{$task->checked_by_student}}`'
                                            ></user-homework>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </details>
                    </div>
                @endif
            @endforeach
        </div>
    </span>
    <span data-progresslabel="badges">
        <div class="pageProgressBadges">
            <div class="barBadges" style="width: 120px;">
                <user-badges />
                <div class="linearGradiente"> </div>
            </div>
        </div>
    </span>
</section>
@stop