@extends('web.student.index')
@section('title', 'Sala de aula')

@section('content')

    @include('web.student.partials.sideBar')



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

                <a href="index.php" class="voltar"></a>
                <div>
                    <h2>
                        Sala de aula
                    </h2>
                </div>

                <a href="{{ route('web.home') }}" class="edit" data-openmodal="encerrar">
                    <img src="{{ asset('images/web/icons/x.svg') }}" alt="voltar">
                </a>
            </div>
        </div>
        <div class="marginMenuMobile1"> </div>

    </section>


    <section class="myProfile editMobile">
        <div class="barMyProfile closeMobile">
            <div class="title">
                <h2>Sala de aula</h2>
            </div>

            <div class="progressClassRoom">
                <div class="progressBarRoom">
                    <div class="infoProgressRoom">
                        @php
                            $remaningTime = $ready->created_at->addMinutes($lesson->duration_in_minutes)->format('Y-m-d H:i:s');
                            $durationTime = $lesson->duration_in_minutes;
                        @endphp
                        <h5><span data-remaning="{{$remaningTime }}" data-duration="{{ $durationTime }}" id="countdown-lesson"></span></h5>
                        <h6><span id="currentStep">{{ $ready->step == -1 ? 1 : $ready->step }}</span> / 05</h6>
                    </div>
                    <div class="barLabel">
                        <div class="progress"></div>
                    </div>
                </div>


                <a href="">
                    <img src="{{ asset('images/web/icons/compartilhar.svg') }}" alt="Compartilhar">
                </a>

                <a href="" data-openmodal="notes">
                    <img src="{{ asset('images/web/icons/notesBlack.svg') }}" alt="Anotação">
                </a>

                <a href="" data-openmodal="encerrar">
                    <img src="{{ asset('images/web/icons/x.svg') }}" alt="Encerrar">
                </a>

            </div>
        </div>

        <div class="classRoom">


        <div class="sectionClass" style="padding: 25px;">
                    @foreach($classRoomFullClass as $fullClass )
                    <div>
                        {!! $fullClass->full_class  !!}
                    </div>
                    @if($fullClass->links)
                        @foreach($fullClass->links as $link )
                            <div class="tips tipsLinks">
                                <h3>{{$link['title']}} </h3>
                                <a href="{{ $link['link'] }}">
                                    @if ($link['type'] === 'youtube')
                                        <img src="{{ asset('images/web/icons/youtubeBlue.svg') }}" alt="link">
                                    @else
                                        <img src="{{ asset('images/web/icons/linkBlue.svg') }}" alt="link">
                                    @endif
                                </a>
                            </div>
                        @endforeach
                        @endif
                    @endforeach
                </div>


            <div class="contentClassRoom">
                <img class="doll4" src="{{ asset('images/web/doll/p4.png') }}" alt="">

           


                <div class="marginBtnNext"></div>

                <next-step-lesson
                    route_step="{{ route('change-step') }}"
                    route_finish="{{ route('finish-lesson') }}"
                    route_redirect="{{ route('web.home') }}"
                    :lesson_id='`{{ $lesson->id }}`'
                    :user_id='`{{ $progress->id }}`'
                    :user_type='`{{ $progress->type }}`'
                    :step='`{{ $ready->step == -1 ? 1 : $ready->step }}`'
                ></next-step-lesson>

                <div class="btnNext btnNextMobile">

                    <div class="progressClassRoom">
                        <div class="progressBarRoom">
                            <div class="infoProgressRoom">
                                <h5><span data-remaning="{{$remaningTime }}" data-duration="{{ $durationTime }}" id="countdown-lesson"></span> minutos restantes</h5>
                                <h6><span>01</span> / 05</h6>
                            </div>
                            <div class="barLabel">
                                <div class="progress"></div>
                            </div>
                        </div>


                        <div class="btns">

                            <a href="">
                                <img src="{{ asset('images/web/icons/compartilhar.svg') }}" alt="Compartilhar">
                            </a>

    
                            <button data-next="1">Próximo<img src="{{ asset('images/web/icons/next.svg') }}" alt="Próximo"></button>

                            <a href="" data-openmodal="notes">
                                <img src="{{ asset('images/web/icons/notesBlack.svg') }}" alt="Anotação">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </section>

    <!-- Modal Aula Finalizada -->
    <section class="modalClassChecked classFinished" data-class="6" data-modal="finished">

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

        <div class="contentChecked">
            <h1>
                Aula finalizada!
            </h1>
            <h2>
                Parabéns por mais uma aula finalizada com sucesso. Ajude o iWill a melhorar cada vez mais deixando a sua avaliação.
            </h2>

            <img src="{{ asset('images/web/croodsEnd.svg') }}" alt="Avatar">

            <a href="{{route('value')}}" class="ver">
                Avaliar aula
            </a>

            <a href="{{route('details', $lesson->id )}}" class="voltar">
                Ver resumo da aula
            </a>

        </div>

    </section>


    <!-- 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>

            <save-annotation
                route="{{ route('save-annotation') }}"
                :lesson_id='`{{ $lesson->id }}`'
                :user_id='`{{ $progress->id }}`'
            >
            </save-annotation>

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

    </section>

    <!-- Modal Encerrar aula -->
    <section class="modalClassChecked" data-modal="encerrar">

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

        <div class="contentChecked">
            <h1>
                Encerrar Aula
            </h1>
            <h3>Deseja realmente encerrar esta aula?</h3>

            <textarea placeholder="Insira aqui motivo do encerramento"></textarea>

            <cancel-in-lesson
                route="{{ route('cancel-lesson') }}"
                :lesson_id='`{{ $lesson->id }}`'
                :user_id='`{{ $progress->id }}`'
                :user_type='`{{ $progress->type }}`'
                date_time="{{ $lesson->date_time }}"
                route-report="{{ route('reportUserMissing') }}"
                redirect-url="{{ route('web.home') }}"
            ></cancel-in-lesson>

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

    </section>
@stop
<script>
    import NextStepLesson from "../../../../js/web/components/User/nextStepLesson";
    import SaveAnnotation from "../../../../js/web/components/User/SaveAnnotation";
    import CancelInLesson from "../../../../js/web/components/User/CancelInLesson";
    export default {
        components: {CancelInLesson, SaveAnnotation, NextStepLesson}
    }
</script>