{{ form_start(form) }}
    <div class="row">
        <div class="form-group col-md-12">
            <div class="mb-3">
                <label for="percepcion" class="custom-label-class required">Percepción</label>
                {{ form_widget(form.percepcion, {'attr': {'class': 'form-control', 'placeholder': 'Percepción', 'required': 'required'}}) }}
                {{ form_errors(form.percepcion) }}
            </div>
            <div class="mb-3">
                <label for="descripcion" class="custom-label-class required">Descripción</label>
                {{ form_widget(form.descripcion, {'attr': {'class': 'form-control', 'required': 'required', 'id': 'descripcion'}}) }}
                {{ form_errors(form.descripcion) }}
            </div>
            <div class="mb-3">
                <label for="gravable" class="custom-label-class">Es gravable</label>
                {{ form_widget(form.gravable) }}
            </div>
            <div class="mb-3">
                <label for="id_grupo_percepciones_fk" class="custom-label-class required">Grupo Percepciones</label>
                {{ form_widget(form.id_grupo_percepciones_fk, {'attr': {'class': 'form-select', 'required': 'required'}}) }}
                {{ form_errors(form.id_grupo_percepciones_fk) }}
            </div>
            <div class="mb-3">
                <label for="id_unidad_pago_fk" class="custom-label-class required">Unidad de Pago</label>
                {{ form_widget(form.id_unidad_pago_fk, {'attr': {'class': 'form-select', 'required': 'required'}}) }}
                {{ form_errors(form.id_unidad_pago_fk) }}
            </div>
            <div class="mb-3">
                <label for="id_periodo_fk" class="custom-label-class required">Periodo</label>
                {{ form_widget(form.id_periodo_fk, {'attr': {'class': 'form-select', 'required': 'required'}}) }}
                {{ form_errors(form.id_periodo_fk) }}
            </div>
            <div class="mb-3">
                <label for="limite_exento_impuestos" class="custom-label-class required">Límite exento de impuestos</label>
                {{ form_widget(form.limite_exento_impuestos, {'attr': {'class': 'form-control', 'required': 'required'}}) }}
                {{ form_errors(form.limite_exento_impuestos) }}
            </div>
            <div class="mb-3">
                <label for="id_expresado_en_fk" class="custom-label-class">Expresado en</label>
                {{ form_widget(form.id_expresado_en_fk, {'attr': {'class': 'form-select'}}) }}
                {{ form_errors(form.id_expresado_en_fk) }}
            </div>
            <div class="mb-3">
                <label for="topado" class="custom-label-class">Topado</label>
                {{ form_widget(form.topado) }}
            </div>
            <div class="mb-3">
                <label for="base_otra_prestacion" class="custom-label-class">En base a otra percepción</label>
                {{ form_widget(form.base_otra_prestacion, {'attr': {'id': 'base_otra_prestacion'}}) }}
            </div>
            <div class="mb-3">
                <label for="cuantifica_monto" class="custom-label-class">Se cuantifica el monto</label>
                {{ form_widget(form.cuantifica_monto) }}
            </div>
            <div class="mb-3" id="id_percepcion_fk_container" style="display: none">
                <label for="id_percepcion_fk" class="custom-label-class">Percepción en la que se basa</label>
                {{ form_widget(form.id_percepcion_fk, {'attr': {'class': 'form-select'}}) }}
                {{ form_errors(form.id_percepcion_fk) }}
            </div>
            <br>
            <div class="mb-3">
                <button class="btn btn-primary btn-sm" type="submit">{{ button_label|default('Guardar') }}</button>
            </div>
        </div>
    </div>
{{ form_end(form) }}
<script src="{{ asset('js/ckeditor/ckeditor.js') }}"></script>
<script>
    $(document).ready(function() {
        const baseOtraPrestacionCheckbox = document.getElementById('esh_percepciones_base_otra_prestacion');
        const idPercepcionFkContainer = document.getElementById('id_percepcion_fk_container');


        function toggleIdPercepcionFkContainer() {
            if (baseOtraPrestacionCheckbox.checked) {
                idPercepcionFkContainer.style.display = 'block';
            } else {
                idPercepcionFkContainer.style.display = 'none';
                document.getElementById('esh_percepciones_id_percepcion_fk').value = ''; // Clear the value
            }
        }

        // Inicializar el estado del campo al cargar la página
        toggleIdPercepcionFkContainer();

        // Agregar evento para cambiar el estado del campo al hacer clic en el checkbox
        baseOtraPrestacionCheckbox.addEventListener('change', toggleIdPercepcionFkContainer); 
        

        CKEDITOR.replace('esh_percepciones_descripcion', {
            toolbar: [
                {name: 'clipboard', items: ['Copy', 'Paste', 'Cut', 'PasteText', 'CopyFormatting', '-', 'Undo',  'Redo'] },
                {name: 'editing', items: ['Find', 'SelectAll', 'Scayt'] },
                {name: 'links', items: ['Link', 'Unlink'] },
                {name: 'insert', items: ['base64image', 'Table', 'HorizontalRule', 'SpecialChar'] },
                {name: 'tools', items: ['Maximize'] },
                '/',
                {name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
                {name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
                {name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize', 'TextColor', 'BGColor'] }
            ],
            height: 300
        });

    });
</script>