<h4>Modelo contable</h4>
<table class="table table-bordered">
    <thead>
        <tr>
            <th style="text-align: center; width: 23.25%;">Clave</th>
            <th style="text-align: center; width: 23.25%;">Global</th>
            <th style="text-align: center; width: 23.25%;">Debe</th>
            <th style="text-align: center; width: 23.25%;">Haber</th>
            <th style="text-align: center; width: 7%;">Acciones</th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($data as $key => $movimiento): ?>
        <tr>
            <td style="vertical-align: middle;"><?= $movimiento['clave'] ?></td>
            <td style="vertical-align: middle;"><?= $movimiento['nombre_cuenta'] ?></td>
            <?php if ($movimiento['naturaleza'] == 1): ?>
                <?php if ($movimiento['id_cuenta_parametros'] && $movimiento['conf_unidad']): ?>
                    <td style="vertical-align: middle;">
                        <label id="label_<?= $key ?>"><?= $movimiento['codigo_cuenta_parametros'] ?></label>
                        <input
                            type="text"
                            id="movimiento_<?= $key ?>"
                            class="autocomplete_cuenta_contable"
                            style="width: 95%; margin: 0; display: none;"
                            value="<?= $movimiento['codigo_cuenta_parametros'] ?>"
                            data-clave="<?= $movimiento['id'] ?>"
                            data-active="0"
                        >
                    </td>
                <?php elseif (! $movimiento['id_cuenta_parametros'] && $movimiento['conf_unidad']): ?>
                    <td style="vertical-align: middle;">
                        <input
                            type="text"
                            class="autocomplete_cuenta_contable"
                            style="width: 95%; margin: 0;"
                            data-clave="<?= $movimiento['id'] ?>"
                            data-active="1"
                        >
                    </td>
                <?php else: ?>
                    <td></td>
                <?php endif ?>
                <td></td>

                <?php if ($movimiento['id_cuenta_parametros']): ?>
                    <td style="vertical-align: middle; text-align: center;">
                        <button id="btn_editar_<?= $key ?>" class="btn btn-link" onclick="editar(<?= $key ?>)">
                            <i class="icon icon-pencil"></i>
                        </button>
                        <button id="btn_cancelar_<?= $key ?>" class="btn btn-link" onclick="editar(<?= $key ?>)" style="display: none;">
                            <i class="icon icon-remove"></i>
                        </button>
                    </td>
                <?php else: ?>
                    <td></td>
                <?php endif ?>

            <?php else: ?>
                <td></td>
                <?php if ($movimiento['id_cuenta_parametros'] && $movimiento['conf_unidad']): ?>
                    <td style="vertical-align: middle;">
                        <label id="label_<?= $key ?>"><?= $movimiento['codigo_cuenta_parametros'] ?></label>
                        <input
                            type="text"
                            id="movimiento_<?= $key ?>"
                            class="autocomplete_cuenta_contable"
                            style="width: 95%; margin: 0; display: none;"
                            value="<?= $movimiento['codigo_cuenta_parametros'] ?>"
                            data-clave="<?= $movimiento['id'] ?>"
                            data-active="0"
                        >
                    </td>
                <?php elseif (! $movimiento['id_cuenta_parametros'] && $movimiento['conf_unidad']): ?>
                    <td style="vertical-align: middle;">
                        <input
                            type="text"
                            class="autocomplete_cuenta_contable"
                            style="width: 95%; margin: 0;"
                            data-clave="<?= $movimiento['id'] ?>"
                            data-active="1"
                        >
                    </td>
                <?php else: ?>
                    <td></td>
                <?php endif ?>

                <?php if ($movimiento['id_cuenta_parametros']): ?>
                    <td style="vertical-align: middle; text-align: center;">
                        <button id="btn_editar_<?= $key ?>" class="btn btn-link" onclick="editar(<?= $key ?>)">
                            <i class="icon icon-pencil"></i>
                        </button>
                        <button id="btn_cancelar_<?= $key ?>" class="btn btn-link" onclick="editar(<?= $key ?>)" style="display: none;">
                            <i class="icon icon-remove"></i>
                        </button>
                    </td>
                <?php else: ?>
                    <td></td>
                <?php endif ?>

            <?php endif ?>
        </tr>
        <?php endforeach ?>
    </tbody>
</table>

<div class="text-right">
    <button id="btn_guardar" class="btn btn-primary">Guardar</button>
</div>
<br>

<script type="text/javascript">
    $('.autocomplete_cuenta_contable').autocomplete({
        source: "<?= $this->createUrl('autocomplete') ?>",
        showAnim: 'fold',
        sizeze: 30,
        minLength: 1,
    });

    $('#btn_guardar').on('click', function (e) {
        e.preventDefault();
        let urlCreateConfig = $('#parametros-unidades-form').attr('action');
        let data = {
            id_tipo_parametro: $('#tipo_parametro').val(),
            id_proceso: $('#proceso').val(),
            id_escenario: $('#escenario').val(),
            claves: buildKeys(),
        }

        if (data.id_escenario == null) {
            return
        }

        $.post(urlCreateConfig, { config: data }, function (res) {
            if (! res.success) {
                return mensaje(res.mensaje)
            }

            $('#claves').html('');
            $('#claves').html(res.form);
        }, 'json')
    })

    function buildKeys() {
        return $('.autocomplete_cuenta_contable').filter(function (_, item) {
            return $(item).data('active') > 0 && item.value !== '';
        }).map(function (_, movimiento) {
            let el = $(movimiento)
            return {
                cuenta: movimiento.value,
                id_clave: el.data('clave'),
                type: el.data('active')
            }
        }).toArray();
    }

    function editar(index) {
        if ($(`#movimiento_${index}`).length > 0) {
            $(`#movimiento_${index}`).toggle()
            $(`#label_${index}`).toggle()
            $(`#btn_editar_${index}`).toggle();
            $(`#btn_cancelar_${index}`).toggle();
        }

        if ($(`#movimiento_${index}`).is(':visible')) {
            $(`#movimiento_${index}`).attr('data-active', '2');
        } else {
            $(`#movimiento_${index}`).attr('data-active', '0');
        }
    }
</script>
