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

{% block title %}{{ parent() }} - Menus{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/home/menus.css') }}">
    <link rel="stylesheet" href="{{ asset('css/select_pl/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/admin/epicerie/epicerie.css') }}">
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/home/menu.js') }}?{{ random() }}"></script>
    <script src="{{ asset('js/home/pdf.js') }}?{{ random() }}"></script>
    <script src="{{ asset('js/home/modal.js') }}?{{ random() }}"></script>
    <script src="{{ asset('js/home/multiselect.js') }}?{{ random() }}"></script>
    <script src="{{ asset('js/select_pl/select2.min.js') }}?{{ random() }}"></script>
{% endblock %}

{% block body %}
    <div id="body" class="p-3">
        <div class="row justify-content-center my-4">
            <div class="col-10 col-md-6 order-1 col-lg-4 text-center my-3 my-md-auto">
                <a class="btn btn-select-menus align-middle my-auto" data-bs-toggle="modal" data-bs-target="#selectRefModal">Sélectionnez votre/vos <br> référentiel(s) région</a>
                <a class="btn btn-ajout-plat align-middle my-auto">Ajouter <br> un plat</a>
            </div>
            <div class="col-11 col-sm-10 col-md-7 my-lg-auto order-3 order-lg-2 col-lg-4 mt-4 text-center">
                <div class="row week-selector">

                    <div class="calendar-icon">
                        <input type="week" id="week-input" name="week" min="2023-W01">
                        <label for="week-input" class="calendar-label" id="calendar-label">
                            <i class="fa-light fa-calendar" id="iconDatePicker"></i>
                        </label>
                    </div>
                    <i class="fa-solid fa-chevron-left pointer-event my-auto col-1" role="button"></i>
                    <span class="textDate col-9 my-auto">Du {{ startDate ?? '' }} au {{ endDate ?? '' }}</span>
                    <i class="fa-solid fa-chevron-right my-auto col-1" role="button"></i>
                </div>
            </div>
            <div class="col-10 col-md-6 text-start order-2 order-lg-3 col-lg-4 fs-4 my-auto">
                <div class="row justify-content-center justify-content-lg-end event-container">
                    <!-- Carousel pour les événements -->
                    <div id="carousel-animation" class="carousel slide  col-6 col-lg-7 text-end my-auto accordion-collapse">
                        <div class="carousel-inner fs-6">
                            {% if htmlAnimations %}
                                {{ htmlAnimations|raw }}
                            {% endif %}
                        </div>
                        <button class="carousel-control-next" type="button" data-bs-target="#carousel-animation" data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        </button>
                    </div>
                    <!-- Ajout de PDF -->
                    <div class="col-4 my-auto text-center pt-2">
                        <a href="#" title="Export de la liste des courses"><i class="fa-light fa-kitchen-set exportBtn export-shopping"></i></a>
                        <a href="#" title="Export de la production de la semaine"><i class="fa-light fa-clipboard-list exportBtn export-production"></i></a>
                        <a href="#" title="Export des menus"><i class="fa-light fa-print exportBtn export-menu"></i></a>
                        <a href="#" title="Export des allergènes"><i class="fa-kit fa-light-plate-utensils-circle-exclamation exportBtn export-allergen"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-12">
                {{ htmlTable|raw }}
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal modal-xl fade" id="selectRefModal" tabindex="-1" aria-labelledby="selectRefModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content p-5">
                <div class="modal-header row modalHeader">
                    Sélectionnez votre/vos référentiel(s) régionaux
                </div>
                <div class="modal-body">
                    <div class="row" style="font-size: 0.8em;">
                        {% if selectMenus | length > 0 %}
                            {% for keyService, service in services %}
                                <h3 class="mt-3">{{ service }}</h3>
                                <div class="btn-group col-md-5" role="group">
                                    <select class="p-2 selectStylized mb-2" name="menu[{{ keyService }}]">
                                        <option value="" selected>Aucun</option>
                                        {% set oldRepo = "" %}
                                        {% set first = true %}

                                        {% for keyMenu, menu in selectMenus %}
                                            {% set displayRepo = false %}
                                            {% if first or ' : ' in menu %}
                                                {% set repo = menu|split(" : ")[0] %}
                                                {% set currentMenu = menu|split(" : ")[1] %}

                                                {% if first or oldRepo != repo %}
                                                    {% set oldRepo = repo %}
                                                    {% set displayRepo = true %}
                                                {% endif %}
                                            {% endif %}

                                            {% if displayRepo and not first %}
                                                </optgroup>
                                            {% endif %}
                                            {% if displayRepo %}
                                                <optgroup label='{{ repo }}'>
                                            {% endif %}
                                            <option value="{{ keyMenu }}" value2="{{ keyService }}"
                                                    {% if menus[keyService] is defined and keyMenu == menus[keyService] %}
                                                        selected
                                                    {% endif %}
                                                >
                                                {{ currentMenu }}
                                            </option>
                                            {% set first = false %}
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="btn-group mb-2 col-md-7" role="group">
                                    {% set days = ['','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi','Dimanche'] %}
                                    {% for i in 1..7 %}
                                        {% set checked = '' %}
                                        {% if daysArray[keyService] is not defined and i != 7 %}
                                            {% set checked = 'checked' %}
                                        {% elseif daysArray[keyService] is defined and i in daysArray[keyService] %}
                                            {% set checked = 'checked' %}
                                        {% endif %}
                                        <input type="checkbox" class="btn-check" id="btn-day-{{ i~keyService }}" name="days[{{ keyService }}]" value="{{ i }}" {{ checked }}>
                                        <label class="btn btn-outline-secondary" for="btn-day-{{ i~keyService }}">{{ days[i] }}</label>
                                    {% endfor %}
                                    {% set checked = (daysArray[keyService] is defined and 0 in daysArray[keyService]) ? 'checked':'' %}
                                </div>
                                <div class="btn-group elements-container" role="group">
                                    {% set elementsLength = elements|length %}
                                    {% for element in elements %}
                                        {% set checked = '' %}
                                        {% if daysArray[keyService] is not defined and element.id != 6 and element.id != 8 %}
                                            {% set checked = 'checked' %}
                                        {% elseif elementsArray[keyService] is defined and element.id in elementsArray[keyService] %}
                                            {% set checked = 'checked' %}
                                        {% endif %}
                                        <input type="checkbox" class="btn-check" id="btn-elements-{{ element.id~keyService }}" name="elements[{{ keyService }}]" value="{{ element.id }}" {{ checked }}>
                                        <label class="btn btn-outline-secondary" for="btn-elements-{{ element.id~keyService }}">{{ element.designation }}</label>
                                    {% endfor %}
                                </div>
                            {% endfor %}
                        {% endif %}
                    </div>
                    <input type="submit" class="btn-red my-auto mt-5 py-2 px-5" id="submitMenus" value="Valider">
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="addAnimationModal" tabindex="-1" aria-labelledby="addAnimationModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content p-5 pb-3">
                <div class="modal-header row modalHeader">
                    Ajoutez une animation
                </div>
                <div class="modal-body animationModal pb-1">
                    <div class="mb-3">
                        <label for="date_debut required">Date de début : </label>
                        <input class="inputModal form-control" type="date" name="date_debut" id="date_debut" required="required">
                    </div>
                    <div class="mb-3">
                        <label for="date_fin required">Date de fin : </label>
                        <input class="inputModal form-control" type="date" name="date_fin" id="date_fin" required="required">
                    </div>
                    <div class="mb-3">
                        <label for="text required">Texte : </label>
                        <input class="inputModal form-control" type="text" name="text" id="text" required="required">
                    </div>
                    <div class="row justify-content-center pb-1">
                        <div class="col-12 py-2">
                            <div class="row">
                                <div class="col-11">
                                    Choisissez le(s) menu(s) concerné(s):
                                </div>
                            </div>
                        </div>
                        {% for icon in icons %}
                        <div class="form-check col-2">
                                <input class="form-check-input serviceAnimationInput" type="checkbox" name="serviceAnimation" id="{{ icon.classe }}" value="{{ icon.classe }}" required="required">
                                <label class="form-check-label" for="{{ icon.classe }} form-control required">
                                    <i class='fa-light {{ icon.icon }}'></i>
                                </label>
                        </div>
                        {% endfor %}
                    </div>
                    <button id="submitAnimation" class="btn-red my-auto mt-3 py-2 px-5">Valider</button>
                    <p class="text-danger invisible pt-3 text-center" id="errorAnimation">La date de fin doit être supérieure ou égale à la date de début.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalEpicerie" tabindex="-1" aria-labelledby="modalEpicerie" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content p-5">
                <div class="modal-header row modalHeader">

                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" id="saveGrocery" class="btn btn-default">Enregistrer</button>
                    <button type="button" class="btn btn-default" data-bs-dismiss="modal">Fermer</button>
                </div>
            </div>
        </div>
    </div>
    {{ include('./modal/shopping_modal.html.twig') }}
    {{ include('./modal/menu_modal.html.twig') }}
    {{ include('./modal/allergen_modal.html.twig') }}
{% endblock %}