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

{% block title %}Keep'IT Training - {% if exercice is defined %}Editer un exercice{% else %}Ajouter un exercice{% endif %}{% endblock %}

{% block body %}
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />

<div {{ stimulus_controller("exercice--exercice", {mode: mode.get, ip: ipLocal.get}) }}>

{% set classificationId = 0 %}
{% set titrePage = 'Nouveau' %}
{% if exercice is defined %}
    {% set classificationId = exercice.idClassification.id %}
    {% set titrePage = 'Éditer' %}
{% endif %}

{{ form_start(form) }}

    <div class="tgo-add_head">


        <div class="flex-grid">
           
            <div class="col col-3"><h4 class='-crop'>{{ titrePage }}</h4></div>
            <div class="col col-6">
                {{ form_widget(form.nom , {'attr': {
                            'placeholder':"Nom de l'exercice"
                        }
                    })
                }}

            </div>

            <div class="col col-1"></div>
            <div class="col col-4">
                {{ form_widget(form.statut , {'label_attr': {'class':'group-inline','readonly': true}}) }}
            </div>

            <div class="col col-1">
                {{ form_row(form.isFavori, {'label': 'Favori'}) }}            
            </div>

        </div>
    </div>

    <div class="oka-tabs ">
        {# Généralités ====================================================  #}
        <!-- 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">Généralités</div>
                <div class="oka-tab__indic"></div>
            </div>
        </label>
        <!-- tab body -->
        <div class="oka-tab__body">
            {% include "exercice/_fragments/tab-generalites.html.twig"   %}
        </div>
        
        {# Classification ====================================================  #}
        <!-- 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">Classification</div>
                <div class="oka-tab__indic"></div>
            </div>
        </label>
        <!-- tab body -->
        <div class="oka-tab__body">
            {% include "exercice/_fragments/tab-classification.html.twig"   %}
        </div>
        
        {# Visuels ====================================================  #}
        <!-- tab head -->
        <input type="radio" class="oka-pilot noVerifForm" name="tabs" id="displayTabVisuels"  >
        <label id="tabVisuels"   class="oka-tab__button" onclick="if(document.getElementById('displayTabVisuels').checked == true ) {  document.getElementById('displayTabVisuels').checked = false  }else{ document.getElementById('displayTabVisuels').checked = true }">
            <div class="oka-tab__head">
                <div class="oka-tab__lbl">Visuels</div>
                <div class="oka-tab__indic"></div>
            </div>
        </label>
        <!-- tab body -->
        <div class="oka-tab__body">
            {% include "exercice/_fragments/tab-visuels.html.twig"   %}
        </div>

        {# Matériel ====================================================  #}
        <!-- 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ériel</div>
                
                <div class="oka-tab__indic"></div>
            </div>
        </label>
        <!-- tab body -->
        <div class="oka-tab__body">
            {% include 'exercice/_fragments/tab-materiels.html.twig' with form %}
        </div>
    </div>

    <div class="oka-formFooter">
        {{ form_row(form.save, { 'label': 'Enregistrer' }) }}
        <a class=" oka-bt  -outlined" onclick="window.location.href=getCookie('page')">
            <div class="oka-bt__lbl">Annuler</div>
            <div class="oka-spinner"></div>
        </a>
    </div>

{{ form_end(form) }}
</div>


{% if exercice is defined %}
<script>
    document.addEventListener("DOMContentLoaded", function() {
        let monUrl = document.location.href;
        let inputClassification = document.getElementById("code-classification");
        let classificationSelect = document.getElementById("exercice_classification");
        var selectedOption = classificationSelect.options[classificationSelect.selectedIndex];
        var dataCode = selectedOption.dataset.code; 

        inputClassification.value = dataCode;

        const urlPage = monUrl.substring(0, monUrl.indexOf("/edit"));
        rememberPage(urlPage);
    });
</script>


{% endif %}

{% endblock %}