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

{% block title %}Keep'IT Training - Séance {{seance.date|date('d M') }}{% endblock %}
{% block bodyModifier %}-full{% endblock %}
{% block stimulusModifier %}data-controller="planning--showSeance"{% endblock %}
{% block shead %}

<style>

    .tgo-editSeance__content {
        display:flex;
        flex-direction:row;
    }


    .tgo-seance__annexesMain {
        border-left: 5px solid {{seance.typeEvenement.famille.couleur}};
        --seance-color: {{seance.typeEvenement.famille.couleur}}
    }

    html, body {
        --scroll-behavior: smooth !important;
        scroll-behavior: smooth !important;
    }

</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('a[href^="#exo-"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault(); // Empêche l'effet par défaut du lien d'ancrage
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth',
                block: 'start' // Cela permet de mieux gérer la position du scroll
            });
        });
    });
});

</script>

    <div class="tgo-head_row -first tgo-seance__navbar -print">
        {# Logo KeepIt #}
        <div class="tgo-head_logo tgo-logo">
            {% include("00_commons/logo.html.twig") %}
            <div class="tgo-logo_type">
                <div class="tgo-logo_name">KEEP'IT</div> 
                <div class="tgo-logo_base">Training</div>
            </div>
        </div>
        <div class="oka-divider -vrt -low" ></div>

        {# Logo Club #}
        <div>
            {% include("00_commons/club.html.twig") %}
        </div>
        
        {# SAISON #}
        <div class="tgo-seance__saison oka-h -sm" style="display: none">{{ seance.saison.nom }}</div>


        {# Navigation Globale #}
        <div class="tgo-head_nav">
            {# <a href="{{path('exercice.classification.show', {'classificationId': classificationId, 'id' : exercice.id} )}}" class=" oka-bt  -outlined">
                <div class="oka-bt__ico"><i class="fa-regular fa-xmark"></i></div>
                <div class="oka-spinner"></div>
            </a> #}
            <div class="tgo-exo_headRight">

                <a href="{{path('seance.edit.generalites', {'id': seance.id}) }}" class=" oka-bt  -outlined">
                    <div class="oka-bt__ico"><i class="fa-regular fa-pen"></i></div>
                    <div class="oka-spinner"></div>
                </a>

                <label for="display-modal-print" class="oka-bt" onclick="window.print()">
                    <div class="oka-bt__ico"><i class="fa-solid fa-print"></i></div>
                    <span class="oka-bt__lbl">Imprimer</span>
                    <div class="oka-spinner"></div>
                </label>
                                
                <a href="{{ path('planning.saison.club.show', {'idClub': idClub, 'idSaison': idSaison}) }}#semaine-{{ weeksSinceStart }}" class="oka-bt -outlined">
                    <div class="oka-bt__ico"><i class="fa-regular fa-xmark"></i></div>
                    <div class="oka-spinner"></div>
                </a>

            </div>
        </div>
    </div>

{% endblock %}

{% block body %}

    <div class="oka-flex -vrt" style="width: 100%;">
    
        <div class="oka-flex" style="width: 100%;">

            <div class="tgo-seance__parties" style="direction: rtl">

                <div class="tgo-seance__partiesHeader" style="direction: ltr; width: 100%;">
                    <header class="tgo-head tgo-seance__partiesHead">
                        <div class="tgo-seance__head -exercices">
                            
                            <div class="oka-flex -grow tgo-seance__headDetails">

                                <div class="tgo-seance__date oka-flex -vrt" style="flex-basis: auto;">
                                    <div class="oka-h -md -crop" style="margin-bottom: 0.5rem;">{{ seance.date|format_datetime(pattern='EEEE dd LLLL')|title }}</div>
                                    <div class="oka-flex -gap-sm">
                                        <div class="oka-h -xs -crop">{{ seance.heure|date('H:i') }}</div>                            
                                        <div class="oka-h -xs -crop -secondary">{% if seance.stade %} {{ seance.stade.nom }} {% endif %}</div>
                                    </div>

                                </div>

                                <div class="oka-divider -vrt -low"></div>

                                {% if seance.themes != null %}
                                    <div class="tgo-seance__themes oka-flex -vrt" style="flex-basis: 8%; gap: 0.5rem;">
                                        {% for theme in seance.themes %}
                                            <div class="oka-tag">
                                                <img class="oka-tag__ico" src="{{ asset('visuels/themes/logo/' ~ theme.logo ) }}" width="30px">
                                                <span class="oka-tag__lbl">{{ theme.nom|capitalize }}</span>
                                            </div>
                                        {% endfor %}
                                    </div>

                                <div class="oka-divider -vrt -low"></div>
                                {% endif %}
                                    

                                <div class="tgo-seance__objectif oka-data -lg" style="flex-basis: 30%;">
                                    Objectif : {{seance.objectif}}
                                </div>

                                <div class="oka-flex -vrt tgo-seance__time" >

                                    <div class="tgo-time">
                                        <i class="fa-regular fa-stopwatch tgo-time__ico"></i>
                                        <span class="tgo-time__lbl">TOTAL</span>
                                        <span id="dureeSeanceExercices" class="tgo-time__data"></span>
                                        
                                    </div>

                                </div>
                                
                            </div>

                        </div>
                    </header>
                </div>
                
                <div class="tgo-exos__nav oka-flex -gap-sm" style="direction: ltr;">
                    {% if seance.exercices|length > 0 %}
                        {# Affiche les exercices dans l'ordre défini en base #}
                        {% for exercice in seance.exercices|sort((a, b) => a.numero <=> b.numero) %}    
                            {% if exercice is defined and exercice.idExercice is not null %}
                                <a href="#exo-{{exercice.numero }}" class="oka-bt -outlined tgo-seance__number -sm">
                                    <div class="oka-bt__ico">{{ exercice.numero }}</i></div>
                                    <div class="oka-spinner"></div>
                                </a>
                            {% endif %}
                        {% endfor %}
                    {% endif %}

                </div>

                <div class="oka-tab__body tgo-seance__partiesExos"  style="direction: ltr">
                    {# <div class="tgo-seance__exos"> #}
                


                        <div class="tgo-exos__cntr" style="overflow: visible; padding-right: 2rem;">

                            {% set i = 1 %}
                            {# Affiche les exercices dans l'numero défini en base #}
                            {% for exercice in seance.exercices|sort((a, b) => a.numero <=> b.numero) %}
                                {% if exercice is defined and exercice.idExercice is not null %}
                                

                                <div id="exo-{{exercice.numero }}" style="scroll-margin-top : 56px;"></div>

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

                                <div class="tgo-exos__cntrGrid {% if exercice.isGroupe == true %}-isGroupe {% endif %}">
                                    
                                    {# NUMERO #}
                                    <div class="numero">
                                        <div class="oka-flex tgo-seanceExo__numero">
                                            <h2 class="-crop">{{ exercice.numero }}</h2>
                                        </div>
                                    </div>

                                    {# CHRONO #}
                                    <div class="chrono">
                                        <div class="tgo-exo_caract -duree dureeDiv tgo-seanceExo__attrDuree" data-index="{{ i }}" data-numero="{{ exercice.numero }}" data-valueurl="{{ url }}" data-idExercice="{{ exercice.id }}" data-idSeance="{{ seance.id }}">
                                            
                                            <i class="fa-regular fa-stopwatch"></i> 

                                            <span class="dureeText{{ i }}">{{exercice.dureeTotal}}</span>
                                            {% set dureeExercice = (exercice.dureeMinutes * 60) + (exercice.dureeSecondes) %}
                                            <input type="number" class="dureeInput{{ i }}" value="{{ dureeExercice }}" data-minutesDuree="{{ exercice.dureeMinutes }}" data-secondesDuree="{{ exercice.dureeSecondes }}" style="display:none;">
                                            <input type="number" class="minutesInput{{ i }}" value="{{ exercice.dureeMinutes }}" style="display:none;">
                                            <input type="number" class="secondesInput{{ i }}" value="{{  exercice.dureeSecondes }}" style="display:none;">

                                        </div>
                                    </div>
                                    
                                    {# CATEGORIES #}
                                    <div class="categories">
                                        <div class="tgo-exo_hierarchy oka-flex -wrap " style="gap:0 0.5rem ">
                                            {% if exercice.hierarchy is defined and exercice.hierarchy is not empty %}
                                                {% for hierarchy in exercice.hierarchy %}
                                                    <div class="oka-tag tgo-seanceExo__tag">
                                                        <span class="oka-tag__lbl">{{ hierarchy|capitalize }}</span>
                                                    </div>
                                                {% endfor %} 
                                            {% endif %}
                                        </div>
                                    </div>

                                    {# VISUEL #}
                                    <div class="visuel">
                                        <div class="tgo-editSeanceExo__visuel">
                                            <a href="{{path('exercice.classification.show', {'classificationId': exercice.idClassification.id, 'id': exercice.idExercice} )}}" onclick="rememberSommaire(document.location.href)">
                                                <div class="tgo-seanceExo__visuelExercice oka-ratio -16-9" style="background-image: url({{ asset('visuels/exercice/visuel/' ~ exercice.visuel ) }}); background-size: cover; border-radius: 0.25rem;"></div>
                                                {% include("00_commons/bandeauExercice.html.twig") %}
                                            </a>
                                        </div>
                                    </div>

                                    {# TITRE #}
                                    <div class="titre">
                                        <div class="oka-h -sm -crop tgo-seance__titreExo">
                                            {# on affiche le symbole groupe pour impression en noir et blanc devant le titre #}
                                            {% if exercice.isGroupe == true %} <i class="fa-solid fa-people-group"></i> - {% endif %} {{ exercice.nomExercice }}
                                        </div>
                                    </div>

                                    {# CONSIGNES #}
                                    <div class="consigne">
                                        <div class="tgo-seanceExo__consigne oka-flex -vrt">
                                            {# TITRE CONSIGNE #}
                                            <div class="tgo-seanceExo__sousTitre">
                                                Consigne
                                            </div>
                                            
                                            <div id="consigneExo{{i}}" class="tgo-seanceExo__consigneText">
                                                {{ exercice.consigne|raw }}
                                            </div>
                                        </div>
                                    </div>

                                    {# POINT DE VIGILANCE #}                                       
                                    <div class="volume">
                                        <div class="tgo-editSeanceExo__volume oka-flex -vrt" id="volumeLabel{{i}}">

                                            <div class="tgo-seanceExo__sousTitre">
                                                Volume
                                            </div>

                                            <div class="tgo-editSeanceExo__textVolume">
                                                <div>
                                                    <p class="textVolume -sm" id="volumeExo{{i}}">{{ exercice.volume|nl2br }}</p>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                    {# <div class="pointVigilance">
                                        <div class="tgo-editSeanceExo__pointVigilance oka-flex -vrt">

                                            <div class="tgo-seanceExo__sousTitre">
                                                Point de Vigilance
                                            </div>

                                            <div class="tgo-editSeanceExo__textVolume">
                                                <div>
                                                    <p class="textVolume -sm">{{ exercice.pointVigilance|nl2br }}</p>
                                                </div>
                                            </div>

                                        </div>
                                    </div> #}

                                </div>   
                                {% if not loop.last %}

                                    <div class="oka-spacer"></div>
                                    <hr class="oka-divider">
                                    
                                {% endif %}

                                {% endif %}

                                {% set i = i + 1 %}
                            {% endfor %}
                            
                        </div>

                </div>
                
            </div>

            <div class="tgo-seance__annexes" style="direction: ltr">
                <div class="tgo-seance__annexesMain">

                    <div class="oka-flex -vrt" style="gap: 0.5rem;">
                        <div class="oka-data -sm" id="idSeance_label">séance N° : {{ seance.numero }}</div>
                        <div class="oka-h -secondary -xs -crop">{{ seance.typeEvenement.nom }}</div>
                    </div>

                </div>

                <div class="tgo-seance__annexesSecond">

                    <div class="oka-tabs -isTabs">
                        <!-- tab head -->
                        <input type="radio" class="oka-pilot noVerifForm" name="tabs" id="displayTab1" checked='true' >
                        <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">INFOS</div>
                            </div>
                        </label>
                        <!-- tab body -->
                        <div class="oka-tab__body" style="border: none;">
                            <div class="tgo-tabScroll">
                                <div class="oka-spacer"></div>
                                {% include ('seance/_fragments/tab-generalites.html.twig') %}
                            </div>
                        </div>


                        <!-- tab head -->
                        <input type="radio" class="oka-pilot noVerifForm" name="tabs" id="displayTab2"  >
                        <label id="tab2"  class="oka-tab__button" onclick="if(document.getElementById('displayTab2').checked == true ) {  document.getElementById('displayTab2').checked = false  }else{ document.getElementById('displayTab2').checked = true }">
                            <div class="oka-tab__head">
                                <div class="oka-tab__lbl">MATÉRIELS</div>
                            </div>
                        </label>
                        
                        <!-- tab body -->
                        <div class="oka-tab__body" style="border: none;">
                            <div class="tgo-tabScroll">
                                <div class="oka-spacer"></div>
                                {% include ('seance/_fragments/tab-materiels.html.twig') %}
                            </div>
                        </div>
                    </div> 
                    {# {% include ('seance/_fragments/tab-generalites.html.twig') %} #}
                </div>
            </div>

        </div>

<div class="print-only">
    <div class="tgo-seance__textarea"
         style="height: auto; min-height: 200px; max-width: 80%; margin-top: 2rem; padding: 0.5rem; line-height: 1.5; border: 1px solid black; white-space: pre-wrap;">
        {{ seance.commentaire }}
    </div>
</div>


{% endblock %}