{# templates/easy_admin/income_outcome_checkbox_field.html.twig #}
{{ dump(field) }}
{% block field %}
    <div class="custom-checkbox-field">
        <label>
            <input type="checkbox" id="income-checkbox-{{ field.uniqueId }}"
                    {% if field.value == true %} checked {% endif %}
                   onclick="syncCheckboxes('{{ field.uniqueId }}', 'income')">
            Income
        </label>
        <label>
            <input type="checkbox" id="outcome-checkbox-{{ field.uniqueId }}"
                    {% if field.value == false %} checked {% endif %}
                   onclick="syncCheckboxes('{{ field.uniqueId }}', 'outcome')">
            Outcome
        </label>
{#        <input type="hidden" name="{{ field.propertyName }}" id="hidden-input-{{ field.property }}" value="{{ field.value ? '1' : '0' }}">#}
    </div>

    <script>
        function syncCheckboxes(property, type) {
            const incomeCheckbox = document.getElementById('income-checkbox-' + property);
            const outcomeCheckbox = document.getElementById('outcome-checkbox-' + property);
            const hiddenInput = document.getElementById('hidden-input-' + property);

            if (type === 'income') {
                if (incomeCheckbox.checked) {
                    outcomeCheckbox.checked = false;
                    hiddenInput.value = '1';
                } else {
                    outcomeCheckbox.checked = true;
                    hiddenInput.value = '0';
                }
            } else {
                if (outcomeCheckbox.checked) {
                    incomeCheckbox.checked = false;
                    hiddenInput.value = '0';
                } else {
                    incomeCheckbox.checked = true;
                    hiddenInput.value = '1';
                }
            }
        }
    </script>
{% endblock %}