{% extends 'base.html' %}

{% block titulo %}
    Agregar 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">Agregar nueva modalidad</p>
                <hr>
            </div>
        </div>
        <div class="border rounded-2 p-4 mx-4 mb-4">         
            <form method="POST" enctype="multipart/form-data" htmx-trigger = 'end'>
                {% csrf_token %}    
                <div class="row">
                    <div class="d-grid gap-1 col-2 mx-auto" style="margin-right: 0 !important">
                        <button type="submit" class="btn btn-guardar" name="guardar">Guardar</button>    
                    </div>   
                </div>
                <div class="row">
                    <div class="child col-4" style="display: inline-block;">
                        <p class="agregarMod" id="titulo-mods"> Titulo de la modalidad </p>
                        {{ form.nombre }}
                    </div>
                    <div class="child col-1" style="display: inline-block; padding: 0 20%; ">
                        <p class="agregarMod" id="imagen-mods" style="padding-bottom: 5px;"> Imagen </p>
                        {{ form.imagen}}
                    </div>
                </div>
                <div class="child" style="">
                    <p class="agregarMod" id="descripcion-mods" style="padding-top: 5px; padding-bottom: 5px;"> Descripción </p>
                    {{ form.descripcion}}
                </div>
            
                <div class="row" style="padding-top: 40px; ">
                    <p class="agregarMod" id="documento-mods" style="display: inline-block; width:auto"> Documentos </p>
                    <div class="d-grid gap-1 col-2 mx-auto" style="margin-right: 0 !important">
                        <button id = 'add-more' type="button" class="btn btn-guardar" name="agregar">Agregar</button>    
                    </div>   
                    <div class="row" id = 'documentos-list'>
                        {{ formset.management_form}}
                        {% for documento in formset %} 
                        {{documento.order}}
                        <div class="documento-form col-sm-4">
                            <div class="card">
                                <div class="card-body" id="documentoMod" style="padding-top: 10px; padding-bottom: 10px;">
                                    <button id = 'cancel-document' type="button" class="btn btnEliminar" onclick="cancel_adding_document('form', this)">X</button>
                                    <p class="card-title">{{ documento }}</p>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                        <div id='empty-form' class="hidden col-sm-4" style="padding-top: 10px; padding-bottom: 10px;">
                            <div class="card">
                                <div class="card-body" id="documentoMod">
                                    <button id = 'cancel-document' type="button" class="btn btnEliminar" onclick="cancel_adding_document('form', this)">X</button>
                                    <p class="card-title">{{ formset.empty_form.as_p }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script>
        document.addEventListener('click', (event)=>{
            if(event.target.id == 'add-more'){
                add_new_form(event)
            }
        })

        function add_new_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);
        };

    </script>
    
{% endblock body %}