@extends('web.teacher.index')
@section('title', 'Alunos')

@section('content')

    @include('web.teacher.partials.sideBarHoursWeek')

    <span data-studentslabel="principal" class="active">
        <section class="myProfileMobile">
            <div class="menuTopMobile">
                <div class="menuMobileConteiner">

                    <a href="" class="voltar linkOrange" data-openmodal="comment">
                        Contato
                    </a>

                    <div>
                        <h2>
                            Aluno
                        </h2>
                    </div>

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

                </div>
                <div class="opcoes optionsMobileProf">
                    <div data-progress="geral">
                        <a href="">Geral</a>
                    </div>
                    <div data-progress="historico">
                        <a href="">Histórico</a>
                    </div>
                </div>
            </div>
            <div class="marginMenuMobile2"> </div>
        </section>


        <section class="myProfile editMobile spanProf">
            <div class="barMyProfile closeMobile">
                <div class="title">
                    <h2>
                        @if ($student->type == 'student')
                            Aluno
                        @else
                            Professor
                        @endif
                    </h2>
                    <span>></span>
                    <h2>{{ $student->profile ? $student->profile->name : 'Perfil Incompleto' }}</h2>
                    <a href="" class="comment contactModal" data-openmodal="contact">
                        <img src="{{ asset('images/web/icons/phone-solid.svg') }}" alt="Anotação">
                    </a>

                </div>

                <div class="generalBadges optionsLabelProf">

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

                    <div data-progress="historico">
                        <h3>Histórico</h3>
                    </div>
                </div>
            </div>


            <div class="teachers teachersPageProf" data-progresslabel="geral">

                <div class="conteinerTeachers conteinerTeachersTags" id="infoTeacher">
                    <div class="infoTeachers">
                        <div class="imgTeachers borderOrange">
                            <img src="{{ ($student->profile && !empty($student->profile->avatar)) ? asset($student->profile->avatar) : asset('images/web/avatarProf.svg') }}" alt="students">
                        </div>
                        <div>
                            <h2>{{ $student->profile ? $student->profile->name : 'Perfil Incompleto' }}</h2>
                            @if($student->profile)
                                <h3>{{ $student->profile->city }} ({{ $student->profile->state }})</h3>
                            @endif

                            <ul class="tags">
                                @foreach ($student->interests as $interest)
                                    <li>#{{ $interest->name }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>


                <div class="listTagsMobile">

                    <ul class="tags">
                        @foreach ($student->interests as $interest)
                            <li>#{{ $interest->name }}</li>
                        @endforeach
                    </ul>
                </div>
                <div class="contentTeachers">
                    <div class="boxHorizontal">
                        @if(count($student->levels) != 0)
                            <div class="boxBlue">
                                <img class="avatar doll5" src="{{ asset('images/web/doll/p5.png') }}" alt="avatar">
                                <h3 class="nivel">Nível atual:
                                    {{ $student->levels->first()->prefix }}
                                </h3>

                                <h2 class="nivelTitle">{{ $student->levels->first()->name }}</h2>
                            </div>
                        @endif
                        @isset($student->rating)
                            <div class="contentBox">
                                <div class="star">
                                    @for ($i = 0; $i < round($student->rating); $i++)
                                        <img src="{{ asset('images/web/icons/starValue.svg') }}" alt="Estrela">
                                    @endfor
                                    @for ($i = 0; $i < 5 - round($student->rating); $i++)
                                        <img src="{{ asset('images/web/icons/starBlack.svg') }}" alt="Estrela">
                                    @endfor
                                </div>

                                <h2>Conheça o(a) aluno(a)</h2>

                                @if ($student->user_experience)
                                    <p>
                                        {{ $student->user_experience->details }}
                                    </p>
                                @endif

                            </div>
                        @endisset

                        @if($student->profile)
                            <div class="contentBox">
                                <div class="infoProfile" style="grid-template-columns: 1fr 1fr;">
                                    <div class="info">
                                        <h2>{{ date('d/m/Y', strtotime($student->profile->birth_date)) }}</h2>
                                        <img src="{{ asset('images/web/icons/cake.png') }}" alt="cake">
                                    </div>

                                    <div class="info">
                                        <h2>{{ $student->profile->city }}</h2>
                                        <img src="{{ asset('images/web/icons/localizacao.png') }}" alt="localizacao">
                                    </div>
                                </div>
                            </div>
                        @endif

                        <div class="contentBox">

                            <div class="contentProgress">
                                <div class="conteinerProgress">
                                    <h3>Escrita</h3>
                                    <div class="progress">
                                        <span class="porcentagem timer" data-from="0" data-to="80"
                                            data-speed="1800">{{ $student->user_progress->writing ?? 0 }}</span>
                                        <div class="overlay"></div>
                                        <div class="left"></div>
                                        <div class="right"></div>
                                    </div>
                                </div>

                                <div class="conteinerProgress">
                                    <h3>Gramática</h3>
                                    <div class="progress">
                                        <span class="porcentagem timer" data-from="0" data-to="80"
                                            data-speed="1800">{{ $student->user_progress->reading ?? 0 }}</span>
                                        <div class="overlay"></div>
                                        <div class="left"></div>
                                        <div class="right"></div>
                                    </div>
                                </div>

                                <div class="conteinerProgress">
                                    <h3>Pronúncia</h3>
                                    <div class="progress">
                                        <span class="porcentagem timer" data-from="0" data-to="80"
                                            data-speed="1800">{{ $student->user_progress->talking ?? 0 }}</span>
                                        <div class="overlay"></div>
                                        <div class="left"></div>
                                        <div class="right"></div>
                                    </div>
                                </div>
                                <div class="conteinerProgress">
                                    <h3>Escuta</h3>
                                    <div class="progress">
                                        <span class="porcentagem timer" data-from="0" data-to="80"
                                            data-speed="1800">{{ $student->user_progress->listening ?? 0 }}</span>
                                        <div class="overlay"></div>
                                        <div class="left"></div>
                                        <div class="right"></div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>

                    <div class="boxVertical boxVerticalMobile displayNoneMobile">
                        <div class="conquestsConteiner">

                            @foreach ($student->user_badges as $user_badge)
                                <div class="badges">
                                    <img class="imgBadges" src="{{ asset($user_badge->badge->image) }}" alt="badges">
                                    <h4>{{ $user_badge->badge->name }}</h4>
                                </div>
                            @endforeach

                        </div>
                    </div>
                </div>
            </div>

            @if($lessons->count() > 0)
                <div class="historicStudents" data-progresslabel="historico">
                    @foreach ($lessons as $lesson)
                        <div class="historicClass">
                            <div class="contentClass">
                                <div class="infoClass">
                                    <div class="imgTeachers borderOrange">
                                        <img src="{{ !empty($lesson->student->profile->avatar) ? asset($lesson->student->profile->avatar) : asset('images/web/avatarProf.svg') }}" alt="students">
                                    </div>
                                    <div>
                                        <h2>
                                            <a href="{{ route('detailsClass', $lesson->id) }}" style="color: black;">
                                                Aula do dia <span>{{ $lesson->date_time->format('d/m/Y (H:i)') }}</span></h2>
                                            </a>
                                        
                                        <h3>Status: {{ $lesson->statusLabel }} </h3>
                                        <h3>Professor: {{ $lesson->teacher->profile->name }}</h3>
                                    </div>
                                </div>

                                <div class="valuateClass">
                                    <a href="{{ route('detailsClass', $lesson->id) }}">Ver detalhes</a>
                                    @if( empty($lesson->teacher_review) )
                                        <a href="{{ route('value') }}">Avaliar</a>
                                    @endif
                                </div>

                            </div>
                        </div>
                  @endforeach
                </div>
            @else
                <p>Nenhuma aula encontrada com este aluno.</p>
            @endif

        </section>
    </span>

    <span data-studentslabel="inter">
        <section class="myProfileMobile">
            <div class="menuTopMobile">
                <div class="menuMobileConteiner">

                    <a href="{{ route('web.home') }}" class="voltar"></a>
                    <div>
                        <h2>Interesses</h2>
                    </div>

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

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

        <section class="myProfile editMobile spanProf">

            <div class="teachers teachersPageProf">
                <div class="contentTeachers">
                    <div class="boxVertical boxVerticalMobile">
                        <div class=" contentBox">
                            <div class="boxInterets activeBox">
                                <img src="{{ asset('images/web/icons/menos.svg') }}" alt="+">
                                <h2>Esportes</h2>
                            </div>
                            <div class="boxInterets activeBox">
                                <img src="{{ asset('images/web/icons/menos.svg') }}" alt="+">
                                <h2>Futebol</h2>
                            </div>
                            <div class="boxInterets activeBox">
                                <img src="{{ asset('images/web/icons/menos.svg') }}" alt="+">
                                <h2>Cultura
                                    americana</h2>
                            </div>
                            <div class="boxInterets">
                                <img src="{{ asset('images/web/icons/mais.svg') }}" alt="+">
                                <h2>Baladas</h2>
                            </div>
                            <div class="boxInterets">
                                <img src="{{ asset('images/web/icons/mais.svg') }}" alt="+">
                                <h2>Cozinha</h2>
                            </div>
                            <div class="boxInterets">
                                <img src="{{ asset('images/web/icons/mais.svg') }}" alt="+">
                                <h2>Academia</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </span>


    <span data-studentslabel="hora">
        <section class="myProfileMobile">
            <div class="menuTopMobile">
                <div class="menuMobileConteiner">

                    <a href="{{ route('web.home') }}" class="voltar"></a>
                    <div>
                        <h2>Horários</h2>
                    </div>

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

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

        <section class="sideBar sideBarHoursWeek">

            <div class="hoursWeekSideBar">
                <div class="hoursWeekConteiner">
                    <h4>Seg</h4>

                    <div class="shift">
                        <button>Manhã</button>
                        <button>Tarde</button>
                        <button>Noite</button>
                    </div>
                </div>

                <div class="hoursWeekConteiner">
                    <h4>Ter</h4>

                    <div class="shift">
                        <button class="active">Manhã</button>
                        <button class="active">Tarde</button>
                        <button class="active">Noite</button>
                    </div>
                </div>

                <div class="hoursWeekConteiner">
                    <h4>Qua</h4>

                    <div class="shift">
                        <button>Manhã</button>
                        <button class="active">Tarde</button>
                        <button class="active">Noite</button>
                    </div>
                </div>

                <div class="hoursWeekConteiner">
                    <h4>Qui</h4>

                    <div class="shift">
                        <button>Manhã</button>
                        <button class="active">Tarde</button>
                        <button>Noite</button>
                    </div>
                </div>

                <div class="hoursWeekConteiner">
                    <h4>Sex</h4>

                    <div class="shift">
                        <button>Manhã</button>
                        <button>Tarde</button>
                        <button>Noite</button>
                    </div>
                </div>

                <div class="hoursWeekConteiner">
                    <h4>Sáb</h4>

                    <div class="shift">
                        <button class="active">Manhã</button>
                        <button>Tarde</button>
                        <button class="active">Noite</button>
                    </div>
                </div>

                <div class="hoursWeekConteiner">
                    <h4>Dom</h4>

                    <div class="shift">
                        <button>Manhã</button>
                        <button class="active">Tarde</button>
                        <button class="active">Noite</button>
                    </div>
                </div>

            </div>
        </section>
    </span>

    <!-- Modal Contato -->
    <section class="modalClassChecked" data-modal="contact">

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

        <div class="contentChecked">
            <h1>
                Contato
            </h1>
            <h3>Entre em contato com {{$student->profile->name}}</h3>

            <div class="contact">
                <a href="https://wa.me/{{$student->profile->phone}}" target="_blank" rel="noopener noreferrer">
                    <img src="{{ asset('images/web/icons/whatsapp-brands.svg') }}" alt="whatsapp">
                </a>
                <h4>{{$student->profile->phone}}</h4>
                <a href="mailto:" target="_blank" rel="noopener noreferrer">
                    <img src="{{ asset('images/web/icons/envelope-solid.svg') }}" alt="email">
                </a>

            </div>

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

    </section>
@stop