@extends('layouts.app')

@section('content')
    <div class="block-header"><h2>{{trans('validation.attributes.chamada')}} <i class="material-icons" role="button" id="chamada-open-filters">date_range</i></h2></div>

    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="card" style="display: none;" id="chamada-filters">
                <div class="body">
                    <form>
                        <div class="form-group">
                            <div class="form-line">
                                <input type="text" id="chamada-data-ini" class="mask-data form-control" value="{{DateAndTime::convertDatetimeToVisual($dataIni)}}"/>
                            </div>
                        </div>

                        <p class="text-center">até</p>

                        <div class="form-group">
                            <div class="form-line">
                                <input type="text" id="chamada-data-fim" class="mask-data form-control" value="{{DateAndTime::convertDatetimeToVisual($dataFim)}}"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <button id="chamada-refresh" class="btn btn-primary btn-block">
                                <i class="material-icons">cached</i>
                                <span>Buscar</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            {!! Layout::openCard() !!}
                <table id="table" class="tabela-dinamica"
                       data-toggle="table"
                       data-side-pagination="server"
                       data-pagination="true"
                       data-page-list="[5, 10, 20, 50, 100, 200]"
                       data-show-header="false">
                    <thead>
                    <tr>
                        <th data-field="aulas_data" data-sortable="true" data-formatter="bootstrapTableFormatDate"></th>
                        <th data-field="aulas_hora_ini" data-sortable="true"></th>
                        <th data-field="salas_nome"></th>
                        <th data-field="cursos_descricao"></th>
                        <th data-field="realizada" data-formatter="bootstrapTableFormatAulaChamada"></th>
                        <th data-formatter="bootstrapTableButtons" data-width="50"></th>
                    </tr>
                    </thead>
                </table>

                <div id="table-butons" class="hide">
                    {!! Layout::buttonEditIcon(App\Http\Controllers\ContextoProfissional\ChamadasController::urlMethod('edit', ['id' => 999999])) !!}
                </div>

            {!! Layout::closeCard() !!}
        </div>
    </div>

    @push('scripts')
    <script>
        var urlChamada = "{{ App\Http\Controllers\ContextoProfissional\ChamadasController::urlMethod('listcontentChamadas',['dataini','datafim']) }}";

        $(document).ready(function(){
            reloadChamada();

            $("#chamada-refresh").on("click",function(e){
                e.preventDefault();
                reloadChamada();
            });

            $("#chamada-open-filters").on("click",function(){
                $("#chamada-filters").slideToggle("slow");
            });
        });

        function reloadChamada() {
            var dataIni = $("#chamada-data-ini").val();
            dataIni = dataIni.split('/');
            dataIni = [dataIni[2], dataIni[1], dataIni[0]].join('-');

            var dataFim = $("#chamada-data-fim").val();
            dataFim = dataFim.split('/');
            dataFim = [dataFim[2], dataFim[1], dataFim[0]].join('-');

            var urlLoad = urlChamada.replace('dataini', dataIni);
            urlLoad = urlLoad.replace('datafim', dataFim);

            var table = $("#table");

            bootstrapTableReload(table, urlLoad);

            if (dataIni == dataFim){
                table.bootstrapTable('hideColumn', 'aulas_data');
            }else{
                table.bootstrapTable('showColumn', 'aulas_data');
            }
        }
    </script>
    @endpush
@stop