{% extends 'base.html' %}

{% block titulo %}
    Editar Modalidad
{% endblock titulo %}

{% block body %}
    <style>
        .hidden{
            display: none;
        }
    </style>
    <!-- <p class="h1" style="padding-left: 50px; font-size: 25px; font-weight: bold; color: #676767;"> Modalidades</p>
    <hr> -->
    <div class="rounded-2 p-1 mx-4 principal">
        <div class="row">
            <p class="col h3 tituloModulo">Modalidades</p>
        </div>
        <div class="rounded-2 mx-4">
            <div class="row">
                <p class="col h5 subtitulo-mod">Editar modalidad</p>
                <hr>
            </div>
        </div>
        <div class="border rounded-2 p-4 mx-4 mb-4">  
            {% include 'partials/form_editarmod.html' %}
        </div>
    </div>

    <script>
        document.addEventListener('click', (event)=>{
            if(event.target.id == 'add-more'){
                add_document_form(event)
            }
        })

        document.body.addEventListener('htmx:configRequest', (event) => {
            event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
        })

        function add_document_form(event) {
            if(event){ 
                event.preventDefault() 
            }
            const totalNewForm = document.getElementById('id_form-TOTAL_FORMS')
            const currentDocumentoForms = document.getElementsByClassName('documento-form')
            const currenFormCount = currentDocumentoForms.length // + 1
            const formCopyTarget = document.getElementById('documentos-list')
            const copyEmptyFormEl = document.getElementById('empty-form').cloneNode(true)
            copyEmptyFormEl.setAttribute('class', 'documento-form col-sm-4')
            copyEmptyFormEl.setAttribute('id', `form-${currenFormCount}`)
            const regex = new RegExp('__prefix__', 'g')
            copyEmptyFormEl.innerHTML = copyEmptyFormEl.innerHTML.replace(regex, currenFormCount)
            totalNewForm.setAttribute('value', currenFormCount + 1)
            //add the new empty form element to our html form
            formCopyTarget.append(copyEmptyFormEl)
        }

        function cancel_adding_document(prefix_tag, cancelBtn){
            
            var total = parseInt($('#id_' + prefix_tag + '-TOTAL_FORMS').val());
            console.log("formlength: ", formlength)
            cancelBtn.closest('.documento-form').remove();
            var forms = $('.documento-form');
            var formlength = forms.length;
            var idstring = '#id_' + prefix_tag + '-TOTAL_FORMS';
            $(idstring).val(parseInt(formlength));
            console.log("formlength: ", formlength)
            for (var i = 0, formCount = formlength; i < formCount; i++) {
                $(forms.get(i)).find(':input').each(function () {
                    updateElementIndex(this, prefix_tag, i);
                });
            }
            return false;

        }

        function updateElementIndex(el, prefix_tag, ndx) {
            var id_regex = new RegExp('(' + prefix_tag + '-\\d+)');
            // console.log("updateElementIndex id_regex: ", id_regex)
            var replacement = prefix_tag + '-' + ndx;
            // console.log("updateElementIndex replacmenet: ", replacement)
            // console.log("updateElementIndex el: ", el)
            if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex, replacement));
            if (el.id) el.id = el.id.replace(id_regex, replacement);
            if (el.name) el.name = el.name.replace(id_regex, replacement);
        };

        // htmx.onLoad(function(content) {
        //     var sortables = document.querySelectorAll("#documentos-list");
        //     for (var i = 0; i < sortables.length; i++) {
        //     var sortable = sortables[i];
        //     new Sortable(sortable, {
        //         animation: 150,
        //         ghostClass: 'blue-background-class'
        //     });
        //     }
        // })

    </script>
    
{% endblock body %} 