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

{% block title %}Keep'IT Training - Editer un exercice{% 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") }}>

{{ form_start(form) }}

    <div class="oka-cols -three">
        <div>
            
        </div>
        <div>
            
        </div>
        <div>
            
        </div>
    </div>


    <div class="oka-tabs ">
    <!-- tab head -->
    <input type="radio" class="oka-pilot noVerifForm" name="tabs" id="displayTab0" checked="checked" >
    <label id="tab0"   class="oka-tab__button js-oka-tab__button--invalide" 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-tag -outline"><div class="oka-tag__lbl">10</div></div>
            <div class="oka-tab__indic"></div>
        </div>
    </label>
    <!-- tab body -->
    <div class="oka-tab__body">


        <div class="oka-cols -three">
            <div class="tgo-separator"> 
                {{ form_row(form.nom) }}
                {{ form_row(form.code, {'attr': {'readonly': true}}) }}
                {{ form_row(form.statut) }}
                {{ form_row(form.isFavori, {'label': 'Favori'}) }}
                {{ form_row(form.tags) }}
            </div>

            <div class="tgo-separator">
                {{ form_row(form.consigne) }}
                {{ form_row(form.pointVigilance) }}
            </div>
            
            <div class="tgo-separator">
                {{ form_row(form.volume) }}
                {{ form_row(form.rpe, {'attr': {'min': 1, 'max': 10}}) }}
                {{ form_row(form.nbGardiens)}}
                {{ form_row(form.duree, {'attr': {'min': 1}}) }}
            </div>
        </div>
    
   
    </div>
    
    <!-- tab head -->
    <input type="radio" class="oka-pilot noVerifForm" name="tabs" id="displayTab1"  >
    <label id="tab1"   class="oka-tab__button js-oka-tab__button--invalide" 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-tag -outline"><div class="oka-tag__lbl">10</div></div>
            <div class="oka-tab__indic"></div>
        </div>
    </label>
    <!-- tab body -->
    <div class="oka-tab__body">
    {# {{ form_row(form.classification) }} #}

    {# <select id="select_exercice_classification">
        {% for classification in classifications %}
            {% if classification.TreeLevel == 0 %}
                <optgroup label="{{ classification.nom }}">
                    <option>{{ classification.nom }}</option>
                    {% for child in classification.children %}
                        <optgroup label="{{ child.nom }}">
                        <option>{{ child.nom }}</option>
                        {% if child.children %}
                            <optgroup label="{{ child.nom }}">
                            {% for subchild in child.children %}
                                <option>{{ subchild.nom }}</option>
                            {% endfor %}
                        {% endif %}
                    {% endfor %}
                </optgroup>
            {% endif %}
        {% endfor %}
    </select> #}    
    </div>
    
    <!-- tab head -->
    <input type="radio" class="oka-pilot noVerifForm" name="tabs" id="displayTabVisuels"  >
    <label id="tabVisuels"   class="oka-tab__button js-oka-tab__button--invalide" 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-tag -outline"><div class="oka-tag__lbl">10</div></div>
            <div class="oka-tab__indic"></div>
        </div>
    </label>
    <!-- tab body -->
    <div class="oka-tab__body">

        
        <div class="l-form-row" style="position:relative">
            <span id="icoDropzoneRequired1" style="position:absolute;" class="oka-field__ico-required oka-field__ico-required--false"></span>
            <div class="dropzone" name="sessionimg" id="dropzone1" data-url="{{ oneup_uploader_endpoint('exercice') }}">
            </div>
        </div>
        <div class="l-form-row" style="position:relative">
            <span id="icoDropzoneRequired2" style="position:absolute;" class="oka-field__ico-required oka-field__ico-required--false"></span>
            <div class="dropzone" name="sessionimg" id="dropzone2" data-url="{{ oneup_uploader_endpoint('exercice') }}">
            </div>
        </div>
        <div class="l-form-row" style="position:relative">
            <span id="icoDropzoneRequired3" style="position:absolute;" class="oka-field__ico-required oka-field__ico-required--false"></span>
            <div class="dropzone" name="sessionimg" id="dropzone3" data-url="{{ oneup_uploader_endpoint('exercice') }}">
            </div>
        </div>

        {{ form_row(form.visuel_1) }}
        {{ form_row(form.visuel_2) }}
        {{ form_row(form.visuel_3) }}  
        {#  #}
        {{ form_row(form.video) }}
        <div id="supportVideo" class="">
            <div id="previewVideo" class="">
                <iframe id="viewVideo" width="100%" height="400px">
                    
                </iframe> 
            </div>
        </div>
    </div>


    <!-- tab head -->
    <input type="radio" class="oka-pilot noVerifForm" name="tabs" id="displayTab2"  >
    <label id="tab2"   class="oka-tab__button js-oka-tab__button--invalide" 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-tag -outline"><div class="oka-tag__lbl">10</div></div>
            <div class="oka-tab__indic"></div>
        </div>
    </label>
    <!-- tab body -->
    <div class="oka-tab__body">

        {{ form_row(form.exerciceMateriels) }}

    </div>

</div>

    <div class="oka-formFooter">
        {{ form_row(form.save, { 'label': 'Enregistrer' }) }}
    </div>


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



<script>

document.addEventListener("DOMContentLoaded", function() {
    var classificationSelect = document.getElementById("exercice_classification");
    var code = document.getElementById("exercice_code");

    function updateCodeValue() {
        var selectedOption = classificationSelect.options[classificationSelect.selectedIndex];
        var dataCode = selectedOption.dataset.code; 
        code.value = dataCode;
    }

    classificationSelect.addEventListener("change", updateCodeValue);

    updateCodeValue();
});

</script>

{% endblock %}