{% include '@BackBundle/Rdv/modules/addEventsModal.html.twig' %}
{% include '@BackBundle/Rdv/modules/EditEventsModal.html.twig' %}
<script type="text/javascript">
    var dateNow = new Date();
    var nowInsert = dateNow.getFullYear() + '-' + dateNow.getMonth() + '-' + dateNow.getDay() + 'T' + dateNow.getHours() + ':' + dateNow.getMinutes();

    //calendar of events
    var i = $("#calendar").fullCalendar({
        plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],

        header: {
            left: "prev,next today",
            center: "title",
            right: "month,agendaWeek,agendaDay,listWeek"
        },
        locale: '{{app.request.locale}}',

        buttonIcons: {
            prev: "fa fa-angle-left",
            next: "fa fa-angle-right",
            prevYear: "fa fa-angle-left",
            nextYear: "fa fa-angle-right"
        },
        longPressDelay: 0,
        events: Routing.generate('load_calendar_rdv'),
    {% if  'ROLE_AGENDA_RDV' in app.user.roles or 'ROLE_ADMIN' in app.user.roles  %}
        selectable: true,
        selectHelper: true,
        editable: true,
    {% else %}
        selectable: false,
        selectHelper: false,
        editable: false,
    {% endif %}
        select: function () {

            $(".start").datetimepicker({
                widgetPositioning: {
                    horizontal: 'left',
                    vertical: 'bottom'
                }
            });
            $(".end").datetimepicker({
                useCurrent: false,
                widgetPositioning: {
                    horizontal: 'left',
                    vertical: 'bottom'
                }
            });

            $(".start").on("dp.change", function (e) {
                $(".end").data("DateTimePicker").minDate(e.date);
            });
            $(".end").on("dp.change", function (e) {
                $(".start").data("DateTimePicker").maxDate(e.date);
            });

            $('#add_event').modal({show: true});

        },
        eventResize: function (event) {
            var start = $.fullCalendar.formatDate(event.start, 'Y-MM-DD HH:mm:ss');
            var end = $.fullCalendar.formatDate(event.end, 'Y-MM-DD HH:mm:ss');
            var title = event.title;
            var description = event.description;
            var id = event.id;
            $.ajax({
                url: Routing.generate('drag_calendar_rdv'),
                type: 'POST',
                data: {
                    'start': start,
                    'end': end,
                    'token': event.token,
                },
                success: function (result) {
                    if (result == 1) {
                        i.fullCalendar('refetchEvents');
                    } else {
                        alert('erreur');
                    }
                }
            })
        },
        eventDrop: function (event) {
            var start = $.fullCalendar.formatDate(event.start, 'YYYY-MM-DD HH:mm:ss');
            var end = $.fullCalendar.formatDate(event.end, 'YYYY-MM-DD HH:mm:ss');
            $.ajax({
                url: Routing.generate('drag_calendar_rdv'),
                type: 'POST',
                data: {
                    'start': start,
                    'end': end,
                    'token': event.token,
                },
                success: function (result) {
                    if (result == 1) {
                        i.fullCalendar('refetchEvents');
                    } else {
                        alert('erreur');
                    }
                }
            })
        },
        eventClick: function (event) {
            var startDate = $.fullCalendar.formatDate(event.start, 'YYYY-MM-DD HH:mm');
            var endDate = $.fullCalendar.formatDate(event.end, 'YYYY-MM-DD HH:mm');
            $(".startEdit").datetimepicker({
                widgetPositioning: {
                    horizontal: 'left',
                    vertical: 'bottom'
                }
            });
            $(".endEdit").datetimepicker({
                useCurrent: false,
                widgetPositioning: {
                    horizontal: 'left',
                    vertical: 'bottom'
                }
            });

            $(".startEdit").on("dp.change", function (e) {
                $(".endEdit").data("DateTimePicker").minDate(e.date);
            });
            $(".endEdit").on("dp.change", function (e) {
                $(".startEdit").data("DateTimePicker").maxDate(e.date);
            });

            $(".className").val(event.className);
            $('.titleEdit').val(event.title);
            $('.descriptionEdit').val(event.description);
            $('.startEdit').val(startDate);
            $('.endEdit').val(endDate);
            $('.colorEdit').val(event.className);
            $('.token').val(event.token);
            $('.registred_list').attr('href',Routing.generate('rdv_register_calendar',{'token':event.token,'role':'{{ role }}'}))
            $('#delete').attr('data-token',event.token);
            $('.fileEdit').removeAttr('required');
            {% if 'ROLE_AGENDA_RDV' in app.user.roles %}
            $('#edit_event').modal({show: true});
            {% else %}
            $('#edit_event').modal({show: true});
            {% endif %}

        }
    });

    $('#delete').click(function () {
        token = $(this).attr('data-token');
        $.confirm({
            title: '{{ 'sup.rdv.title1' | trans }}',
            text: '{{ 'sup.rdv.title2' | trans }} ',
            type: 'red',
            buttons: {
                formSubmit: {
                    text: '{{ 'sup.rdv.title3' | trans }}',
                    btnClass: 'btn-red',
                    type: 'red',
                    action: function () {
                        $('#edit_event').modal('hide');
                        $.ajax({
                            url: Routing.generate('delete_calendar_rdv', {'token': token}),
                            type: 'POST',
                            success: function (result) {
                                if (result == 1) {
                                    i.fullCalendar('refetchEvents');
                                } else {
                                    alert('erreur');
                                }
                            }
                        });
                        $.alert('{{ 'sup.rdv.title4' | trans }}');
                    }

                },
                {{'page.addPage.title7' | trans}}: function () {

                },
            }
        });

    });

    $('.cancel-action').click(function () {
        //$("#eventsbundle_event_start,#eventsbundle_event_end").datetimepicker("destroy");
        $('#add_event').modal('hide');
    })



    jconfirm.defaults = {
        title: 'Hello',
        titleClass: '',
        type: 'default',
        typeAnimated: true,
        draggable: true,
        dragWindowGap: 15,
        dragWindowBorder: true,
        animateFromElement: true,
        smoothContent: false,
        content: '{{ 'js.modal' | trans }}',
        buttons: {},
        defaultButtons: {
            ok: {
                action: function () {
                }
            },
            close: {
                action: function () {
                }
            },
        },
        contentLoaded: function (data, status, xhr) {
        },
        icon: '',
        lazyOpen: false,
        bgOpacity: null,
        theme: 'light',
        animation: 'scale',
        closeAnimation: 'scale',
        animationSpeed: 400,
        animationBounce: 1,
        rtl: false,
        container: 'body',
        containerFluid: false,
        backgroundDismiss: false,
        backgroundDismissAnimation: 'shake',
        autoClose: false,
        closeIcon: null,
        closeIconClass: false,
        watchInterval: 100,
        columnClass: 'col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1',
        boxWidth: '50%',
        boxHeight: '50%',
        scrollToPreviousElement: true,
        scrollToPreviousElementAnimate: true,
        useBootstrap: true,
        offsetTop: 40,
        offsetBottom: 40,
        bootstrapClasses: {
            container: 'container',
            containerFluid: 'container-fluid',
            row: 'row',
        },
        onContentReady: function () {
        },
        onOpenBefore: function () {
        },
        onOpen: function () {
        },
        onClose: function () {
        },
        onDestroy: function () {
        },
        onAction: function () {
        }
    };

