{% extends '00_bases/base-exercice.html.twig' %}

{% block title %}Keep'IT Training - {{ exercice.nom }}{% endblock %}

{% block shead %}

    <div class="tgo-exo_head oka-app-wrap">
        <div class="tgo-exo_headLeft">
            <div class="tgo-exo_classif">

         


            {% set classifications = exercice.code|split('_') %}
            {% for hierarchy in exercice.hierarchy %}
                <div class="oka-tag">
                    <span class="oka-tag__lbl">{{ hierarchy|capitalize }}</span>
                </div>
            {% endfor %}
                {% if exercice.code %}
                <div class="oka-data -sm" style="margin-top: 0.5rem;">/ {{ exercice.code|capitalize }}</div>
                {# <div class="oka-tag">
                    <span class="oka-tag__lbl">{{ exercice.code|capitalize }}</span>
                </div> #}
                {% endif %}



       <label id="favoriIcon1" data-idexercice="{{exercice.id}}" data-valuefavori="{{ exercice.isFavori}}" data-valueurl="{{ url }}"  class="oka-bt -ghost -warning" 
        {{ stimulus_action("exercice--consultation_exercice", "clickFavori", "click") }}>
            <div class="oka-bt__ico">
                <i id="exoFavori" class="fa-solid fa-star {% if exercice.isFavori == false %} u-displaynone {% endif %} "></i>
                <i id="exoNonFavori" class="fa-regular fa-solid fa-star {% if exercice.isFavori == true %} u-displaynone {% endif %}"></i>
            </div>
        </label>



            </div>
            
            <div class="oka-spacer -xxs"></div>

            <div class="u-oka-flex -flex-center-left u-oka-gap--sm">
                <h3 class="-crop">{{ exercice.nom }}</h3>
            </div>
         
            
        </div>
        <div class="tgo-exo_headRight">
            
            <a href="{{path('exercice.edit', {'classificationId': classificationId, 'id': exercice.id})}}" class=" oka-bt  -outlined">
            
                <div class="oka-bt__ico"><i class="fa-regular fa-pen"></i></div>
                <span class="oka-bt__lbl">Éditer</span>
                <div class="oka-spinner"></div>
            </a>

            <label for="display-modal-duplicate" class="oka-bt  -outlined">
                <div class="oka-bt__ico"><i class="fa-solid fa-copy"></i></div>
                <span class="oka-bt__lbl">Dupliquer</span>
                <div class="oka-spinner"></div>
            </label>

            <label for="display-modal-delete" class="oka-bt  -outlined">
                <div class="oka-bt__ico"><i class="fa-solid fa-trash"></i></div>
                <span class="oka-bt__lbl">Supprimer</span>
                <div class="oka-spinner"></div>
            </label>
           
            <a href="#" class=" oka-bt  -outlined" onclick="window.location.href=getCookie('sommaire')">
                {# <span class="oka-bt__lbl">Fermer</span> #}
                <div class="oka-bt__ico"><i class="fa-regular fa-xmark"></i></div>
                <div class="oka-spinner"></div>
            </a>
        </div>
    </div>


{% endblock %}


{% set btVideo %}
    {% if exercice.video is not null %}
        <label for="display-modal-video"  class="oka-bt">
            <span class="oka-bt__ico"><i class="fa-solid fa-video"></i></span>
            <span class="oka-bt__lbl">Vidéo</span>
            <div class="oka-spinner"></div>
        </label>
    {% endif %}
{% endset %}



{% block body %}


    <div class="flex-grid">

        <div class="col col-10">

            {% if app.request.get('erreurSuppression') %}
                <div id="msgErreurSupprExo" class="oka-message -error">
                    <div class="oka-message__ico" style="margin-top: 0.2rem;"><i class="fa-solid fa-circle-info"></i></div>
                    <div class="oka-message__lbl">
                        Cet exercice appartient à au moins une séance, et ne peut donc pas être supprimé.
                    </div>
                    <button class="oka-bt -sm -ghost -rounded -info" onclick="this.parentNode.remove();">✕</button>
                </div>
            {% endif %}

            {% if app.request.get('erreurDuplication') %}
                <div id="msgErreurSupprExo" class="oka-message -error">
                    <div class="oka-message__ico" style="margin-top: 0.2rem;"><i class="fa-solid fa-circle-info"></i></div>
                    <div class="oka-message__lbl">
                        Un exercice ayant comme nom "{{ exercice.nom }}-DUPLICATA" est déjà existant.
                    </div>
                    <button class="oka-bt -sm -ghost -rounded -info" onclick="this.parentNode.remove();">✕</button>
                </div>
            {% endif %}


            <div class="tgo-exo_ctnrLeft">

                {# Bandeau Caractéristiques #}
                <div class="tgo-exo_caracts">
                    <div class="tgo-exo_caract -duree">
                        {% if exercice.minutesDuree == 0 and exercice.secondesDuree == 0 %}
                            <i class="fa-regular fa-stopwatch"></i> <span>00'00''</span>
                        {% elseif exercice.minutesDuree == 0 %}
                            <i class="fa-regular fa-stopwatch"></i> <span>00'{{ '%02d'|format(exercice.secondesDuree) }}''</span>
                        {% elseif exercice.minutesDuree >= 60 %}
                            {% set heures = exercice.minutesDuree // 60 %}
                            {% set minutes = exercice.minutesDuree % 60 %}
                            <i class="fa-regular fa-stopwatch"></i> 
                            <span>{{ '%01d'|format(heures) }}h{{ '%02d'|format(minutes) }}'{{ '%02d'|format(exercice.secondesDuree) }}''</span>
                        {% else %}
                            <i class="fa-regular fa-stopwatch"></i> 
                            <span>{{ '%02d'|format(exercice.minutesDuree) }}'{{ '%02d'|format(exercice.secondesDuree) }}''</span>
                        {% endif %}
                    </div>

                    <div class="tgo-exo_caract">
                        Gardiens : <span>{{ exercice.nbGardiens }}</span>
                    </div>
                    <div class="tgo-exo_caract">
                        RPE estimé : <span>{{ exercice.rpe }}</span>
                    </div>
                </div>

                {# Gille de visuels #}
                <div class="grid-320" style="position: relative; overflow: hidden;">
                {% for visuel in exercice.visuel %}
                    <label for="display-modal-visuel-{{ visuel.id }}" class="tgo-exo_preview oka-ratio -zz4-3 -16-9"  style="background-image: url({{ asset('visuels/exercice/visuel/' ~ visuel.lien ) }})"></label>
                {% include("00_commons/bandeauExercice.html.twig") %}
                {% endfor %}
                </div> 

                {# Bandeau Footer  #}
                <div class="tgo-exo_caracts -footer">
                    <div class="tgo-exo_tags">
                        {% for tag in exercice.tags %}

                            <div class="oka-tag -outline">
                                <span class="oka-tag__lbl">#{{ tag.nom }}</span>
                            </div>
                        {% endfor %}
                        <br><br>
                    </div>
                    <div class="oka-spacer -inline -full"></div>
                    {{ btVideo }}
                </div>
            </div> 
        </div>

        {# <div class="col col-1"></div> #}
        <div class="col col-6">
            <div class="tgo-exo_ctnrRight">
                

                <div class="oka-tabs -isTabs">
                    <!-- tab head -->
                    <input type="radio" class="oka-pilot noVerifForm" name="tabs" id="displayTab0" checked="checked" >
                    <label id="tab0"   class="oka-tab__button" onclick="if(document.getElementById('displayTab0').checked == true ) {  document.getElementById('displayTab0').checked = false  }else{ document.getElementById('displayTab0').checked = true }">
                        <div class="oka-tab__head">
                            <div class="oka-tab__lbl">CONSIGNES</div>
                        </div>
                    </label>
                    <!-- tab body -->
                    <div class="oka-tab__body">
                        <hr class="oka-divider -low">
                        <div class="oka-spacer -sm"></div>
                        <div class="tgo-exo_consigne">
                            {{ exercice.consigne|raw }}
                        </div>

          
                        <div class="tgo-exo_volume">
                            <div class="oka-spacer"></div>
                            <div class="oka-label"><i class="fa-solid fa-person-running"></i>Volume</div>
                            <p>{{ exercice.volume|nl2br }}</p>
                        </div>

                        <div class="tgo-exo_vigilance">
                            <div class="oka-spacer"></div>
                            <div class="oka-label"><i class="fa-solid fa-triangle-exclamation"></i>Point de vigilance</div>
                            <p>{{ exercice.pointVigilance|nl2br }}</p>
                        </div>
                    </div>
                    
                    <!-- tab head -->
                    <input type="radio" class="oka-pilot noVerifForm" name="tabs" id="displayTab1"  >
                    <label id="tab1"   class="oka-tab__button" onclick="if(document.getElementById('displayTab1').checked == true ) {  document.getElementById('displayTab1').checked = false  }else{ document.getElementById('displayTab1').checked = true }">
                        <div class="oka-tab__head">
                            <div class="oka-tab__lbl">MATÉRIEL</div>
                        </div>
                    </label>
                    <!-- tab body -->
                    <div class="oka-tab__body">
                        <div>
                            <hr class="oka-divider -low">
                            <div class="oka-spacer -sm"></div>
                            <div class="tgo-materiels -compact">
                            {% for materiel in exercice.materiels %}
                                <div class="tgo-materiel">
                                    {# {% set sufix = '' %}
                                    {% if materiel.quantite > 1 %}
                                    {% set sufix = 's' %}
                                    {% endif %} #}
                                    <span class="tgo-materiel_qte oka-data -sm">{{ materiel.quantite }}</span>
                                    <span class="tgo-materiel_lbl oka-data -strong">{{ materiel.materiel.nom }}{#{ sufix }#}</span>
                                    <span class="tgo-materiel_color oka-data">{{ materiel.couleur }}{#{ sufix }#}</span>
                                </div>
                            {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="oka-spacer -sm"></div>

                <div class="tgo-exo_commentaires">
                    <label class="oka-label">Commentaires du coach</label>
                    <textarea 
                    name="commentaire" 
                    data-idexercice="{{exercice.id}}" 
                    data-valuecommentaire="{{ exercice.commentaire}}" 
                    id="textareaCommentaire" 
                    {{ stimulus_action("exercice--consultation_exercice", "editCommentaire", "input") }}
                    >{{ exercice.commentaire }}</textarea>
                
                    <button type="submit" id="submitCommentBtn" class="oka-bt -outlined" style="display: none;" data-valueurl="{{ url }}">
                        <span class="oka-bt__lbl">Enregistrer</span>
                    </button>
                <div>
                
            </div>
        </div>

    </div>

   
{% endblock %}




{% block modal %}


{% for visuel in exercice.visuel %}

{# MODALS VISUELS #}

<div class="oka-modal -fullScreen">
    <!-- Pilot d'affichage du modal -->
    <input type='checkbox' id="display-modal-visuel-{{ visuel.id }}" name="display-modal" class="oka-modal__pilot noVerifForm"  onchange="this.checked ? window.location.hash='visuel-{{ visuel.id }}' : window.location.hash=''" />
    <!-- Fond Overlay et pilot de fermeture -->
    <label for="" class="oka-modal__bg "></label>
    <!-- Container -->
    <div id="modal-visuel-{{ visuel.id }}" class="oka-modal__ctnr" >
        <div class="oka-modal__head">
            <div class="oka-head oka-appWrap">
                <div class="oka-head__title">
                    <div class="oka-UI-h -sm">
                        
                    </div>
                </div>
                <!-- -->
                <label class="oka-head__action oka-bt  -outlined "  for="display-modal-visuel-{{ visuel.id }}">
                    <span class="oka-bt__lbl">Fermer</span>
                    <span class="oka-bt__ico">✕</span>
                    <div class="oka-spinner"></div>
                </label>
            </div>
        </div>
        <!-- -->
        <div class="tgo-exo_visuel oka-modal__body oka-appWrap" style="overflow: hidden; background-image: url({{ asset('/visuels/exercice/visuel/' ~ visuel.lien ) }})" >
            <!-- -->
            {% include("00_commons/bandeauExercice.html.twig") %}
        </div>
        <!-- Modal Footer -->
        <div class="oka-modal__footer -bgTransp oka-appWrap" >
            {{ btVideo }}
        </div>
    </div>
</div>
{% endfor %}


{# MODAL VIDEO #}

<div class="oka-modal -fullScreen">
    <!-- Pilot d'affichage du modal -->
    <input type='checkbox' id="display-modal-video" name="display-modal" class="oka-modal__pilot noVerifForm"  onchange="this.checked ? window.location.hash='video' : window.location.hash=''" />
    <!-- Fond Overlay et pilot de fermeture -->
    <label for="" class="oka-modal__bg "></label>
    <!-- Container -->
    <div id="modal-video" class="oka-modal__ctnr  ">
        <div class="oka-modal__head">
            <div class="oka-head oka-appWrap">
                <div class="oka-head__title">
                    <div class="oka-UI-h -sm">
                        
                    </div>
                </div>
                <!-- -->
                <label class="oka-head__action oka-bt  -outlined "  for="display-modal-video">
                    <span class="oka-bt__lbl">Fermer</span>
                    <span class="oka-bt__ico">✕</span>
                </label>
            </div>
        </div>
        <!-- -->
        <div class="oka-modal__body oka-appWrap"  style="height:80vh">

            <!-- -->
            {% if exercice.video is not null %}
                <iframe id="showVideo" src="{{ exercice.video }}" width="100%" height="100%"></iframe>
            {% endif %}
            
        </div>
        <!-- Modal Footer -->
        <div class="oka-modal__footer  oka-appWrap">
            
        </div>
    </div>
</div>

{# MODAL DUPLIQUER EXERCICE #}

<div class="oka-modal -sm">
    <!-- Pilot d'affichage du modal -->
    <input type='checkbox' id="display-modal-duplicate" name="display-modal" class="oka-modal__pilot noVerifForm"  onchange="this.checked ? window.location.hash='duplicate' : window.location.hash=''" />
    <!-- Fond Overlay et pilot de fermeture -->
    <label for="" class="oka-modal__bg "></label>
    <!-- Container -->
    <div id="modal-duplicate" class="oka-modal__ctnr  ">
        <div class="oka-modal__head">
            <div class="oka-head oka-appWrap">
                <div class="oka-head__title">
                    <div class="oka-UI-h -sm">
                        
                    </div>
                </div>
                <!-- -->
                <label class="oka-head__action oka-bt  -outlined "  for="display-modal-duplicate">
                    <span class="oka-bt__lbl">Fermer</span>
                    <span class="oka-bt__ico">✕</span>
                </label>
            </div>
        </div>
        <!-- -->
        <div class="oka-modal__body oka-wrap oka-wrap--md"  >
            <!-- -->
            <h4>Êtes-vous sur de vouloir dupliquer ?</h4>

            <a class="oka-head__action oka-bt  -outlined " href="{{path('exercice.duplicate', {'id': exercice.id})}}">
                <span class="oka-bt__lbl">Oui</span>
            </a>

            <label class="oka-head__action oka-bt  -outlined " for="display-modal-duplicate">
                <span class="oka-bt__lbl">Non</span>
            </label>
            
        </div>
    </div>
</div>


{# MODAL SUPPRIMER EXERCICE #}

<div class="oka-modal -sm">
    <!-- Pilot d'affichage du modal -->
    <input type='checkbox' id="display-modal-delete" name="display-modal" class="oka-modal__pilot noVerifForm"  onchange="this.checked ? window.location.hash='delete' : window.location.hash=''" />
    <!-- Fond Overlay et pilot de fermeture -->
    <label for="" class="oka-modal__bg "></label>
    <!-- Container -->
    <div id="modal-delete" class="oka-modal__ctnr  ">
        <div class="oka-modal__head">
            <div class="oka-head oka-appWrap">
                <div class="oka-head__title">
                    <div class="oka-UI-h -sm">
                        
                    </div>
                </div>
                <!-- -->
                <label class="oka-head__action oka-bt  -outlined "  for="display-modal-delete">
                    <span class="oka-bt__lbl">Fermer</span>
                    <span class="oka-bt__ico">✕</span>
                </label>
            </div>
        </div>
        <!-- -->
        <div class="oka-modal__body oka-wrap oka-wrap--md"  >
            <!-- -->
            <h4>Êtes-vous sur de vouloir supprimer cet exercice ?</h4>

            <a class="oka-head__action oka-bt  -outlined " href="{{path('exercice.delete', {'id': exercice.id})}}">
                <span class="oka-bt__lbl">Oui</span>
            </a>

            <label class="oka-head__action oka-bt  -outlined " for="display-modal-delete">
                <span class="oka-bt__lbl">Non</span>
            </label>
            
        </div>
    </div>
</div>


{% endblock %}