@extends('layouts.publicador.default')

@section('content')
    <link href="{{ asset('libs/fullcalendar-4.3.1/packages/core/main.css') }}" rel="stylesheet" />
    <link href="{{ asset('libs/fullcalendar-4.3.1/packages/daygrid/main.css') }}" rel="stylesheet" />
    <link href="{{ asset('css/agenda2019.min.css') }}" rel="stylesheet" />
    <script src="{{ asset('libs/fullcalendar-4.3.1/packages/core/main.js') }}"></script>
    <script src="{{ asset('libs/fullcalendar-4.3.1/packages/daygrid/main.js') }}"></script>
    <script src="{{ asset('libs/fullcalendar-4.3.1/packages/bootstrap/main.js') }}"></script>

    <script src="{{ asset('js/calendario-mobile.js') }}"></script>

    <div class="container my-4 py-3">

        <h4 class="mb-4">
            @lang('labels.agenda')
            <small class="text-muted">@lang('labels.calendario')</small>
        </h4>

        <div class="">
            <span class="quadrado px-0 w-100">Legenda: </span>
            <span class="quadrado bg-status-1">@lang('labels.agendado')</span>
            <span class="quadrado bg-status-2">@lang('labels.provisorio')</span>
            <span class="quadrado bg-status-3">@lang('labels.confirmado')</span>
            <span class="quadrado bg-status-4">@lang('labels.cancelado')</span>
        </div>

        <div class="row">
            <div id="agenda" class="agenda d-none d-md-inline-block"></div>
            <div class="agenda-mobile d-md-none mt-3"></div>
        </div>

        <div class="modal fade" id="modalEvento" tabindex="-1" role="dialog" aria-labelledby="modalEventoLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalEventoLabel"></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="@lang('labels.acoes.fechar')">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body"></div>
                    <div class="modal-footer">
                        <a href="#" class="btn btn-primary btn-editar"><span class="fa fa-pencil"></span></a>
                        <a href="#" class="btn btn-secondary btn-convite"><span class="fa fa-envelope"></span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
    
    <script type='text/javascript'>
        function addZero(v)
        {
            if(v > -1 && v < 10)
                return '0' + v;
            return v;
        }

        $('.agenda-mobile').agendaMobile({
            eventos: '{{ route('publicador.agenda.eventos') }}',
            periodo: '{{ route('publicador.agenda.periodo') }}',
            onClick: function(e)
            {
                let $ = window.jQuery.noConflict(),
                    $div,
                    str = '',
                    modal = $('#modalEvento'),
                    resp = e.evento.resp;

                let dt_split = e.evento.data_evento.split('-'),
                    dt_split2 = dt_split[2].split('T'),
                    dt_split3 = dt_split2[1].split(':');

                let ano = (dt_split[0]),
                    mes = (dt_split[1]),
                    dia = (dt_split2[0]),
                    hora = (dt_split3[0]),
                    minuto = (dt_split3[1]);

                modal.find('.modal-title').html(e.evento.titulo);

                str += '<b>@lang('labels.publicado_site')</b>: ' + e.evento.publicado + '<br>';
                str += '<b>@lang('labels.status')</b>: ' + e.evento.situacao + '<br>';

                str += '<b>@lang('labels.horario')</b>: ';

                str += dia + '/';
                str += mes + '/';
                str += ano + ' - ';
                str += hora + ':' + minuto + '<br>';

                str += '<b>@lang('labels.local')</b>: ' + e.evento.local + '<br>';
                if(e.evento.endereco) str += '<b>@lang('labels.endereco')</b>: ' + e.evento.endereco + '<br>';
                if(e.evento.proposicao) str += '<b>@lang('labels.proposicao')</b>: ' + e.evento.proposicao + '<br>';
                str += '<b>@lang('labels.transmissao')</b>: ' + e.evento.aovivo + '<br>';

                str += '<b>@lang('labels.descricao')</b>: <br>';
                if(e.evento.descricao) str += e.evento.descricao;

                if(resp !== '' || e.evento.comentario !== '')
                {
                    str += '<hr>';
                    str += '<b>@choice('labels.responsaveis', 0)</b>: ' + resp + '<br>';
                    str += '<b>@lang('labels.comentarios')</b>: <br>';
                    if(e.evento.comentario) str += e.evento.comentario;
                }

                modal.find('.modal-body').html(str);

                modal.find('.btn-editar').attr('href', '{{ route('publicador.agenda.editar', ['']) }}/' + e.evento.id);
                modal.find('.btn-convite').attr('href', '{{ route('publicador.agenda.convite', ['']) }}/' + e.evento.id);

                modal.modal('show');

            }
        });
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('agenda'),
                calendar = new FullCalendar.Calendar(calendarEl, {
                    header: { center: 'dayGridMonth,dayGridWeek,dayGridDay' },
                    locale: 'pt-br',
                    firstDay: 1,
                    weekends: false,
                    showNonCurrentDates: false,
                    eventTimeFormat: {
                        hour: '2-digit',
                        minute: '2-digit',
                        meridiem: false
                    },
                    events: '{{ route('publicador.agenda.periodo') }}',
                    bootstrapFontAwesome: false,
                    buttonText: {
                        prev: '<',
                        next: '>',
                        today:    '@lang('labels.hoje')',
                        month:    '@lang('labels.mes')',
                        week:     '@lang('labels.semana')',
                        day:      '@lang('labels.dia')',
                        list:     '@lang('labels.lista')'
                    },
                    plugins: [ 'dayGrid', 'bootstrap' ],
                    themeSystem: 'bootstrap',
                    eventClick: function(e)
                    {
                        let $ = window.jQuery.noConflict(), $div, str = '', modal = $('#modalEvento');

                        modal.find('.modal-title').html(e.event.title);

                        var resp = e.event.extendedProps.responsaveis;

                        str += '<b>@lang('labels.publicado_site')</b>: ' + e.event.extendedProps.publicado + '<br>';
                        str += '<b>@lang('labels.status')</b>: ' + e.event.extendedProps.status + '<br>';

                        str += '<b>@lang('labels.horario')</b>: ';

                        str += addZero(e.event.start.getDate()) + '/';
                        str += (e.event.start.getMonth() + 1) + '/';
                        str += e.event.start.getFullYear() + ' - ';
                        str += addZero(e.event.start.getHours()) + ':' + addZero(e.event.start.getMinutes())+ '<br>';

                        str += '<b>@lang('labels.local')</b>: ' + e.event.extendedProps.local + '<br>';
                        if(e.event.extendedProps.endereco) str += '<b>@lang('labels.endereco')</b>: ' + e.event.extendedProps.endereco + '<br>';
                        if(e.event.extendedProps.proposicao) str += '<b>@lang('labels.proposicao')</b>: ' + e.event.extendedProps.proposicao + '<br>';
                        str += '<b>@lang('labels.transmissao')</b>: ' + e.event.extendedProps.transmissao + '<br>';


                        str += '<b>@lang('labels.descricao')</b>: <br>';
                        if(e.event.extendedProps.descricao) str += e.event.extendedProps.descricao;

                        if(resp !== '' || e.event.extendedProps.comentarios !== '')
                        {
                            str += '<hr>';
                            str += '<b>@choice('labels.responsaveis', 0)</b>: ' + resp + '<br>';
                            str += '<b>@lang('labels.comentarios')</b>: <br>';
                            if(e.event.extendedProps.comentarios) str += e.event.extendedProps.comentarios;
                        }

                        modal.find('.modal-body').html(str);

                        modal.find('.btn-editar').attr('href', '{{ route('publicador.agenda.editar', ['']) }}/' + e.event.id);
                        modal.find('.btn-convite').attr('href', '{{ route('publicador.agenda.convite', ['']) }}/' + e.event.id);

                        modal.modal('show');

                    }
                });

            calendar.render();
        });

    </script>



@endsection