{# @var ea \EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext #}
{% extends '@EasyAdmin/page/content.html.twig' %}

{#{% block body %}#}
{#    <div id="calendar-holder"></div>#}
{#{% endblock %}#}
{% block page_content %}
     <style>
        p {
            max-width: 600px;
        }
    </style>

    <h4>Informations génerales:</h4>

    <div class="row">
        <div class="col-md-4">
            <div class="alert alert-success" role="alert">
                {% if countSallon > 1  %}
                    <h5>Sallons: {{ countSallon }}</h5>
                {% else %}
                    <h5>Sallon: {{ countSallon }}</h5>
                {% endif %}


            </div>
        </div>
        {# rendezVous #}
        <div class="col-md-4">
            <div class="alert alert-success" role="alert">
                <h5>Rendez-Vous : {{ countAllRdv }}</h5>
            </div>
        </div>
        <div class="col-md-4">
            <div class="alert alert-success" role="alert">
                {% if countSallon > 1  %}
                    <h5>Personnels : {{ countEmployes }}</h5>
                {% else %}
                    <h5>Personnel : {{ countEmployes }}</h5>
                {% endif %}
            </div>
        </div>
    </div>
    <br>

    {% if isAdmin != 1 %}
        <hr>
        <h4>Détails des rendez-vous par sallon:</h4>
    <br>
    <div class="row">
        {% for sallon in rendezVous %}
            <div class="col-md-3">

                <div class="alert alert-danger" role="alert">
                    <h5 class="text-center">{{ sallon.libelle }} </h5>
                         {% for rdv in sallon['rendez_vous'] %}
                             {% if date(rdv.dateRv) >= date() %}

                             {#                            <li>{{ rdv.dateRv |date('Y-m-d') }} à {{ rdv.heure |date('H:i:s') }}</li>#}
{#                            <li>{{ rdv.dateRv |date('Y-m-d') }} à {{ rdv.heure |date('H:i:s') }}</li>#}
                            <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample{{ rdv.id }}" role="button" aria-expanded="false" aria-controls="multiCollapseExample{{ rdv.id }}">{{ rdv.dateRv |date('Y-m-d') }} à {{ rdv.heure |date('H:i:s') }}</a>
                            <div class="row text-center">
                                <div class="col">
                                    <div class="collapse multi-collapse" id="multiCollapseExample{{ rdv.id }}">
                                        <div class="card card-body">
                                            {{ rdv.id }}                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                             {% endif %}

                         {% endfor %}

                 </div>
            </div>
        {% endfor %}
    </div>
    {% else %}

    {% endif %}
     <a href="{{ path('booking_new') }}">Create new booking</a>

    <div id="calendar-holder"></div>
{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.1.0/main.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.1.0/main.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@4.1.0/main.min.css">
{% endblock %}

{% block javascripts %}
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.1.0/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@4.1.0/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.1.0/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@4.1.0/main.min.js"></script>

    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', () => {
            var calendarEl = document.getElementById('calendar-holder');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                defaultView: 'dayGridMonth',
                editable: true,
                eventSources: [
                    {
                        url: "{{ path('fc_load_events') }}",
                        method: "POST",
                        extraParams: {
                            filters: JSON.stringify({})
                        },
                        failure: () => {
                            // alert("There was an error while fetching FullCalendar!");
                        },
                    },
                ],
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay',
                },
                plugins: [ 'interaction', 'dayGrid', 'timeGrid' ], // https://fullcalendar.io/docs/plugin-index
                timeZone: 'UTC',
            });
            calendar.render();
        });
    </script>
{% endblock %}