{#{% include '@BackBundle/Events/modules/addEventsModal.html.twig' %}#}
{#{% include '@BackBundle/Events/modules/EditEventsModal.html.twig' %}#}
{% include '@BackBundle/Events/modules/modal.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
    // document.addEventListener('DOMContentLoaded', function() {

        var initialLocaleCode = '{{app.request.locale}}';
        var calendarEl = document.getElementById('calendar');


    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', {'lang' : '{{ app.request.locale }}' }),
            selectable: true,
            selectHelper: true,
            editable: true,
            select: function () {

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

                    }
                });

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

                $('#form-events').attr('name','eventsbundle_event');
                $('#form-events').attr('action','/{{ app.request.locale }}/insert');
                $('#submit-btn').text('{{ 'page.addPage.title2' | trans }}');
                $('#eventsbundle_event_title').val('');
                $('#eventsbundle_event_description').val('');
                $('#eventsbundle_event_start').val('');
                $('#eventsbundle_event_end').val('');
                $('#eventsbundle_event_className').val('red');
                $('.gallerie-item').remove();
                $('#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'),
                    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'),
                    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',
                        language: '{{ app.request.locale }}'

                    }
                });
                $(".endEdit").datetimepicker({
                    useCurrent: false,
                    widgetPositioning: {
                        horizontal: 'left',
                        vertical: 'bottom',
                        language: '{{ app.request.locale }}'

                    }
                });

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

                $("#eventsbundle_event_className").val(event.className);
                $('#eventsbundle_event_title').val(event.title);
                $('#eventsbundle_event_description').val(event.description);
                $('#eventsbundle_event_start').val(startDate);
                $('#eventsbundle_event_end').val(endDate);
                // $('.colorEdit').val(event.className);
                $('.token').val(event.token);
                {#$('.registred_list').attr('href',Routing.generate('events_register_calendar',{'token':event.token,'role':'{{ role }}'}))#}
                // $('#delete').attr('data-token',event.token);
                // $('.fileEdit').removeAttr('required');
                // $('#edit_event').modal({show: true});

                $('#form-events').attr('name','editEvent');
                $('#form-events').attr('action','/{{ app.request.locale }}/update');
                $('#submit-btn').text('{{ 'page.editPage.title3'| trans }}');

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

                if(event.registrationStatus == true){
                    $('.switchery').click();
                }

                var html = '';
                $('.gallerie-item').remove();
                $.each(event.gallerie,function(index, value){

                    var img_event_DIR = "{{ asset('uploads/galleries_events/') }}";

                    html = html + '\t<div id="eventsbundle_event_gallerie_'+value.id+'" class="col-md-11 row">\n' +
                        '\t\t<div class="form-group col-md-6">\n' +
                        '\t\t\t<label class="control-label required" for="eventsbundle_event_gallerie_'+index+'_name">Titre</label>\n' +
                        '\t\t\t<input type="text" value="'+value.name+'" id="eventsbundle_event_gallerie_'+index+'_name" name="eventsbundle_event[gallerie]['+index+'][name]" required="required" class="form-control">\n' +
                        '\t\t</div>\n' +
                        '\t\t<div class="form-group col-md-6" style="text-align: center;bottom: 10px;">\n' +
                        '\t<div><label>&nbsp;&nbsp;&nbsp;</label></div>' +
                        '\t\t\t<a href="'+img_event_DIR+value.path+'" class="link-wrapper" data-lightbox="image-1" rel="lightbox[NomDeMaGalerie]" title="">\n' +
                        '\t\t\t<input type="hidden" value="'+value.path+'" id="eventsbundle_event_gallerie_'+index+'_path" name="eventsbundle_event[gallerie]['+index+'][path]">\n' +
                        '\t\t\t<img class="gallerie-picture" src="'+img_event_DIR+value.path+'" alt="Card image cap">\n' +
                        '\t\t\t</a>\n' +
                        '\t\t</div>\n' +
                        '\t</div>\n' +
                        '\t<div id="event_gallerie_delete_'+value.id+'" class="col-md-1">\n' +
                        '\t<label>&nbsp;&nbsp;&nbsp;</label>' +
                        '\t\t<button type="button" class="btn btn-danger delete-btn delete-btn-edit delete-gallerie-event" onclick="delete_gallerie_event(' + value.events + ',' + value.id + ')" data-path="/fr/admin/events/'+value.events+'/delete-gallery-event/'+value.id+'" data-id="'+value.id+'" title="Supprimer" data-events-id="'+value.events+'">\n' +
                        '\t\t\t<i class="fa fa-trash-o"></i>\n' +
                        '\t\t</button>\n' +
                        '\t</div>\n';
                });

                var $newLinkLi = $('.add_picture_event');

                var $newFormLi = $('<div class="row gallerie-item" style="margin-left: 0px;"></div>').append(html);
                $newLinkLi.before($newFormLi);

            }
        });
        // i.render();

    // });









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

                },
                cancel: 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;
    }

    @media (min-width: 576px){
        .modal-dialog {
            max-width: 700px !important;
        }
    }

</style>

<link rel="stylesheet" href="{{ asset('packages/switchery/switchery.min.css') }}" />
<script type="text/javascript" src="{{ asset('packages/switchery/switchery.min.js') }}"></script>

<script>
    var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));

    elems.forEach(function(html) {
        var switchery = new Switchery(html);
    });
</script>
{% include '@BackBundle/Events/modules/assetsGalleries.html.twig' %}