{% extends 'front.html.twig' %}
{% block title %} {{ 'page.index.title' |trans }} {% endblock %}
{% block stytesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('animated-event-calendar/docs/simple-calendar.css') }}">
    <link rel="stylesheet" href="{{ asset('animated-event-calendar/docs/demo.css') }}">

    <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://unpkg.com/tippy.js@4/themes/light-border.css"/>

    <link rel="stylesheet" href="https://unpkg.com/tippy.js@4/themes/translucent.css"/>

{% endblock %}
{% block css %}
    <link rel="stylesheet" type="text/css"
          href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

    {#<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.print.css" />#}

    <link href="{{ asset('packages/core/main.css') }}" rel='stylesheet'/>
    <link href="{{ asset('packages/daygrid/main.css') }}" rel='stylesheet'/>
    <link href="{{ asset('packages/timegrid/main.css') }}" rel='stylesheet'/>
    <link href="{{ asset('packages/list/main.css') }}" rel='stylesheet'/>

    <style>

        /*body {
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 14px;
        }*/

        #top {
            background: #eee;
            border-bottom: 1px solid #ddd;
            padding: 0 10px;
            line-height: 40px;
            font-size: 12px;
        }

        #calendar {
            /* max-width: 900px;*/
            margin: 40px auto;
            padding: 0 10px;
        }

        span.fc-title {
            color: white !important;
        }

        span.fc-time {
            color: white !important;
        }

        .fc-event, .fc-event-dot {
            background-color: #1a468d !important;
        }

        .fc-button-primary {
            color: #fff !important;
            background-color: #f58020 !important;
            border-color: #f58020 !important;
        }

        .fc-toolbar h2 {
            text-transform: capitalize;
        }


    </style>