</script>
<script>
    //delete user register event
    $('.user-remove').click(function () {
        token = $(this).attr('data-token');
        alert(token);
        $('.be-confirm').click(function () {
            $.ajax({
                url:Routing.generate('events_user_delete_calendar',{'token':token,'role':'{{ role }}'}),
                success:function () {
                    window.location.reload();
                }
            })
        })
    });
</script>
<style>
    .label-calendar {
        margin-top: 10px;
    }

    .fc .fc-toolbar > * > * {
        float: left;
        margin-left: .75em;
        margin-top: 10px;
    }

    .fc-toolbar .fc-center h2 {
        font-size: 37px;
        color: darkslategrey;
        margin-top: -3px;
    }

    .fc-widget-header {
        border: none !important;
    }

    .fc button, .fc button.btn-primary {
        background-color: #f96332;
        color: #fff;
    }

    .fc button {
        border-width: 2px;
        font-weight: 400;
        font-size: .8571em;
        line-height: 1.35em;
        border: none;
        margin: 10px 1px;
        border-radius: .1875rem;
        padding: 11px 22px;
        cursor: pointer;
        transition: all .2s ease-in-out;
        outline: none;
    }

    .fc th {
        text-align: right !important;
        color: #888 !important;
        border: 0px;
        right: -17px;
        font-size: 14px;
        bottom: -6px;
        position: relative;
    }

    thead {
        border: none !important;
    }

    .card-calendar .fc .fc-widget-header {
        border: 0;
    }

    .fc td {
        border-style: solid;
        border-width: 1px;
        padding: 0;
        vertical-align: top;
    }

    .fc-view-container *, .fc-view-container :after, .fc-view-container :before {
        box-sizing: content-box;
    }

    .fc-row .fc-content-skeleton td, .fc-row .fc-helper-skeleton td {
        background: none;
        border-color: transparent;
        border-bottom: 0;
    }

    .fc-day-top.fc-other-month {
        opacity: .3;
    }

    .card-calendar table td {
        text-align: right;
    }

    .fc table {
        width: 100%;
        box-sizing: border-box;
        table-layout: fixed;
        border-collapse: collapse;
        border-spacing: 0;
        font-size: 1em;
    }

    .fc td {
        border-style: solid;
        border-width: 1px;
        padding: 5px;
        vertical-align: top;
    }

    .fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
        float: right;
    }

    .fc-day-grid-event .fc-content {
        white-space: nowrap;
        overflow: hidden;
        color: #fff;
        padding: 0 5px;
    }

    .fc-day-grid-event .fc-time {
        font-weight: 700;
    }

    .fc td:first-child {
        border-left: 0 !important;
    }

    .fc td:last-child {
        border-right: 0 !important;
    }

    .fc-event-container .orange {
        background-color: #fece00;
        border-color: #ffa407;
    }

    .orange .fc-content {
        color: black;
    }

    .fc-event-container .red {
        background-color: #dc3545;
    }

    .fc-event-container .blue {
        background-color: #007bff;
    }

    .fc-event-container .green {
        background-color: #28a745;
    }

    .fc-event-container .dark {
        background-color: #6c757d;
    }

    :root {
        --blue: #007bff;
        --indigo: #6610f2;
        --purple: #6f42c1;
        --pink: #e83e8c;
        --red: #dc3545;
        --orange: #fd7e14;
        --yellow: #ffc107;
        --green: #28a745;
        --teal: #20c997;
        --cyan: #17a2b8;
        --white: #fff;
        --gray: #6c757d;
        --gray-dark: #343a40;
        --primary: #007bff;
        --secondary: #6c757d;
        --success: #28a745;
        --info: #17a2b8;
        --warning: #ffc107;
        --danger: #dc3545;
        --light: #f8f9fa;
        --dark: #343a40;
        --breakpoint-xs: 0;
        --breakpoint-sm: 576px;
        --breakpoint-md: 768px;
        --breakpoint-lg: 992px;
        --breakpoint-xl: 1200px;
        --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }
</style>