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

{% block title %}Planning{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="/css/planning.css">
    <link rel="stylesheet" type="text/css" href="/css/fullcalendar.min.css">
    <link rel='stylesheet'  href='/css/fullcalendar.print.min.css' media='print'/>
{% endblock %}

{% block body %}

{% include 'include/menu.html.twig' %}
    <div class="container-fluid height-75-per">

        <section class="h-100 p-2" id="dashboard-planning">
            <div class="row h-100">
                <div class="col-md-2 col-sm-l2">
                    <h6 class="text-center font-weight-bold black">Séquences à planifier</h6>
                    <div id="external-events">
                        {% for planning in plannings %}
                            <div class="fc-event sequences" id="{{ planning.id }}" data-event="FICHE|{{ planning.id }}|{{ planning.fiche.sequenceTime }}">
                                <div>
                                    <div><i class="far fa-file mr-1" style="font-size: 20px;"></i><strong>{{ planning.fiche.name }}</strong></div>
                                    <br>
                                    <div>Durée : {{ planning.fiche.sequenceTime }} minutes</div>
                                    <div>Objectif : {{ planning.fiche.goal }} </div>
                                </div>
                            </div>
                        {% else %}
                            <div class="p-2 font-weight-bold black text-center">
                                Aucune fiche en attente d'être planifiée.
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="col-md-8 col-sm-12">
                    <div class="h-100">

                        <div id="planning"></div>
                    </div>


                </div>
                <div class="col-md-2 col-sm-l2">
                    <h6 class="text-center font-weight-bold black">Coaching en ligne</h6>
                    <div class="d-flex align-items-center justify-content-center">
                        <a data-toggle="modal" href="#modalCoaching" class="btn btn-primary btn-lg">
                            <i class="fas fa-chalkboard-teacher"></i>
                            Nouvelle séance
                        </a>
                    </div>
                    <br>
                    <h6 class="text-center font-weight-bold black">Formations</h6>
                    <div id="external-events-formation">
                        {% for formation in formations %}
                            <div class="fc-event formations" data-event="FORMATION|{{ formation.id }}|{{ formation.duration }}">
                                <div class="text-center">
                                    <div><strong>{{ formation.name }}</strong></div>
                                    {% if formation.duration == 1 %}
                                        <div>{{ formation.duration }} jour</div>
                                    {% else %}
                                        <div>{{ formation.duration }} jours</div>
                                    {% endif %}
                                    <a class="btn btn-light" href="/file/formation/{{ formation.file }}">Descriptif</a>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </section>
    </div>




    <!-- ADD EVENT -->
<div class="modal fade" id="modalHandleEvent" tabindex="-1" role="dialog"
     aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
         role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">Planifier séquence</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="bx bx-x"></i>
                </button>
            </div>
            <div class="modal-body">
                <input type="hidden" name="event_id" id="event_id" value="" />
                <input type="hidden" name="sequenceTime" id="sequenceTime" value="" />
                <input type="hidden" name="date" id="date" value=""/>
                <div class="form-group">
                    <label for="timeEvent">Heure</label>
                    <div>
                        <input style="width: 70px; float: left" type="number" class="form-control" id="hourEvent" >
                        <div style="float: left; margin: 5px;">H</div>
                        <input maxlength="2" style="width: 70px;" type="number" class="form-control" id="minuteEvent">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light-secondary" data-dismiss="modal">
                    <i class="bx bx-x d-block d-sm-none"></i>
                    <span class="d-none d-sm-block">Fermer</span>
                </button>
                <button type="button" class="btn btn-primary ml-1" data-dismiss="modal" id="handleEvent">
                    <i class="bx bx-check d-block d-sm-none"></i>
                    <span class="d-none d-sm-block">Valider</span>
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalClickEvent" tabindex="-1" role="dialog"
         aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
             role="document">

            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">Séquence</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="bx bx-x"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="text-center">
                        <input type="hidden" id="event_url" name="event_url">
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group text-left">
                                    <label for="event_name">Titre</label>
                                    <input readonly type="text" id="event_name" name="event_name" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group text-left">
                                    <label for="event_date_start">Date début</label>
                                    <input readonly type="text" id="event_date_start" name="event_date_start" class="form-control">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group text-left">
                                    <label for="event_date_end">Date fin</label>
                                    <input readonly type="text" id="event_date_end" name="event_date_end" class="form-control">
                                </div>
                            </div>
                        </div>


                        <input type="hidden" id="event_id" name="event_id">

                    </div>

                </div>
                <div class="modal-footer d-flex justify-content-around">
                    <button id="viewFiche" class="btn btn-success"  style="width: 150px; text-align: center;"><span class="d-none d-sm-block">Ouvrir</span></button>
                    <button id="deleteFiche" class="btn btn-danger" style="width: 150px; text-align: center;"><span class="d-none d-sm-block">Supprimer</span></button>
                </div>
            </div>

        </div>
    </div>

<div class="modal fade" id="modalCoaching" tabindex="-1" role="dialog"
         aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
             role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">Demande de séance de coaching</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="bx bx-x"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="dateCoaching">Date</label>
                        <input class="form-control" id="dateCoaching" name="dateCoaching" type="date">
                    </div>
                    <div class="form-group">
                        <label for="timeEvent">Heure</label>
                        <div>
                            <input style="width: 70px; float: left" type="number" class="form-control" id="hourCoaching" >
                            <div style="float: left; margin: 5px;">H</div>
                            <input maxlength="2" style="width: 70px;" type="number" class="form-control" id="minuteCoaching">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="durationCoaching">Durée</label>
                        <select class="form-control" name="durationCoaching" id="durationCoaching">
                            <option>30m</option>
                            <option>1h</option>
                            <option>1h30</option>
                            <option>2h</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light-secondary" data-dismiss="modal">
                        <i class="bx bx-x d-block d-sm-none"></i>
                        <span class="d-none d-sm-block">Fermer</span>
                    </button>
                    <button type="button" class="btn btn-primary ml-1" data-dismiss="modal" id="handleEvent">
                        <i class="bx bx-check d-block d-sm-none"></i>
                        <span class="d-none d-sm-block">Valider</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $('#modalHandleEvent').on('hidden.bs.modal', function (e) {
                $('#planning').fullCalendar('refetchEvents');
            });

            $('#modalClickEvent').on('hidden.bs.modal', function (e) {
                $('#planning').fullCalendar('refetchEvents');
            });


            $( "#handleEvent" ).click(function(e) {
                let hour = $('#hourEvent').val();
                let minute = $('#minuteEvent').val();

                if (hour.length !== 0 && minute.length !== 0) {
                    let date = new Date($('#date').val());
                    date.setHours(hour);
                    date.setMinutes(minute);
                    $.ajax({
                        method: "POST",
                        url: "/dashboard/planning/handleEvent",
                        dataType: "json",
                        data: {date : (date.getTime() / 1000), id_planning : $('#event_id').val(), type : "FICHE"},
                        success: function(data){
                            $('#hourEvent').val("");
                            $('#minuteEvent').val("");
                            $('#' + $('#event_id').val() ).remove();
                            $('#modalHandleEvent').modal('hide');
                        }
                    });
                }
            });

            $('#external-events .fc-event').each(function() {
                $(this).draggable({
                    zIndex:   999,
                    revert: true
                });
            });

            $('#external-events-formation .fc-event').each(function() {
                $(this).draggable({
                    zIndex:   999,
                    revert: true
                });
            });

            $('#viewFiche').click(function(e) {
                let event = $('#event').val();
                $('#modalClickEvent').modal('hide');
                window.open($('#event_url').val());
            });

            $('#deleteFiche').click(function(e) {
                $.ajax({
                    method: "POST",
                    url: "/dashboard/planning/deleteEvent",
                    dataType: "json",
                    data: {event_id : $('#event_id').val()},
                    success: function(data){
                        $('#modalClickEvent').modal('hide');
                    }
                });
            });

            $('#planning').fullCalendar({
                locale: 'fr',
                height: "parent",
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay,listMonth'
                },
                buttonText: {
                    listMonth: 'Mon plan de formation'
                },
                droppable: true, // this allows things to be dropped onto the calenda
                eventStartEditable: true,
                eventDurationEditable: false,
                editable: true,
                displayEventEnd: true,
                timezone: 'local',
                drop: function (date) {
                    var params = $(this).data("event").split('|');
                    if (params[0] === "FICHE") {
                        $('#event_id').val(params[1]);
                        $('#sequenceTime').val(params[2]);
                        $('#date').val(date);
                        $('#modalHandleEvent').modal('show');
                    } else {
                        let new_date = new Date(date);
                        $.ajax({
                            method: "POST",
                            url: "/dashboard/planning/handleEvent",
                            dataType: "json",
                            data: {date : (new_date.getTime() / 1000), id_planning : params[1], type : "FORMATION", action : "ADD"},
                            success: function(data){
                                $('#planning').fullCalendar('refetchEvents');
                            }
                        });
                    }

                },
                events: function(start, end, timezone, callback) {
                    var events = [];
                    $.ajax({
                        type: "POST",
                        url: "{{ path('dashboard_planning_displayEvents') }}",
                        dataType: 'json',
                        data : {},
                        success: function (resultData) {
                            for (i = 0; i < resultData.length; i++) {
                                let color;
                                let allDay;
                                if (resultData[i].type === "fiche") {
                                    color = "#0d62aa";
                                    allDay = false;
                                } else {
                                    color = "#9400d3";
                                    allDay = true;
                                }
                                events.push({
                                    title: resultData[i].title,
                                    start: resultData[i].date_start,
                                    end: resultData[i].date_end,
                                    url: resultData[i].url,
                                    backgroundColor: color,
                                    borderColor: color,
                                    textColor: "#ffffff",
                                    allDay: allDay,
                                    id: resultData[i].id
                                });

                            }
                            callback(events);
                        }
                    });
                },
                eventDrop: function(event, delta, revertFunc, jsEvent, ui, view) {
                    let split = event.id.split('|');
                    let new_date = new Date(event.start);
                    if (split[2] === "fiche") {
                        $('#event_id').val(split[0]);
                        $('#date').val(event.start.format());
                        $('#modalHandleEvent').modal('show');
                    } else {
                        $.ajax({
                            method: "POST",
                            url: "/dashboard/planning/handleEvent",
                            dataType: "json",
                            data: {date : (new_date / 1000), id_planning : split[0], type : "FORMATION", action : "UPDATE"},
                            success: function(data){
                                $('#planning').fullCalendar('refetchEvents');
                            }
                        });
                    }
                    revertFunc();
                },
                eventClick: function(event) {
                    console.log(event);
                    $('#modalClickEvent').modal('show');
                    $('#event_url').val(event.url);
                    $('#event_name').val(event.title);
                    let date_start = new Date(event.start);
                    let date_end = new Date(event.end);
                    $('#event_date_start').val(date_start.toLocaleString());
                    $('#event_date_end').val(date_end.toLocaleString());
                    let split = event.id.split('|');
                    $('#event_id').val(split[0]);
                    if (event.url) {
                        return false;
                    }
                }
            });
        });
    </script>
{% endblock %}

{% block javascripts %}
    <script src="/js/fullcalendar.min.js"></script>
    <script src='/js/locale-all.js'></script>
{% endblock %}