@extends('templates.template')

@push('page-title')
    <div class="row">
        <div class="col-md-12">
            <h2>Relatório Infantil</h2><br>
            <p>Selecione uma Relação abaixo</p>
        </div>
    </div>

@endpush

@section('content')
    {!! Form::open(['url' => route('relatorioinfantil.store')]) !!}
    {!! Form::hidden('matricula_id', $matricula->id) !!}

    <div class="row">
        <div class="col-md-12">
            <ul class="nav nav-tabs">
                <li role="presentation" class="active"><a href="#" class="btn_b1">1º Bimestre</a></li>
                <li role="presentation"><a href="#" class="btn_b2">2º Bimestre</a></li>
                <li role="presentation"><a href="#" class="btn_b3">3º Bimestre</a></li>
                <li role="presentation"><a href="#" class="btn_b4">4º Bimestre</a></li>
            </ul>
        </div>
    </div>
    <div class="row" id="form-bimestres">
        <div class="col-md-12" id="b1">
            <div class="alert alert-warning" role="alert">Lancamento de experiências do Bimestre 1</div>
            <div class="row">
                <div class="col-md-12 form-group">
                    {!! Form::label('competencia_eu_outro_nos_1', 'Campo de Experiências Eu, o outro e nós') !!}
                    {!! Form::textarea('competencia_eu_outro_nos_1', $relatorio->competencia_eu_outro_nos_1 ?? null, ['class'=>'form-control'])!!}
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 form-group">
                    {!! Form::label('competencia_corpo_gestos_movimentos_1', 'Campo de Experiências Corpo, gestos e movimentos') !!}
                    {!! Form::textarea('competencia_corpo_gestos_movimentos_1', $relatorio->competencia_corpo_gestos_movimentos_1 ?? null, ['class'=>'form-control'])!!}
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 form-group">
                    {!! Form::label('competencia_tracos_sons_cores_forma_1', 'Campo de Experiências Traços, sons, cores e formas') !!}
                    {!! Form::textarea('competencia_tracos_sons_cores_forma_1', $relatorio->competencia_tracos_sons_cores_forma_1 ?? null, ['class'=>'form-control'])!!}
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 form-group">
                    {!! Form::label('competencia_escuta_fala_pensamento_imaginacao_1', 'Campo de Experiências Escuta, fala, pensamentos e imaginação') !!}
                    {!! Form::textarea('competencia_escuta_fala_pensamento_imaginacao_1', $relatorio->competencia_escuta_fala_pensamento_imaginacao_1 ?? null, ['class'=>'form-control'])!!}
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 form-group">
                    {!! Form::label('competencia_espaco_tempos_qualidades_relacoes_1', 'Campo de Experiências, espaços, tempos, quantidadese e relações') !!}
                    {!! Form::textarea('competencia_espaco_tempos_qualidades_relacoes_1',  $relatorio->competencia_espaco_tempos_qualidades_relacoes_1 ?? null, ['class'=>'form-control'])!!}
                </div>
            </div>
            <div class="alert alert-warning" role="alert">Movimento na pressão do lápis do Bimestre 1</div>
            <div class="row">
                <div class="col-md-12">
                    <div class="alert alert-info" style="display: flex">
                        <div class="col-md-4">
                            A - Pega palmar radial <br/>
                            B - Pega palmar voltada para cima <br/>
                            C - Pega digital voltada para baixo <br/>
                            D - Pega pincel <br/>
                        </div>
                        <div class="col-md-4">
                            E - Pega com os dedos escondidos <br/>
                            F - Pega transversal ao polegar <br/>
                            G - Pega em tripé estático <br/>
                            H - Pega de quatro dedos <br/>
                        </div>
                        <div class="col-md-4">
                            I - Pega em tripé lateral <br/>
                            J - Pega em tripé dinâmico <br/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 form-group">
                    {!! Form::label('movimento_1', 'Movimento na pressão do lápis') !!}
                    {!! Form::select('movimento_1', $movimento, $relatorio->movimento_1 ?? null, ['class'=>'form-control'])!!}
                </div>
                <img src="/img/movimento/mao.png" class="img_mov" width="100px" height="80px">
            </div>

        </div>
        <div class="col-md-12" id="b2">
            <div class="alert alert-warning" role="alert">Lancamento de experiências do Bimestre 2</div>
            <div class="row">
                <div class="col-md-12 form-group">
                    {!! Form::label('competencia_eu_outro_nos_2', 'Campo de Experiências Eu, o outro e nós') !!}
                    {!! Form::textarea('competencia_eu_outro_nos_2', $relatorio->competencia_eu_outro_nos_2 ?? null, ['class'=>'form-control'])!!}
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 form-group">
                    {!! Form::label('competencia_corpo_gestos_movimentos_2', 'Campo de Experiências Corpo, gestos e movimentos') !!}
                    {!! Form::textarea('competencia_corpo_gestos_movimentos_2', $relatorio->competencia_corpo_gestos_movimentos_2 ?? null, ['class'=>'form-control'])!!}
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 form-group">
                    {!! Form::label('competencia_tracos_sons_cores_forma_2', 'Campo de Experiências Traços, sons, cores e formas') !!}
                    {!! Form::textarea('competencia_tracos_sons_cores_forma_2', $relatorio->competencia_tracos_sons_cores_forma_2 ?? null, ['class'=>'form-control'])!!}
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 form-group">
                    {!! Form::label('competencia_escuta_fala_pensamento_imaginacao_2', 'Campo de Experiências Escuta, fala, pensamentos e imaginação') !!}
                    {!! Form::textarea('competencia_escuta_fala_pensamento_imaginacao_2', $relatorio->competencia_escuta_fala_pensamento_imaginacao_2 ?? null, ['class'=>'form-control'])!!}
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 form-group">
                    {!! Form::label('competencia_espaco_tempos_qualidades_relacoes_2', 'Campo de Experiências, espaços, tempos, quantidadese e relações') !!}
                    {!! Form::textarea('competencia_espaco_tempos_qualidades_relacoes_2', $relatorio->competencia_espaco_tempos_qualidades_relacoes_2 ?? null, ['class'=>'form-control'])!!}
                </div>
            </div>
            <div class="alert alert-warning" role="alert">Movimento na pressão do lápis do Bimestre 2</div>
            <div class="row">
                <div class="col-md-12">
                    <div class="alert alert-info" style="display: flex">
                        <div class="col-md-4">
                            A - Pega palmar radial <br/>
                            B - Pega palmar voltada para cima <br/>
                            C - Pega digital voltada para baixo <br/>
                            D - Pega pincel <br/>
                        </div>
                        <div class="col-md-4">
                            E - Pega com os dedos escondidos <br/>
                            F - Pega transversal ao polegar <br/>
                            G - Pega em tripé estático <br/>
                            H - Pega de quatro dedos <br/>
                        </div>
                        <div class="col-md-4">
                            I - Pega em tripé lateral <br/>
                            J - Pega em tripé dinâmico <br/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 form-group">
                    {!! Form::label('movimento_2', 'Movimento na pressão do lápis') !!}
                    {!! Form::select('movimento_2', $movimento,  $relatorio->movimento_2 ?? null, ['class'=>'form-control'])!!}
                </div>
                <img src="/img/movimento/mao.png" class="img_mov" width="100px" height="80px">
            </div>
        </div>
        <div class="col-md-12" id="b3">
            <div class="alert alert-warning" role="alert">Lancamento de experiências do Bimestre 3</div>
            <div class="row">
                <div class="col-md-12 form-group">
                    {!! Form::label('competencia_eu_outro_nos_3', 'Campo de Experiências Eu, o outro e nós') !!}
                    {!! Form::textarea('competencia_eu_outro_nos_3', $relatorio->competencia_eu_outro_nos_3 ?? null, ['class'=>'form-control'])!!}
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 form-group">
                    {!! Form::label('competencia_corpo_gestos_movimentos_3', 'Campo de Experiências Corpo, gestos e movimentos') !!}
                    {!! Form::textarea('competencia_corpo_gestos_movimentos_3', $relatorio->competencia_corpo_gestos_movimentos_3 ?? null, ['class'=>'form-control'])!!}
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 form-group">
                    {!! Form::label('competencia_tracos_sons_cores_forma_3', 'Campo de Experiências Traços, sons, cores e formas') !!}
                    {!! Form::textarea('competencia_tracos_sons_cores_forma_3', $relatorio->competencia_tracos_sons_cores_forma_3 ?? null, ['class'=>'form-control'])!!}
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 form-group">
                    {!! Form::label('competencia_escuta_fala_pensamento_imaginacao_3', 'Campo de Experiências Escuta, fala, pensamentos e imaginação') !!}
                    {!! Form::textarea('competencia_escuta_fala_pensamento_imaginacao_3', $relatorio->competencia_escuta_fala_pensamento_imaginacao_3 ?? null, ['class'=>'form-control'])!!}
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 form-group">
                    {!! Form::label('competencia_espaco_tempos_qualidades_relacoes_3', 'Campo de Experiências, espaços, tempos, quantidadese e relações') !!}
                    {!! Form::textarea('competencia_espaco_tempos_qualidades_relacoes_3', $relatorio->competencia_espaco_tempos_qualidades_relacoes_3 ?? null, ['class'=>'form-control'])!!}
                </div>
            </div>
            <div class="alert alert-warning" role="alert">Movimento na pressão do lápis do Bimestre 3</div>
            <div class="row">
                <div class="col-md-12">
                    <div class="alert alert-info" style="display: flex">
                        <div class="col-md-4">
                            A - Pega palmar radial <br/>
                            B - Pega palmar voltada para cima <br/>
                            C - Pega digital voltada para baixo <br/>
                            D - Pega pincel <br/>
                        </div>
                        <div class="col-md-4">
                            E - Pega com os dedos escondidos <br/>
                            F - Pega transversal ao polegar <br/>
                            G - Pega em tripé estático <br/>
                            H - Pega de quatro dedos <br/>
                        </div>
                        <div class="col-md-4">
                            I - Pega em tripé lateral <br/>
                            J - Pega em tripé dinâmico <br/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 form-group">
                    {!! Form::label('movimento_3', 'Movimento na pressão do lápis') !!}
                    {!! Form::select('movimento_3', $movimento, $relatorio->movimento_3 ?? null, ['class'=>'form-control'])!!}
                </div>
                <img src="/img/movimento/mao.png" class="img_mov" width="100px" height="80px">
            </div>
        </div>
        <div class="col-md-12" id="b4">
            <div class="alert alert-warning" role="alert">Lancamento de experiências do Bimestre 4</div>
            <div class="row">
                <div class="col-md-12 form-group">
                    {!! Form::label('competencia_eu_outro_nos_4', 'Campo de Experiências Eu, o outro e nós') !!}
                    {!! Form::textarea('competencia_eu_outro_nos_4', $relatorio->competencia_eu_outro_nos_4 ?? null, ['class'=>'form-control'])!!}
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 form-group">
                    {!! Form::label('competencia_corpo_gestos_movimentos_4', 'Campo de Experiências Corpo, gestos e movimentos') !!}
                    {!! Form::textarea('competencia_corpo_gestos_movimentos_4', $relatorio->competencia_corpo_gestos_movimentos_4 ?? null, ['class'=>'form-control'])!!}
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 form-group">
                    {!! Form::label('competencia_tracos_sons_cores_forma_4', 'Campo de Experiências Traços, sons, cores e formas') !!}
                    {!! Form::textarea('competencia_tracos_sons_cores_forma_4', $relatorio->competencia_tracos_sons_cores_forma_4 ?? null, ['class'=>'form-control'])!!}
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 form-group">
                    {!! Form::label('competencia_escuta_fala_pensamento_imaginacao_4', 'Campo de Experiências Escuta, fala, pensamentos e imaginação') !!}
                    {!! Form::textarea('competencia_escuta_fala_pensamento_imaginacao_4', $relatorio->competencia_escuta_fala_pensamento_imaginacao_4 ?? null, ['class'=>'form-control'])!!}
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 form-group">
                    {!! Form::label('competencia_espaco_tempos_qualidades_relacoes_4', 'Campo de Experiências, espaços, tempos, quantidadese e relações') !!}
                    {!! Form::textarea('competencia_espaco_tempos_qualidades_relacoes_4', $relatorio->competencia_espaco_tempos_qualidades_relacoes_4 ?? null, ['class'=>'form-control'])!!}
                </div>
            </div>
            <div class="alert alert-warning" role="alert">Movimento na pressão do lápis do Bimestre 4</div>
            <div class="row">
                <div class="col-md-12">
                    <div class="alert alert-info" style="display: flex">
                        <div class="col-md-4">
                            A - Pega palmar radial <br/>
                            B - Pega palmar voltada para cima <br/>
                            C - Pega digital voltada para baixo <br/>
                            D - Pega pincel <br/>
                        </div>
                        <div class="col-md-4">
                            E - Pega com os dedos escondidos <br/>
                            F - Pega transversal ao polegar <br/>
                            G - Pega em tripé estático <br/>
                            H - Pega de quatro dedos <br/>
                        </div>
                        <div class="col-md-4">
                            I - Pega em tripé lateral <br/>
                            J - Pega em tripé dinâmico <br/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 form-group">
                    {!! Form::label('movimento_4', 'Movimento na pressão do lápis') !!}
                    {!! Form::select('movimento_4', $movimento, $relatorio->movimento_4 ?? null, ['class'=>'form-control'])!!}
                </div>
                <img src="/img/movimento/mao.png" class="img_mov" width="100px" height="80px">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            {!! Form::submit('Atualizar notas', ['class' => 'btn btn-success']) !!}
        </div>
    </div>
    {!! Form::close() !!}

