{% extends "base.html.twig" %}

{% block head_style %}
    {{ encore_entry_link_tags('app') }}
    {{ encore_entry_link_tags('fullcalendar') }}
{% endblock head_style %}

{% block localstyle %}
    .fc-header-toolbar h2 {
        text-transform: uppercase;
    }

    .fc-day-grid-event {
        padding:0px;
        border-radius:0px;
        border: none;
    }
    .fc-content {
        height: 40px;
    }
    
    .fc-title {
        font-weight: bolder;
        font-size: 12px;        
    }

    .eventAvatar {
        width: 20px;
        margin: 0px 5px 0px 0px;
        float: left;
    }

    .eventInfo{ 
        margin: -5px 5px 0px 0px;
        clear: both;
    }

    .eventEstimate { 
        margin: -3px 10px;
    }
{% endblock %}

{% block body %}
    <div id="fullcalendar" style="width:100%; margin-top:10px;"></div>

    <div id="modalsubmit" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Création Evènement</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <button onClick="eventSubmit()" class="btn btn-success">Valider</button>
                    <button onClick="" class="btn btn-secondary" data-dismiss="modal">Annuler</button>

                    <p></p>
                    <div class="form-group">
                        <label class="control-label required" for="usersubmit">
                            Intervenant<span class="mandatory">*</span>
                        </label>
                        <select class="select2entity" id="usersubmit" name="usersubmit">
                            {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_MASTER') or is_granted('ROLE_VALIDATOR')%}                                
                                {% for user in users %}
                                    <option value="{{user.id}}">{{user.displayname}}</option>
                                {% endfor %}
                            {% else %}
                                <option value="{{app.user.id}}">{{app.user.displayname}}</option>
                            {% endif  %}
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="control-label required" for="tasksubmit">
                            Project<span class="mandatory">*</span>
                        </label>
                        <select class="select2entity" id="tasksubmit" name="tasksubmit">
                            <option></option>
                            {% for task in tasks %}
                                <option value="{{task.id}}">{{task.displayname}}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="form-group">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="amsubmit">
                            <label class="custom-control-label" for="amsubmit">Evènement sur la matinée</label>
                        </div>
                    </div>  

                    <div class="form-group">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="apsubmit">
                            <label class="custom-control-label" for="apsubmit">Evènement sur l'après-midi</label>
                        </div>
                    </div>  

                    <div class="form-group">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="astreinte">
                            <label class="custom-control-label" for="astreinte">Astreinte</label>
                        </div>
                    </div>  

					<div class="form-group">
			            <label for="description" class="control-label">
                            Description
                        </label>
			            <textarea id="description" id="description" class="form-control" placeholder="Description" style="height:200px">
                        </textarea>
		            </div>


                    <input type="hidden" id="start" name="start" class="form-control" value="">
                    <input type="hidden" id="end" name="end" class="form-control" value="">
                </div>            
            </div>
        </div>
    </div>


    <div id="modalupdate" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modification Evènement</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                
                <div class="modal-body">
                    <button onClick="eventUpdate()" class="btn btn-success">Valider</button>
                    <button onClick="" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                    <button onClick="eventDelete()" class="btn btn-danger float-right">Supprimer</button>

                    <p></p>
                    <div class="form-group">
                        <label class="control-label required" for="service_name">
                            Intervenant<span class="mandatory">*</span>
                        </label>
                        <select class="select2entity" id="userupdate" name="userupdate">
                            {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_MASTER') or is_granted('ROLE_VALIDATOR')%}                                
                                {% for user in users %}
                                    <option value="{{user.id}}">{{user.displayname}}</option>
                                {% endfor %}
                            {% else %}
                                <option value="{{app.user.id}}">{{app.user.displayname}}</option>
                            {% endif  %}
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="control-label required" for="taskupdate">
                            Project<span class="mandatory">*</span>
                        </label>
                        <select class="select2entity" id="taskupdate" name="taskupdate">
                            <option></option>
                            {% for task in tasks %}
                                <option value="{{task.id}}">{{task.displayname}}</option>
                            {% endfor %}
                        </select>
                    </div>

					<div class="form-group">
			            <label for="description" class="control-label">
                            Description
                        </label>
			            <textarea id="description" id="description" class="form-control" placeholder="Description" style="height:200px">
                        </textarea>
		            </div>

                    <input type="hidden" id="idevent" name="idevent" class="form-control" value="">
                    <input type="hidden" id="fgastreinte" name="fgastreinte" class="form-control" value="">
                </div>            
            </div>
        </div>
    </div>

    {{ encore_entry_script_tags('fullcalendar') }}
{% endblock %}




{% block localjavascript %}
$(document).ready(function() {
    $("#modalsubmit #user").select2({
        theme: 'bootstrap4',
        language: "fr"
    }); 

    $("#modalsubmit #task").select2({
        placeholder: "Selectionnez un projet",
        allowClear: true,
        theme: 'bootstrap4',
        language: "fr"
    }); 

    $("#modalupdate #user").select2({
        theme: 'bootstrap4',
        language: "fr"
    }); 

    $("#modalupdate #task").select2({
        placeholder: "Selectionnez un projet",
        theme: 'bootstrap4',
        language: "fr"
    }); 
});

// Rendu d'un évenement
function eventRender(info) {
    console.log(info.event.extendedProps);
    // Récupération des divers élements du rendu event
    var content=$(info.el).children('.fc-content');
    var title=$(content).children('.fc-title');

    // Ajouter l'avatar
    content.prepend("<img src="+info.event.extendedProps.avatar+" class='eventAvatar'>");
    content.append("<span class='eventUser float-left small'>"+info.event.extendedProps.username+"</span>");
    var eventInfo=$(content).children('.eventUser');

    // Ajout container 
    content.append("<span class='eventInfo float-right'></span>");
    var eventInfo=$(content).children('.eventInfo');

    // Ajouter le verrou si event non editable
    if(info.event.extendedProps.locked) {
        eventInfo.append("<i class='fa fa-lock float-right'></i>");
    }

    // Ajout estimation
    eventInfo.append("<span class='eventEstimate float-right small'>"+info.event.extendedProps.estimate+"</span>");

    // Description
    content.attr("title",info.event.extendedProps.fulldescription);
}

// Formulaire Création d'un évelement
var allDay;
function eventSelect(selectionInfo) {
    var start=moment(selectionInfo.start);
    var end=moment(selectionInfo.end);
    var end=end.subtract(1, 'd');
    allDay=(start.format("DD/MM/YYYY") != end.format("DD/MM/YYYY"));

    // Controle
    if(start.month()!=end.month()) {
        alert("Une tâche ne peut être sur deux mois différents");
        return false;
    }

    if(start.week()!=end.week()) {
        alert("Une tâche ne peut être sur deux semaines différentes");
        return false;
    }

    // Valeur par défaut
    {% if (is_granted('ROLE_ADMIN') or is_granted('ROLE_VALIDATOR') or is_granted('ROLE_MASTER')) and app.session.get('iduser')!="all" %}  
        $('#usersubmit').val({{app.session.get('iduser')}}).trigger("change");
    {% else %}
        $('#usersubmit').val({{app.user.id}}).trigger("change");
    {% endif %}

    // Si jour de fin un samedi ou un dimanche : on est forcement en astreinte
    if(moment(end).day()==0||moment(end).day()==6) {
        $("#modalsubmit #astreinte").prop("checked",true);
        $("#modalsubmit #astreinte").attr("disabled",true);
        allDay=true;
    }
    else {
        $("#modalsubmit #astreinte").prop('checked', false);
        $("#modalsubmit #astreinte").attr('disabled', false);
    }

    $('#modalsubmit #amsubmit').prop("checked",true);
    $('#modalsubmit #apsubmit').prop("checked",true);
    $('#modalsubmit #amsubmit').attr("disabled",allDay);
    $('#modalsubmit #apsubmit').attr("disabled",allDay);

    $('#modalsubmit #start').val(start.format("YYYY-MM-DD"));
    $('#modalsubmit #end').val(end.format("YYYY-MM-DD"));
    
    $('#modalsubmit #description').val("");
    
    $("#modalsubmit .alert").remove();

    // Formulaire de création d'un évènement
    $('#modalsubmit').modal();
}

// Formulaire Modification d'un évelement
function eventClick(info) {
    if(info.event.extendedProps.editable) {
        console.log(info.event.id);

        var id=info.event.id;
        var description=info.event.extendedProps.description;
        var userid=info.event.extendedProps.userid;
        var taskid=info.event.extendedProps.taskid;
        var fgastreinte=info.event.extendedProps.astreinte;
        
        $('#userupdate').val(userid).trigger("change");
        $('#taskupdate').val(taskid).trigger("change");
        $('#modalupdate #idevent').val(id);
        $('#modalupdate #fgastreinte').val(fgastreinte);
        $('#modalupdate #description').val(description);

        $("#modalupdate .alert").remove();

        // Formulaire de création d'un évènement
        $('#modalupdate').modal();
    }
}

// Création de l'évènement
function eventSubmit() {
    $("#modalsubmit .alert").remove();
    var error=false;

    // Tache obligatoire
    if($("#modalsubmit #task").val()=="") {
        error=true;
        $("#modalsubmit .modal-body").append("<div class='alert alert-danger' style='margin: 5px 0px'>Tâche obligatoire</div>");
    }

    // AM ou PM obligatoire
    if(!$("#modalsubmit #amsubmit").prop("checked")&&!$("#modalsubmit #apsubmit").prop("checked")) {
        error=true;
        $("#modalsubmit .modal-body").append("<div class='alert alert-danger' style='margin: 5px 0px'>Vous devez choisir un moment de la journée</div>");
    }

    if(!error) {
        $.ajax({                                                            
            type: "POST",
            data: {
                iduser: $("#usersubmit").val(),
                idtask: $("#tasksubmit").val(),
                start: $("#modalsubmit #start").val(),
                end: $("#modalsubmit #end").val(),
                am: $("#modalsubmit #amsubmit").prop("checked"),
                ap: $("#modalsubmit #apsubmit").prop("checked"),
                astreinte: $("#modalsubmit #astreinte").prop("checked"),
                description:  $("#modalsubmit #description").val()                
            },
            url: "{{ path('app_event_submit') }}",
            success: function (response) {
                response=JSON.parse(response);
                if(response.return=="KO") {
                    $("#modalsubmit .modal-body").append("<div class='alert alert-danger' style='margin: 5px 0px'>"+response.error+"</div>");
                }
                else {
                    calendar.addEvent(response);
                    calendar.render;
                    $('#modalsubmit').modal('hide');
                }
            }
        });
    }
}

// Modification de l'évènement
function eventUpdate() {
    $("#modalupdate .alert").remove();

    $.ajax({                                                            
        type: "POST",
        data: {
            idevent:  $("#modalupdate #idevent").val(),
            iduser: $("#userupdate").val(),
            idtask: $("#taskupdate").val(),
            fgastreinte: $("#modalupdate #fgastreinte").val(),
            description: $("#modalupdate #description").val()                
        },
        url: "{{ path('app_event_update') }}",
        success: function (response) {
            response=JSON.parse(response);
            if(response.return=="KO") {
                $("#modalupdate .modal-body").append("<div class='alert alert-danger' style='margin: 5px 0px'>"+response.error+"</div>");
            }
            else {
                var event = calendar.getEventById($("#modalupdate #idevent").val());
                event.remove();                
                
                calendar.addEvent(response);
                calendar.render;
                $('#modalupdate').modal('hide');
            }
        }
    });
}

// Suppression de l'évènement
function eventDelete() {
    $("#modalupdate .alert").remove();

    $.ajax({                                                            
        type: "POST",
        data: {
            idevent:  $("#modalupdate #idevent").val(),
            fgastreinte: $("#modalupdate #fgastreinte").val()
        },
        url: "{{ path('app_event_delete') }}",
        success: function (response) {
            response=JSON.parse(response);
            if(response.return=="KO") {
                $("#modalupdate .modal-body").append("<div class='alert alert-danger' style='margin: 5px 0px'>"+response.error+"</div>");
            }
            else {
                var event = calendar.getEventById($("#modalupdate #idevent").val());
                event.remove();                
                $('#modalupdate').modal('hide');
            }
        }
    });
}

// On change astreinte
$("#astreinte").change(function() {
    console.log(allDay)
    if(this.checked) {
        $("#amsubmit").prop("disabled",true);
        $("#apsubmit").prop("disabled",true);

        $('#modalsubmit #amsubmit').prop("checked",true);
        $('#modalsubmit #apsubmit').prop("checked",true);
    }
    else {
        $("#amsubmit").prop("disabled",allDay);
        $("#apsubmit").prop("disabled",allDay);

        $('#modalsubmit #amsubmit').prop("checked",true);
        $('#modalsubmit #apsubmit').prop("checked",true);
    }
});

{% endblock %}