@extends('templates.template')

@push('page-title')
    <h2>Painel de Gestão de Frequência</h2>
    <p>Gerencie todas as suas informações</p>
@endpush

@section('content')
    <div class="row">
        <div class="col-md-3">
            <a href="{{ route('aulas.index', $instrutorDisciplinaTurma->id) }}" class="tile-box tile-box-shortcut btn-info">
                <span class="bs-badge badge-absolute">
                    Aulas
                </span>
                <div class="tile-header">Voltar</div>
                <div class="tile-content-wrapper">
                    <i class="glyphicon glyphicon-inbox glyph-icon"></i>
                </div>
            </a>
        </div>
    </div>

    <hr>
    {!! Form::open(['route' => 'frequencia.store']) !!}
    {!! Form::hidden('aula_id', $aula->id) !!}

    <div class="">
        <div>
            <div class="card card-body">
                <table class="table table-striped table-bordered" role="grid" aria-describedby="example_info"
                    id="searchListarMatricula" width="100%">
                    <thead>
                        <tr>
                            <th>#Código</th>
                            <th>Aluno</th>
                            <th>Situação</th>

                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($matriculas as $dado)
                            <tr class="" data-url="{{ route('matriculas.detalhes', $dado['aluno_id']) }}">
                                <td>{{ $dado->id }}</td>
                                <td>{{ $dado->aluno['nomecompleto'] }}</td>

                                <td style="width: 400px;">
                                    <li class="list-group-item" style="text-align: center;">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div style="text-align: center;" class="col-md-4">
                                                    <input class="check " id="{{ $dado->id }}" type="checkbox"
                                                        value="{{ $dado->id }}" checked name="situacao[]">
                                                </div>
                                                <div class="p  col-md-8" id="a{{ $dado->id }}b">


                                                    {!! Form::select('justificativa_id[]', $justificativas, null, ['class' => 'form-control']) !!}
                                                </div>
                                            </div>

                                        </div>
                                        <div class="row">

                                        </div>
                                        <!-- {!! Form::select('situacao[]', ['presente' => 'PRESENTE', 'ausente' => 'AUSENTE'], null, [
                                            'class' => 'form-control',
                                        ]) !!} -->

                                        {!! Form::hidden('matricula[]', $dado->id) !!}
                                        <div id="console-event"></div>

                                    </li>

                                </td>

                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                {!! Form::submit('Salvar', ['class' => 'btn btn-success']) !!}
            </div>
        </div>
    </div>



    {!! Form::close() !!}
@endsection

@section('scripts')
    {!! HTML::script('bower_components/bootstrap-checkbox/dist/js/bootstrap-checkbox.min.js') !!}
    <!-- {!! HTML::script('bower_components/bootstrap-checkbox/dist/js/i18n/pt.min.js') !!} -->

    <script>
        $('.check').checkboxpicker({
            html: true,
            offLabel: '<span class="glyphicon glyphicon-remove"> ',
            onLabel: '<span class="glyphicon glyphicon-ok"> '
        });
    </script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('[name="op1"]').hide(200);
            $('[id="dd"').change(function() {
                $('[name="op1"]').toggle(200);
            });

            $('[name=tempo_inicio], [name=tempo_final]').datetimepicker({
                format: 'LTS'
            })
            $('[name=data]').datetimepicker({
                format: 'DD/MM/YYYY'
            })
            if ($('[name=turma_id]').length > 0) {
                atualizaDisciplina()
            }


            $('').is(function() {
                console.log($(this).val())
            })
            // $(':checkbox').checkboxpicker().on('change', function() {



            // // let boleto = 1
            // if($(this).prop('checked') === false){
            //        alert("oi");
            // }
            // let id = parseInt($.trim($(this)))
            // let id = parseInt($.trim($(this).data('id')))
            // $.get( '/matriculas/boleto/'+ id +'/'+ boleto, function( data ) {
            //     console.log(data)
            // });
            // });



        })

        $(document.body).on('change', '[name=turma_id]', function() {
            atualizaDisciplina()
        })

        function atualizaDisciplina() {
            var turma_id = $('[name=turma_id]').val()
            $('[name=disciplina_id]').find('option').remove()
            var jqxhr = $.get("{{ App::make('_.url') }}" + '/planoaulas/disciplinasAssociadas/' + turma_id, function(data) {
                $.each(data, function(index, value) {
                    $('[name=disciplina_id]').append($('<option/>').val(value.id).text(value.descricao))
                })
            })
        }
    </script>

    <script type="text/javascript">
        $(".p").hide();
        $(':checkbox').checkboxpicker().on('change', function() {

            if ($(this).prop('checked') === false) {

                console.log('#' + this.id)
                let id = "#a" + this.id + "b"
                $(id).show();

            } else {
                console.log('#' + this.id)
                let id = "#a" + this.id + "b"
                $(id).hide();

            }

        });
    </script>
@endsection