import 'jqueryLocal';

$(function () {
    const machineExtraInfo1 = $('#recipe_edit_form_machineExtraInfo1');
    const machineExtraInfo1_div = machineExtraInfo1.parents('div.row').first();
    const machineExtraInfo1_label = machineExtraInfo1_div.find('label[for="' + machineExtraInfo1.attr('id') + '"]')

    const machineExtraInfo2 = $('#recipe_edit_form_machineExtraInfo2');
    const machineExtraInfo2_div = machineExtraInfo2.parents('div.row').first();
    const machineExtraInfo2_label = machineExtraInfo2_div.find('label[for="' + machineExtraInfo2.attr('id') + '"]')

    $('#recipe_edit_form_machine')
        .on('change', function () {
            const machine = $(this)
                .find(':selected')
                .dataDefault(
                    'machine',
                    {
                        labelExtraInfo1: null,
                        labelExtraInfo2: null,
                    }
                );

            machineExtraInfo1_div.toggleClass('d-none', machine.labelExtraInfo1 === null);
            machineExtraInfo1_label.text(machine.labelExtraInfo1);

            machineExtraInfo2_div.toggleClass('d-none', machine.labelExtraInfo2 === null);
            machineExtraInfo2_label.text(machine.labelExtraInfo2);
        })
        .trigger('change');
});