{% extends '::base.html.twig' %}

{% block body %}
    {% if is_granted('ROLE_SUPER_ADMIN') %}
    <div style="margin-bottom:1em;float:left;">
        <form name="user_switcher" action="" style="margin-bottom:1em;">
            <select name="user" id="user" class="select2">
                {% for user in users %}
                    <option value="{{ user.id }}" {{ user.selected ? 'selected'}}>{{ user.name }}</option>
                {% endfor %}
            </select>
        </form>
        <a href="#" id="feuille-route-btn" class="btn btn-primary"><span class="glyphicon glyphicon glyphicon-print"></span> Feuille de route</a>
    </div>
    {% endif %}

    <div style="margin-bottom:1em;float:right">
        <form name="activity" action="{{ path('agenda_activity_edit') }}" method="GET">
            <input type="hidden" name="user" value="{{ user.id }}">
            <input type="text" name="date" class="datepicker" placeholder="Date de l'activité">
            <input type="submit" class="btn btn-primary" value="Ajouter ou modifier une activité"/>
        </form>
    </div>

    <div style="clear:both;"></div>

    <div id="calendar"></div>

    <div id="dialog" title="Ajouter un rendez-vous">
        <form name="meeting" id="meeting">
            <div class="form-group">
                <label for="client">Clients</label>
                <select name="client" id="client" class="form-control select2popup">
                    {% for id,name in clients %}
                    <option value="{{id}}">{{name}}</option>
                    {% endfor %}
                </select>
            </div>

            <input type="hidden" name="start" id="start">
            <input type="hidden" name="end" id="end">
            <input type="hidden" name="meeting_id" id="meeting_id">
        </form>
    </div>

  <div id="feuille-route-modal" title="Voir les feuilles de route">
        <form method="GET" id="feuille-route-form" action="{{ path('agenda_feuille_route') }}">
            <div class="form-group">
                <label for="client">Du </label>
                <input type="text" class="datepicker" name="from">
                <label for="client"> au </label>
                <input type="text" class="datepicker" name="to">
            </div>

            <input type="hidden" name="user" value="{{ user.id }}">
        </form>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('vendor/moment/min/moment.min.js') }}"></script>
    <script src="{{ asset('vendor/fullcalendar/dist/fullcalendar.min.js') }}"></script>
    <script src="{{ asset('vendor/fullcalendar/dist/lang/fr.js') }}"></script>

    <script>
    (function ($){
        moment.locale('fr');

        var currentEvent;
        var currentModalMode;

        $(document).ready(function() {
            $('.select2popup').select2({width: "100%"});

            $('.timepicker').datepicker({ dateFormat: 'HH:MM:ss' }).val();

            // page is now ready, initialize the calendar...
            var calendar = $('#calendar');
            var $dialog = $("#dialog");
            var $feuilleRouteModal = $('#feuille-route-modal');

            $feuilleRouteModal.dialog({
                title: 'Feuille de route',
                autoOpen: false,
                width: '500px',
                show: {
                    effect: "blind",
                    duration: 200
                },
                hide: {
                    effect: "explode",
                    duration: 200
                },
                buttons: {
                    Voir: function() {
                        $('#feuille-route-form').submit();
                    },
                    Annuler: function() {
                        $feuilleRouteModal.dialog( "close" );
                    }
                },
                close: function() {
                    // $('#meeting').get(0).reset();
                },
                open: function( event, ui ) {
                }
            });

            $('#feuille-route-btn').on('click', function (e){
                $feuilleRouteModal.dialog("open");
                e.preventDefault();
                e.stopPropagation();
                return false;
            });


            function initDialog(kind, event){
                var title = "Ajouter un rendez-vous";
                var buttons = {};
                
                buttons['Consulter'] = function() {
                    window.open(
                      '/admin/client/'+$('#client').val()+'/read',
                      '_blank'
                    );
                }

                buttons['Ajouter'] = createEvent;
                if (kind == 'update') {
                    title = "Modifier un rendez-vous";
                    buttons = {};
                    
                    buttons['Consulter'] = function() {
                        window.open(
                          '/admin/client/'+$('#client').val()+'/read',
                          '_blank'
                        );
                    }

                    buttons['Modifier'] = updateEvent;

                    if (event) {
                        buttons['Supprimer'] = function (){
                            removeEvent(event);
                        };
                    }
                }
                buttons['Annuler'] = function() {
                    $dialog.dialog( "close" );
                }

                $dialog.dialog({
                    title: title,
                    autoOpen: false,
                    width: '70%',
                    show: {
                        effect: "blind",
                        duration: 200
                    },
                    hide: {
                        effect: "explode",
                        duration: 200
                    },
                    buttons: buttons,
                    close: function() {
                        $('#meeting').get(0).reset();
                    },
                    open: function( event, ui ) {
                    }
                });
            }

            function resizeEvent(opts)
            {
                $('#loader').show();
                $.ajax({
                    url: '{{ path("agenda_resize") }}',
                    type: 'PUT',
                    data: opts,
                    success: function (data){
                        console.log('resized');
                    },
                    error: function (){
                        alert('Une erreur est survenue');
                    },
                    complete: function (){
                        $('#loader').hide();
                    }
                });
            }

            function removeEvent(calEvent)
            {
                if (confirm("Souhaitez-vous vraiment supprimer le rendez-vous "+calEvent.title+"? Cette action ne peut-être annulée.")) {

                    $('#loader').show();

                    $.ajax({
                        url: '{{ path("agenda_delete") }}',
                        type: 'DELETE',
                        data: {meeting_id: $('#meeting_id').val()},
                        success: function (data){
                            calendar.fullCalendar('removeEvents', calEvent._id);
                            $dialog.dialog( "close" );
                        },
                        error: function (){
                            alert('Une erreur est survenue');
                        },
                        complete: function (){
                            $('#loader').hide();
                        }
                    });
                };

            }

            function updateEvent()
            {
                $('#loader').show();

                var start = currentEvent.start.format('YYYY-MM-DD HH:mm:ss');
                var end = currentEvent.end.format('YYYY-MM-DD HH:mm:ss');

                $('#start').val(start);
                $('#end').val(end);

                var client = $('#client').val();
                var client_nom = $('#client option:selected').text();
                var km = $('#km').val();
                var repas_midi = $('#repas_midi').is(':checked');
                var repas_soir = $('#repas_soir').is(':checked');
                var hotel = $('#hotel').is(':checked');

                $.ajax({
                    url: '{{ path("agenda_update") }}',
                    type: 'PUT',
                    data: $('#meeting').serialize(),
                    success: function (data){
                        currentEvent.meeting_id = $('#meeting_id').val();
                        currentEvent.title = client_nom;
                        currentEvent.km = km;
                        currentEvent.client = client;
                        currentEvent.repas_midi = repas_midi;
                        currentEvent.repas_soir = repas_soir;
                        currentEvent.hotel = hotel;

                        calendar.fullCalendar('updateEvent', currentEvent, true );

                        $dialog.dialog( "close" );
                    },
                    error: function (){
                        alert('Une erreur est survenue');
                    },
                    complete: function (){
                        $('#loader').hide();
                    }
                });
            }

            function createEvent()
            {
                $('#loader').show();
                var start = currentEvent.start.format('YYYY-MM-DD HH:mm:ss');
                var end = moment(start).add(1, 'hours').format('YYYY-MM-DD HH:mm:ss');

                $('#start').val(start);
                $('#end').val(end);

                var client = $('#client').val();
                var client_nom = $('#client option:selected').text();
                var km = $('#km').val();
                var repas_midi = $('#repas_midi').is(':checked');
                var repas_soir = $('#repas_soir').is(':checked');
                var hotel = $('#hotel').is(':checked');

                $.ajax({
                    url: '{{ path("ajax_agenda_create") }}',
                    type: 'PUT',
                    data: $('#meeting').serialize(),
                    success: function (data){
                        currentEvent.meeting_id = data.meeting_id;
                        currentEvent.title = client_nom;
                        currentEvent.km = km;
                        currentEvent.client = client;
                        currentEvent.repas_midi = repas_midi;
                        currentEvent.repas_soir = repas_soir;
                        currentEvent.hotel = hotel;

                        calendar.fullCalendar('renderEvent', currentEvent, true );

                        $dialog.dialog( "close" );
                    },
                    error: function (){
                        alert('Une erreur est survenue');
                    },
                    complete: function (){
                        $('#loader').hide();
                    }
                });
            }

            initDialog('create');

            var clickTimer;
            var doubleClick;

            calendar.fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                minTime: '07:00:00',
                lang: 'fr',
                timezone: 'Europe/Paris',
                defaultView: 'month',
                editable: true,
                dayClick: function(date, jsEvent, view) {
                    if (moment(date).format('HH:mm:ss') == '00:00:00') {
                        date = moment(date).add(7, 'hours');
                    }

                    currentEvent = {
                        title: 'RDV',
                        start: date,
                        end: moment(date).add(1, 'hours')
                    };

                    currentModalMode = 'create';
                    initDialog('create');
                    $dialog.dialog("open");
                },
                eventClick: function (calEvent, jsEvent, view){
                    currentEvent = calEvent;
                    var start = calEvent.start.format('YYYY-MM-DD HH:mm:ss');
                    var end = calEvent.end.format('YYYY-MM-DD HH:mm:ss');

                    currentModalMode = 'update';

                    $('#client').val(calEvent.client);
                    $('#km').val(calEvent.km);
                    $('#repas_midi').prop('checked', calEvent.repas_midi);
                    $('#repas_soir').prop('checked', calEvent.repas_soir);
                    $('#hotel').prop('checked', calEvent.hotel);
                    $('#start').val(start);
                    $('#end').val(end);
                    $('#meeting_id').val(calEvent.meeting_id);

                    initDialog('update', calEvent);
                    $dialog.dialog("open");
                },
                eventDrop: function (event){
                    resizeEvent({
                        meeting_id: event.meeting_id,
                        dragStart: event.start.format('YYYY-MM-DD HH:mm:ss'),
                        dragEnd: event.end.format('YYYY-MM-DD HH:mm:ss')
                    });
                },
                eventResize: function(event){
                    resizeEvent({
                        meeting_id: event.meeting_id,
                        resize: event.end.format('YYYY-MM-DD HH:mm:ss')
                    });
                },
                defaultTimedEventDuration: '00:30:00',
                events: {{ meetings|raw }}
            })
        });

        $('#user').on('change', function (){
            $('form[name="user_switcher"]').submit();
        });
    })(jQuery);
    </script>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('vendor/fullcalendar/dist/fullcalendar.min.css') }}">
    <link rel="stylesheet" media="print" href="{{ asset('vendor/fullcalendar/dist/fullcalendar.print.css') }}">
{% endblock %}