<script>
    const toggleNoExpenseFound = () => {

        if ($('.expense').length) {
            $('#noExpenseFound').addClass('d-none');
            $('#submitBtn').prop('disabled', false);
        } else {
            $('#noExpenseFound').removeClass('d-none');
            $('#submitBtn').prop('disabled', true);
        }
    }

    const addExpense = () => {
        const newRow = $(`
            <tr class="expense">
                <input type="hidden" name="travel_expense_log_id[]" value="">
                <td width="250">
                    <select name="expense_category_id[]" class="form-control ot-form-control ot-input select2" required>
                        <option value=""></option>
                        @foreach ($data['expenseCategories'] ?? [] as $key => $expenseCategory)
                            <option value="{{ $expenseCategory->id }}">{{ $expenseCategory->name }}</option>
                        @endforeach
                    </select>
                </td>
                <td>
                    <input type="text" name="title[]" class="form-control ot-form-control ot-input" required>
                </td>
                <td width="150">
                    <input type="number" name="amount[]"  class="form-control ot-form-control ot-input" step="0.01" min="0" required>
                </td>
                <td width="220">
                    <input type="file" name="file[]" class="form-control ot-form-control ot-input">
                </td>
                <td>
                    <input type="text" name="remark[]" class="form-control ot-form-control ot-input">
                </td>
                <td width="40">
                    <button type="button" onclick="removeExpense(this)" class="btn fs-2 p-0 px-2 text-danger">
                        <i class="las la-times"></i>
                    </button>
                </td>
            </tr>
        `);

        $('#expenses').append(newRow);
        newRow.find('.select2').select2({
            placeholder: `{{ _trans('common.Select Category') }}`,
        });

        toggleNoExpenseFound();
    };

    const removeExpense = (obj) => {
        $(obj).closest('tr').remove();
        toggleNoExpenseFound();
    }
</script>