@endsection

@section('scripts')
    <script>
        function esconderBimestres(bimestres){
            bimestres.children().hide()
        }
        function mostrarBimestres(bimestres){
            bimestres.children().show()
        }
        function bimestres(bimestres, bimestre){
            $(bimestre).show();
        }
        function desmarcarTodos(butoes, active){
            butoes.children().removeClass('active')
            butoes.find(active).closest('li').attr('class', 'active')
        }
        function limparGuia(bimestres, id){
            bimestres.children().each(function(index){
                if($(this).attr('id') != id){
                    $(this).hide()
                }
            })
        }

        $(document).ready(function(){

            function mostrarMao(_this){
                let letra = _this.val()
                let row = _this.closest('.row').find('img').prop('src', `/img/movimento/${letra.toLowerCase()}.png`)
            }

            $('select[name=movimento_1],select[name=movimento_2],select[name=movimento_3],select[name=movimento_4]').change(function(){
                let _this = $(this)
                mostrarMao(_this)
            })

            $('select[name=movimento_1],select[name=movimento_2],select[name=movimento_3],select[name=movimento_4]').is(function(){
                let _this = $(this)
                mostrarMao(_this)

            })


            let formBimestres = $('#form-bimestres')
            esconderBimestres(formBimestres)
            bimestres(formBimestres, '#b1')

            $('.btn_b1').click(function(){
                let _class = $(this).closest('ul')

                desmarcarTodos(_class, '.btn_b1')

                $('#b1').toggle('fast', function(){
                    limparGuia(formBimestres, $(this).attr('id'))
                })
            })
            $('.btn_b2').click(function(){
                let _class = $(this).closest('ul')
                desmarcarTodos(_class, '.btn_b2')

                $('#b2').toggle('fast', function(){
                    limparGuia(formBimestres, $(this).attr('id'))
                })
            })
            $('.btn_b3').click(function(){
                let _class = $(this).closest('ul')
                desmarcarTodos(_class, '.btn_b3')

                $('#b3').toggle('fast', function(){
                    limparGuia(formBimestres, $(this).attr('id'))
                })
            })
            $('.btn_b4').click(function(){
                let _class = $(this).closest('ul')
                desmarcarTodos(_class, '.btn_b4')

                $('#b4').toggle('fast', function(){
                    limparGuia(formBimestres, $(this).attr('id'))
                })
            })

        })

    </script>
@endsection