@extends('layouts.app')

@section('content')
    @include('layouts.cdn.fullcalendar-css')

    @modoNaoMobile
    <div class="block-header"><h2>{{trans('validation.attributes.agenda')}}</h2></div>

    {!! Layout::openCard() !!}

    @endif

    <div class="row">
        @modoNaoMobile
        <div class="col-lg-2">
            <h4>Alunos</h4>

            <div class="form-group">
                <p><small>Arraste o aluno para a agenda para criar uma aula</small></p>

                <div class="form-line">
                    <input type="text" id="busca-alunos-agenda" class="form-control" placeholder="Buscar aluno..."/>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12" id="list-alunos">

                @foreach($alunos as $aluno)
                    <p class="item-aluno-agenda" data-alunoid="{{$aluno->id}}">{{$aluno->nome}}</p>
                @endforeach

                </div>
            </div>
        </div>
        <div class="col-lg-10">
            <div id="calendar"></div>
        </div>
        @endif

        @modoMobile
        <div class="col-xs-12">
            <div id="calendar"></div>
        </div>
        @endif

    </div>

    @modoNaoMobile
    {!! Layout::closeCard() !!}
    @endif

    {!! Layout::buttonPreviousIcon() !!}

    <div class="modal fade" id="myModalDetalhesAulaAgenda" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Detalhes da aula</h4>
                </div>
                <div class="modal-body" id="modalDetalhesAulaAgendaConteudo">
                    <span id="modalDetalhesAgendaStartTime"></span> as <span id="modalDetalhesAgendaEndTime"></span><br><br>
                    <p id="modalDetalhesAgendaEventInfo"></p>

                    {!! Layout::buttonDinamic('#','add_aluno_mesmo_horario','default','add','Adicionar aluno nesse horário') !!}
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    @include('layouts.cdn.fullcalendar-js')
    <script>
        var urlAulas = "{{App\Http\Controllers\ContextoUsuario\AgendaController::urlMethod('aulasAgendaService', ['tipo'=>'salas'])}}";

        var urlAulasInsert = "{{App\Http\Controllers\ContextoUsuario\Correria\AgendaController::urlMethod('criarAulaAgenda',['alunoId'=>999999,'dataInicio'=>"DATAINICIO"])}}";

        $(document).ready(function() {
            options = {};

            options.header = {
                left: 'prev,next today',
                center: 'title',
                right: 'agendaWeek,agendaDay'
            };

            @modoNaoMobile
                options.defaultView = 'agendaWeek';
            @endif

            @modoMobile
                options.defaultView = 'agendaDay';
            @endif

            options.events = urlAulas;
            options.droppable = true;
            options.dropAccept = '.item-aluno-agenda';
            options.allDaySlot = false;
            options.minTime = '06:00:00';
            options.scrollTime = moment().format("HH:mm:ss");
            options.slotEventOverlap = false;
			options.hiddenDays = [ 0 ];

            @modoMobile
            options.height = 1000;
            @endif

            options.drop = function (date) {
                var alunoid = $(this).data('alunoid');
                inserirAula(date, alunoid);
            };

            options.eventDrop = function (event) {
                editarAula(event);
            };

            options.eventResize = function (event) {
                editarAula(event);
            };

            options.eventClick = function(event) {
                $("#myModalDetalhesAulaAgenda").modal('show');

                $("#modalDetalhesAgendaStartTime").html(moment(event.start).format('DD/MM/YYYY hh:mm'));
                $("#modalDetalhesAgendaEndTime").html(moment(event.end).format('hh:mm'));
                $("#modalDetalhesAgendaEventInfo").html(event.description);

                var data = event.start.format();
                var urlInsert = urlAulasInsert.replace("999999",0).replace("DATAINICIO",data);

                $("#btn_add_aluno_mesmo_horario").attr('href',urlInsert);

                return false;
            };

            options.dayClick = function(date, jsEvent, view) {
                var data = date.format();
                window.location = urlAulasInsert.replace("999999",0).replace("DATAINICIO",data);
            };

            function inserirAula(date, alunoid) {
                var data = date.format();
                window.location = urlAulasInsert.replace("999999",alunoid).replace("DATAINICIO",data);
            }

            $('#calendar').fullCalendar(options);

            $('.item-aluno-agenda').each(function () {
                var eventObject = {
                    title: $.trim($(this).text())
                };

                $(this).data('eventObject', eventObject);

                $(this).draggable({
                    zIndex: 999,
                    revert: true,
                    revertDuration: 0,
                    appendTo: 'body',
                    containment: 'window',
                    scroll: false,
                    helper: 'clone'
                });

            });

            $("#busca-alunos-agenda").on("keyup",function(){
                var termo = $(this).val().toUpperCase();

                $('.item-aluno-agenda').each(function () {
                    var nome = $(this).text().toUpperCase();

                    if (nome.indexOf(termo) !== -1) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
            });
        });
    </script>
    @endpush

    <style>
        .fc-today{
            background-color: #fafafa !important;
        }

        @modoMobile
        .fc-center h2{
            font-size: small;
            padding-top: 10px;
        }
        @endif

        .fc-time-grid-event, .fc-v-event, .fc-event{
            border-radius: 0px;
            border-top: thick solid;
            border-bottom: thick solid;
        }

        .item-aluno-agenda{
            border: 1px dotted #ccc;
            background-color: #fafafa;
            padding: 10px;
        }

        .item-aluno-agenda:hover{
            border: 1px dotted #aaa;
            cursor: pointer;
        }

        #list-alunos{
            max-height: 800px;
            overflow-y: auto;
        }
    </style>
@stop