$(document).ready(function (){
    function checkInputs() {
        let elementInputs = $('#element-create-form').children('.card-body').length;
        if (elementInputs <= 1) {
            $('#element-create-delete').prop( "disabled", true );
        }
        else {
            $('#element-create-delete').prop( "disabled", false );
        }
    }
    function GetOptions() {
        let str = '';
        for (const c in categories) {
            str += `<option value="${c}">${categories[c]}</option>`; 
        }
        return str;
    }
    $('#element-create-add').on('click', function (evt) {
        checkInputs();
        let count = $('#element-create-form').children('.card-body').length + 1;
        let html = `<div class="card-body">
            <div class="form-group">
                <label for="section${count}">Secuencial</label>
                <div class="input-group">
                    <input type="text" id="section${count}" name="section[]" class="form-control" placeholder="Secuencial...">
                </div>
            </div>
            <div class="form-group">
                <label for="description${count}">Descripción</label>
                <div class="input-group">
                    <input type="text" id="description${count}" name="description[]" class="form-control" placeholder="Descripcion...">
                </div>
            </div>
            <div class="form-group">
                <label for="percentage${count}">Peso</label>
                <div class="input-group">
                    <input type="number" id="percentage${count}" min="1" max="100" name="percentage[]" class="form-control" placeholder="Peso...">
                    <div class="input-group-append">
                        <div class="input-group-text bg-dark">
                            <i class="fas fa-percent"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="category_company">Tipo de empresa</label>
                <select name="category_company[]" class="custom-select" id="category_company${count}">
                    <option value="" selected>Aplica para todo tipo de empresa</option>
                    ${GetOptions()}
                </select>
            </div>
        </div>`;
        $('#element-create-form').children('.card-body').last().after(html);
        $('#element-create-delete').prop( "disabled", false );
    });
    $('#element-create-delete').on('click', function (evt) {
        $('#element-create-form').children('.card-body').last().remove();
    });
});