{% endblock %}
{% block body %}
    <!-- hero area start -->
    <section style="margin-top: -20px;" id="home">
        <div id="carouselExampleIndicators1" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                {% for slider in sliders %}
                    <li data-target="#carouselExampleIndicators1" data-slide-to="{{ loop.index }}"
                        {% if loop.index == 1 %}class="active"{% endif %}></li>
                {% endfor %}
            </ol>
            <div class="carousel-inner">
                {% for slider in sliders %}
                    <div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
                        <img class="d-block w-100" src="{{ asset('uploads/sliders/'~slider.path) }}"
                             alt="slide {{ loop.index }}">
                        <div class="carousel-caption d-none d-md-block">
                            <span>{{ slider.description|raw }}</span>
                        </div>
                    </div>
                {% endfor %}
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators1" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators1" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </section>
    <!-- hero area end -->

    <section class="ptb-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="sec-title mb-20">
                        <h2>{{ 'page.index.qsn1'| trans }} <span
                                    class="title-span">{{ 'page.index.qsn2'| trans }} </span> {{ 'page.index.qsn3'| trans }}
                            <span class="sec-title-border">
									<span></span>
									<span></span>
									<span></span>
								</span>
                        </h2>
                        {#<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>#}
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">

                    {% if page != null %}
                    <div class="single-success-box">
                        {#{% set text = page.content|slice(0, 1113) ~ '...</p>' %}
                        {{ text|length > 50 ? text |raw  }}#}

                        <p>
                            {{ page[0].content[:1143]|raw }}<br>
                            <a href="{{ path('presentation') }}" class="theme-btn">{{ 'ensp'|trans }}</a>
                        </p>
                    </div>
                </div>
                <div class="col-lg-5 offset-lg-1">
                    <div class="single-success-box">
                        <img src="{{ asset('uploads/pages/'~page[0].path) }}" alt="">
                    </div>
                </div>
                {% else %}
                    <div>
                        Aucun Donnée
                    </div>
                {% endif %}
            </div>
        </div>
    </section>

    <!-- service bottom section start -->
    <section class="service-bottom2 ptb-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="sec-title mb-20">
                        <h2>{{ 'page.idex.ev1'| trans }} <span class="title-span"> {{ 'page.idex.ev2'| trans }}</span>
                            <span class="sec-title-border">
									<span></span>
									<span></span>
									<span></span>
								</span>
                        </h2>
                    </div>
                </div>
            </div>
            <div class="row">
                {% if events != null %}
                    {% for event in events %}
                        <div class="col-lg-4 col-md-6">
                            <div class="service-bottom-box">
                                <div class="service-bottom-icon">
                                    <div class="display-table">
                                        <div class="display-tablecell">
                                            <i class="icofont icofont-bag-alt"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="service-bottom-text">
                                    <h4>{{ event.title }}</h4>
                                    <p style="text-align: justify;">{{ event.description|length > 100 ? event.description|slice(0, 100) ~ '...' : event.description }}</p>
                                    {% set locale = app.request.locale %}
                                    <a href="{{ path('front_events_detail',{'token':event.token, 'lang' :  app.request.locale }) }}"
                                       class="theme-btn theme-btn3">{{ 'ensp'|trans }}</a>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                {% else %}
                    Aucun Donnée

                {% endif %}
            </div>

        </div>
    </section>

    <section class="blog-area ptb-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="sec-title mb-20">
                        <h2>
                            <span class="title-span">{{ 'page.index.new1'| trans }}</span> {{ 'page.index.new2'| trans }}
                            <span class="sec-title-border">
									<span></span>
									<span></span>
									<span></span>
								</span>
                        </h2>
                        {#<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut#}
                        {#labore et dolore magna aliqua.</p>#}
                    </div>
                </div>
            </div>
            <div class="row">
                {% if news != null %}

                    {% for n in news %}
                        <div class="col-lg-4 col-sm-6">
                            <div class="single-post">
                                <div class="post-thumbnail">

                                    {#                                    {{ dump(n.gallerie | length) }}#}

                                    {% if n.gallerie | length <1 %}



                                        <a href="{{ path('news_front_detail',{'token':n.token}) }}"><img
                                                    src="{{ asset('uploads/galleries/emptyImage.png') }}"

                                                    alt="blog"
                                                    style="min-height: 236px; object-fit: cover; width: 100%;"></a>

                                    {% else %}

                                        {% for picture in n.gallerie %}
                                            {% if loop.index == 1 %}

                                                <a href="{{ path('news_front_detail',{'token':n.token}) }}"><img
                                                            src="{{ asset('uploads/galleries/'~picture.path) }}"

                                                            alt="blog"
                                                            style="min-height: 236px; object-fit: cover; width: 100%;"></a>
                                            {% endif %}

                                        {% endfor %}
                                    {% endif %}


                                </div>
                                <div class="post-details" style="min-height: 219px;">
                                    <h4 class="post-title"><a href="blog.html">{{ n.title }}</a></h4>
                                    <div class="post-author">
                                        <a href="#"><i class="icofont icofont-user"></i>{{ n.category.name }}
                                            | {{ n.createdAt|date('d M Y') }}</a>
                                    </div>
                                    <p style="text-align: justify;">{{ n.description[:200]|raw }}...</p>
                                    <a href="{{ path('news_front_detail',{'token':n.token}) }}" style="margin-top: 52px"
                                       class="theme-btn theme-btn5">{{ 'ensp'|trans }}</a>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                {% else %}
                    Aucun Donnée

                {% endif %}
            </div>
        </div>
    </section>

    <section style="background-color: #f7f7f7; padding-bottom: 50px; padding-top: 50px">

        <div id='calendar' style="margin-top: 50px; max-width: 700px; padding: 30px; background-color: #ffffff; "></div>
    </section>
    <div class="partner-area ptb-100" style="background-color: #ffffff;">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="partner-slider">
                        <div class="partner-single-slide">
                            <div class="display-table">
                                <div class="display-tablecell">
                                    <img src="{{ asset('uploads/partners/p0.png') }}" alt="UTICA"/>
                                </div>
                            </div>
                        </div>
                        <div class="partner-single-slide">
                            <div class="display-table">
                                <div class="display-tablecell">
                                    <img src="{{ asset('uploads/partners/p1.jpg') }}" alt="MINA"/>
                                </div>
                            </div>
                        </div>
                        <div class="partner-single-slide">
                            <div class="display-table">
                                <div class="display-tablecell">
                                    <img src="{{ asset('uploads/partners/p2.jpg') }}" alt="Konrad AdenauenStiftung"/>
                                </div>
                            </div>
                        </div>
                        <div class="partner-single-slide">
                            <div class="display-table">
                                <div class="display-tablecell">
                                    <img src="{{ asset('uploads/partners/p3.png') }}" alt="ILO"/>
                                </div>
                            </div>
                        </div>
                        <div class="partner-single-slide">
                            <div class="display-table">
                                <div class="display-tablecell">
                                    <img src="{{ asset('uploads/partners/p4.png') }}" alt="GP"/>
                                </div>
                            </div>
                        </div>
                        <div class="partner-single-slide">
                            <div class="display-table">
                                <div class="display-tablecell">
                                    <img src="{{ asset('uploads/partners/p5.jpg') }}"
                                         alt="Ministre du femme et de la famille"/>
                                </div>
                            </div>
                        </div>
                        <div class="partner-single-slide">
                            <div class="display-table">
                                <div class="display-tablecell">
                                    <img src="{{ asset('uploads/partners/p6.png') }}" alt="FCEM"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- service section end -->

    <!-- blog section start -->

    <!-- blog section end -->
    {#
        <!-- offices section start -->
        <section class=" ptb-100">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="sec-title mb-50">
                            <h2>Our <span class="title-span">Offices</span>
                                <span class="sec-title-border">
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                    </span>
                            </h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                                labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="testimonial-slide">
                            {% for office in offices %}
                                <div class="single-team-member">
                                    <div class="team-member-img">
                                        <img src="{{ asset('uploads/offices/'~office.id~'/'~office.path) }}" alt="team">
                                        #}{#<div class="team-member-icon">#}{#
                                        #}{#<div class="display-table">#}{#
                                        #}{#<div class="display-tablecell">#}{#
                                        #}{#<a href="#"><i class="icofont icofont-social-facebook"></i></a>#}{#
                                        #}{#<a href="#"><i class="icofont icofont-social-twitter"></i></a>#}{#
                                        #}{#<a href="#"><i class="icofont icofont-social-dribbble"></i></a>#}{#
                                        #}{#<a href="#"><i class="icofont icofont-social-google-plus"></i></a>#}{#
                                        #}{#</div>#}{#
                                        #}{#</div>#}{#
                                        #}{#</div>#}{#
                                    </div>
                                    <div class="team-member-info">
                                        <a href="#"><h4>{{ office.title }}</h4></a>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- testimonial section end -->#}

    {#<div id="map"></div>#}
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    {#<script>
        function initMap() {
            var uluru = {lat: -26.397, lng: 135.644};
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 6,
                center: uluru
            });
            var marker = new google.maps.Marker({
                position: uluru,
                map: map
            });
        }
    </script>#}

    {#<script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBnKyOpsNq-vWYtrwayN3BkF3b4k3O9A_A&callback=initMap"></script>#}

    <script src="https://unpkg.com/popper.js@1/dist/umd/popper.min.js"></script>
    <script src="https://unpkg.com/tippy.js@4"></script>

    <script type="text/javascript" src="{{ asset('js/vendors/jquery/jquery-ui.min.js') }}"></script>
    {# <script type="text/javascript" src="{{ asset('js/vendors/moment/moment.js') }}"></script>
     <script type="text/javascript" src="{{ asset('js/vendors/fullcalendar/fullcalendar.js') }}"></script>#}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
    {#<script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
            crossorigin="anonymous"></script>
    <script src="{{ asset("animated-event-calendar/docs/jquery.simple-calendar.js") }}"></script>
    <script>
        $(document).ready(function () {
            // Event Demo init
            $("#event-cal-container").simpleCalendar({
                events: ['2019-03-04', '2019-03-08', '2019-03-12', '2019-03-15'],
                eventsInfo: ['John\'s Birthday', 'Janet\'s Marriage','Graduation Day', 'Final Exams !'],
                selectCallback: function(date){
                    console.log('date selected '+date);
                }
            });

            tippy('.day.event', {
                theme: 'translucent',
            });
        });
    </script>#}


    <script>

        document.addEventListener('DOMContentLoaded', function () {
            {#console.log('{{ app.request.locale }}');#}


            var calendarEl = document.getElementById('calendar');
            {#console.log('{{ app.request.locale }}');#}
            var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: ['interaction', 'dayGrid'],
                defaultDate: '2019-06-12',
                editable: true,
                eventLimit: true, // allow "more" link when too many events
                header: {
                    left: "prev,next today",
                    right: "title",
                },
                // header: {
                //     locale: 'en',
                //     left: "prev,next today",
                //     center: "title",
                //     right: "month,agendaWeek,agendaDay,listWeek"
                // },


                /*buttonIcons: {
                 prev: "fa fa-angle-left",
                 next: "fa fa-angle-right",
                 prevYear: "fa fa-angle-left",
                 nextYear: "fa fa-angle-right"
                 },*/
                events: Routing.generate('load_calendar', {'lang': '{{ app.request.locale }}'}),
                selectable: true,
                selectHelper: true,

                eventClick: function (event) {
                    console.log(event.event.extendedProps);
                    window.location.href = Routing.generate('front_events_detail', {
                        'token': event.event.extendedProps.token,
                        'lang': '{{ app.request.locale }}',
                        '_locale': '{{ app.request.locale }}'
                    });

                }


                /*[
                 {
                 title: 'All Day Event',
                 start: '2019-06-01'
                 },
                 {
                 title: 'Long Event',
                 start: '2019-06-07',
                 end: '2019-06-10'
                 },
                 {
                 groupId: 999,
                 title: 'Repeating Event',
                 start: '2019-06-09T16:00:00'
                 },
                 {
                 groupId: 999,
                 title: 'Repeating Event',
                 start: '2019-06-16T16:00:00'
                 },
                 {
                 title: 'Conference',
                 start: '2019-06-11',
                 end: '2019-06-13'
                 },
                 {
                 title: 'Meeting',
                 start: '2019-06-12T10:30:00',
                 end: '2019-06-12T12:30:00'
                 },
                 {
                 title: 'Lunch',
                 start: '2019-06-12T12:00:00'
                 },
                 {
                 title: 'Meeting',
                 start: '2019-06-12T14:30:00'
                 },
                 {
                 title: 'Happy Hour',
                 start: '2019-06-12T17:30:00'
                 },
                 {
                 title: 'Dinner',
                 start: '2019-06-12T20:00:00'
                 },
                 {
                 title: 'Birthday Party',
                 start: '2019-06-13T07:00:00'
                 },
                 {
                 title: 'Click for Google',
                 url: 'http://google.com/',
                 start: '2019-06-28'
                 }
                 ]*/
            });

            calendar.render();
        });


    </script>



    {#<script>

        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');

            var today = new Date();
            var dd = String(today.getDate()).padStart(2, '0');
            var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
            var yyyy = today.getFullYear();

            today = yyyy + '-' + mm + '-' + dd;

            var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: [ 'interaction', 'dayGrid' ],
                defaultDate: today,
                editable: true,
                eventLimit: true, // allow "more" link when too many events
                events: [
                    {
                        title: 'All Day Event',
                        start: '2019-04-01'
                    },
                    {
                        title: 'Long Event',
                        start: '2019-04-07',
                        end: '2019-04-10'
                    },
                    {
                        groupId: 999,
                        title: 'Repeating Event',
                        start: '2019-04-09T16:00:00'
                    },
                    {
                        groupId: 999,
                        title: 'Repeating Event',
                        start: '2019-04-16T16:00:00'
                    },
                    {
                        title: 'Conference',
                        start: '2019-04-11',
                        end: '2019-04-13'
                    },
                    {
                        title: 'Meeting',
                        start: '2019-04-12T10:30:00',
                        end: '2019-04-12T12:30:00'
                    },
                    {
                        title: 'Lunch',
                        start: '2019-04-12T12:00:00'
                    },
                    {
                        title: 'Meeting',
                        start: '2019-04-12T14:30:00'
                    },
                    {
                        title: 'Happy Hour',
                        start: '2019-04-12T17:30:00'
                    },
                    {
                        title: 'Dinner',
                        start: '2019-04-12T20:00:00'
                    },
                    {
                        title: 'Birthday Party',
                        start: '2019-04-13T07:00:00'
                    },
                    {
                        title: 'Click for Google',
                        url: 'http://google.com/',
                        start: '2019-04-28'
                    }
                ]
            });

            calendar.render();
        });

    </script>#}
    <script src="{{ asset('packages/core/main.js') }}"></script>
    <script src="{{ asset('packages/core/locales-all.js') }}"></script>
    <script src="{{ asset('packages/interaction/main.js') }}"></script>
    <script src="{{ asset('packages/daygrid/main.js') }}"></script>
    <script src="{{ asset('packages/timegrid/main.js') }}"></script>
    <script src="{{ asset('packages/list/main.js') }}"></script>

    {# <script type="text/javascript">
         $(document).ready(function () {
             var i = $("#calendar").fullCalendar({
                 header: {
                     left: "prev,next today",
                     center: "title",
                     right: "month,agendaWeek,agendaDay"
                 },
                 buttonIcons: {
                     prev: "fa fa-angle-left",
                     next: "fa fa-angle-right",
                     prevYear: "fa fa-angle-left",
                     nextYear: "fa fa-angle-right"
                 },
                 events: Routing.generate('load_calendar'),
                 selectable: true,
                 selectHelper: true,
                 eventClick: function (event) {
                     window.location.href=Routing.generate('front_events_detail',{'token':event.token});
                 }
             });
         });

     </script>#}





{% endblock %}