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

{% block title %} COSAP - Calendrier {% endblock %}

{% block stylesheets %}
	{{ parent()}}

	<link href="{{ asset('template/assets/css/calendrier/main.min.css') }}" rel="stylesheet">

    <link href="{{ asset('template/assets/css/calendrier/style-calendrier.css') }}" rel="stylesheet"> 

{% endblock %}

{% block body %}
    {{ parent() }}

    <section class="row">
        <div class="col-12">
            <div class="card" style="height:60px;">
                <div class="card-body">
                    <div class="bug-list-search">
                        <div class="bug-list-search-content">
                            <div class="sidebar-toggle d-block d-lg-none"><i class="ft-menu font-large-1" style="line-height:0.5"></i></div>
                            <form action="#">
                                <h6 style="font-weight: 500;">
                                    {% trans %}Événements{% endtrans %} 
                                    <span><a class="btn btn-warning btn-sm pull-right" href="{{ path('calendar_page') }}" title="{% trans %}Actualiser{% endtrans %}"><i class="fa fa-refresh"></i></a></span>
                                </h6>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="row" style="padding-left:15px;padding-right:15px;">                    
        <div class="col-2" style="background-color:#fff;padding-top: 15px;position:center;">
            {% include('Calendrier/left_side.html.twig') %}
        </div>

        <div class="col-10" style="background-color:#fff;padding-top: 15px;">
            <div id="calendar"></div>
        </div>  
    </div>

    {% include('Calendrier/modals/add_event.html.twig') %}

    {% include('Calendrier/modals/update_event.html.twig') %}

    {% include('Calendrier/modals/delete_event.html.twig') %}

    {% include('Calendrier/modals/validate_presence_event.html.twig') %}

    {% include('Calendrier/modals/refuser_presence_event.html.twig') %}

{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js" integrity="sha256-7PzqE1MyWa/IV5vZumk1CVO6OQbaJE4ns7vmxuUP/7g=" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/locales-all.min.js" integrity="sha256-lomiTyENeSGOpm5TiwjdxUn87bSv1TL581KZ7bhEEh0=" crossorigin="anonymous"></script>

    <script>

        var date = new Date();

        var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());

        $("#event_participants").select2({closeOnSelect:false});

        $('#event_date_debut').bootstrapMaterialDatePicker({minDate: today, weekStart: 0, time: false, disabledDays: [], lang: 'fr', cancelText: 'Annuler', weekStart: 1});

        $('#event_date_fin').bootstrapMaterialDatePicker({minDate: today, weekStart: 0, time: false, disabledDays: [], lang: 'fr', cancelText: 'Annuler', weekStart: 1});

        $('#event_private_heure_debut').bootstrapMaterialDatePicker({date: false, shortTime: false, lang: 'fr', format: 'HH:mm'});

        $('#event_private_heure_fin').bootstrapMaterialDatePicker({date: false, shortTime: false, lang: 'fr', format: 'HH:mm'});

        $('#event_edit_date_debut').bootstrapMaterialDatePicker({minDate: today, weekStart: 0, time: false, disabledDays: [], lang: 'fr', cancelText: 'Annuler', weekStart: 1});

        $('#event_edit_date_fin').bootstrapMaterialDatePicker({minDate: today, weekStart: 0, time: false, disabledDays: [], lang: 'fr', cancelText: 'Annuler', weekStart: 1});

        $('#event_edit_private_heure_debut').bootstrapMaterialDatePicker({date: false, shortTime: false, lang: 'fr', format: 'HH:mm'});

        $('#event_edit_private_heure_fin').bootstrapMaterialDatePicker({date: false, shortTime: false, lang: 'fr', format: 'HH:mm'});

        {% for flash_message in app.session.flashBag.get('success') %}

            toastr.success('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}

        {% for flash_message in app.session.flashBag.get('info') %}

            toastr.info('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}

        {% for flash_message in app.session.flashBag.get('warning') %}

            toastr.warning('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}

        {% for flash_message in app.session.flashBag.get('error') %}

            toastr.error('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}

    </script>

    {% include('Calendrier/ajax/manage_calendar.html.twig') %}

    {% include('Calendrier/ajax/add_event.html.twig') %}

    {% include('Calendrier/ajax/manage_inputs_form.html.twig') %}

    {% include('Calendrier/ajax/change_date_event.html.twig') %}

    {% include('Calendrier/ajax/update_event.html.twig') %}

    {% include('Calendrier/ajax/delete_event.html.twig') %}

{% endblock %}